style

main.js

@@ -20,6 +20,8 @@ function App() {
 App.prototype.init = async function() {
     [
         "./router/mdi.js",
+        "./router/bootstrap.js",
+
         "./router/api.js",
 
         "./router/index.js"

package.json

@@ -14,6 +14,8 @@
   "license": "ISC",
   "dependencies": {
     "@mdi/font": "^7.3.67",
+    "bootstrap": "^5.3.2",
+    "bootstrap-icons": "^1.11.2",
     "crypto": "^1.0.1",
     "geokit": "^1.1.0",
     "imagemagick": "^0.1.3",

router/bootstrap.js

@@ -0,0 +1,11 @@
+
+module.exports = { register: app => {
+    app.routerUtils.staticGet(app, "/public/bootstrap/bootstrap.min.js", './node_modules/bootstrap/dist/js/bootstrap.bundle.min.js');
+    app.routerUtils.staticGet(app, "/public/bootstrap/bootstrap.min.js.map", './node_modules/bootstrap/dist/js/bootstrap.bundle.min.js.map');
+    app.routerUtils.staticGet(app, "/public/bootstrap/bootstrap.min.css", './node_modules/bootstrap/dist/css/bootstrap.min.css');
+    app.routerUtils.staticGet(app, "/public/bootstrap/bootstrap.min.css.map", './node_modules/bootstrap/dist/css/bootstrap.min.css.map');
+    app.routerUtils.staticGet(app, "/public/bootstrap/bootstrap-icons.min.css", './node_modules/bootstrap-icons/font/bootstrap-icons.min.css');
+    app.routerUtils.staticGet(app, "/public/bootstrap/fonts/bootstrap-icons.woff", './node_modules/bootstrap-icons/font/fonts/bootstrap-icons.woff');
+    app.routerUtils.staticGet(app, "/public/bootstrap/fonts/bootstrap-icons.woff2", './node_modules/bootstrap-icons/font/fonts/bootstrap-icons.woff2');
+}};
+

src/config.js

@@ -38,7 +38,6 @@ let configEntries = {};
         ldapUrl: { value: "", valid: validNotEmptyString },
         ldapBindDN: { value: "", valid: validNotEmptyString },
         ldapBindPwd: { value: "", valid: validNotEmptyString },
-        ldapFilter: { value: "", valid: validNotEmptyString },
         ldapBase: { value: "", valid: validNotEmptyString },
         database: { value: "", valid: validNotEmptyString }
     };
@@ -50,6 +49,8 @@ let configEntries = {};
         if (validNotEmptyString(i))
             configEntries.photoLibraries.push(i);
 
+    configEntries.ldapFilters = [];
+
     console.log(configEntries);
     if (hasErrors)
         throw "Errors found while parsing configuration";

static/public/js/common.js

@@ -0,0 +1,23 @@
+
+function RebuildAccess() {
+    LoadingTasks.push(() => {
+        $.get("/api/access/list", data => {
+            console.log(data);
+        });
+    });
+}
+
+function ReadMediaList() {
+    LoadingTasks.push(() => {
+        $.get("/api/media/list", data => {
+            MediaStorage.Instance.pushAll(data.data.map(i => new Media(i)));
+            console.log(MediaStorage.Instance);
+        });
+    });
+}
+
+$(() => {
+    RebuildAccess();
+    ReadMediaList();
+});
+

static/public/js/medias.js

@@ -0,0 +1,26 @@
+
+function MediaStorage()
+{
+    this.medias = [];
+    this.oldest = null;
+    this.newest = null;
+}
+
+MediaStorage.prototype.pushAll = function(arr) {
+    for (let i of arr) {
+        this.medias.push(i);
+        this.oldest = !this.oldest || this.oldest.date.getTime() < i.date.getTime() ? i : this.oldest;
+        this.newest = !this.newest || this.newest.date.getTime() > i.date.getTime() ? i : this.newest;
+    }
+}
+
+MediaStorage.Instance = new MediaStorage();
+
+function Media(data) {
+    this.date = new Date(data.date);
+    this.md5sum = data.md5sum;
+    this.path = data.path;
+    this.meta = data.meta || {};
+    this.tags = data.tags || [];
+    this.thumbnail = data.thumbnail;
+}

static/public/js/taskQueue.js

@@ -0,0 +1,31 @@
+
+let LoadingTasks = (() => {
+    let activeTask = null;
+    let tasks = [];
+    let runNextTask;
+
+    runNextTask = function() {
+        if (activeTask || tasks.length === 0)
+            return;
+        activeTask = (tasks.shift());
+        let taskResult = activeTask.fnc();
+        if (!(taskResult instanceof Promise))
+            taskResult = Promise.resolve(activeTask);
+        taskResult.then(() => {
+            let ok = activeTask.ok;
+            activeTask = null;
+            ok(taskResult.result);
+            runNextTask();
+        });
+    };
+
+    return {
+        push: async function(task) {
+            return new Promise((ok, ko) => {
+                tasks.push({ fnc: task, ok: ok, ko: ko });
+                runNextTask();
+            });
+        }
+    };
+})();
+

templates/footer.js

@@ -1,6 +1,9 @@
 
 module.exports = `
 <script src="/public/js/jquery-3.6.1.min.js"></script>
+<script src="/public/bootstrap/bootstrap.min.js"></script>
+<script src="/public/js/taskQueue.js"></script>
+<script src="/public/js/medias.js"></script>
 <script src="/public/js/common.js"></script>
 </body></html>`;
 

templates/header.js

@@ -4,6 +4,8 @@ module.exports = `
 <html>
 <head>
 <link type="text/css" rel="stylesheet" href="/public/mdi/materialdesignicons.min.css"/>
+<link type="text/css" rel="stylesheet" href="/public/bootstrap/bootstrap.min.css"/>
+<link type="text/css" rel="stylesheet" href="/public/bootstrap/bootstrap-icons.min.css"/>
 <link type="text/css" rel="stylesheet" href="/public/css/style.css"/>
 </head>
 `;

templates/menu.js

@@ -1,7 +1,31 @@
 
 module.exports = `
 <body>
-<menu>
-</menu>
+    <nav class="navbar navbar-expand-lg bg-body-tertiary">
+        <div class="container-fluid" id="navbarSupportedContent">
+            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                <li class="nav-item">
+                    <a class="nav-link active" href="#">Home</a>
+                </li>
+            </ul>
+            <ul class="navbar-nav mb-2 mb-lg-0">
+                <form class="d-flex" role="search">
+                    <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
+                    <button class="btn btn-outline-success" type="submit">Search</button>
+                </form>
+                <li class="nav-item dropdown">
+                    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                        <i class="bi bi-person-circle"></i>
+                    </a>
+                    <ul class="dropdown-menu" id="accessListMenu">
+                        <li><a class="dropdown-item" href="#">Action</a></li>
+                        <li><a class="dropdown-item" href="#">Another action</a></li>
+                        <li><hr class="dropdown-divider"></li>
+                        <li><a class="dropdown-item" href="#">Something else here</a></li>
+                    </ul>
+                </li>
+            </ul>
+        </div>
+    </nav>
 `;