server/admin/static/views/exercice-flags.html

<div ng-controller="ExerciceFlagsController">
  <button type="button" ng-click="syncFlags()" class="btn btn-light float-right"><span class="glyphicon glyphicon-refresh" aria-hidden="true"></span> Synchroniser</button>
<h2>
  <a href="exercices/{{exercice.id}}">{{exercice.title}}</a> <small class="text-muted">Flags</small>
  <div class="btn-group" role="group" ng-if="themes[exercice.id_theme].exercices">
    <a href="exercices/{{ themes[exercice.id_theme].exercices[my_ex_num[exercice.id]-1].id }}/flags" title="Exercice précédent" ng-class="{'disabled': !themes[exercice.id_theme].exercices[my_ex_num[exercice.id]-1]}" class="btn btn-sm btn-light"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span></a>
    <a href="exercices/{{ themes[exercice.id_theme].exercices[my_ex_num[exercice.id]-1+2].id }}/flags" title="Exercice suivant" ng-class="{'disabled': !themes[exercice.id_theme].exercices[my_ex_num[exercice.id]-1+2]}" class="btn btn-sm btn-light"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></a>
  </div>
</h2>

<div class="card border-success mb-3">
  <div class="card-header bg-success text-light">
    <button type="button" ng-click="addFlag()" class="btn btn-primary float-right"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Ajouter</button>
    <h4 class="m-0">Drapeaux</h4>
  </div>
  <div class="list-group">
    <div ng-repeat="flag in flags" class="list-group-item">
      <div class="row">
	<div class="col-4">
	  <form ng-submit="saveFlag()" class="form-horizontal" id="flag-{{flag.id}}">
	    <div class="form-group">
	      <div class="float-right" ng-show="flag.id">
		<button type="submit" class="btn btn-sm btn-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></button>
	      </div>
	      <label for="klabel{{flag.id}}" class="col-form-label-sm">Intitulé</label>
	      <input type="text" id="klabel{{flag.id}}" ng-model="flag.label" class="form-control form-control-sm" placeholder="Intitulé" title="Intitulé">
	    </div>
	    <div class="form-group">
	      <div class="float-right">
		<button type="button" ng-click="deleteFlag()" class="btn btn-sm btn-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
	      </div>
	      <label for="kplaceholder{{flag.id}}" class="col-form-label-sm">Placeholder</label>
	      <input type="text" id="kplaceholder{{flag.id}}" ng-model="flag.placeholder" class="form-control form-control-sm" placeholder="Indication de formatage" title="Indication de formatage">
	    </div>
	    <div class="form-group">
	      <label for="khelp{{flag.id}}" class="col-form-label-sm">Help</label>
	      <input type="text" id="khelp{{flag.id}}" ng-model="flag.help" class="form-control form-control-sm" help="Description du champ" title="Description du champ">
	    </div>
	    <div class="form-group">
	      <label for="kvalue{{flag.id}}" class="col-form-label-sm">Valeur</label>
	      <div class="input-group" ng-if="flag.id && !flag.show_raw">
		<input type="text" id="kvalue{{flag.id}}" ng-model="flag.value" class="form-control form-control-sm" placeholder="Condensat" title="Condensat">
		<div class="input-group-append">
		  <button class="btn btn-sm btn-outline-secondary" ng-click="changeValue(flag)" title="Cliquez pour éditer la valeur brute du flag, au lieu du checksum" type="button"><span class="glyphicon glyphicon-erase" aria-hidden="true"></span></button>
		</div>
	      </div>
	      <input type="text" id="kflag{{flag.id}}" ng-model="flag.flag" class="form-control form-control-sm" placeholder="Chaîne brute à valider" ng-if="!flag.id || flag.show_raw" title="Chaîne brute à valider">
	    </div>
	    <div class="form-group">
	      <label for="kvre{{flag.id}}" class="col-form-label-sm">Capture regexp</label>
	      <input type="text" id="kvre{{flag.id}}" ng-model="flag.capture_regexp" class="form-control form-control-sm" placeholder="Regexp selecting validation string" title="Regexp selecting validation string">
	    </div>
	    <div class="form-group row">
	      <div class="col-auto custom-control custom-checkbox ml-1">
		<input type="checkbox" class="custom-control-input" id="kicase{{flag.id}}" ng-model="flag.ignorecase">
		<label class="custom-control-label" for="kicase{{flag.id}}">Ignore case</label>
	      </div>
	      <div class="col-auto custom-control custom-checkbox ml-1">
		<input type="checkbox" class="custom-control-input" id="kmline{{flag.id}}" ng-model="flag.multiline">
		<label class="custom-control-label" for="kmline{{flag.id}}">Multiline</label>
	      </div>
	      <div class="col-2">
		<input type="text" id="kccost{{flag.id}}" ng-model="flag.choices_cost" class="form-control form-control-sm" placeholder="Choices cost" title="Choices cost" integer>
	      </div>
	      <div class="col-2">
		<input type="text" id="kbgain{{flag.id}}" ng-model="flag.bonus_gain" class="form-control form-control-sm" placeholder="Bonus gain" title="Bonus gain" integer>
	      </div>
	      <div class="col-2">
		<input type="text" id="korder{{flag.id}}" ng-model="flag.order" class="form-control form-control-sm" placeholder="Order" title="Order" integer>
	      </div>
	    </div>
	  </form>
	</div>
	<div class="col-4">
	  <div ng-controller="ExerciceFlagDepsController" ng-init="init(flag)">
	    <strong>Dépendances&nbsp;:</strong>
	    <ul ng-if="deps.length > 0">
	      <dependancy ng-repeat="dep in deps" dep="dep"></dependancy>
	    </ul>
	    <span ng-if="deps.length == 0"> sans</span>
	  </div>
          <hr>
	  <div ng-controller="ExerciceFlagStatsController" ng-init="init(flag)">
            <strong>Statistiques</strong>
	    <ul>
	      <li>Validés : {{ stats["completed"] }}</li>
	      <li>
                Tentés : {{ stats["tries"] }}
	        <button type="button" ng-click="deleteTries()" class="btn btn-sm btn-danger" ng-if="stats['tries'] > 0"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></button>
              </li>
	      <li>
                Équipes :
                <span ng-if="stats['teams'].length == 0">aucune</span>
                <team-link ng-repeat="team in stats['teams']" id-team="team"></team-link>
              </li>
	    </ul>
	  </div>
	</div>
	<div class="col-4" ng-controller="ExerciceFlagChoicesController">
	  <div class="btn-toolbar justify-content-end mb-2" role="toolbar">
	    <div class="btn-group mx-2" role="group">
	      <button type="button" ng-click="addChoice()" class="btn btn-sm btn-primary"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Ajouter choix</button>
	    </div>
	    <div class="btn-group" role="group" ng-show="logged">
              <button type="button" class="btn btn-sm btn-dark" data-toggle="modal" data-target="#validationModal" data-flag="{{ flag.label }}" data-flagid="{{ flag.id }}" data-kind="flag_found"><span class="glyphicon glyphicon-check" aria-hidden="true"></span> Valider pour &nbsp;</button>
	    </div>
	  </div>
	  <div ng-repeat="choice in choices" ng-if="choices.length > 0">
	    <div class="row">
	      <label for="clabel_{{choice.id}}" class="col-sm-3 col-form-label-sm">Intitulé</label>
	      <div class="col-sm-7">
		<input type="text" id="clabel_{{choice.id}}" ng-model="choice.label" class="form-control form-control-sm">
	      </div>
	      <div class="col-sm-2">
		<button type="button" ng-click="saveChoice()" class="btn btn-sm btn-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></button>
	      </div>
	    </div>
	    <div class="row">
	      <label for="cvalue_{{choice.id}}" class="col-sm-3 col-form-label-sm">Valeur</label>
	      <div class="col-sm-7">
		<input type="text" id="cvalue_{{choice.id}}" ng-model="choice.value" class="form-control form-control-sm">
	      </div>
	      <div class="col-sm-2">
		<button type="button" ng-click="deleteChoice()" class="btn btn-sm btn-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
	      </div>
	    </div>
	    <hr ng-if="!$last">
	  </div>
	  <span ng-if="choices.length == 0">Aucun choix</span>
	</div>
      </div>
      <form ng-submit="testFlag(flag)" class="row bg-dark" style="border-radius: 5px; padding: 5px 0">
	<div class="col-11">
	  <flag-key kid="flag.id" key="flag" settings="{'wchoiceCurrentCoefficient': 1.0}" wantchoices="flag.wantchoices"></flag-key>
	</div>
	<div class="col-1">
	  <button class="btn btn-warning" type="submit"><span class="glyphicon glyphicon-play" aria-hidden="true"></span></button>
	</div>
      </form>
    </div>
  </div>
