Merge branch 'dev' into bugfix/public-status-servers

This commit is contained in:
Zedifus 2023-09-02 13:47:34 +01:00
commit 8f5cb62c25
5 changed files with 266 additions and 243 deletions

View File

@ -3,7 +3,7 @@
### New features ### New features
TBD TBD
### Bug fixes ### Bug fixes
TBD - PWA: Removed the custom offline page in favour of browser default ([Merge Request](https://gitlab.com/crafty-controller/crafty-4/-/merge_requests/607))
### Tweaks ### Tweaks
TBD TBD
### Lang ### Lang

View File

@ -1,6 +1,8 @@
// This is the "Offline page" service worker // This is the "Offline page" service worker
importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.1.2/workbox-sw.js'); importScripts(
"https://storage.googleapis.com/workbox-cdn/releases/5.1.2/workbox-sw.js"
);
const CACHE = "crafty-controller"; const CACHE = "crafty-controller";
@ -8,39 +10,32 @@ const CACHE = "crafty-controller";
const offlineFallbackPage = "/offline"; const offlineFallbackPage = "/offline";
self.addEventListener("message", (event) => { self.addEventListener("message", (event) => {
if (event.data && event.data.type === "SKIP_WAITING") { if (event.data && event.data.type === "SKIP_WAITING") {
self.skipWaiting(); self.skipWaiting();
} }
});
self.addEventListener('install', async (event) => {
event.waitUntil(
caches.open(CACHE)
.then((cache) => cache.add(offlineFallbackPage))
);
}); });
if (workbox.navigationPreload.isSupported()) { if (workbox.navigationPreload.isSupported()) {
workbox.navigationPreload.enable(); workbox.navigationPreload.enable();
} }
self.addEventListener('fetch', (event) => { // self.addEventListener('fetch', (event) => {
if (event.request.mode === 'navigate') { // if (event.request.mode === 'navigate') {
event.respondWith((async () => { // event.respondWith((async () => {
try { // try {
const preloadResp = await event.preloadResponse; // const preloadResp = await event.preloadResponse;
if (preloadResp) { // if (preloadResp) {
return preloadResp; // return preloadResp;
} // }
const networkResp = await fetch(event.request); // const networkResp = await fetch(event.request);
return networkResp; // return networkResp;
} catch (error) { // } catch (error) {
const cache = await caches.open(CACHE); // const cache = await caches.open(CACHE);
const cachedResp = await cache.match(offlineFallbackPage); // const cachedResp = await cache.match(offlineFallbackPage);
return cachedResp; // return cachedResp;
} // }
})()); // })());
} // }
}); // });

View File

@ -1,106 +1,103 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<title>Crafty Controller</title>
<!-- plugins:css -->
<link rel="stylesheet" href="/static/assets/vendors/mdi/css/materialdesignicons.min.css" />
<link rel="stylesheet" href="/static/assets/vendors/flag-icon-css/css/flag-icon.min.css" />
<link rel="stylesheet" href="/static/assets/vendors/ti-icons/css/themify-icons.css" />
<link rel="stylesheet" href="/static/assets/vendors/typicons/typicons.css" />
<link rel="stylesheet" href="/static/assets/vendors/css/vendor.bundle.base.css" />
<head> <meta name="apple-mobile-web-app-capable" content="yes" />
<!-- Required meta tags --> <meta name="mobile-web-app-capable" content="yes" />
<meta charset="utf-8"> <meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="apple-mobile-web-app-title" content="Crafty" />
<title>Crafty Controller</title> <link rel="apple-touch-icon" href="../static/assets/images/Crafty_4-0.png" />
<!-- plugins:css -->
<link rel="stylesheet" href="/static/assets/vendors/mdi/css/materialdesignicons.min.css">
<link rel="stylesheet" href="/static/assets/vendors/flag-icon-css/css/flag-icon.min.css">
<link rel="stylesheet" href="/static/assets/vendors/ti-icons/css/themify-icons.css">
<link rel="stylesheet" href="/static/assets/vendors/typicons/typicons.css">
<link rel="stylesheet" href="/static/assets/vendors/css/vendor.bundle.base.css">
<!-- endinject -->
<meta name="apple-mobile-web-app-capable" content="yes"> <!-- Plugin css for this page -->
<meta name="mobile-web-app-capable" content="yes" /> <!-- End Plugin css for this page -->
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <!-- Layout styles -->
<meta name="apple-mobile-web-app-title" content="Crafty"> <link rel="stylesheet" href="/static/assets/css/dark/style.css" />
<link rel="apple-touch-icon" href="../static/assets/images/Crafty_4-0.png"> <!-- End Layout styles -->
<link rel="shortcut icon" type="image/svg+xml" href="/static/assets/images/logo_small.svg" />
<link rel="alternate icon" href="/static/assets/images/favicon.png" />
</head>
<style>
.auth.auth-bg-1 {
background: url("../../static/assets/images/auth/{% raw data['background'] %}"),
url("/static/assets/images/auth/login_1.jpg");
background-size: cover;
}
</style>
<body class="dark-theme">
<!-- endinject --> <div class="container-scroller">
<!-- Plugin css for this page --> <div class="container-fluid page-body-wrapper full-page-wrapper">
<!-- End Plugin css for this page --> <div class="content-wrapper d-flex align-items-center auth auth-bg-1 theme-one" >
<!-- Layout styles --> <div class="row w-100">
<link rel="stylesheet" href="/static/assets/css/dark/style.css"> <div class="col-lg-4 mx-auto">
<!-- End Layout styles --> <div class="auto-form-wrapper">
<link rel="shortcut icon" type="image/svg+xml" href="/static/assets/images/logo_small.svg"> <div class="text-center">
<link rel="alternate icon" href="/static/assets/images/favicon.png" /> <img alt="Crafty Logo" src="/static/assets/images/logo_long.svg" /><br /><br />
</head> <div class="col-sm-12 grid-margin stretch-card">
<style> <div class="card card-statistics social-card google-card card-colored" >
.auth.auth-bg-1 { <div class="card-body">
background: url("../../static/assets/images/auth/{% raw data['background'] %}"), <h4 class="platform-name mb-3 mt-4 font-weight-semibold user-name" >
url("/static/assets/images/auth/login_1.jpg"); {{ translate('accessDenied', 'accessDenied', data['lang']) }}
background-size: cover; </h4>
} <h5 class="headline font-weight-medium">
</style> {{ translate('accessDenied', 'noAccess', data['lang']) }}
</h5>
<body class="dark-theme"> <p class="mb-2 comment font-weight-light">
<div class="container-scroller"> {{ translate('accessDenied', 'contactAdmin',
<div class="container-fluid page-body-wrapper full-page-wrapper"> data['lang']) }}<br /><br />
<div class="content-wrapper d-flex align-items-center auth auth-bg-1 theme-one"> <a class="d-inline font-weight-medium" href="https://discord.gg/9VJPhCE" > {{ translate('accessDenied', 'contact', data['lang']) }}</a>
<div class="row w-100"> </p>
<div class="col-lg-4 mx-auto"> </div>
<div class="auto-form-wrapper">
<div class="text-center">
<img src="/static/assets/images/logo_long.svg"><br /><br />
<div class="col-sm-12 grid-margin stretch-card">
<div class="card card-statistics social-card google-card card-colored">
<div class="card-body">
<h4 class="platform-name mb-3 mt-4 font-weight-semibold user-name">{{ translate('accessDenied',
'accessDenied', data['lang']) }}</h4>
<h5 class="headline font-weight-medium">{{ translate('accessDenied', 'noAccess', data['lang']) }}
</h5>
<p class="mb-2 comment font-weight-light">
{{ translate('accessDenied', 'contactAdmin', data['lang']) }}<br /><br />
<a class="d-inline font-weight-medium" href="https://discord.gg/9VJPhCE"> {{
translate('accessDenied', 'contact', data['lang']) }}</a>
</p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- content-wrapper ends -->
</div> </div>
<!-- content-wrapper ends --> <!-- page-body-wrapper ends -->
</div> </div>
<!-- page-body-wrapper ends --> <!-- container-scroller -->
</div> <!-- plugins:js -->
<!-- container-scroller --> <script src="/static/assets/vendors/js/vendor.bundle.base.js"></script>
<!-- plugins:js --> <!-- endinject -->
<script src="/static/assets/vendors/js/vendor.bundle.base.js"></script> <!-- inject:js -->
<!-- endinject --> <script src="/static/assets/js/shared/off-canvas.js"></script>
<!-- inject:js --> <script src="/static/assets/js/shared/hoverable-collapse.js"></script>
<script src="/static/assets/js/shared/off-canvas.js"></script> <script src="/static/assets/js/shared/misc.js"></script>
<script src="/static/assets/js/shared/hoverable-collapse.js"></script> <script src="/static/assets/js/shared/settings.js"></script>
<script src="/static/assets/js/shared/misc.js"></script> <script src="/static/assets/js/shared/todolist.js"></script>
<script src="/static/assets/js/shared/settings.js"></script> <!-- endinject -->
<script src="/static/assets/js/shared/todolist.js"></script> <script>
<!-- endinject --> $(document).ready(function () {
<script> let login_opacity_div = document.getElementById("login_opacity");
$(document).ready(function () { let opacity = login_opacity_div.getAttribute("data-value");
let login_opacity_div = document.getElementById('login_opacity'); document.getElementById("login-form-background").style.background =
let opacity = login_opacity_div.getAttribute('data-value'); "rgb(34, 36, 55, " + opacity / 100 + ")";
document.getElementById('login-form-background').style.background = 'rgb(34, 36, 55, ' + (opacity / 100) + ')'; //Register Service worker for mobile app
//Register Service worker for mobile app if ("serviceWorker" in navigator) {
if ('serviceWorker' in navigator) { navigator.serviceWorker
navigator.serviceWorker.register('/static/assets/js/shared/service-worker.js', {scope: '/'}) .register("/static/assets/js/shared/service-worker.js", {
.then(function (registration) { scope: "/",
console.error('Service Worker Registered'); })
}); .then(function (registration) {
} console.log("Service Worker Registered");
}); });
}
</script> });
</body> </script>
</body>
</html> </html>

