path: root/lib/lsg_web/templates/alcoolog/user.html.eex

<%= 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='/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="/js/jquery3.1.0.min.js"></script>
<script src="/js/d3.v4.min.js"></script>
<script src="/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>