server/admin/static/views/sync.html

<div class="card mt-3 mb-5" ng-show="!settings.wip && timeProgression && !displayDangerousActions">
  <div class="card-header bg-secondary text-light">
    <h3 class="mb-0">
      Synchronisation
    </h3>
  </div>
  <div class="card-body">
    <div class="form-check">
      <label class="custom-control custom-checkbox">
	<input class="custom-control-input" type="checkbox" ng-model="displayDangerousActions">
	<strong class="custom-control-label">Je sais ce que le challenge a démarré ET <span style="text-decoration: underline red;">j'ai réalisé une sauvegarde de la base de données il y a moins d'une minute</span> ET je sais que c'est <span style="text-decoration: underline yellow;">une très mauvaise idée de cocher cette case</span>, mais j'y suis obligé pour de bonnes raisons.</strong>
      </label>
    </div>
  </div>
</div>

<div class="card my-3" ng-if="settings.wip || !timeProgression || displayDangerousActions">
  <div class="card-header d-flex justify-content-between">
    <h3 class="mb-0">
      Import des thèmes
    </h3>
    <div class="badge badge-success align-self-center" ng-if="syncReport" title="{{ syncReport._updated[syncReport._updated.length-1] }}">
      Dernier import&nbsp;: {{ syncReport._updated[syncReport._updated.length-1] | date:"medium" }}
    </div>
    <a ng-if="syncStatus['sync-type'] === 'GitImporter'" href="repositories" class="btn btn-secondary">
      Voir les dépôts
    </a>
  </div>
  <div class="progress" style="height: 5px; border-radius: 0;">
    <div class="progress-bar bg-primary progress-bar-striped" ng-class="{'progress-bar-animated': syncPercent && syncPercent < 100}" role="progressbar" style="width: {{ syncPercent }}%"></div>
  </div>
  <div class="card-body">
    <dl class="row">
      <dt class="col-2">Type</dt>
      <dd class="col-10" ng-bind="syncStatus['sync-type']"></dd>
      <dt class="col-2">Synchronisation</dt>
      <dd class="col-10" title="{{ syncStatus['sync'] }}" ng-bind="syncStatus.sync"></dd>
      <dt class="col-2" ng-if="syncStatus['sync-id']">ID</dt>
      <dd class="col-10" ng-if="syncStatus['sync-id']">
        {{ syncStatus['sync-id'] }}
        <button ng-if="syncStatus['sync-type'] === 'GitImporter'" type="button" class="btn btn-sm btn-dark" ng-click="baseSync()" ng-disabled="deepSyncInProgress"><span class="glyphicon glyphicon-repeat" aria-hidden="true"></span> Pull</button>
      </dd>
      <dt class="col-2" ng-if="syncStatus['sync']">Statut</dt>
      <dd class="col-10" ng-if="syncStatus['sync']">
        <span ng-if="(syncStatus.syncMutex !== undefined && syncStatus.syncMutex) || (syncPercent > 0 && syncPercent < 100)">{{ syncPercent }}&nbsp;%</span>
        <span class="badge badge-pill" ng-class="{'badge-success': !syncStatus.pullMutex, 'badge-danger': syncStatus.pullMutex}" ng-if="syncStatus.pullMutex !== undefined">Pull</span>
        <span class="badge badge-pill" ng-class="{'badge-success': !syncStatus.syncMutex, 'badge-danger': syncStatus.syncMutex}" ng-if="syncStatus.syncMutex !== undefined">Synchronisation</span>
      </dd>
    </dl>

    <pre style="background: black; color: white;" class="p-2" ng-if="syncStatus.lastError">{{ syncStatus.lastError }}</pre>

    <div class="d-flex justify-content-around" ng-if="syncStatus.sync">
      <div class="btn-group dropright">
	<button type="button" class="btn btn-secondary" ng-click="deepSync()" ng-disabled="deepSyncInProgress"><span class="glyphicon glyphicon-import" aria-hidden="true"></span> Synchronisation intégrale</button>
	<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" ng-disabled="deepSyncInProgress">
	  <span class="sr-only">Toggle Dropdown</span>
	</button>
	<div class="dropdown-menu" ng-controller="ThemesListController" style="max-height: 45vh; overflow: auto">
	  <a class="dropdown-item" ng-click="deepSync(theme)" ng-repeat="theme in themes" ng-bind="theme.name"></a>
	</div>
      </div>
      <button type="button" class="btn btn-secondary" ng-click="speedyDeepSync()" ng-disabled="deepSyncInProgress"><span class="glyphicon glyphicon-import" aria-hidden="true"></span> Synchronisation sans fichiers</button>
      <button type="button" class="btn btn-info" ng-if="settings.wip" ng-click="syncVideos()" ng-disabled="deepSyncInProgress"><span class="glyphicon glyphicon-facetime-video" aria-hidden="true"></span> Mettre à disposition les vidéos</button>
      <button type="button" class="btn btn-danger" ng-click="dropSoluces()" ng-disabled="deepSyncInProgress" title="Par solutions, on entend les résolutions écrites dans la base de données, les liens vers les fichiers vidéos">Effacer les solutions</button>
    </div>
  </div>
