Add mobile frontend preview

eamars · Mar 14, 2024 · 5923a63 · 5923a63
1 parent 0b2d8d3
commit 5923a63
Show file tree

Hide file tree

Showing 4 changed files with 212 additions and 0 deletions.
diff --git a/src/CMakeLists.txt b/src/CMakeLists.txt
@@ -25,6 +25,21 @@ add_custom_command(
 
 add_dependencies("${TARGET_NAME}" generate_dashboard_header)
 
+# mobile_portal.html
+add_custom_target(
+    generate_mobile_portal_header ALL
+    DEPENDS "${SRC_DIRECTORY}/generated/mobile_portal.html.h"
+)
+
+add_custom_command(
+    OUTPUT "${SRC_DIRECTORY}/generated/mobile_portal.html.h"
+    DEPENDS "${SRC_DIRECTORY}/html/mobile_portal.html"
+    COMMAND "${Python_EXECUTABLE}" "${SCRIPTS_DIRECTORY}/html2header.py" -vv --no-minify -f ${SRC_DIRECTORY}/html/mobile_portal.html -o ${SRC_DIRECTORY}/generated/mobile_portal.html.h
+    COMMENT "Generating mobile_portal.html header"
+)
+
+add_dependencies("${TARGET_NAME}" generate_mobile_portal_header)
+
 
 # display_mirror.html
 add_custom_target(

diff --git a/src/html/mobile_portal.html b/src/html/mobile_portal.html
@@ -0,0 +1,180 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>OpenTrickler Mobile</title>
+
+    <link href="https://cdn.jsdelivr.net/npm/daisyui@4.7.3/dist/full.min.css" rel="stylesheet" type="text/css" />
+    <script src="https://cdn.tailwindcss.com"></script>
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+</head>
+
+<body>
+
+<div class="container mx-auto px-2">
+    <div class="grid grid-cols-1 gap-2">
+        <!-- Row 1 -->
+        <div class="stat">
+            <div class="stat-title">Current Weight</div>
+            <div id="currentWeightDecimal" class="stat-value">---</div>
+            <div class="stat-desc">
+                <progress id="currentWeightProgressPencentage" class="progress progress-primary" value="100" max="100"></progress>
+            </div>
+        </div>
+
+        <!-- Row 2 -->
+        <div class="divider">Control</div>
+
+        <!-- Row 3 -->
+        <ul class="steps">
+            <li id="chargeModeStateWait" class="step step-primary">Wait</li>
+            <li id="chargeModeStateCharging" class="step">Charging</li>
+            <li id="chargeModeStateRemoveCup" class="step">Remove Cup</li>
+            <li id="chargeModeStateReturnCup" class="step">Return Cup</li>
+        </ul>
+
+        <!-- Row 4 -->
+        <input id="chargeWeightInput" type="number" step="0.001" placeholder="Charge Weight" class="input input-lg input-bordered input-primary"/>
+
+        <!-- Row 5 -->
+        <button class="btn btn-primary" onclick="setChargeWeight()">Confirm</button>        
+    </div>
+</div>
+
+
+<div class="btm-nav">
+  <button>
+    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" /></svg>
+  </button>
+  <button class="active">
+    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+  </button>
+  <button>
+    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" /></svg>
+  </button>
+</div>
+
+
+<!-- Other resources -->
+<dialog id="invalidChargeWeightDialog" class="modal">
+    <div class="modal-box">
+        <h3 class="font-bold text-lg">Error</h3>
+        <p class="py-4">Invalid charge weight</p>
+    </div>
+    <form method="dialog" class="modal-backdrop">
+        <button>close</button>
+    </form>
+</dialog>
+
+<!-- Scripts to support the webapp -->
+<script>
+    // Set Charge Mode Set Point with REST interface
+    function setChargeWeight() {
+        // Read charge weight
+        const chargeWeight = document.getElementById("chargeWeightInput").value;
+
+        // If the charge weight is empty
+        if (chargeWeight == "") {
+            const errorModal = document.getElementById('invalidChargeWeightDialog');
+            errorModal.showModal();
+
+            return;
+        }
+
+        // Build URI
+        const uri = `/rest/charge_mode_set_point?c0=${encodeURIComponent(chargeWeight)}`;
+
+        // Call set charge weight REST
+        fetch(uri)
+        .then(response => {
+            return response.json();
+        })
+        .then(data => {
+            console.log(`Set charge weight to ${data.c0}`);
+        })
+        .catch(error => {
+            console.error("Error setting charge weight");
+        });
+    }
+
+    // Helper function to update progress widget
+    const ChargeModeState = Object.freeze({ 
+        WAIT: 0, 
+        CHARGING: 1, 
+        REMOVE_CUP: 2, 
+        RETURN_CUP: 3, 
+    }); 
+    const PRIMARY_CLASS = "step-primary";
+
+    function _setChargeModeStateWidget(state) {
+        const chargeModeStateWait = document.getElementById("chargeModeStateWait");
+        const chargeModeStateCharging = document.getElementById("chargeModeStateCharging");
+        const chargeModeStateRemoveCup = document.getElementById("chargeModeStateRemoveCup");
+        const chargeModeStateReturnCup = document.getElementById("chargeModeStateReturnCup");
+
+        switch (state) {
+            case ChargeModeState.WAIT:
+                chargeModeStateWait.classList.add(PRIMARY_CLASS);
+                chargeModeStateCharging.classList.remove(PRIMARY_CLASS)
+                chargeModeStateRemoveCup.classList.remove(PRIMARY_CLASS)
+                chargeModeStateReturnCup.classList.remove(PRIMARY_CLASS)
+                break;
+            case ChargeModeState.CHARGING:
+                chargeModeStateWait.classList.add(PRIMARY_CLASS);
+                chargeModeStateCharging.classList.add(PRIMARY_CLASS)
+                chargeModeStateRemoveCup.classList.remove(PRIMARY_CLASS)
+                chargeModeStateReturnCup.classList.remove(PRIMARY_CLASS)
+                break;
+            case ChargeModeState.REMOVE_CUP:
+                chargeModeStateWait.classList.add(PRIMARY_CLASS);
+                chargeModeStateCharging.classList.add(PRIMARY_CLASS)
+                chargeModeStateRemoveCup.classList.add(PRIMARY_CLASS)
+                chargeModeStateReturnCup.classList.remove(PRIMARY_CLASS)
+                break;
+            case ChargeModeState.RETURN_CUP:
+                chargeModeStateWait.classList.add(PRIMARY_CLASS);
+                chargeModeStateCharging.classList.add(PRIMARY_CLASS)
+                chargeModeStateRemoveCup.classList.add(PRIMARY_CLASS)
+                chargeModeStateReturnCup.classList.add(PRIMARY_CLASS)
+                break;
+        }
+    }
+
+    // Helper function to set the current weight widget
+    function _setCurrentWeight(weight, percentage) {
+        var currentWeightDecimal = document.getElementById("currentWeightDecimal");
+        currentWeightDecimal.innerText = String(weight);
+
+        var currentWeightProgressPencentage = document.getElementById("currentWeightProgressPencentage");
+        currentWeightProgressPencentage.value = percentage;
+    }
+
+    // Function to poll charge mode status (weight, progress, etc)
+    function pollChargeModeStatus() {
+        fetch("/rest/charge_mode_status")
+        .then(response => {
+            return response.json()
+        })
+        .then(data => {
+            console.log(data);
+        })
+        .catch(error => {
+            console.error("Error reading charge mode settings");
+            _setCurrentWeight("---", 0);
+            _setChargeModeStateWidget(ChargeModeState.WAIT);
+        })
+        .finally(() => {
+            // Schedule the next event
+            setTimeout(pollChargeModeStatus, 500);
+        })
+    }
+     // Start the long polling process when the page loads
+     document.addEventListener('DOMContentLoaded', pollChargeModeStatus);
+
+</script>
+
+</body>
+
+</html>
diff --git a/src/rest_endpoints.c b/src/rest_endpoints.c
@@ -18,6 +18,7 @@
 #include "bootstrap.min.js.h"
 #include "jquery-3.7.0.min.js.h"
 #include "dashboard.html.h"
+#include "mobile_portal.html.h"
 
 
 bool http_404_error(struct fs_file *file, int num_params, char *params[], char *values[]) {
@@ -90,8 +91,22 @@ bool http_dashboard(struct fs_file *file, int num_params, char *params[], char *
 }
 
 
+bool http_mobile_portal(struct fs_file *file, int num_params, char *params[], char *values[]) {
+    size_t len = strlen(html_mobile_portal_html);
+
+    file->data = html_mobile_portal_html;
+    file->len = len;
+    file->index = len;
+    file->flags = FS_FILE_FLAGS_HEADER_INCLUDED | FS_FILE_FLAGS_HEADER_PERSISTENT;
+
+    return true;
+}
+
+
+
 bool rest_endpoints_init() {
     rest_register_handler("/", http_dashboard);
+    rest_register_handler("/mobile", http_mobile_portal);
     rest_register_handler("/404", http_404_error);
     rest_register_handler("/rest/scale_weight", http_rest_scale_weight);
     rest_register_handler("/rest/scale_config", http_rest_scale_config);

diff --git a/tests/mobile_frontend_test.py b/tests/mobile_frontend_test.py
@@ -0,0 +1,2 @@
+import json
+from flask import Flask, request