index.html 8.98 KB
Newer Older
1
{% extends "members/base.html" %}
Administrator committed
2 3
{% load static %}
{% block additionnal_css %}
4 5
  <link rel="stylesheet" href="{% static 'css/member.css' %}?v=">
  {{ block.super }}
Administrator committed
6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
{% endblock %}
{% block additionnal_scripts %}
 <script type="text/javascript">
    // Prevent back page
    // Add actual page to history
    history.pushState(null, null, location.pathname)

    // Register back button click
    window.onpopstate = function (e) {
        // Prevent default action on back button click
        e.preventDefault()
        // Add actual page to history again
        history.pushState(null, null, location.pathname)
    }
  </script>
  <script src="{% static "js/webcam.min.js" %}">
  </script>
  <script src="{% static "js/JsBarcode.all.min.js" %}">
  </script>
  <script defer src="{% static "fontawesome/js/fontawesome-all.js" %}"></script>

{% endblock %}
{% block content %}
<section class="grid-6 has-gutter" id="first_page">
30 31 32 33
  <h1 class="col-6 txtcenter">{{WELCOME_ENTRANCE_MSG}}</h1>
  {% if WELCOME_SUBTITLE_ENTRANCE_MSG %}
    <h4 class="col-6 txtcenter">{{WELCOME_SUBTITLE_ENTRANCE_MSG|safe}}</h4>
  {% endif %}
Administrator committed
34
    <div class="col-1"></div>
35
    <a class="col-4 row-2 btn txtcenter b_yellow" data-next="shopping_entry">{{ENTRANCE_SHOPPING_BTN|safe}}</b></a>
Administrator committed
36 37
    <div class="col-1 row-2"></div>
    <div class="col-1 row-2"></div>
38
    <a class="col-4 row-2 btn txtcenter b_green" data-next="service_entry">{{ENTRANCE_SERVICE_BTN|safe}}</b></a>
Administrator committed
39 40 41 42 43 44 45 46 47 48 49 50 51 52 53
    <div class="col-1 row-2"></div>
</section>
<section class="grid-6 has-gutter" id="shopping_entry">
    <div class="col-6 row-2">
        <a class="btn btn--primary" data-next="first_page" >Retour accueil</a>
    </div>
    <div class="search_box_wrapper col-5 top">
       <section>
        <div class="row-1 grid-2">
            <div class="col-1">
              <div class="label">
              Biper le badge, ou saisissez le n° de coop. ou le nom
              </div>
              Recherche :
              <input type="text" name="search_string" autocomplete="off" />
54
              <button class="btn--primary search">Cherche-moi !
Administrator committed
55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117
              </button>
              <span class="loading2"><img width="75" src="/static/img/Pedro_luis_romani_ruiz.gif" alt="Chargement en cours...." /></span>
             <div class="row-1" id="multi_results_preview">

            </div>
            </div>
            {% if ENTRANCE_COME_FOR_SHOPING_MSG %}
            <div class="col-1 msg-big">
              {{ENTRANCE_COME_FOR_SHOPING_MSG|safe}}
            </div>
            {% endif %}
        </div>

        </section>
    </div>

    <div id="photo_studio" class="row-2 grid-2">
      <div id="webcam" class="center col-1">
      </div>
      <div name="slider-wrapper" style="display:block;clear:both;width:100px;" class="center">
            <input id="crop_width" name="crop_width" type="range" min="250" max="480" value="380"/>
      </div>
       <div id="webcam_button" class="col-1 center">
        <div id="pre_take_buttons" class="fr">
         <input class="btn--primary" type="button" value="Capture" onclick="preview_snapshot()" />
        </div>
        <div id="post_take_buttons" style="display:none" class="center">
            <!-- These buttons are shown after a snapshot has been taken -->
            <input class="btn--inverse" type="button" value="Annul." onclick="cancel_preview()" />
            <input class="btn--primary" type="button" value="Envoi" onclick="save_photo()" style="font-weight:bold;" />
        </div>
      </div>

    </div>

     <div class="col-5" id="member_slide">
        <section>
          <div class="row-1 grid-2" >
            <div class="col-1" style="padding-right: 15px;">
              <div class="coop-info">
                <div id="image_medium">
                </div>
                <img id="barcode" />
                <br class="clear" />
                 <div id="barcode_base">
                </div>
                <div id="name">
                </div>
                <div id="cooperative_state">
                </div>
                 <div id="next_shifts">
                </div>
              </div>
              <a class="btn" data-next="first_page">Coopérateur suivant</a>
            </div>
            <div class="col-1">
              <section id="member_advice">
                <div id="no-picture-msg" style="display:none;" class="msg-big">
                  {% if no_picture_member_advice %}
                    {{no_picture_member_advice|safe}}
                  {% endif %}
                </div>
              </section>