View File

@ -156,7 +156,7 @@
if ('serviceWorker' in navigator) { if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/static/assets/js/shared/service-worker.js', {scope: '/'}) navigator.serviceWorker.register('/static/assets/js/shared/service-worker.js', {scope: '/'})
.then(function (registration) { .then(function (registration) {
console.error('Service Worker Registered'); console.log('Service Worker Registered');
}); });
} }
}); });

View File

@ -1,136 +1,167 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="{{ data['lang_page'] }}" class="default"> <html lang="{{ data['lang_page'] }}" class="default">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
{% block meta %}{% end %}
<title>{% block title %}{{ _('Default') }}{% end %}</title>
<!-- plugins:css -->
<link
rel="stylesheet"
href="/static/assets/vendors/mdi/css/materialdesignicons.min.css"
/>
<link
rel="stylesheet"
href="/static/assets/vendors/flag-icon-css/css/flag-icon.min.css"
/>
<link
rel="stylesheet"
href="/static/assets/vendors/ti-icons/css/themify-icons.css"
/>
<link
rel="stylesheet"
href="/static/assets/vendors/typicons/typicons.css"
/>
<link
rel="stylesheet"
href="/static/assets/vendors/css/vendor.bundle.base.css"
/>
<link
rel="stylesheet"
href="/static/assets/vendors/fontawesome6/css/all.css"
/>
<link rel="manifest" href="/static/assets/crafty.webmanifest" />
<head> <meta name="apple-mobile-web-app-capable" content="yes" />
<!-- Required meta tags --> <meta name="mobile-web-app-capable" content="yes" />
<meta charset="utf-8"> <meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="apple-mobile-web-app-title" content="Crafty" />
{% block meta %}{% end %} <link
<title>{% block title %}{{ _('Default') }}{% end %}</title> rel="apple-touch-icon"
<!-- plugins:css --> href="../static/assets/images/Crafty_4-0.png"
<link rel="stylesheet" href="/static/assets/vendors/mdi/css/materialdesignicons.min.css"> />
<link rel="stylesheet" href="/static/assets/vendors/flag-icon-css/css/flag-icon.min.css"> <!-- endinject -->
<link rel="stylesheet" href="/static/assets/vendors/ti-icons/css/themify-icons.css"> <!-- Plugin css for this page -->
<link rel="stylesheet" href="/static/assets/vendors/typicons/typicons.css"> <!-- End Plugin css for this page -->
<link rel="stylesheet" href="/static/assets/vendors/css/vendor.bundle.base.css"> <!-- Layout styles -->
<link rel="stylesheet" href="/static/assets/vendors/fontawesome6/css/all.css"> <link rel="stylesheet" href="/static/assets/css/dark/style.css" />
<link rel="manifest" href="/static/assets/crafty.webmanifest"> <!-- End Layout styles -->
<link
rel="shortcut icon"
type="image/svg+xml"
href="/static/assets/images/logo_small.svg"
/>
<link rel="alternate icon" href="/static/assets/images/favicon.png" />
</head>
<meta name="apple-mobile-web-app-capable" content="yes"> <body>
<meta name="mobile-web-app-capable" content="yes" /> <div class="container-scroller">
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <div class="container-fluid page-body-wrapper full-page-wrapper">
<meta name="apple-mobile-web-app-title" content="Crafty"> <div
<link rel="apple-touch-icon" href="../static/assets/images/Crafty_4-0.png"> class="content-wrapper d-flex align-items-sm-center auth auth-bg-1 theme-one"
<!-- endinject --> >
<!-- Plugin css for this page --> <div class="mx-auto">
<!-- End Plugin css for this page --> <div class="auto-form-wrapper">{% block content %} {% end %}</div>
<!-- Layout styles -->
<link rel="stylesheet" href="/static/assets/css/dark/style.css">
<!-- End Layout styles -->
<link rel="shortcut icon" type="image/svg+xml" href="/static/assets/images/logo_small.svg">
<link rel="alternate icon" href="/static/assets/images/favicon.png" />
</head>
<body>
<div class="container-scroller">
<div class="container-fluid page-body-wrapper full-page-wrapper">
<div class="content-wrapper d-flex align-items-sm-center auth auth-bg-1 theme-one">
<div class="mx-auto">
<div class="auto-form-wrapper">
{% block content %}
{% end %}
</div> </div>
</div> </div>
<!-- content-wrapper ends -->
</div> </div>
<!-- content-wrapper ends --> <!-- page-body-wrapper ends -->
</div> </div>
<!-- page-body-wrapper ends --> <!-- container-scroller -->
</div> <!-- plugins:js -->
<!-- container-scroller --> <script src="/static/assets/vendors/js/vendor.bundle.base.js"></script>
<!-- plugins:js --> <!-- endinject -->
<script src="/static/assets/vendors/js/vendor.bundle.base.js"></script> <!-- inject:js -->
<!-- endinject --> <script src="/static/assets/js/shared/off-canvas.js"></script>
<!-- inject:js --> <script src="/static/assets/js/shared/hoverable-collapse.js"></script>
<script src="/static/assets/js/shared/off-canvas.js"></script> <script src="/static/assets/js/shared/misc.js"></script>
<script src="/static/assets/js/shared/hoverable-collapse.js"></script> <!-- endinject -->
<script src="/static/assets/js/shared/misc.js"></script> <script>
<!-- endinject --> // {% if request.protocol == 'https' %}
<script> let usingWebSockets = true;
// {% if request.protocol == 'https' %} let listenEvents = [];
let usingWebSockets = true;
let listenEvents = []; let pageQueryParams, page;
try { try {
pageQueryParams = 'page_query_params=' + encodeURIComponent(location.search) pageQueryParams =
page = 'page=' + encodeURIComponent(location.pathname) "page_query_params=" + encodeURIComponent(location.search);
var wsInternal = new WebSocket('wss://' + location.host + '/ws?' + page + '&' + pageQueryParams); page = "page=" + encodeURIComponent(location.pathname);
wsInternal.onopen = function () { var wsInternal = new WebSocket(
console.log('opened WebSocket connection:', wsInternal) "wss://" + location.host + "/ws?" + page + "&" + pageQueryParams
}; );
wsInternal.onmessage = function (rawMessage) { wsInternal.onopen = function () {
var message = JSON.parse(rawMessage.data); console.log("opened WebSocket connection:", wsInternal);
};
wsInternal.onmessage = function (rawMessage) {
var message = JSON.parse(rawMessage.data);
console.log('got message: ', message) console.log("got message: ", message);
listenEvents listenEvents
.filter(listenedEvent => listenedEvent.event == message.event) .filter((listenedEvent) => listenedEvent.event == message.event)
.forEach(listenedEvent => listenedEvent.callback(message.data)) .forEach((listenedEvent) => listenedEvent.callback(message.data));
}; };
wsInternal.onerror = function (errorEvent) { wsInternal.onerror = function (errorEvent) {
console.error('WebSocket Error', errorEvent); console.error("WebSocket Error", errorEvent);
}; };
wsInternal.onclose = function (closeEvent) { wsInternal.onclose = function (closeEvent) {
console.log('Closed WebSocket', closeEvent); console.log("Closed WebSocket", closeEvent);
}; };
webSocket = {
on: function (event, callback) {
console.log("registered " + event + " event");
listenEvents.push({ event: event, callback: callback });
},
emit: function (event, data) {
var message = {
event: event,
data: data,
};
webSocket = { wsInternal.send(JSON.stringify(message));
on: function (event, callback) { },
console.log('registered ' + event + ' event'); };
listenEvents.push({ event: event, callback: callback }) } catch (error) {
}, console.error("Error while making websocket helpers", error);
emit: function (event, data) { usingWebSockets = false;
var message = {
event: event,
data: data
}
wsInternal.send(JSON.stringify(message));
}
} }
} catch (error) { // {% else %}
console.error('Error while making websocket helpers', error);
usingWebSockets = false; usingWebSockets = false;
} warn(
// {% else %} "WebSockets are not supported in Crafty if not using the https protocol"
usingWebSockets = false; );
warn('WebSockets are not supported in Crafty if not using the https protocol') var webSocket;
var webSocket; // {% end%}
// {% end%} </script>
{% block js %}
</script> <!-- Custom js for this page -->
{% block js %} <script>
<!-- Custom js for this page --> $(document).ready(function () {
<script> let login_opacity_div = document.getElementById("login_opacity");
$(document).ready(function () { let opacity = login_opacity_div.getAttribute("data-value");
let login_opacity_div = document.getElementById('login_opacity'); document.getElementById("login-form-background").style.background =
let opacity = login_opacity_div.getAttribute('data-value'); "rgb(34, 36, 55, " + opacity / 100 + ")";
document.getElementById('login-form-background').style.background = 'rgb(34, 36, 55, ' + (opacity / 100) + ')'; //Register Service worker for mobile app
//Register Service worker for mobile app if ("serviceWorker" in navigator) {
if ('serviceWorker' in navigator) { navigator.serviceWorker
navigator.serviceWorker.register('/static/assets/js/shared/service-worker.js', {scope: '/'}) .register("/static/assets/js/shared/service-worker.js", {
.then(function (registration) { scope: "/",
console.error('Service Worker Registered'); })
}); .then(function (registration) {
} console.log("Service Worker Registered");
}); });
}
</script> });
<!-- End custom js for this page --> </script>
{% end %} <!-- End custom js for this page -->
{% end %}
</body> </body>
</html>
</html>