/flash.html

<div
  ng-controller="FlashReadingController as $flash"
  class="container"
  id="flash-content"
>
  <div ng-if="$flash.isStarted" class="flash-word">
    <div
      ng-if="! $flash.isBetween"
      style="font-family: {{ $flash.fontChoice }}; font-size: {{ $flash.fontSize}}px;"
    >
      {{ $flash.sentenses[$flash.wordIndex].word }}
    </div>
    <div ng-if="$flash.isBetween" class="flash-between-propositions">
      <div ng-if="$flash.flashMode == 'words'" class="row">
        <div class="col-xs-4 well" ng-click="$flash.nextPropostion(1)">
          {{ $flash.sentenses[$flash.wordIndex].proposition_1 }}
        </div>
        <div
          class="col-xs-4 well col-xs-offset-2"
          ng-click="$flash.nextPropostion(2)"
        >
          {{ $flash.sentenses[$flash.wordIndex].proposition_2 }}
        </div>
      </div>
      <div ng-if="$flash.flashMode == 'pictos'" class="row">
        <div class="col-xs-4 well" ng-click="$flash.nextPropostion(1)">
          <img
            ng-src="{{ $flash.getPictoOrPlaceholder($flash.sentenses[$flash.wordIndex].picto_1) }}"
            class="picto-image"
          />
        </div>
        <div
          class="col-xs-4 well col-xs-offset-2"
          ng-click="$flash.nextPropostion(2)"
        >
          <img
            ng-src="{{ $flash.getPictoOrPlaceholder($flash.sentenses[$flash.wordIndex].picto_2) }}"
            class="picto-image"
          />
        </div>
      </div>
      <!-- While we pause -->
    </div>
    <button class="btn btn-primary btn-stop" ng-click="$flash.finish()">
      <i class="glyphicon glyphicon-stop"></i>
    </button>
  </div>

  <div ng-if="! $flash.isStarted">
    <form class="form-horizontal">
      <div class="form-group">
        <label class="col-sm-2 control-label">Name</label>
        <div class="col-sm-10">
          <p class="form-control-static">{{ $flash.name }}</p>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-2 control-label">Folder</label>
        <div class="col-sm-10">
          <p class="form-control-static">{{ $flash.folders }}</p>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-2 control-label">Mode</label>
        <div class="col-sm-10">
          <div class="btn-group">
            <label
              class="btn btn-success"
              ng-model="$flash.flashMode"
              uib-btn-radio="'pause'"
              >Rafale</label
            >
            <label
              class="btn btn-success"
              ng-model="$flash.flashMode"
              uib-btn-radio="'words'"
              >Propositions de mots</label
            >
            <label
              class="btn btn-success"
              ng-model="$flash.flashMode"
              uib-btn-radio="'pictos'"
              >Propositions de pictos</label
            >
          </div>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-2 control-label"></label>
        <div class="col-sm-10">
          <table class="table table-striped">
            <thead>
              <th>Mot</th>
              <th ng-if="$flash.flashMode=='words'">Prop. 1</th>
              <th ng-if="$flash.flashMode=='words'">Prop. 2</th>
              <th ng-if="$flash.flashMode=='pictos'">Picto 1</th>
              <th ng-if="$flash.flashMode=='pictos'">Picto 2</th>
              <th></th>
            </thead>
            <tbody>
              <tr ng-repeat="sentens in $flash.sentenses track by $index">
                <td>
                  <input ng-model="$flash.sentenses[$index].word" />
                </td>
                <td ng-if="$flash.flashMode=='words'">
                  <input ng-model="$flash.sentenses[$index].proposition_1" />
                </td>
                <td ng-if="$flash.flashMode=='words'">
                  <input ng-model="$flash.sentenses[$index].proposition_2" />
                </td>
                <td ng-if="$flash.flashMode=='pictos'">
                  <img
                    ng-src="{{ $flash.getPictoOrPlaceholder($flash.sentenses[$index].picto_1) }}"
                    class="picto-image"
                  />
                  <input
                    type="text"
                    ng-model="$flash.sentenses[$index].picto_1"
                    uib-typeahead="searchPic as searchPic.name for searchPic in $flash.getPicto($viewValue)"
                    typeahead-template-url="customTemplate.html"
                    typeahead-show-hint="true"
                    typeahead-min-length="1"
                  />
                </td>
                <td ng-if="$flash.flashMode=='pictos'">
                  <img
                    ng-src="{{ $flash.getPictoOrPlaceholder($flash.sentenses[$index].picto_2) }}"
                    class="picto-image"
                  />
                  <input
                    type="text"
                    ng-model="$flash.sentenses[$index].picto_2"
                    uib-typeahead="searchPic as searchPic.name for searchPic in $flash.getPicto($viewValue)"
                    typeahead-template-url="customTemplate.html"
                    typeahead-show-hint="true"
                    typeahead-min-length="1"
                  />
                </td>
                <td>
                  <button
                    type="button"
                    ng-click="$flash.removeWord($index)"
                    class="btn btn-default"
                  >
                    <i class="glyphicon glyphicon-remove"></i>
                  </button>
                </td>
              </tr>
            </tbody>
          </table>
          <button class="btn btn-default" ng-click="$flash.addWord()">
            <i class="glyphicon glyphicon-plus"></i>
          </button>
        </div>
      </div>

      <div class="form-group">
        <label class="col-sm-2 control-label">Affichage (ms)</label>
        <div class="col-sm-10">
          <input
            class="form-control"
            type="number"
            ng-model="$flash.intervalofDisplay"
            min="0"
          />
        </div>
      </div>
      <div class="form-group" ng-show="$flash.flashMode=='pause'">
        <label class="col-sm-2 control-label">Pause (ms)</label>
        <div class="col-sm-10">
          <input
            class="form-control"
            type="number"
            ng-model="$flash.intervalBetween"
            min="0"
          />
        </div>
      </div>

      <div class="form-group">
        <label class="col-sm-2 control-label">Police</label>
        <div class="col-sm-5">
          <div><jd-fontselect stack="$flash.fontChoice" /></div>
          <div>
            <input
              class="form-control"
              type="number"
              ng-model="$flash.fontSize"
              min="1"
            />
          </div>
        </div>
        <div class="col-sm-4 col-sm-offset-1 panel panel-default">
          <div
            style="font-family: {{ $flash.fontChoice }}; font-size: {{ $flash.fontSize}}px;"
          >
            Logo
          </div>
        </div>
      </div>

      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <input type="checkbox" ng-model="$flash.isRandom" /> Aléatoire
          <button class="btn btn-primary" ng-click="$flash.start()">
            <i class="glyphicon glyphicon-play"></i>
          </button>
          <button class="btn btn-default" ng-click="$flash.fullScreen()">
            <i class="glyphicon glyphicon-fullscreen"></i>
          </button>
        </div>
      </div>
    </form>
    <div ng-if="$flash.isSessionsLoading()" class="text-mutate">
      <i class="glyphicon glyphicon-refresh"></i>
      Chargement
    </div>
    <div ng-if="!$flash.isSessionsLoading()">
      <form
        ng-submit="$flash.addSession($flash.sessionName, $flash.folders, $main.firebaseUser.uid)"
        ng-if="$main.firebaseUser"
        class="col-sm-10 col-sm-offset-2"
      >
        <label class="form-label">
          Nom
          <input
            class="form-control"
            ng-model="$flash.sessionName"
            placeholder="Ma Session"
          />
        </label>
        <label class="form-label">
          Folders
          <input
            class="form-control"
            ng-model="$flash.folders"
            placeholder="folder"
          />
        </label>
        <input
          type="submit"
          value="Enregistrer la Session"
          class="btn btn-primary"
        />
      </form>

      <div class="well col-sm-10 col-sm-offset-2">
        <ol class="breadcrumb">
          <li>
            <a
              ng-click="$flash.setFolder([])"
              ng-if="$flash.parentFolders.length"
            >
              <i class="glyphicon glyphicon-home"></i> Home
            </a>
            <span ng-if="! $flash.parentFolders.length">
              <i class="glyphicon glyphicon-home"></i> Home
            </span>
          </li>
          <li
            ng-repeat="folder in $flash.parentFolders"
            ng-class="{active: $last}"
          >
            <a
              ng-click="$flash.setFolder($flash.parentFolders.slice(0, $index-1))"
              ng-if="! $last"
            >
              {{ folder }}
            </a>
            <span ng-if="$last">{{ folder }}</span>
          </li>
        </ol>

        <ul class="list-group">
          <li
            class="list-group-item"
            ng-repeat="flashSession in $flash.getSessionsByFolder() track by $index"
          >
            <div
              ng-if="! flashSession.mode "
              ng-click="$flash.setFolder($flash.parentFolders.concat([flashSession]))"
            >
              <i class="glyphicon glyphicon-folder-open"></i>
              &nbsp;<strong>{{ flashSession }}</strong>
            </div>
            <div ng-if="flashSession.mode">
              <button
                class="btn btn-default"
                ng-click="$flash.loadSession(flashSession)"
                uib-tooltip="Charger"
              >
                <i class="glyphicon glyphicon-upload"></i>
              </button>
              {{ flashSession.name }}
              <span class="label label-info"
                >{{ $flash.flashModes[flashSession.mode]}}</span
              >

              <span class="text-muted">
                ( {{ flashSession.sentenses.length }} mots
                <i
                  class="glyphicon glyphicon-info-sign"
                  uib-tooltip="{{ $flash.getFirstWords(flashSession.sentenses).join(', ') }}"
                ></i>
                )
              </span>
              <button
                class="btn btn-link pull-right text-danger"
                ng-click="$flash.deleteSession(flashSession)"
                ng-if="$main.firebaseUser"
              >
                <i class="glyphicon glyphicon-remove"></i>
              </button>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>