118

Administrator committed
119 120 121 122 123
            </div>
          </div>
        </section>

     </div>
124

Administrator committed
125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231
     <section id="photo_advice">
        <div class="col-6 big"><i class="fas fa-arrow-circle-up fa-3x "></i>
           Regardez la caméra, en haut, pendant la pose <i class="fas fa-arrow-circle-up fa-3x"></i>
        </div>
        <div class="col-6" id="real_capture">
        </div>
     </section>
</section>
<section class="grid-6 has-gutter" id="service_entry">
    <div class="col-6 row-2">
        <a class="btn btn--primary" data-next="first_page" >Retour accueil</a>
    </div>
    <div class="col-1"></div>
    <div class="col-4">
        <h1 class="col-4 txtcenter">Qui es-tu ?</h1>
        <section class="outside_list">
        <a class="btn b_orange" data-next="rattrapage_1" data-type="rattrapage">Je viens faire un rattrapage</a>
        {% if ftop_btn_display %}
          <a class="btn b_yellow" data-next="rattrapage_1" data-type="volant">Je suis volant</a>
        {% endif %}
        </section>
    </div>
    <div class="col-1"></div>
    <div class="col-1"></div>
    <section id="service_en_cours" class="col-4">
        <div class="info txtcenter"></div>
        <div class="txtcenter" id="current_shift_title">
        </div>
        <div id="current_shift_members">
        </div>

    </section>

</section>
<section class="grid-6 has-gutter" id="service_entry_validation">
    <h1 class="col-6 txtcenter">Bonjour <span class="member_name"></span> !</h1>
    <div class="validation_wrapper col-6">
        <section id="service_validation" class="col-6 grid-6 has-gutter">
            <div class="col-2"></div>
            <a class="col-2 btn present">Présent.e</a>
            <span class="loading2"><img width="75" src="/static/img/Pedro_luis_romani_ruiz.gif" alt="Chargement en cours...." /></span>
            <div class="col-2"></div>
        </section>
    </div>
    <div class="col-2"></div>
    <a class="btn col-2 return" data-next="service_entry">Retour</a>
    <div class="col-2"></div>
</section>
<section class="grid-6 has-gutter" id="service_entry_success">
    <h1 class="col-6 txtcenter">Bon service !</h1>
    <section class="col-6 txtcenter">
        <span class="member_name"></span><br />
        Votre présence est bien enregistrée ! <br />
        <div class="compteur">
            Votre compteur est dorénavant à <span class="points"></span> point(s).<br />

            <div class="explanations">
                Pour pouvoir faire vos courses, votre compteur doit être au moins à -1 point. <br />
                Dans le cas où vous n’avez pas le temps de faire votre rattrapage, vous pouvez demander une extension.
                <br />
                Une extension vous donne 4 semaines de plus pour faire votre rattrapage.
            </div>
        </div>
        Votre prochain service <span class="service_verb">est prévu</span> le <span class="next_shift"></span>
    </section>
    <div class="col-2"></div>
    <a class="btn col-2" data-next="first_page">Coopérateur suivant</a>
    <div class="col-2"></div>
</section>
<section class="grid-6 has-gutter" id="rattrapage_1">
    <div class="col-6 row-2">
      <a class="btn btn--primary" data-next="first_page" >Retour accueil</a>
    </div>
    <h1 class="col-6 txtcenter">Vous faites un rattrapage</h1>
    <section class="col-6 search_box_wrapper">


    </section>


</section>
<section class="grid-6 has-gutter" id="rattrapage_2">
    <div class="col-6 row-2">
        <a class="btn btn--primary" data-next="first_page" >Retour accueil</a>
    </div>
    <h1 class="col-6 txtcenter">Bonjour <span class="member_name"></span> !</h1>
    <section class="col-6 txtcenter">
        <h2>Bienvenue pour votre rattrapage !</h2>
        <div class="validation_wrapper col-6">
        </div>

    </section>
    <div class="col-2"></div>
    <a class="btn col-2" data-next="rattrapage_1">Attention, ce n'est pas mon nom ...</a>
    <div class="col-2"></div>
</section>
<section style="display:none;">
  <input type="text" placeholder="width" id="img_width" /><br />
  <input type="text" placeholder="height" id="img_height" /><br />
  <input type="text" placeholder="dest_width" id="img_dest_width" /><br />
  <input type="text" placeholder="dest_height" id="img_dest_height" /><br />
  <input type="text" placeholder="crop_width" id="img_crop_width" /><br />
  <input type="text" placeholder="crop_height" id="img_crop_height" /><br />
  <button type="button" id="init_webcam">Cam</button>
</section>
<script src="{% static "js/all_common.js" %}?v="></script>
<script src="{% static "js/members.js" %}?v="></script>
232
{% endblock %}