2021-08-28 01:48:46 +02:00
<!DOCTYPE html>
2022-12-02 13:06:10 -05:00
< html lang = "{{ data['lang_page'] }}" class = "default" >
2022-01-19 21:34:59 +01:00
< 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" >
2023-02-03 15:59:52 -05:00
< link rel = "stylesheet" href = "/static/assets/vendors/fontawesome6/css/all.css" >
2023-03-05 21:00:09 -06:00
< link rel = "manifest" href = "/static/assets/crafty.webmanifest" >
2023-03-07 03:54:26 +00:00
< meta name = "apple-mobile-web-app-capable" content = "yes" >
< meta name = "mobile-web-app-capable" content = "yes" / >
< meta name = "apple-mobile-web-app-status-bar-style" content = "black" >
2023-03-09 01:50:32 +00:00
< meta name = "apple-mobile-web-app-title" content = "Crafty" >
2023-03-07 03:54:26 +00:00
< link rel = "apple-touch-icon" href = "../static/assets/images/Crafty_4-0.png" >
2022-01-19 21:34:59 +01:00
<!-- endinject -->
<!-- Plugin css for this page -->
<!-- End Plugin css for this page -->
<!-- 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 >
2022-12-02 13:06:10 -05:00
< body >
2022-01-19 21:34:59 +01:00
< div class = "container-scroller" >
< div class = "container-fluid page-body-wrapper full-page-wrapper" >
2022-06-22 21:36:05 +02:00
< 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 %}
2021-08-28 01:48:46 +02:00
< / div >
< / div >
< / div >
2022-01-19 21:34:59 +01:00
<!-- content - wrapper ends -->
2021-08-28 01:48:46 +02:00
< / div >
2022-01-19 21:34:59 +01:00
<!-- page - body - wrapper ends -->
< / div >
<!-- container - scroller -->
<!-- plugins:js -->
< script src = "/static/assets/vendors/js/vendor.bundle.base.js" > < / script >
<!-- endinject -->
<!-- inject:js -->
< script src = "/static/assets/js/shared/off-canvas.js" > < / script >
< script src = "/static/assets/js/shared/hoverable-collapse.js" > < / script >
< script src = "/static/assets/js/shared/misc.js" > < / script >
<!-- endinject -->
2023-08-10 18:40:32 +02:00
{% block js %}
<!-- Custom js for this page -->
2022-01-19 21:34:59 +01:00
< script >
2023-08-10 18:40:32 +02:00
/* Script for WebSockets */
let usingWebSockets = false;
let webSocket = null;
let websocketTimeoutId = null;
2022-01-19 21:34:59 +01:00
// {% if request.protocol == 'https' %}
2023-08-10 18:40:32 +02:00
usingWebSockets = true;
2022-01-19 21:34:59 +01:00
let listenEvents = [];
2023-08-10 18:40:32 +02:00
let wsOpen = false;
/**
* @type {number | null} reconnectorId An interval ID for the reconnector.
*/
let reconnectorId = null;
let failedConnectionCounter = 0; // https://stackoverflow.com/a/37038217/15388424
const wsPageQueryParams = 'page_query_params=' + encodeURIComponent(location.search)
const wsPage = 'page=' + encodeURIComponent(location.pathname)
const sendWssError = () => wsOpen || warn(
'WebSockets are required for Crafty to work. This websocket connection has been closed. Are you using a reverse proxy?',
'https://docs.craftycontrol.com/pages/getting-started/proxies/',
'wssError'
)
function startWebSocket() {
console.log('%c[Crafty Controller] %cConnecting the WebSocket', 'font-weight: 900; color: #800080;', 'font-weight: 900; color: #eee;');
try {
var wsInternal = new WebSocket('wss://' + location.host + '/ws/public?' + wsPage + '& ' + wsPageQueryParams);
wsInternal.onopen = function () {
console.log('opened WebSocket connection:', wsInternal)
wsOpen = true;
failedConnectionCounter = 0;
if (typeof reconnectorId === 'number') {
document.querySelectorAll('.wssError').forEach(el => el.remove())
clearInterval(reconnectorId);
reconnectorId = null;
}
};
wsInternal.onmessage = function (rawMessage) {
var message = JSON.parse(rawMessage.data);
console.log('got message: ', message)
listenEvents
.filter(listenedEvent => listenedEvent.event == message.event)
.forEach(listenedEvent => listenedEvent.callback(message.data))
};
wsInternal.onerror = function (errorEvent) {
console.error('WebSocket Error', errorEvent);
};
wsInternal.onclose = function (closeEvent) {
wsOpen = false;
console.log('Closed WebSocket', closeEvent);
if (!document.hidden) {
if (typeof reconnectorId !== 'number') {
setTimeout(sendWssError, 7000);
}
console.info("Reconnecting with a timeout of", (getRandomArbitrary(0, 2 ** failedConnectionCounter - 1) + 5) * 1000, "milliseconds");
// Discard old websocket and create a new one in 5 seconds
wsInternal = null
reconnectorId = setTimeout(startWebSocket, (getRandomArbitrary(0, 2 ** failedConnectionCounter - 1) + 5) * 1000)
2022-01-19 21:34:59 +01:00
2023-08-10 18:40:32 +02:00
failedConnectionCounter++;
2022-01-19 21:34:59 +01:00
}
2023-08-10 18:40:32 +02:00
};
2022-01-19 21:34:59 +01:00
2023-08-10 18:40:32 +02:00
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
}
wsInternal.send(JSON.stringify(message));
}
2022-01-19 21:34:59 +01:00
}
2023-08-10 18:40:32 +02:00
} catch (error) {
console.error('Error while making websocket helpers', error);
usingWebSockets = false;
2022-01-19 21:34:59 +01:00
}
}
2023-08-10 18:40:32 +02:00
startWebSocket();
2022-01-19 21:34:59 +01:00
// {% else %}
warn('WebSockets are not supported in Crafty if not using the https protocol')
2023-08-10 18:40:32 +02:00
// {% end%}
2022-01-19 21:34:59 +01:00
2023-08-10 18:40:32 +02:00
// Managing Connexions for Multi Tab opened to reduce bandwith usage
document.addEventListener("visibilitychange", () => {
if (document.hidden) {
websocketTimeoutId = setTimeout(() => {
webSocket.close(1000, "Closed due to Inactivity");
console.log('%c[Crafty Controller] %cClose Websocket due to Tab not active after 5s', 'font-weight: 900; color: #800080;', 'font-weight: 900; color: #eee;');
}, 5000);
} else {
clearTimeout(websocketTimeoutId)
if (webSocket.getStatus() == WebSocket.CLOSED) {
startWebSocket();
}
}
});
2022-01-19 21:34:59 +01:00
< / script >
2023-08-10 18:40:32 +02:00
2023-03-09 01:50:32 +00:00
< script >
$(document).ready(function () {
let login_opacity_div = document.getElementById('login_opacity');
let opacity = login_opacity_div.getAttribute('data-value');
document.getElementById('login-form-background').style.background = 'rgb(34, 36, 55, ' + (opacity / 100) + ')';
//Register Service worker for mobile app
if ('serviceWorker' in navigator) {
2023-08-09 23:47:53 +02:00
navigator.serviceWorker.register('/static/assets/js/shared/service-worker.js', { scope: '/' })
2023-03-09 01:50:32 +00:00
.then(function (registration) {
console.error('Service Worker Registered');
});
}
});
< / script >
2022-01-19 21:34:59 +01:00
<!-- End custom js for this page -->
{% end %}
< / body >
2021-08-28 01:48:46 +02:00
< / html >
