Form

Bun Init

.gitignore

@@ -7,5 +7,8 @@ node_modules
 
 Images-c9dbce3b-Results
 Results
+slideshow/random-results
 
 sync.ffs_db
+
+NGINdeX.io

.vscode/dashkiosk.http

@@ -0,0 +1,24 @@
+@UniformResourceLocator = https://dashkiosk.phares.duckdns.org
+@Display = 5NRH58
+
+###
+
+GET {{UniformResourceLocator}}/api/display HTTP/1.1
+Accept: application/json
+
+###
+
+GET {{UniformResourceLocator}}/api/group HTTP/1.1
+Accept: application/json
+
+###
+
+PUT {{UniformResourceLocator}}/api/display/5NRH58/group/1 HTTP/1.1
+Accept: application/json
+
+###
+
+PUT {{UniformResourceLocator}}/api/display/5NRH58/group/2 HTTP/1.1
+Accept: application/json
+
+###

.vscode/dashkiosk.hurl

@@ -0,0 +1,38 @@
+###
+
+GET https://dashkiosk.phares.duckdns.org/api/display
+Accept: application/json
+
+HTTP 200
+[Asserts]
+header "Content-Type" == "application/json; charset=utf-8"
+
+###
+
+GET https://dashkiosk.phares.duckdns.org/api/group
+Accept: application/json
+
+HTTP 200
+[Asserts]
+header "Content-Type" == "application/json; charset=utf-8"
+
+###
+
+PUT https://dashkiosk.phares.duckdns.org/api/display/5NRH58/group/2
+Accept: application/json
+
+HTTP 200
+[Asserts]
+header "Content-Type" == "application/json; charset=utf-8"
+
+###
+
+PUT https://dashkiosk.phares.duckdns.org/api/display/5NRH58/group/1
+Accept: application/json
+
+HTTP 200
+[Asserts]
+header "Content-Type" == "application/json; charset=utf-8"
+jsonpath "$.group" == 1
+
+###

.vscode/launch.json

@@ -1,11 +1,31 @@
 {
-    "version": "0.2.0",
+  "version": "0.2.0",
-      "configurations": [
+  "configurations": [
-        {
+    {
-          "type": "node",
+      "type": "node",
-          "request": "launch",
+      "request": "launch",
-          "name": "Launch Current Opened File",
+      "name": "node Launch Current Opened File",
-          "program": "${file}"
+      "program": "${file}"
-        }
+    },
-      ]
+    {
- }
+      "type": "bun",
+      "internalConsoleOptions": "neverOpen",
+      "request": "launch",
+      "name": "Debug File",
+      "program": "${file}",
+      "cwd": "${workspaceFolder}",
+      "stopOnEntry": false,
+      "watchMode": false
+    },
+    {
+      "type": "bun",
+      "internalConsoleOptions": "neverOpen",
+      "request": "launch",
+      "name": "Run File",
+      "program": "${file}",
+      "cwd": "${workspaceFolder}",
+      "noDebug": true,
+      "watchMode": false
+    }
+  ]
+}

.vscode/mklink.md