</div>

<div ng-if="syncReport" class="card mb-5" ng-controller="ThemesListController">
  <div class="card-header">
    <a href="check_import.html" class="btn btn-success float-right mx-1" target="_self">
      <span class="glyphicon glyphicon-link" aria-hidden="true"></span>
      Lien public
    </a>
    <button type="button" class="btn btn-primary float-right mx-1" ng-click="updateReport()" title="Actualiser le rapport">
      <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>
    </button>
    <h3 class="mb-0">
      Dernier rapport de synchronisation
    </h3>
  </div>
  <div class="card-body" ng-if="syncReport._regeneration.length">
    <div class="d-flex">
      <h3>
        Génération
      </h3>
    </div>
    <ul>
      <li ng-repeat="item in syncReport._regeneration" class="text-break">{{ item }}</li>
    </ul>
  </div>
  <div class="card-body" ng-if="syncReport._themes.length">
    <div class="d-flex">
      <h3>
        Général
      </h3>
    </div>
    <ul>
      <li ng-repeat="item in syncReport._themes" class="text-break">{{ item }}</li>
    </ul>
  </div>
  <div ng-repeat="(th, line) in syncReport.themes" class="card-body" ng-if="line.length">
    <div class="d-flex">
      <h3>
        {{ th }}
      </h3>
      <div class="d-inline-block" ng-repeat="theme in themes" ng-if="theme.name == th">
        <a href="themes/{{ theme.id }}" class="btn btn-link" title="Voir le thème">
          <span class="glyphicon glyphicon-hand-right" aria-hidden="true"></span>
        </a>
        <button class="btn btn-light" title="Resynchroniser uniquement ce thème" ng-click="deepSync(theme)" ng-if="settings.wip || !timeProgression || displayDangerousActions">
          <span class="glyphicon glyphicon-hdd" aria-hidden="true"></span>
        </button>
      </div>
    </div>
    <ul>
      <li ng-repeat="item in line" class="text-break">{{ item }}</li>
    </ul>
  </div>
</div>

<div class="card mb-5" ng-controller="ThemesListController">
  <div class="card-header">
    <button type="button" class="btn btn-primary float-right mx-1" ng-click="diffWithRepo()" title="Calculer les différences avec le dépôt">
      <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>
    </button>
    <h3 class="mb-0">
      Différences avec le dépôts
    </h3>
  </div>
  <div class="card-body" ng-if="!diff">
    <div class="alert alert-info">Lancez la génération du rapport pour lister les différences.</div>
  </div>
  <div ng-repeat="(th, lines) in diff" class="card-body" ng-if="diff">
    <div class="d-flex">
      <h3>
        {{ th }}
      </h3>
      <div class="d-inline-block" ng-repeat="theme in themes" ng-if="theme.name == th">
        <a href="themes/{{ theme.id }}" class="btn btn-link" title="Voir le thème">
          <span class="glyphicon glyphicon-hand-right" aria-hidden="true"></span>
        </a>
        <button class="btn btn-light" title="Resynchroniser uniquement ce thème" ng-click="deepSync(theme)" ng-if="settings.wip || !timeProgression || displayDangerousActions">
          <span class="glyphicon glyphicon-hdd" aria-hidden="true"></span>
        </button>
      </div>
    </div>
    <ul>
      <li ng-repeat="diffline in lines" class="row">
        <a ng-href="{{ diffline.link }}" class="col-2 d-flex align-items-center text-truncate text-monospace" title="{{ diffline.field }}">{{ diffline.field }}</a>
        <div class="col">
          <div class="text-danger"><span class="text-monospace">-</span>{{ diffline.be }}</div>
          <div class="text-success"><span class="text-monospace">+</span>{{ diffline.af }}</div>
        </div>
      </li>
    </ul>
  </div>
</div>