/flash.html
HTML | 320 lines | 312 code | 7 blank | 1 comment | 0 complexity | 007fc9e9d2de414f6d9ba0f6d9a39946 MD5 | raw file
- <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>
- <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>