Fixes #18 leaflet minimap

main.js

@@ -19,11 +19,8 @@ function App() {
 
 App.prototype.init = async function() {
     [
-        "./router/mdi.js",
         "./router/bootstrap.js",
-
         "./router/api.js",
-
         "./router/index.js"
     ].forEach(i => require(i).register(this));
 

package.json

@@ -25,6 +25,7 @@
     "imagemagick": "^0.1.3",
     "ldap": "^0.7.1",
     "ldapjs": "^3.0.4",
+    "leaflet": "^1.9.4",
     "mime-types": "^2.1.35",
     "node-simple-router": "^0.10.2",
     "offline-geocoder": "^1.0.0",

router/bootstrap.js

@@ -9,5 +9,30 @@ module.exports = { register: app => {
     app.routerUtils.staticGet(app, "/public/bootstrap/fonts/bootstrap-icons.woff2", './node_modules/bootstrap-icons/font/fonts/bootstrap-icons.woff2');
     app.routerUtils.staticGet(app, "/public/bootstrap/bootstrap-slider.min.js", './node_modules/bootstrap-slider/dist/bootstrap-slider.min.js');
     app.routerUtils.staticGet(app, "/public/bootstrap/bootstrap-slider.min.css", './node_modules/bootstrap-slider/dist/css/bootstrap-slider.min.css');
+
+    app.routerUtils.staticGet(app, "/public/js/BsMultiSelect.min.js", './node_modules/@dashboardcode/bsmultiselect/dist/js/BsMultiSelect.min.js');
+    app.routerUtils.staticGet(app, "/public/js/BsMultiSelect.min.js.map", './node_modules/@dashboardcode/bsmultiselect/dist/js/BsMultiSelect.min.js.map');
+    app.routerUtils.staticGet(app, "/public/css/BsMultiSelect.min.css", './node_modules/@dashboardcode/bsmultiselect/dist/css/BsMultiSelect.min.css');
+    app.routerUtils.staticGet(app, "/public/css/BsMultiSelect.min.css.map", './node_modules/@dashboardcode/bsmultiselect/dist/css/BsMultiSelect.min.css.map');
+    app.routerUtils.staticGet(app, "/public/js/popper.min.js", './node_modules/@popperjs/core/dist/umd/popper.min.js');
+    app.routerUtils.staticGet(app, "/public/js/popper.min.js.map", './node_modules/@popperjs/core/dist/umd/popper.min.js.map');
+
+    app.routerUtils.staticGet(app, "/public/mdi/materialdesignicons.css", './node_modules/@mdi/font/css/materialdesignicons.css');
+    app.routerUtils.staticGet(app, "/public/mdi/materialdesignicons.css.map", './node_modules/@mdi/font/css/materialdesignicons.css.map');
+    app.routerUtils.staticGet(app, "/public/mdi/materialdesignicons.min.css", './node_modules/@mdi/font/css/materialdesignicons.min.css');
+    app.routerUtils.staticGet(app, "/public/mdi/materialdesignicons.min.css.map", './node_modules/@mdi/font/css/materialdesignicons.min.css.map');
+    app.routerUtils.staticGet(app, "/public/scss/materialdesignicons.scss", './node_modules/@mdi/font/scss/materialdesignicons.scss');
+    app.routerUtils.staticGet(app, "/public/fonts/materialdesignicons-webfont.eot", './node_modules/@mdi/font/fonts/materialdesignicons-webfont.eot');
+    app.routerUtils.staticGet(app, "/public/fonts/materialdesignicons-webfont.ttf", './node_modules/@mdi/font/fonts/materialdesignicons-webfont.ttf');
+    app.routerUtils.staticGet(app, "/public/fonts/materialdesignicons-webfont.woff", './node_modules/@mdi/font/fonts/materialdesignicons-webfont.woff');
+    app.routerUtils.staticGet(app, "/public/fonts/materialdesignicons-webfont.woff2", './node_modules/@mdi/font/fonts/materialdesignicons-webfont.woff2');
+
+    app.routerUtils.staticGet(app, "/public/leaflet/leaflet.js", "./node_modules/leaflet/dist/leaflet-src.js");
+    app.routerUtils.staticGet(app, "/public/leaflet/leaflet.js.map", "./node_modules/leaflet/dist/leaflet-src.js.map");
+    app.routerUtils.staticGet(app, "/public/leaflet/leaflet.css", "./node_modules/leaflet/dist/leaflet.css");
+    app.routerUtils.staticGet(app, "/public/leaflet/images/marker-icon.png", "./node_modules/leaflet/dist/images/marker-icon.png");
+    app.routerUtils.staticGet(app, "/public/leaflet/images/marker-shadow.png", "./node_modules/leaflet/dist/images/marker-shadow.png");
+
+    app.routerUtils.staticGet(app, "/favicon.ico", './static/public/img/logo.svg');
 }};
 

router/mdi.js

@@ -1,21 +0,0 @@
-
-module.exports = { register: app => {
-    app.routerUtils.staticGet(app, "/public/mdi/materialdesignicons.css", './node_modules/@mdi/font/css/materialdesignicons.css');
-    app.routerUtils.staticGet(app, "/public/mdi/materialdesignicons.css.map", './node_modules/@mdi/font/css/materialdesignicons.css.map');
-    app.routerUtils.staticGet(app, "/public/mdi/materialdesignicons.min.css", './node_modules/@mdi/font/css/materialdesignicons.min.css');
-    app.routerUtils.staticGet(app, "/public/mdi/materialdesignicons.min.css.map", './node_modules/@mdi/font/css/materialdesignicons.min.css.map');
-    app.routerUtils.staticGet(app, "/public/scss/materialdesignicons.scss", './node_modules/@mdi/font/scss/materialdesignicons.scss');
-    app.routerUtils.staticGet(app, "/public/fonts/materialdesignicons-webfont.eot", './node_modules/@mdi/font/fonts/materialdesignicons-webfont.eot');
-    app.routerUtils.staticGet(app, "/public/fonts/materialdesignicons-webfont.ttf", './node_modules/@mdi/font/fonts/materialdesignicons-webfont.ttf');
-    app.routerUtils.staticGet(app, "/public/fonts/materialdesignicons-webfont.woff", './node_modules/@mdi/font/fonts/materialdesignicons-webfont.woff');
-    app.routerUtils.staticGet(app, "/public/fonts/materialdesignicons-webfont.woff2", './node_modules/@mdi/font/fonts/materialdesignicons-webfont.woff2');
-    app.routerUtils.staticGet(app, "/public/js/BsMultiSelect.min.js", './node_modules/@dashboardcode/bsmultiselect/dist/js/BsMultiSelect.min.js');
-    app.routerUtils.staticGet(app, "/public/js/BsMultiSelect.min.js.map", './node_modules/@dashboardcode/bsmultiselect/dist/js/BsMultiSelect.min.js.map');
-    app.routerUtils.staticGet(app, "/public/css/BsMultiSelect.min.css", './node_modules/@dashboardcode/bsmultiselect/dist/css/BsMultiSelect.min.css');
-    app.routerUtils.staticGet(app, "/public/css/BsMultiSelect.min.css.map", './node_modules/@dashboardcode/bsmultiselect/dist/css/BsMultiSelect.min.css.map');
-    app.routerUtils.staticGet(app, "/public/js/popper.min.js", './node_modules/@popperjs/core/dist/umd/popper.min.js');
-    app.routerUtils.staticGet(app, "/public/js/popper.min.js.map", './node_modules/@popperjs/core/dist/umd/popper.min.js.map');
-    app.routerUtils.staticGet(app, "/public/js/tasks.js", './static/public/js/tasks.js');
-    app.routerUtils.staticGet(app, "/favicon.ico", './static/public/img/logo.svg');
-}};
-

src/filetype/imagemagick.js

@@ -175,7 +175,6 @@ module.exports.createThumbnail = async (fileObj, width, height, quality) => {
             '-sampling-factor', '4:2:0',
             `JPG:${output.name}`,
         ]);
-        ok(output);
     }
     catch (err) {
         console.error("Imagemagick createThumbnail error: ", err);

src/imagemagickWrapper.js

@@ -1,31 +1,35 @@
 
 const im = require('imagemagick');
 
+const maxTasksCount = 5;
+
 class ImagemagickWrapper {
     #tasks = [];
-    #activeTask = null;
+    #activeTask = 0;
+
     #runNextTask() {
-        if (this.#activeTask || this.#tasks.length === 0)
+        if (this.#activeTask >= maxTasksCount || this.#tasks.length === 0)
             return;
-        this.#activeTask = (this.#tasks.shift());
+        const activeTask = (this.#tasks.shift());
+        this.#activeTask++;
         let taskResult = null;
         try {
-            taskResult = this.#activeTask.fnc();
+            taskResult = activeTask.fnc();
         }
         catch (err) {
             taskResult = Promise.reject(err);
         }
         if (!(taskResult instanceof Promise))
-            taskResult = Promise.resolve(this.#activeTask);
+            taskResult = Promise.resolve(activeTask);
         taskResult
             .then(result => {
-                let ok = this.#activeTask.ok;
-                this.#activeTask = null;
+                let ok = activeTask.ok;
+                this.#activeTask--;
                 ok(result);
             })
             .catch(() => {
-                let ko = this.#activeTask.ko;
-                this.#activeTask = null;
+                let ko = activeTask.ko;
+                this.#activeTask--;
                 ko(taskResult.result);
             })
             .finally(() => {

static/public/css/style.css

@@ -174,7 +174,7 @@ body.filter-active #pch-navbar .bt-filter-inactive {
     height: 100%;
     width: 100%;
     display: inline-flex;
-    overflow: hidden;
+    overflow: auto;
 }
 
 #pch-fullPageMedia .modal-body > .row > .col:first-child {
@@ -195,6 +195,16 @@ body.filter-active #pch-navbar .bt-filter-inactive {
     flex: 1;
 }
 
+#pch-fullPageMedia .leaflet-container {
+    margin-top: 1em;
+    margin-bottom: 1em;
+    background: none;
+}
+
+#pch-fullPageMedia .leaflet-container > div {
+    min-height: 300px;
+}
+
 #pch-fullPagePreview {
     max-height: 100%;
     max-width: 100%;

static/public/js/uiMediaFullpage.js

@@ -66,6 +66,35 @@ $(() => {
         return li;
     }
 
+    function displayMap(geo) {
+        let jsonGeo = geo;
+        try {
+            geo = JSON.parse(geo);
+        }
+        catch(err) { return null; }
+        let outerHTML = document.createElement("li");
+        outerHTML.className = "row";
+        let container = document.createElement("div");
+        container.className = "leaflet-container container";
+        outerHTML.appendChild(container);
+        let innerHTML = document.createElement("div");
+        container.appendChild(innerHTML);
+        let map = L.map(innerHTML, { scrollWheelZoom: false }).setView(geo, 13);
+        L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+        }).addTo(map);
+        L.marker(geo).addTo(map);
+        setTimeout(function () {
+            map.invalidateSize();
+        }, 0);
+        let a = document.createElement("a");
+        a.href = `https://www.openstreetmap.org/?mlat=${geo[0]}&mlon=${geo[1]}`;
+        a.target = "_blank";
+        a.innerHTML = jsonGeo;
+        container.appendChild(a);
+        return outerHTML;
+    }
+
     function displayMetas(metaData, isRo) {
         let metaList = document.createElement("ul");
 
@@ -91,6 +120,11 @@ $(() => {
         }
 
         for (let i of Object.keys(metaData).sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()))) {
+            if (i === 'gpsLocation') {
+                let dom = displayMap(metaData[i].value);
+                dom && metaList.appendChild(dom);
+                continue;
+            }
             let metaItem = displayMeta(i, metaData[i], isRo || !MediaStorage.Instance.allMetaTypes[i]?.canWrite);
             metaItem && metaList.appendChild(metaItem);
         }

templates/_footer.js

@@ -5,6 +5,7 @@ module.exports = `
 <script src="/public/bootstrap/bootstrap-slider.min.js"></script>
 <script src="/public/js/popper.min.js"></script>
 <script src="/public/js/BsMultiSelect.min.js"></script>
+<script src="/public/leaflet/leaflet.js"></script>
 <script src="/public/js/taskQueue.js"></script>
 <script src="/public/js/medias.js"></script>
 <script src="/public/js/filters.js"></script>

templates/_header.js

@@ -8,6 +8,7 @@ module.exports = `
 <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/bootstrap/bootstrap-slider.min.css"/>
+<link type="text/css" rel="stylesheet" href="/public/leaflet/leaflet.css"/>
 <link type="text/css" rel="stylesheet" href="/public/css/BsMultiSelect.min.css"/>
 <link type="text/css" rel="stylesheet" href="/public/css/style.css"/>
 </head>