@@ -16,3 +16,8 @@ ln -s /var/log/nginx /var/www/html/log-nginx
 cp -R /home/syncthing/Immich/upload/thumbs/fc9fd5a1-d1b3-4080-a21c-daf9b1c24593/ /var/www/html/Images-c9dbce3b-Results/thumbs
 ls -la /var/www/html/Images-c9dbce3b-Results
 ```
+
+```bash
+mklink /J "L:\Git\www\NGINdeX.io" "L:\Git\NGINdeX.io"
+mklink /J "L:\Git\www\Images-c9dbce3b-Results\thumbs" "D:\7-Question\Images-c9dbce3b-Results\thumbs"
+```

.vscode/settings.json

@@ -1,5 +1,14 @@
 {
+    "files.associations": {
+        "*.ffs_gui": "xml",
+        "*.hurl": "http",
+        "*.org": "ini",
+        "*.net": "ini",
+        "default": "ini"
+    },
     "cSpell.words": [
+        "gitea",
+        "Immich",
         "onlinepngtools"
     ],
     "files.watcherExclude": {

.vscode/tasks.json

@@ -1,18 +1,6 @@
 {
     "version": "2.0.0",
     "tasks": [
-        {
-            "label": "File-Folder-Helper AOT s Set metadata",
-            "type": "shell",
-            "command": "& L:/DevOps/Mesa_FI/File-Folder-Helper/bin/Release/net7.0/win-x64/publish/File-Folder-Helper.exe .kanbn",
-            "problemMatcher": []
-        },
-        {
-            "label": "File-Folder-Helper AOT s M tasks",
-            "type": "shell",
-            "command": "& L:/DevOps/Mesa_FI/File-Folder-Helper/bin/Release/net7.0/win-x64/publish/File-Folder-Helper.exe s M .kanbn/tasks",
-            "problemMatcher": []
-        },
         {
             "label": "Kanbn Console",
             "type": "npm",

bun.lock

@@ -0,0 +1,31 @@
+{
+  "lockfileVersion": 1,
+  "workspaces": {
+    "": {
+      "devDependencies": {
+        "@types/bun": "latest",
+        "prettier": "^3.0.0",
+      },
+      "peerDependencies": {
+        "typescript": "^5",
+      },
+    },
+  },
+  "packages": {
+    "@types/bun": ["@types/bun@1.2.19", "", { "dependencies": { "bun-types": "1.2.19" } }, "sha512-d9ZCmrH3CJ2uYKXQIUuZ/pUnTqIvLDS0SK7pFmbx8ma+ziH/FRMoAq5bYpRG7y+w1gl+HgyNZbtqgMq4W4e2Lg=="],
+
+    "@types/node": ["@types/node@24.1.0", "", { "dependencies": { "undici-types": "~7.8.0" } }, "sha512-ut5FthK5moxFKH2T1CUOC6ctR67rQRvvHdFLCD2Ql6KXmMuCrjsSsRI9UsLCm9M18BMwClv4pn327UvB7eeO1w=="],
+
+    "@types/react": ["@types/react@19.1.9", "", { "dependencies": { "csstype": "^3.0.2" } }, "sha512-WmdoynAX8Stew/36uTSVMcLJJ1KRh6L3IZRx1PZ7qJtBqT3dYTgyDTx8H1qoRghErydW7xw9mSJ3wS//tCRpFA=="],
+
+    "bun-types": ["bun-types@1.2.19", "", { "dependencies": { "@types/node": "*" }, "peerDependencies": { "@types/react": "^19" } }, "sha512-uAOTaZSPuYsWIXRpj7o56Let0g/wjihKCkeRqUBhlLVM/Bt+Fj9xTo+LhC1OV1XDaGkz4hNC80et5xgy+9KTHQ=="],
+
+    "csstype": ["csstype@3.1.3", "", {}, "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="],
+
+    "prettier": ["prettier@3.0.1", "", { "bin": "bin/prettier.cjs" }, "sha512-fcOWSnnpCrovBsmFZIGIy9UqK2FaI7Hqax+DIO0A9UxeVoY4iweyaFjS5TavZN97Hfehph0nhsZnjlVKzEQSrQ=="],
+
+    "typescript": ["typescript@5.9.2", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A=="],
+
+    "undici-types": ["undici-types@7.8.0", "", {}, "sha512-9UJ2xGDvQ43tYyVMpuHlsgApydB8ZKfVYTsLDhXkFL/6gfkp+U8xTGdh8pMJv1SpZna0zxG1DwsKZsreLbXBxw=="],
+  }
+}

index.html

@@ -2,19 +2,69 @@
 <html>
 
 <head>
-    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
+  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
-    <meta name="msapplication-tap-highlight" content="no">
+  <meta name="msapplication-tap-highlight" content="no">
-    <meta name="viewport"
+  <meta name="viewport"
-        content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
+    content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
-    <title>www</title>
+  <link rel="stylesheet" type="text/css" href="slideshow/css/index.css">
+  <title>www</title>
 </head>
 
 <body>
-    <div id="deviceReady">
+  <form action="slideshow/index.html" method="get">
-        <p><a href='slideshow/index.html?b=2024-05-12-14-48'>Slideshow</a></p>
+    <div id="slideshow-form">
-        <p><a href='slideshow/index.html?a=time&b=2024-05-12-14-48'>Slideshow (Time)</a></p>
+      <div>
-        <p><a href='slideshow/index.html?a=noSleep&b=2024-05-12-14-48'>Slideshow (No Sleep)</a></p>
+        <label for="view">View</label>
+        <input type="radio" id="view-0" name="view" value="normal" required checked>
+        <label for="view-0">Normal</label>
+        <input type="radio" id="view-1" name="view" value="last" required>
+        <label for="view-1">Last</label>
+        <input type="radio" id="view-2" name="view" value="list" required>
+        <label for="view-2">List</label>
+      </div>
+      <!--
+      <div>
+        <label for="fixed-date">Use</label>
+        <input type="checkbox" id="fixed-date-0" name="fixed-date" value="option1">
+        <label for="fixed-date-0">Fixed Date</label>
+      </div>
+      -->
+      <!--
+      <div>
+        <label for="override-time-interval">Use</label>
+        <input type="checkbox" id="override-time-interval-0" name="override-time-interval" value="option1">
+        <label for="override-time-interval-0">Override Time Interval</label>
+      </div>
+      -->
+      <div>
+        <label for="fixed-date">Date (MM-dd)</label>
+        <input type="text" id="fixed-date" name="fixed-date" placeholder="09-07" required minlength="5" maxlength="5">
+      </div>
+      <div>
+        <label for="image-interval">Image Interval</label>
+        <input type="number" id="image-interval" name="image-interval" placeholder="15" required min="1" max="59">
+      </div>
+      <div>
+        <label for="show">Show</label>
+        <input type="checkbox" id="show-0" name="show" value="time">
+        <label for="show-0">Time</label>
+      </div>
+      <input type="hidden" name="nocache" value="2025-09-20-13-32">
     </div>
+    <p>
+      <button type="submit">Submit</button>
+    </p>
+  </form>
+  <div id="deviceReady">
+    <p><h1><a href='slideshow/index.html?nocache=2025-09-20-13-32'>Slideshow</a></h1></p>
+    <p><h1><a href='slideshow/index.html?a=last&nocache=2025-09-20-13-32'>Slideshow (Last)</a></h1></p>
+    <p><h1><a href='slideshow/index.html?a=time&nocache=2025-09-20-13-32'>Slideshow (Time)</a></h1></p>
+    <p><h1><a href='slideshow/index.html?a=last-list&nocache=2025-09-20-13-32'>Slideshow (Last-List)</a></h1></p>
+    <p><h1><a href='slideshow/index.html?fixed-date=09-07&nocache=2025-09-20-13-32'>Slideshow (Fixed-Date [09-07])</a></h1></p>
+    <p><h1><a href='slideshow/index.html?image-interval=5123&nocache=2025-09-20-13-32'>Slideshow (Image-Interval [5s])</a></h1></p>
+    <p><h1><a href='slideshow/index.html?image-interval=9123&nocache=2025-09-20-13-32'>Slideshow (Image-Interval [9s])</a></h1></p>
+    <p><h1><a href='slideshow/index.html?image-interval=15123&nocache=2025-09-20-13-32'>Slideshow (Image-Interval [15s])</a></h1></p>
+  </div>
 </body>
 
 </html>

index.lighttpd.html

@@ -0,0 +1,52 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<title>Welcome page</title>
+<style type="text/css" media="screen">
+body { background: #e7e7e7; font-family: Verdana, sans-serif; font-size: 11pt; }
+#page { background: #ffffff; margin: 50px; border: 2px solid #c0c0c0; padding: 10px; }
+#header { background: #4b6983; border: 2px solid #7590ae; text-align: center; padding: 10px; color: #ffffff; }
+#header h1 { color: #ffffff; }
+#body { padding: 10px; }
+span.tt { font-family: monospace; }
+span.bold { font-weight: bold; }
+a:link { text-decoration: none; font-weight: bold; color: #C00; background: #ffc; }
+a:visited { text-decoration: none; font-weight: bold; color: #999; background: #ffc; }
+a:active { text-decoration: none; font-weight: bold; color: #F00; background: #FC0; }
+a:hover { text-decoration: none; color: #C00; background: #FC0; }
+</style>
+</head>
+<body>
+<div id="page">
+ <div id="header">
+ <h1> Placeholder page </h1>
+  The owner of this web site has not put up any web pages yet. Please come back later.
+ </div>
+ <div id="body">
+  <h2>You should replace this page with your own web pages as soon as possible.</h2>
+  Unless you changed its configuration, your new server is configured as follows:
+  <ul>
+   <li>Configuration files can be found in <span class="tt">/etc/lighttpd</span>. Please read  <span class="tt">/etc/lighttpd/conf-available/README</span> file.</li>
+   <li>The DocumentRoot, which is the directory under which all your HTML files should exist, is set to <span class="tt">/var/www/html</span>.</li>
+   <li>CGI scripts are looked for in <span class="tt">/usr/lib/cgi-bin</span>, which is where Ubuntu packages will place their scripts. You can enable cgi module by using command <span class="bold tt">&quot;lighty-enable-mod cgi&quot;</span>.</li>
+   <li>Log files are placed in <span class="tt">/var/log/lighttpd</span>, and will be rotated weekly. The frequency of rotation can be easily changed by editing <span class="tt">/etc/logrotate.d/lighttpd</span>.</li>
+   <li>The default directory index is <span class="tt">index.html</span>, meaning that requests for a directory <span class="tt">/foo/bar/</span> will give the contents of the file /var/www/html/foo/bar/index.html if it exists (assuming that <span class="tt">/var/www/html</span> is your DocumentRoot).</li>
+   <li>You can enable user directories by using command <span class="bold tt">&quot;lighty-enable-mod userdir&quot;</span></li>
+  </ul>
+  <h2>About this page</h2>
+  <p>
+   This is a placeholder page installed by the Ubuntu release of the <a href="http://packages.ubuntu.com/lighttpd">Lighttpd server package.</a>
+  </p>
+  <p>
+   This computer has installed the Ubuntu operating system, but it has nothing to do with the Ubuntu Project. Please do not contact the Ubuntu Project about it.
+  </p>
+  <p>
+   If you find a bug in this Lighttpd package, or in Lighttpd itself, please file a bug report on it. Instructions on doing this, and the list of known bugs of this package, can be found in the 
+   <a href="https://bugs.launchpad.net/ubuntu/+source/lighttpd">Ubuntu Bug Tracking System.</a>
+  </p>
+ </div>
+</div>
+<!-- s:853e9a42efca88ae0dd1a83aeb215047 -->
+</body>
+</html>

package-lock.json

@@ -1,27 +0,0 @@
-{
-  "name": "www",
-  "lockfileVersion": 3,
-  "requires": true,
-  "packages": {
-    "": {
-      "devDependencies": {
-        "prettier": "^3.0.0"
-      }
-    },
-    "node_modules/prettier": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.0.1.tgz",
-      "integrity": "sha512-fcOWSnnpCrovBsmFZIGIy9UqK2FaI7Hqax+DIO0A9UxeVoY4iweyaFjS5TavZN97Hfehph0nhsZnjlVKzEQSrQ==",
-      "dev": true,
-      "bin": {
-        "prettier": "bin/prettier.cjs"
-      },
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/prettier/prettier?sponsor=1"
-      }
-    }
-  }
-}

package.json

@@ -1,12 +1,20 @@
 {
+  "devDependencies": {
+    "@types/bun": "latest",
+    "prettier": "^3.0.0"
+  },
+  "module": "index.ts",
+  "name": "www",
+  "peerDependencies": {
+    "typescript": "^5"
+  },
+  "private": true,
   "scripts": {
-    "prettier.check": "prettier . --check",
+    "garbage-collect": "git gc",
-    "prettier.write": "prettier . --write",
     "kanbn.board": "kanbn board",
     "kanbn.board.json": "kanbn board -j > .kanbn/board.json",
-    "garbage-collect": "git gc"
+    "prettier.check": "prettier . --check",
+    "prettier.write": "prettier . --write"
   },
-  "devDependencies": {
+  "type": "module"
-    "prettier": "^3.0.0"
+}
-  }
-}

slideshow/css/index.css

@@ -2,6 +2,11 @@ body {
   background-color: #191717;
 }
 
+#slideshow-form div {
+  color: white;
+  font-size: large;
+}
+
 #deviceReady div {
   top: 0;
   left: 0;
@@ -24,4 +29,4 @@ body {
   opacity: 1;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=1);
-}
+}

slideshow/index.html

@@ -2,26 +2,26 @@
 <html>
 
 <head>
-    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
+  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
-    <meta name="msapplication-tap-highlight" content="no">
+  <meta name="msapplication-tap-highlight" content="no">
-    <meta name="viewport"
+  <meta name="viewport"
-        content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
+    content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
-    <link rel="stylesheet" href="css/bootstrap.min.css" media="screen">
+  <link rel="stylesheet" href="css/bootstrap.min.css" media="screen">
-    <link rel="stylesheet" href="css/bootswatch/slate/bootstrap.min.css">
+  <link rel="stylesheet" href="css/bootswatch/slate/bootstrap.min.css">
-    <link rel="stylesheet" type="text/css" href="css/index.css">
+  <link rel="stylesheet" type="text/css" href="css/index.css">
-    <title>Slideshow</title>
+  <title>Slideshow</title>
 </head>
 
 <body>
-    <div id="deviceReady">
+  <div id="deviceReady">
-        <div class="opaque"></div>
+    <div class="opaque"></div>
-        <div class=""></div>
+    <div class=""></div>
-        <div class=""></div>
+    <div class=""></div>
-    </div>
+  </div>
-    <script src="scripts/jquery-1.9.1.min.js"></script>
+  <script src="scripts/jquery-1.9.1.min.js"></script>
-    <script src="scripts/bootstrap.min.js"></script>
+  <script src="scripts/bootstrap.min.js"></script>
-    <script src="scripts/jquery.bgswitcher.js"></script>
+  <script src="scripts/jquery.bgswitcher.js"></script>
-    <script type="text/javascript" src="scripts/index.js?nocache=2024-05-12-14-48"></script>
+  <script type="text/javascript" src="scripts/index.js?nocache=2025-09-20-13-32"></script>
 </body>
 
 </html>

slideshow/index.json

@@ -1,9 +1,10 @@
 {
-    "ImageInterval": 9123,
+    "DataDirectory": "random-results",
-    "JsonInterval": 59000,
+    "ImageInterval": 15123,
+    "ImageIntervalX": 9123,
+    "ImageIntervalXX": 21234,
     "ImageZero": "images/1x1_00000000.png",
-    "DataDirectoryX": "../.random",
+    "JsonInterval": 59000,
-    "DataDirectory": "../Images-c9dbce3b-Results/F)Random/c9dbce3b/[]",
+    "ListLength": 50,
-    "RootX": "../.original",
+    "UserId": "c0c8a7fb-5dff-4708-b921-c54d9a8b1ef8"
-    "Root": "../Images-c9dbce3b-Results/thumbs"
 }

slideshow/scripts/index.js

@@ -1,68 +1,66 @@
 (function () {
-    "use strict";
+    'use strict';
 
-    var _Root;
+    var _UserId;
-    var _RootAlt;
     var _ImageZero;
+    var _ListLength;
     var _DataDirectory;
+    var _UniformResourceLocator;
 
     var _Pause = 0;
     var _Images = [];
-    var _JsonInterval;
-    var _ImageInterval;
     var _ImageIndex = 0;
     var _OpaqueIndex = 0;
-    var _DeviceReadyDiv = $('#deviceReady div');
+    var _hasLast = false;
+    var _hasList = false;
+    var _hasTime = false;
+    var _TickLoadList = null;
+    var _DeviceReadyDiv = typeof document == 'undefined' ? undefined : $('#deviceReady div');
+    var _TimeElement = typeof document == 'undefined' ? undefined : document.createElement('time');
 
-    var time = document.createElement('time');
+    function loadData(mm, dd) {
-    time.setAttribute('style', 'position: fixed;');
+        const url = _UniformResourceLocator + '/slideshow/' + _DataDirectory + '/' + mm + '-' + dd + '.json?nocache=2025-09-20-13-32';
-
-    function loadData() {
-        var currentDate = new Date();
-        var mm = (new Date().getMonth() + 1).toString().padStart(2, '0');
-        var dd = currentDate.getDate().toString().padStart(2, '0');
-        if (window.location.href.indexOf('time') > 0) {
-            time.innerText = mm + '-' + dd + '.json';
-        }
-        var url = _DataDirectory + '/' + mm + '-' + dd + '.json?nocache=2024-05-12-14-48';
         console.log(url);
-        $.getJSON(url, function (data) {
+        fetch(url, { nocache: new Date().getTime() })
-            console.log('success', data.length);
+            .then((res) => res.text())
-            _Images = [];
+            .then((text) => {
-            $.each(data, function (_, value) {
+                console.log(url + ' downloaded successfully');
-                _Images.push(value.replaceAll("\\", "/"));
+                const data = JSON.parse(text);
-            });
+                console.log('success', data.length);
-        })
+                _Images = [];
-            .done(function () { console.log('second success'); })
+                for (let i = 0; i < data.length; i++) {
-            .fail(function (er) { console.log('error', er); })
+                    _Images.push(_UniformResourceLocator + '/slideshow/' + _UserId + data[i]);
-            .always(function () { console.log('complete'); });
+                }
+            })
+            .catch((e) => console.error(e));
+        if (_TimeElement != undefined && _hasTime) {
+            _TimeElement.innerText = _UniformResourceLocator + ' ' + mm + '-' + dd + '.json';
+        }
     }
 
     function onTickJSON() {
-        var currentDate = new Date();
+        const currentDate = new Date();
-        var currentHours = currentDate.getHours();
+        const currentHours = currentDate.getHours();
         if (currentHours === 0) {
-            var currentMinutes = currentDate.getMinutes();
+            const currentMinutes = currentDate.getMinutes();
             if (currentMinutes === 0) {
-                loadData();
+                const dd = currentDate.getDate().toString().padStart(2, '0');
+                const mm = (new Date().getMonth() + 1).toString().padStart(2, '0');
+                loadData(mm, dd);
             }
         }
     }
 
     function GetBackgroundImage() {
-        var result = "background-image: url('" + _Root + _Images[_ImageIndex] + '?index=' + _ImageIndex + "'), url('";
+        let result = "background-image: url('" + _Images[_ImageIndex] + '?index=' + _ImageIndex + "'), url('" + _ImageZero + "');";
-        if (_RootAlt !== null) {
-            result = result + _RootAlt + _Images[_ImageIndex] + '?index=' + _ImageIndex + "'), url('";
-        }
-        result = result + _ImageZero + "');";
         return result;
     }
 
     function onTickImage() {
         if (_Images.length > 0 && _Pause === 0) {
-            var currentDate = new Date();
+            const currentDate = new Date();
-            var currentHours = currentDate.getHours();
+            const currentHours = currentDate.getHours();
-            if (currentHours >= 22 || currentHours <= 6) {
+            if (currentHours >= 23 || currentHours <= 6) {
                 _DeviceReadyDiv.attr('style', 'background-color: #191717;');
             }
             else {
@@ -71,7 +69,7 @@
                 if (_ImageIndex >= _Images.length) {
                     _ImageIndex = 0;
                 }
-                var loadIndex;
+                let loadIndex;
                 switch (_OpaqueIndex) {
                     case 0:
                         loadIndex = 2;
@@ -87,13 +85,13 @@
                         break;
                     default:
                 }
-                var backgroundImage = GetBackgroundImage();
+                const backgroundImage = GetBackgroundImage();
                 _DeviceReadyDiv.eq(loadIndex).attr('style', backgroundImage);
                 _DeviceReadyDiv.eq(_OpaqueIndex).addClass('opaque');
-                if (window.location.href.indexOf('time') > 0) {
+                if (_TimeElement != undefined && _hasTime) {
-                    var mm = (new Date().getMonth() + 1).toString().padStart(2, '0');
+                    const mm = (new Date().getMonth() + 1).toString().padStart(2, '0');
-                    var dd = currentDate.getDate().toString().padStart(2, '0');
+                    const dd = currentDate.getDate().toString().padStart(2, '0');
-                    time.innerText = mm + '-' + dd + '.json' + ' ' + _Images[_ImageIndex];
+                    _TimeElement.innerText = _UniformResourceLocator + ' ' + mm + '-' + dd + '.json' + ' ' + _Images[_ImageIndex];
                 }
             }
         }
@@ -101,7 +99,7 @@
 
     function pause() {
         _Pause = 1;
-        $('#deviceReady').innerHTML = '<div></div>';
+        _DeviceReadyDiv.innerHTML = '<div></div>';
     }
 
     function goBack() {
@@ -112,7 +110,7 @@
         if (_ImageIndex === 0) {
             _ImageIndex = _Images.length - 1;
         }
-        var backgroundImage = GetBackgroundImage();
+        const backgroundImage = GetBackgroundImage();
         _DeviceReadyDiv.attr('style', backgroundImage);
     }
 
@@ -124,12 +122,12 @@
         if (_ImageIndex >= _Images.length) {
             _ImageIndex = 0;
         }
-        var backgroundImage = GetBackgroundImage();
+        const backgroundImage = GetBackgroundImage();
         _DeviceReadyDiv.attr('style', backgroundImage);
     }
 
     function getInput(e) {
-        var which = e.which;
+        const which = e.which;
         switch (which) {
             case 13: //Okay
                 if (_Pause === 0) {
@@ -137,7 +135,7 @@
                 }
                 else {
                     _Pause = 0;
-                    $('#deviceReady').innerHTML = '<div class="opaque"></div><div></div><div></div>';
+                    _DeviceReadyDiv.innerHTML = '<div class="opaque"></div><div></div><div></div>';
                 }
                 break;
             case 37: //Left
@@ -162,59 +160,122 @@
         }
     }
 
-    if (window.location.href.indexOf('time') > 0) {
+    function getUniformResourceLocator() {
-        document.body.appendChild(time);
+        let result;
+        if (typeof window == 'undefined') {
+            result = 'https://slideshow.phares.duckdns.org';
+        }
+        else {
+            result = window.location.protocol + '//' + window.location.host;
+        }
+        return result;
     }
 
-    if (window.location.href.indexOf('last') > 0) {
+    function loadPage() {
-        var url = '../log-nginx/access.log?nocache=2024-05-12-14-48';
+        const uniformResourceLocator = getUniformResourceLocator();
-        $.get(url, function (data) {
+        _hasLast = typeof window == 'undefined' ? false : window.location.href.indexOf('last') > 0;
-            var arrayOfUrl = [];
+        _hasList = typeof window == 'undefined' ? false : window.location.href.indexOf('list') > 0;
-            var arrayOfIndex = [];
+        _hasTime = typeof window == 'undefined' ? false : window.location.href.indexOf('time') > 0;
-            var arrayOfLines = data.match(/[^\r\n]+/g);
+        const fixedDateSegments = typeof window == 'undefined' ? [] : window.location.href.split('fixed-date=');
-            for (var i = arrayOfLines.length - 1; i >= 0; i--) {
+        const imageIntervalSegments = typeof window == 'undefined' ? [] : window.location.href.split('image-interval=');
-                arrayOfUrl = arrayOfLines[i].split('?index=');
+        const url = uniformResourceLocator + '/slideshow/index.json?nocache=2025-09-20-13-32';
-                if (arrayOfUrl.length !== 2)
-                    continue;
-                arrayOfIndex = arrayOfUrl[1].split(' ');
-                if (arrayOfIndex.length < 2)
-                    continue;
-                var index = parseInt(arrayOfIndex[0]);
-                console.log('index', index);
-                _ImageIndex = index;
-                break;
-            }
-        })
-            .fail(function (err) {
-                console.error(err);
-            });
-    }
-
-    $(document).ready(function () {
-
-        console.log('onDeviceReady');
-
-        document.addEventListener('keyup', getInput, false);
-
-        var url = '../slideshow/index.json?nocache=2024-05-12-14-48';
         console.log(url);
-        var _ = $.getJSON(url, function (data) {
+        fetch(url, { nocache: new Date().getTime() })
-            console.log(url + ' downloaded successfully');
+            .then((res) => res.text())
-            _RootAlt = null;
+            .then((text) => {
-            _Root = data.Root;
+                console.log(url + ' downloaded successfully');
-            _ImageZero = data.ImageZero;
+                const data = JSON.parse(text);
-            _JsonInterval = data.JsonInterval;
+                _UserId = data.UserId;
-            _ImageInterval = data.ImageInterval;
+                _ListLength = data.ListLength;
-            _DataDirectory = data.DataDirectory;
+                _DataDirectory = data.DataDirectory;
-            console.log(url + ' used successfully');
+                _UniformResourceLocator = uniformResourceLocator;
-        })
+                _ImageZero = uniformResourceLocator + '/slideshow/' + data.ImageZero;
-            .done(function () {
+                console.log(url + ' used successfully');
-                loadData();
+                if (_TimeElement != undefined && _hasTime) {
-                _ = setInterval(onTickJSON, _JsonInterval);
+                    _TimeElement.setAttribute('style', 'position: fixed;');
-                _ = setInterval(onTickImage, _ImageInterval);
+                    document.body.appendChild(_TimeElement);
+                }
+                if (_hasLast) {
+                    loadLog();
+                }
+                if (fixedDateSegments.length === 2) {
+                    const fixedDateSegmentsB = fixedDateSegments[1].split('&')[0];
+                    console.log('fixed-date=' + fixedDateSegmentsB);
+                    const fixedDateSegmentsC = fixedDateSegmentsB.split('-');
+                    loadData(fixedDateSegmentsC[0], fixedDateSegmentsC[1]);
+                }
+                else {
+                    const currentDate = new Date();
+                    const dd = currentDate.getDate().toString().padStart(2, '0');
+                    const mm = (new Date().getMonth() + 1).toString().padStart(2, '0');
+                    loadData(mm, dd);
+                }
+                if (!_hasList && _DeviceReadyDiv != undefined) {
+                    setInterval(onTickJSON, data.JsonInterval);
+                    if (imageIntervalSegments.length === 1) {
+                        setInterval(onTickImage, data.ImageInterval);
+                    }
+                    else {
+                        const imageInterval = imageIntervalSegments[1].split('&')[0] + 123;
+                        console.log('image-interval=' + imageInterval);
+                        setInterval(onTickImage, imageInterval);
+                    }
+                }
+                if (_hasList && _hasLast) {
+                    _TickLoadList = setInterval(onTickLoadList, 500);
+                }
             })
-            .fail(function (er) { console.log('error', er); })
+            .catch((e) => console.error(e));
-            .always(function () { console.log('complete'); });
+    }
-    });
+
+    function onTickLoadList() {
+        if (_ImageIndex > 0 && _Images.length > 0) {
+            clearInterval(_TickLoadList);
+            let innerHTML = '';
+            for (let i = 0; i < _ListLength; i++) {
+                innerHTML += '<p><a href="' + _Images[_ImageIndex] + '"><img style="max-width: 330px" src="' + _Images[_ImageIndex] + '" title="' + _ImageIndex + '" alt="' + _Images[_ImageIndex] + '"></a></p>\n';
+                _ImageIndex -= 1;
+                if (_ImageIndex < 0) {
+                    _ImageIndex = _Images.length - 1;
+                }
+            }
+            document.getElementById('deviceReady').innerHTML = innerHTML;
+        }
+    }
+
+    function loadLog() {
+        const url = _UniformResourceLocator + '/log-nginx/access.log?nocache=2025-09-20-13-32';
+        fetch(url, { nocache: new Date().getTime() })
+            .then((res) => res.text())
+            .then((text) => {
+                console.log(url + ' downloaded successfully');
+                let arrayOfUrl = [];
+                let arrayOfIndex = [];
+                const arrayOfLines = text.match(/[^\r\n]+/g);
+                for (let i = arrayOfLines.length - 1; i >= 0; i--) {
+                    arrayOfUrl = arrayOfLines[i].split('?index=');
+                    if (arrayOfUrl.length !== 2)
+                        continue;
+                    arrayOfIndex = arrayOfUrl[1].split(' ');
+                    if (arrayOfIndex.length < 2)
+                        continue;
+                    let index = parseInt(arrayOfIndex[0]);
+                    console.log('index', index);
+                    _ImageIndex = index;
+                    break;
+                }
+            })
+            .catch((e) => console.error(e));
+    }
+
+    if (typeof document == 'undefined') {
+        loadPage();
+    } else {
+        $(document).ready(function () {
+            console.log('onDeviceReady');
+            document.addEventListener('keyup', getInput, false);
+            loadPage();
+        });
+    }
 
 })();

tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    // Environment setup & latest features
+    "lib": ["ESNext"],
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleDetection": "force",
+    "jsx": "react-jsx",
+    "allowJs": true,
+
+    // Bundler mode
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+
+    // Best practices
+    "strict": true,
+    "skipLibCheck": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedIndexedAccess": true,
+
+    // Some stricter flags (disabled by default)
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noPropertyAccessFromIndexSignature": false
+  }
+}