Merge pull request #484 from ckrack/feat/improve-frontend

feat: improve frontend
ckrack · Mar 1, 2024 · f987506 · f987506
2 parents 541ae1c + ff5d0d8
commit f987506
Show file tree

Hide file tree

Showing 10 changed files with 90 additions and 64 deletions.
diff --git a/public/android-chrome-192x192.png b/public/android-chrome-192x192.png
diff --git a/public/android-chrome-512x512.png b/public/android-chrome-512x512.png
diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png
diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/humans.txt b/public/humans.txt
@@ -0,0 +1,15 @@
+/* TEAM */
+
+Developer: Clemens Krack
+Site: clemenskrack.com
+Twitter: ckrack
+Location: Berlin, Germany
+
+/* THANKS */
+
+The favicons were generated using the following graphics from Twitter Twemoji:
+
+- Graphics Title: 1f9ea.svg
+- Graphics Author: Copyright 2020 Twitter, Inc and other contributors (https://github.com/twitter/twemoji)
+- Graphics Source: https://github.com/twitter/twemoji/blob/master/assets/svg/1f9ea.svg
+- Graphics License: CC-BY 4.0 (https://creativecommons.org/licenses/by/4.0/)
diff --git a/public/site.webmanifest b/public/site.webmanifest
@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
diff --git a/templates/base.html.twig b/templates/base.html.twig
@@ -2,9 +2,12 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>{% block title %}Welcome!{% endblock %}</title>
-    <link rel="icon"
-          href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text><text y=%221.3em%22 x=%220.2em%22 font-size=%2276%22 fill=%22%23fff%22>sf</text></svg>">
+    <title>{% block title %}Welcome - Hydrometer public server!{% endblock %}</title>
+    <link rel="apple-touch-icon" sizes="180x180" href="{{ asset('apple-touch-icon.png') }}">
+    <link rel="icon" type="image/png" sizes="32x32" href="{{ asset('favicon-32x32.png') }}">
+    <link rel="icon" type="image/png" sizes="16x16" href="{{ asset('favicon-16x16.png') }}">
+    <link rel="manifest" href="{{ asset('site.webmanifest') }}">
+    <link rel="author" href="{{ asset('humans.txt') }}" />
     {% block stylesheets %}
             {{ encore_entry_link_tags('app') }}
     {% endblock %}

diff --git a/templates/hydrometer/show_data.html.twig b/templates/hydrometer/show_data.html.twig
@@ -1,75 +1,82 @@
 {% extends 'base.html.twig' %}
 
-{% block title %}Hydrometer data{% endblock %}
+{% block title %}Data for {{ hydrometer.name ?? hydrometer_id }} 📉{% endblock %}
 
 {% block body %}
-<div class="mx-4 my-[1em] max-w-[800px] w-[95%] border-b border-gray-100">
-    <div class="px-4 sm:px-0 py-3">
-        <h1 class="text-xl font-semibold leading-7 text-gray-900">Data for {{ hydrometer.name ?? hydrometer_id }} 📉</h1>
+    <div class="mx-4 my-[1em] max-w-[800px] w-[95%] border-b border-gray-100">
+        <div class="px-4 sm:px-0 py-3">
+            <h1 class="text-xl font-semibold leading-7 text-gray-900">Data for {{ hydrometer.name ?? hydrometer_id }}
+                📉</h1>
+        </div>
+    </div>
+    <div class="mt-6 shadow-lg rounded px-2 pb-2 mx-4">
+        <div id="chart" class="w-full h-full"></div>
     </div>
-</div>
-<div class="mt-6 shadow-lg rounded px-2 pb-2 mx-4">
-    <div id="chart" class="w-full h-full"></div>
-</div>
     <script>
-        var chart = c3.generate({
-            bindto: '#chart',
-            data: {
-                url: '{{ asset("data/#{hydrometer_id}.json") }}',
-                mimeType: 'json',
-                x: 'time',
-                xFormat: '%Y-%m-%d %H:%M:%S',
-                keys: {
-                    x: "time",
-                    value: ["temperature", "gravity", "battery", "angle"]
-                },
-                axes: {
-                    temperature: 'y',
-                    gravity: 'y2'
-                }
-            },
-            colors: {
-                temperature: '#d9534f',
-                gravity: '#0275d8',
-                battery: '#5bc0de',
-                angle: '#5cb85c'
-            },
-            types: {
-                gravity: 'area-spline',
-                temperature: 'spline',
-                battery: 'spline',
-            },
-            axis: {
-                x: {
-                    label: {
-                        text: 'Date',
-                        position: 'inner-center'
+        function createChart() {
+            c3.generate({
+                bindto: '#chart',
+                data: {
+                    url: '{{ asset("data/#{hydrometer_id}.json") }}',
+                    mimeType: 'json',
+                    x: 'time',
+                    xFormat: '%Y-%m-%d %H:%M:%S',
+                    keys: {
+                        x: "time",
+                        value: ["temperature", "gravity", "battery", "angle"]
                     },
-                    type: 'timeseries',
-                    tick: {
-                        culling: {
-                            max: 5 // the number of tick texts will be adjusted to less than this value
-                        },
-                        fit: true,
-                        format: '%Y-%m-%d@%H:%M'
-                    }
+                    axes: {
+                        temperature: 'y',
+                        gravity: 'y2'
+                    },
+                    hide: ["angle", "battery"]
+                },
+                colors: {
+                    temperature: '#d9534f',
+                    gravity: '#0275d8',
+                    battery: '#5bc0de',
+                    angle: '#5cb85c'
                 },
-                y2: {
-                    show: true
+                types: {
+                    gravity: 'area-spline',
+                    temperature: 'spline',
+                    battery: 'spline',
                 },
-            },
-            grid: {
-                x: {
-                    show: true
+                axis: {
+                    x: {
+                        label: {
+                            text: 'Date',
+                            position: 'inner-center'
+                        },
+                        type: 'timeseries',
+                        tick: {
+                            culling: {
+                                max: 5 // the number of tick texts will be adjusted to less than this value
+                            },
+                            fit: true,
+                            format: '%Y-%m-%d@%H:%M'
+                        }
+                    },
+                    y2: {
+                        show: true
+                    },
                 },
-                y: {
-                    show: true
+                grid: {
+                    x: {
+                        show: true
+                    },
+                    y: {
+                        show: true
+                    }
+                },
+                zoom: {
+                    enabled: true
                 }
-            },
-            zoom: {
-                enabled: true
-            }
-        });
+            })
+        }
+
+        createChart();
+        setInterval(createChart, 300000);
     </script>
 
 {% endblock %}