From a407fafb65d4297071077fbab19af3325a53603e Mon Sep 17 00:00:00 2001
From: "Denis V. Dedkov" <denis.v.dedkov@gmail.com>
Date: Fri, 24 Jan 2025 09:43:52 +0200
Subject: [PATCH] Initial commit

---
 Dockerfile          |   6 ++
 README.md           |  29 +++++++++
 src/favicon.ico     | Bin 0 -> 41662 bytes
 src/images/lamp.png | Bin 0 -> 3217 bytes
 src/images/off.png  | Bin 0 -> 1752 bytes
 src/index.html      | 147 ++++++++++++++++++++++++++++++++++++++++++++
 6 files changed, 182 insertions(+)
 create mode 100644 Dockerfile
 create mode 100644 README.md
 create mode 100644 src/favicon.ico
 create mode 100644 src/images/lamp.png
 create mode 100644 src/images/off.png
 create mode 100644 src/index.html

diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..6ed56cd
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,6 @@
+FROM docker.angie.software/angie:minimal
+
+WORKDIR /usr/share/angie/html
+
+COPY src/. .
+
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..57dddb0
--- /dev/null
+++ b/README.md
@@ -0,0 +1,29 @@
+# noolite-client
+Simple web UI for lights control
+
+Is the frontend for application [noolite-srv](https://gogs.dended.ru/ded/noolite-srv.git)
+
+# Building
+Just build docker image:
+
+```
+docker build . -t noolite-client
+```
+Or build crossplatform images:
+```
+docker buildx build --platform linux/amd64,linux/arm64 -t <your_tag> --push .
+```
+
+# Installation
+Install from docker registry:
+
+```
+docker pull docker.dended.ru/noolite-client
+```
+
+# Using
+Run docker container:
+
+```
+docker run -p 8000:80 -v -d --restart unless-stopped noolite-srv
+```
diff --git a/src/favicon.ico b/src/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..7f39d45942977b0c606821973b1b508ad679dddf
GIT binary patch
literal 41662
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

literal 0
HcmV?d00001

diff --git a/src/images/lamp.png b/src/images/lamp.png
new file mode 100644
index 0000000000000000000000000000000000000000..7abace3f55bb81a7ffae0515ca0949894a6f2981
GIT binary patch
literal 3217
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
D>pt)G

literal 0
HcmV?d00001

diff --git a/src/images/off.png b/src/images/off.png
new file mode 100644
index 0000000000000000000000000000000000000000..51c605dadbe01ec79da7f4f58043a4a5551c7c38
GIT binary patch
literal 1752
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

literal 0
HcmV?d00001

diff --git a/src/index.html b/src/index.html
new file mode 100644
index 0000000..2322b7f
--- /dev/null
+++ b/src/index.html
@@ -0,0 +1,147 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>nooLight</title>
+    <style>
+        html, body {
+            margin: 0;
+            padding: 0;
+            height: 100%;
+            display: flex;
+            flex-direction: row;
+	    justify-content: center;
+        }
+
+        .list-view {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+	    max-width: 500px;
+	    min-width: 400px;
+            gap: 5px;
+            overflow-y: auto;
+            padding: 5px;
+        }
+
+        .item {
+            display: flex;
+            flex-direction: column;
+            gap: 5px;
+        }
+
+        .button {
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+            background-color: #f0f0f0;
+            border: 1px solid #ccc;
+	    border-radius: 5px;
+	    user-select: none;
+            height: 4vh;
+        }
+
+        .button img {
+            margin-left: 10px;
+            height: 60%;
+        }
+
+        .button span {
+            flex-grow: 1;
+            text-align: center;
+        }
+
+        .row {
+            display: flex;
+            gap: 5px;
+        }
+
+        .lamp-button {
+            flex: 1;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+            text-align: center;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+	    cursor: pointer;
+	    user-select: none;
+            height: 10vh; /* 10% от высоты экрана */
+
+	    &:active {
+                background-color: #f0f0f0;
+	    }
+        }
+
+        .lamp-button img {
+            height: 50%; /* 50% высоты кнопки */
+        }
+
+        .lamp-button span {
+            margin-top: 5px;
+        }
+    </style>
+</head>
+<body>
+    <div class="list-view" id="listView">
+        <!-- Items will be dynamically added here -->
+    </div>
+
+    <script>
+       fetch('static/channels.js').
+		    then( (response) => response.json() ).
+		    then( (data) => appendData(data['groups']) ).
+		    catch( (err) => console.log('error: ' + err) );
+
+        function switchLamp(channelId) {
+            fetch('noolite/switch/' + channelId).
+				    catch( (err) => console.log('error: ' + err));
+        }
+
+        function appendData(lightsModel) {
+            const listView = document.getElementById("listView");
+
+            lightsModel.forEach(group => {
+                const itemContainer = document.createElement("div");
+                itemContainer.classList.add("item");
+
+                if (group.groupName) {
+                    const button = document.createElement("div");
+                    button.classList.add("button");
+                    const img = document.createElement("img");
+                    img.src = "/images/off.png";
+                    const span = document.createElement("span");
+                    span.textContent = group.groupName;
+                    button.appendChild(img);
+                    button.appendChild(span);
+                    itemContainer.appendChild(button);
+                }
+
+                const row = document.createElement("div");
+                row.classList.add("row");
+
+                group.channels.forEach(channel => {
+                    const lampButton = document.createElement("div");
+                    lampButton.classList.add("lamp-button");
+
+                    const img = document.createElement("img");
+                    img.src = "/images/lamp.png";
+                    const span = document.createElement("span");
+                    span.textContent = channel.name;
+
+                    lampButton.appendChild(img);
+                    lampButton.appendChild(span);
+
+                    lampButton.addEventListener("click", () => switchLamp(channel.id) )
+                    row.appendChild(lampButton);
+                });
+
+                itemContainer.appendChild(row);
+                listView.appendChild(itemContainer);
+            });
+        }
+    </script>
+</body>
+</html>