</div>

<div class="card border-success mb-3" ng-controller="ExerciceMCQFlagsController">
  <div class="card-header bg-success text-light">
    <button type="button" ng-click="addQuizz()" class="btn btn-primary float-right"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Ajouter</button>
    <h4 class="m-0">Quizz</h4>
  </div>
  <div class="list-group">
    <form ng-submit="saveQuiz()" class="list-group-item" ng-repeat="(qk,q) in quiz">
      <div class="form-group row" id="quiz-{{q.id}}">
	<input type="text" id="qlabel{{q.id}}" ng-model="q.title" class="col form-control" placeholder="Intitulé">
	<div class="col-1" ng-show="q.id">
	  <input type="text" id="qorder{{q.id}}" ng-model="q.order" class="col form-control" placeholder="Ordre" title="Ordre" integer>
	</div>
	<div class="col-auto" ng-show="q.id">
	  <button type="button" ng-click="deleteQuiz()" class="btn btn-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
	</div>
      </div>
      <div class="form-group row" ng-repeat="(ck,choice) in q.entries">
	<div class="col form-check">
	  <label class="custom-control custom-checkbox">
	    <input class="custom-control-input" type="checkbox" ng-model="choice.response">
	    <span class="custom-control-label">
	      <input type="text" id="kchoice{{q.id}}-{{choice.id}}" ng-model="choice.label" class="form-control form-control-sm" placeholder="Intitulé">
	    </span>
	  </label>
	</div>
	<div class="col-auto">
	  <button type="button" ng-click="deleteChoice()" class="btn btn-sm btn-danger"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></button>
	</div>
      </div>
      <div class="form-group row">
	<div class="col-auto">
	  <button type="button" ng-click="addChoice()" class="btn btn-primary"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Ajouter un choix</button>
	</div>
	<div class="col-auto">
	  <button type="submit" class="btn btn-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></button>
	</div>
      </div>
      <div ng-controller="ExerciceMCQDepsController" ng-init="init(q)">
	Dépendances&nbsp;:
	<ul ng-if="deps.length > 0">
	  <dependancy ng-repeat="dep in deps" dep="dep"></dependancy>
	</ul>
	<span ng-if="deps.length == 0"> sans</span>
        <hr>
	<div ng-controller="ExerciceMCQStatsController" ng-init="init(q)">
          <strong>Statistiques</strong>
	  <ul>
	    <li>Validés : {{ stats["completed"] }}</li>
	    <li>
              Tentés : {{ stats["tries"] }}
	      <button type="button" ng-click="deleteTries()" class="btn btn-sm btn-danger" ng-if="stats['tries'] > 0"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></button>
            </li>
	    <li>
              Équipes :
              <span ng-if="stats['teams'].length == 0">aucune</span>
              <team-link ng-repeat="team in stats['teams']" id-team="team"></team-link>
            </li>
	  </ul>
	</div>
      </div>
    </form>
  </div>
