Report events at most in "days ago", not in weeks, months or years ago

[coffee/coffee-flask.git] / templates / user.html

diff --git a/templates/user.html b/templates/user.html
index c5d89dca0c3d63c36e4eea13a5561fb5c25d0a67..a757cb809c04c3e3f9e7ce6f982a55e68b5fcbf6 100644 (file)
--- a/templates/user.html
+++ b/templates/user.html
@@ -1,12 +1,71 @@
+<style>
+.events {
+    margin: 0.8em;
+    margin-bottom: 1.5em;
+    padding: 2px;
+    border-spacing: 2em 0;
+}
+
+.events h3 {
+    display: inline-block;
+    margin-top: 1ex;
+    margin-right: 0.7em;
+}
+
+.events-box {
+    border: 1px solid black;
+    padding: 0.5em;
+    display: inline-block;
+    vertical-align: top;
+}
+
+.events-box h4 {
+    margin: 0.5ex;
+}
+.events-box .btnline {
+    text-align: left;
+}
+.events-box input {
+    padding: 1.5ex;
+    margin: 0.5ex;
+}
+</style>
+
+{###############}
+{# Graphs etc. #}
+{###############}
 {% if name %}
-    <form style="position: absolute; right: 10%">
-        <input type="button" value="logout" onclick="logout()">
+    <form style="position: absolute; right: 15%; width: 15%; height: 15%;">
+        <button type="button" id="logout_button" onclick="logout()" style="width: 100%; height: 100%;">logout</button>
     </form>
 
     <h1>Hello, {{ name }}!</h1>
 
-    {% if count %}
-    <p>You've had {{ count }} coffee{% if count != 1 %}s{% endif %} today.</p>
+    <p id="eventMsg"></p>
+    <p id="nextStep"></p>
+
+    {% if counts|length > 0 %}
+    <p>You've had
+    {% for c in counts %}
+        {%- if counts|length > 1 -%}
+            {%- if loop.last -%}
+                {%- if counts|length > 2 -%}
+                    ,
+                {% endif %}
+                and
+            {%- elif not loop.first -%}
+                ,
+            {% endif %}
+        {% endif %}
+        {{ c[1] }}
+        {% if c[0] == "" %}
+            other beverage
+        {%- else -%}
+            {{ c[0] }}
+        {%- endif -%}
+        {%- if c[1] != 1 -%}s{%- endif -%}
+    {% endfor %}
+    today.</p>
     {% endif %}
 
     <img src="{{ url_for('coffee_graph_history', _external=True, stamp=stamp) }}">
@@ -16,18 +75,94 @@
         {% if flavors %}
         <form>
         {% for flavor in flavors %}
-        <input type="button" value="{{ flavor }}" onclick="addCoffee(this.value)">
+        <input type="button" value="{{ flavor }}" onclick="addCoffee(this.value)" style="padding: 1.2%; margin: 3px">
         {% endfor %}
         </form>
         {% endif %}
     </p>
+{% else %}
+    <p>Use your card/token to log in...</p>
+
+    <img src="{{ url_for('coffee_graph_history', _external=True, stamp=stamp) }}">
+    <img src="{{ url_for('coffee_graph_flavors', _external=True, stamp=stamp, days=7) }}">
+{% endif %}
+
+{##########}
+{# Events #}
+{##########}
+    <br />
+    <form>
+      {%- macro event_box(title, events) -%}
+        <div class="events-box">
+          <h4>{{title | capitalize}}</h4>
+          {#- The first item in the list is used as button label, last item in the overview -#}
+          {%- set verb = {
+                           "COFFEE_MACHINE_CLEANED": ["cleaned"],
+                           "COFFEE_PACK_OPENED": ["opened"],
+                           "LAST_COFFEE_PACK_OPENED": ["last opened"],
+                           "MILK_CONTAINER_CLEANED": ["cleaned (water)", "cleaned"],
+                           "MILK_CONTAINER_CLEANED_WITH_TABLET": ["cleaned (tablet)"],
+                         }
+          -%}
+          {% if name -%} {# User logged in - show action buttons #}
+            {%- for event in events %}
+              <div class="btnline">
+                <input type="button" value="{{ verb[event]|first }}"
+                       onclick="addEvent('{{ event }}', '{{ verb[events[0]]|last }} the {{ title }}')" />
+                       ({{ last_events[event] | humanize(max_interval="days") if event in last_events else "never" }})
+              </div>
+            {%- endfor -%}
+          {%- else -%}    {# Nobody logged in - show overview with summary times #}
+            {# Calculate maximum timestamp of all relevant events #}
+            {%- set when = last_events.items() | selectattr(0, 'in',
+          events) | map(attribute=1) | max | humanize(max_interval="days") -%}
+              {%- if when -%}
+                {{ verb[events[0]]|last }} {{ when }}
+              {%- else -%}
+                never {{ verb[events[0]]|last }}
+              {%- endif -%}
+          {%- endif %}
+        </div>
+      {%- endmacro %}
+      <div class="events">
+        <h3>{{ ("Record<br />event" if name else "Events") | safe }}:</h3>
+        {{ event_box('coffee machine', ['COFFEE_MACHINE_CLEANED'] ) }}
+        {{ event_box('milk container', ['MILK_CONTAINER_CLEANED', 'MILK_CONTAINER_CLEANED_WITH_TABLET'] ) }}
+        &nbsp;&nbsp;
+        {{ event_box('coffee pack', ['COFFEE_PACK_OPENED'] ) }}
+      </div>
+    </form>
 
+{##################################}
+{# User name and chip idnetifiers #}
+{##################################}
+{% if name %}
+    <br />
     <p>
         <form>
+            <label for="username">Username:</label>
             <input id="username" type="text" name="name">
             <input type="button" value="rename" onclick="renameUser()">
         </form>
-    </p
-{% else %}
-    Use your card/token to log in...
+    </p>
+    <form>
+        <table style="padding: 2px">
+            <tr>
+                <td colspan="4" align="center"><b>Identifiers:</b></td>
+            </tr>
+            {% for id in identifiers %}
+            <tr>
+                <td><input type="text" id="identifier_name_{{ loop.index }}" value="{{ id[2] }}" /></td>
+                <td {% if iid == id[1] %} style="font-weight: bold" {% endif %}>#<span id="identifier_{{ loop.index }}">{{ id[1] }}</span></td>
+                <td><input type="button" value="rename" onclick="renameIdentifier({{ loop.index }})" /></td>
+                <td><input type="button" value="remove" onclick="disableIdentifier('{{ id[1] }}')" /></td>
+            </tr>
+            {% endfor %}
+            <tr>
+                <td><input type="button" id="addIdentifier" value="add identifier" onclick="addIdentifier_start()" /></td>
+                <td colspan="2" style="visibility: hidden" id="labelIdentifier"><b>Use your identifier.</b></td>
+                <td><input type="button" id="abortIdentifier" value="abort" disabled onclick="addIdentifier_finish()" /></td>
+            </tr>
+        </table>
+    </form>
 {% endif %}