Commit all the changes that hasn't been committed + updates.

1 files changed, 170 insertions, 0 deletions

diff --git a/lib/lsg_web/templates/alcoolog/user.html.eex b/lib/lsg_web/templates/alcoolog/user.html.eex
new file mode 100644
index 0000000..3b2b20b
--- /dev/null
+++ b/lib/lsg_web/templates/alcoolog/user.html.eex
@@ -0,0 +1,170 @@
+<%= if @stats.active > 0 do %>
+  <h3 class="text-gray-900 text-xl leading-5 font-semibold truncate">
+    <% rising_class = if @stats.rising, do: "teal", else: "red" %>
+    <span class="flex-shrink-0 inline-block px-3 py-3 text-<%= rising_class %>-800 text-2xl leading-4 font-medium bg-<%= rising_class %>-100 rounded-full">
+      <%= @stats.trend_symbol %> <%= Float.round(@stats.active, 4) %> g/l
+    </span>
+
+    <span class="px-3"><%= @stats.last_cl %>cl @ <%= @stats.last_deg %>°</span>
+
+    <span class="px-3 text-lg text-gray-700"><%= if @stats.last_descr && @stats.last_descr != "" do %>
+      <%= @stats.last_descr %>
+    <% end %>
+    </span>
+
+    <span class="px-3 text-gray-500 text-sm font-thin"><%= LSGWeb.LayoutView.format_time(@stats.last_at) %></span>
+
+    </h3>
+
+    <p class="text-gray-500 font-thin text-lg">
+      a commencé il y a <span class="text-gray-700 font-semibold"><%= @stats.since_s %></span>
+      &mdash;
+      sobre dans <span class="text-gray-700 font-semibold"><%= @stats.sober_in_s %></span>
+    </p>
+<% else %>
+  <h3 class="text-gray-900 text-xl leading-5 font-semibold truncate">
+    est sobre!
+
+    <p class="text-gray-500 font-thin text-lg">
+    dernier verre
+    <span class="px-3"><%= @stats.last_cl %>cl @ <%= @stats.last_deg %>°</span>
+
+    <span class="px-3 text-lg text-gray-700"><%= if @stats.last_descr && @stats.last_descr != "" do %>
+      <%= @stats.last_descr %>
+    <% end %>
+    </span>
+
+    <span class="px-3 text-gray-500 text-sm font-thin"><%= LSGWeb.LayoutView.format_time(@stats.last_at) %></span>
+  </h3>
+<% end %>
+
+<canvas id="myChart" class="w-full" height="200"></canvas>
+<canvas id="myChartGl" class="w-full" height="200"></canvas>
+
+
+<h2 class="leading-8 m-4 font-semibold text-2xl">Historique</h2>
+<div class="flex flex-col">
+  <div class="-my-2 py-2 overflow-x-auto sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8">
+    <div class="align-middle inline-block min-w-full shadow overflow-hidden sm:rounded-lg border-b border-gray-200">
+      <table class="min-w-full divide-y divide-gray-200">
+        <thead>
+          <tr>
+            <th class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
+              date
+            </th>
+            <th class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
+              &nbsp;
+            </th>
+            <th class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
+              &nbsp;
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <%= for {%{at: date, cl: cl, deg: deg, description: comment}, index} <- Enum.with_index(@history) do %>
+            <% class = if(Integer.is_even(index), do: "bg-gray-50", else: "bg-white") %>
+            <tr class="<%= class %>">
+              <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 font-medium text-gray-900">
+                <%= LSGWeb.LayoutView.format_time(date, false) %>
+              </td>
+              <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-500"><%= cl %>cl <%= deg %>°</td>
+              <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-500"><%= comment||"" %></td>
+            </tr>
+          <% end %>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
+
+<div id="metrics-gl" class="w-full"></div>
+
+<link href='/assets/css/metricsgraphics.css' rel='stylesheet' type='text/css'>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.css" integrity="sha512-SUJFImtiT87gVCOXl3aGC00zfDl6ggYAw5+oheJvRJ8KBXZrr/TMISSdVJ5bBarbQDRC2pR5Kto3xTR0kpZInA==" crossorigin="anonymous" />
+<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js" integrity="sha512-vBmx0N/uQOXznm/Nbkp7h0P1RfLSj0HQrFSzV8m7rOGyj30fYAOKHYvCNez+yM8IrfnW0TCodDEjRqf6fodf/Q==" crossorigin="anonymous"></script>
+<script src="/assets/js/jquery3.1.0.min.js"></script>
+<script src="/assets/js/d3.v4.min.js"></script>
+<script src="/assets/js/metricsgraphics.min.js"></script>
+    <script type="text/javascript">
+  (function() {
+var ctx = document.getElementById('myChart').getContext('2d');
+    d3.json('<%= alcoolog_path(@conn, :nick_volumes_json, @network, @nick, days: @days) %>', function(data) {
+var myChart = new Chart(ctx, {
+    type: 'bar',
+    data: {
+      labels: data.map(function(data) { return new Date(data.date) }),
+        datasets: [{
+            label: 'Volumes d\'alcool',
+          data: data.map(function(data) { return data.volumes }),
+            borderWidth: 1
+        }]
+    },
+    options: {
+      scales: {
+        xAxes: [{
+          type: 'time',
+          time: {
+            unit: 'day'
+          }
+        }],
+            yAxes: [{
+                ticks: {
+                    beginAtZero: true
+                }
+            }]
+        }
+    }
+});
+});
+
+
+
+
+var ctxgl = document.getElementById('myChartGl').getContext('2d');
+    d3.json('<%= alcoolog_path(@conn, :nick_gls_json, @network, @nick, days: @days) %>', function(data) {
+var myChartgl = new Chart(ctxgl, {
+    type: 'bar',
+    data: {
+      labels: data.map(function(data) { return new Date(data.date) }),
+        datasets: [{
+            label: 'g/l ingérés',
+          data: data.map(function(data) { return data.gls }),
+            borderWidth: 1
+        }]
+    },
+    options: {
+      scales: {
+        xAxes: [{
+          type: 'time',
+          time: {
+            unit: 'day'
+          }
+        }],
+            yAxes: [{
+                ticks: {
+                    beginAtZero: true
+                }
+            }]
+        }
+    }
+});
+});
+
+
+    d3.json('<%= alcoolog_path(@conn, :nick_log_json, @network, @nick, days: @days) %>', function(data) {
+    data = data.map(function(d) {
+      date = new Date(d.at);
+      return {"date": date, "active": d.active};
+    });
+    MG.data_graphic({
+        title: "g/l, All Time",
+        data: data,
+        width: 1000,
+        height: 400,
+        target: document.getElementById('metrics-gl'),
+        x_accessor: 'date',
+        y_accessor: 'active',
+    });
+  });
+})();
+</script>