</div>
</div>

<div class="modal fade" id="validationModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content bg-light">
      <div class="modal-header">
	<h5 class="modal-title">Valider ce flag pour une équipe</h5>
	<button type="button" class="close" data-dismiss="modal" aria-label="Close">
	  <span aria-hidden="true">&times;</span>
	</button>
      </div>
      <form ng-submit="validateForTeam()">
	<div class="modal-body">
	  <div class="form-group row">
	    <label for="labelflag" class="col-md-3 col-form-label">Flag</label>
	    <div class="col-md-9">
	      <input type="text" readonly class="form-control-plaintext" id="labelflag">
	    </div>
	  </div>
	  <div class="form-group row">
	    <label for="tteam" class="col-md-3 col-form-label">Équipe</label>
	    <div class="col-md-9" ng-controller="TeamsListController">
	      <select class="custom-select custom-select-sm" id="tteam" ng-model="selectedTeam" ng-options="t.id as t.name for t in teams"></select>
	    </div>
	  </div>
	  <div class="modal-footer">
	    <button type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button>
	    <button type="submit" class="btn btn-primary">Enregistrer</button>
	  </div>
	</div>
      </form>
    </div>
  </div>
</div>

<script>
  $('#validationModal').on('shown.bs.modal', function (event) {
    $('#tteam').trigger('focus');

    var button = $(event.relatedTarget);
    var flag = button.data('flag');
    var flagid = button.data('flagid');
    var kind = button.data('kind');

    var modal = $(this);

    modal.data('kind', kind);
    modal.data('flagid', flagid);
    modal.data('flag', flag);
    if (modal.data('flag')) {
      $("#labelflag").val(modal.data('flag'))
    }
  });
</script>