galleria_photo_face_rknn_openCL/public/admin.html

<!doctype html>
<html lang="it">
  <head>
    <meta charset="UTF-8" />
    <title>Photo & Activity Manager</title>

    <link rel="stylesheet" href="/css/admin.css" />

    <style>
      #progressContainer {
        width: 100%;
        background: #ddd;
        height: 25px;
        border-radius: 5px;
        margin-top: 20px;
        overflow: hidden;
      }
      #progressBar {
        height: 100%;
        width: 0%;
        background: #4caf50;
        transition: width 0.3s linear;
      }
      #scanInfo {
        font-family: monospace;
        margin-top: 10px;
        font-size: 16px;
      }
      #changesBox {
        margin-top: 20px;
        padding: 10px;
        border: 1px solid #aaa;
        border-radius: 5px;
        background: #f7f7f7;
        width: 350px;
      }

      /* Sezioni */
      .section {
        margin-top: 40px;
        padding: 20px;
        border: 1px solid #ccc;
        border-radius: 8px;
        background: #fafafa;
      }
      .section h2 {
        margin-top: 0;
      }

      .upload-box {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;

        margin-bottom: 20px;
        padding: 15px;

        border: 1px solid #b8c4ce;
        border-radius: 8px;
        background: #f3f7fa;
      }

      .upload-box select {
        min-width: 220px;
        padding: 7px 10px;
      }

      .upload-box button {
        padding: 8px 14px;
        cursor: pointer;
      }

      .upload-box button:disabled {
        cursor: not-allowed;
        opacity: 0.6;
      }

      #photoUploadStatus {
        flex-basis: 100%;
        min-height: 22px;
        margin-top: 5px;
        font-family: monospace;
        white-space: pre-wrap;
      }

      #photoUploadStatus.upload-info {
        color: #1d4e89;
      }

      #photoUploadStatus.upload-success {
        color: #19743a;
      }

      #photoUploadStatus.upload-error {
        color: #b00020;
      }
    </style>
  </head>

  <body>
    <div id="app" style="padding: 20px">
      <!-- =============================== -->
      <!-- 📷 SEZIONE FOTO (identica alla tua) -->
      <!-- =============================== -->
      <div class="section">
        <h2>Gestione Foto</h2>

        <!-- Upload manuale foto -->
        <div id="photoUploadBox" class="upload-box">
          <label for="photoUploadTarget">
            <b>Destinazione:</b>
          </label>

          <select id="photoUploadTarget">
            <option value="">Caricamento destinazioni...</option>
          </select>

          <label for="photoUploadFolder">
            <b>Cartella:</b>
          </label>

          <input
            type="text"
            id="photoUploadFolder"
            placeholder="Nome cartella"
            autocomplete="off"
          />

          <button type="button" id="btnUploadPhoto" disabled>
            Seleziona foto o video
          </button>
          <input
            type="file"
            id="photoUploadInput"
            multiple
            style="
              position: absolute;
              width: 1px;
              height: 1px;
              opacity: 0;
              overflow: hidden;
              pointer-events: none;
            "
          />

          <div id="photoUploadStatus" role="status" aria-live="polite"></div>
        </div>

        <button id="btnScan">Scansiona Foto</button>
        <button id="btnResetDB">Reset DB</button>
        <button id="btnReadDBUser">Leggi DB</button>
        <button id="btnDeletePhoto">Cancella Foto per ID</button>
        <button id="btnFindIdIndex">Cerca ID in index.json</button>
        <button id="btnToggleSoft">Toggle Soft Delete (via ID)</button>
        <div id="toggleResult"></div>

        <button id="btnResetDBuser">Reset DB Utente</button>
        <label for="userSelect"><b>Utenti:</b></label>
        <select
          id="userSelect"
          style="margin-left: 10px; margin-bottom: 10px"
        ></select>
        <button id="btnSearchPhotoById">Cerca Foto (nuovo /byIds)</button>
        <button id="btnBack">Torna alla galleria</button>
        <button id="btnFaces" type="button">Apri Faces</button>

        <div id="changesBox">
          <h4>Controlla /photos/changes</h4>
          <label>Since (data/ora):</label><br />
          <input
            type="datetime-local"
            id="sinceInput"
            style="width: 100%; margin-top: 5px"
          /><br /><br />

          <button id="btnShowDBChanges">Mostra cambiamenti DB</button>
          <button id="btnShowHardDeleted">Mostra Hard Deleted</button>
        </div>

        <div id="progressContainer">
          <div id="progressBar"></div>
        </div>

        <div id="scanInfo">
          <div id="scanProgress"></div>
          <div id="scanEta"></div>
        </div>

        <pre id="out"></pre>
      </div>

      <!-- =============================== -->
      <!-- 🏃 SEZIONE ATTIVITÀ (nuova) -->
      <!-- =============================== -->
      <div class="section">
        <h2>Gestione Attività</h2>

        <button id="btnScanActivities">Scansiona Attività</button>
        <button id="btnResetActivitiesDB">Reset DB Attività</button>
        <button id="btnReadActivitiesDB">Leggi DB Attività</button>
        <button id="btnDeleteActivity">Cancella Attività per ID</button>
        <button id="btnToggleSoftActivity">
          Toggle Soft Delete Attività (via ID)
        </button>

        <div style="margin-top: 10px">
          <label><b>Utenti:</b></label>
          <select
            id="userSelectActivities"
            style="margin-left: 10px; margin-bottom: 10px"
          ></select>
        </div>

        <button id="btnSearchActivityById">
          Cerca Attività (nuovo /byIds)
        </button>

        <div id="changesBoxActivities" style="margin-top: 20px">
          <h4>Controlla /activities/changes</h4>
          <label>Since (data/ora):</label><br />
          <input
            type="datetime-local"
            id="sinceInputActivities"
            style="width: 100%; margin-top: 5px"
          /><br /><br />

          <button id="btnShowActivitiesChanges">Mostra cambiamenti DB</button>
          <button id="btnShowActivitiesHardDeleted">Mostra Hard Deleted</button>
        </div>

        <pre id="outActivities"></pre>
      </div>
    </div>

    <!-- JS modulari -->
    <script src="/js/admin/config.js"></script>
    <script src="/js/admin/api.js"></script>
    <script src="/js/admin/cacheSync.js"></script>
    <script src="/js/admin/db.js"></script>
    <script src="/js/admin/scan.js"></script>
    <script src="/js/admin/ui.js"></script>
    <script src="/js/admin/photoUpload.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/eruda"></script>
    <script>
      eruda.init();
    </script>
<script>
  document.getElementById("btnFaces").addEventListener("click", function () {
    window.location.href = "https://prova.patachina.it/faces.html";
  });
</script>
  </body>
</html>