mirror of
https://gitlab.com/crafty-controller/crafty-4.git
synced 2024-08-30 18:23:09 +00:00
189 lines
7.2 KiB
HTML
189 lines
7.2 KiB
HTML
<!DOCTYPE html>
|
|
<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">
|
|
|
|
<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">
|
|
<meta name="apple-mobile-web-app-title" content="Crafty">
|
|
<link rel="apple-touch-icon" href="../static/assets/images/Crafty_4-0.png">
|
|
<!-- 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>
|
|
|
|
<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>
|
|
<!-- content-wrapper ends -->
|
|
</div>
|
|
<!-- 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 -->
|
|
{% block js %}
|
|
<!-- Custom js for this page -->
|
|
<script>
|
|
/* Script for WebSockets */
|
|
let usingWebSockets = false;
|
|
let webSocket = null;
|
|
let websocketTimeoutId = null;
|
|
// {% if request.protocol == 'https' %}
|
|
usingWebSockets = true;
|
|
|
|
let listenEvents = [];
|
|
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)
|
|
|
|
failedConnectionCounter++;
|
|
}
|
|
};
|
|
|
|
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));
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error('Error while making websocket helpers', error);
|
|
usingWebSockets = false;
|
|
}
|
|
}
|
|
|
|
startWebSocket();
|
|
// {% else %}
|
|
warn('WebSockets are not supported in Crafty if not using the https protocol')
|
|
// {% end%}
|
|
|
|
// 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();
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<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) {
|
|
navigator.serviceWorker.register('/static/assets/js/shared/service-worker.js', { scope: '/' })
|
|
.then(function (registration) {
|
|
console.error('Service Worker Registered');
|
|
});
|
|
}
|
|
});
|
|
|
|
</script>
|
|
<!-- End custom js for this page -->
|
|
{% end %}
|
|
|
|
</body>
|
|
|
|
</html> |