diff --git a/index.php b/index.php index 11ba451..b23b9fd 100644 --- a/index.php +++ b/index.php @@ -94,109 +94,6 @@ $config_data = json_decode($raw_json_config, false); - - + diff --git a/owe.js b/owe.js new file mode 100644 index 0000000..92e681a --- /dev/null +++ b/owe.js @@ -0,0 +1,99 @@ +var previousTextLength; +var config_data; +var unread_words = 0; + +document.getElementById("wordinput").focus(); + +function loadSentences(alertIfNew = false) { + fetch("./data/sentences.txt", {headers: {"Cache-Control": "no-cache, no-store"}}) + .then((response) => { + return response.text().then((text) => { + document.querySelector(".sentences").innerHTML = text; + if (text.length > previousTextLength) { + document.getElementsByTagName("title")[0].innerText = (config_data.title ? config_data.title : "One Word Each") + " (" + ++unread_words + ")"; + if (alertIfNew) { + var newtxt = text.substring(previousTextLength, text.length); + //var parser = new DOMParser(); + //var xmltxt = parser.parseFromString(newtxt, "text/xml"); + //var newword = xmltxt.getElementsByTagName("span")[0].innerHTML.trim(); + var htmltxt = document.createElement("html"); + htmltxt.innerHTML = newtxt; + var newword = htmltxt.getElementsByTagName("span")[0].innerHTML.trim(); + if (Notification.permission == 'granted') { + displayNotification(newword); + } + else { + alert("Neues Wort: " + newword); + } + } + } + previousTextLength = text.length; + + // color + var spans = document.querySelector(".sentences").getElementsByTagName("span"); + // we expect this to be from the user who's turn it is now (3 users) + var histurnspan = spans[spans.length - 3]; + //console.log(histurnspan.getAttribute("style")); + document.getElementById("wordinput").setAttribute("style", histurnspan.getAttribute("style")); + }); + }); +} + +function loadConfig() { + fetch("./data/config.json").then((response) => { + return response.text().then((text) => { + config_data = JSON.parse(text); + }); + }).catch(() => { + config_data = Object(); // leave empty + }); +} + +function onReloadClicked() { + loadSentences(); + document.querySelector("#but-reload").style.visibility = "hidden"; + setTimeout(function(){ + document.querySelector("#but-reload").style.visibility = "initial"; + }, 100); +} + +function displayNotification(word) { + if (Notification.permission == 'granted') { + navigator.serviceWorker.getRegistration().then(function(reg) { + reg.showNotification("Neues Wort auf " + (config_data.title ? config_data.title : "OWE"), + { body: word, icon: (config_data.logo? config_data.logo.image_path : "OWE_Logo.png"), requireInteraction: true }); + }); + } +} + +window.onfocus = function() { + unread_words = 0; + document.getElementsByTagName("title")[0].innerText = (config_data.title ? config_data.title : "One Word Each"); +} + +//setTimeout(loadSentences, 500); +loadConfig(); +loadSentences(); +setInterval(loadSentences, 5000, true); + +if ('serviceWorker' in navigator) { + navigator.serviceWorker.register('./service-worker.js') + .then(function(registration) { + console.log('Registration successful, scope is:', registration.scope); + }) + .catch(function(error) { + console.log('Service worker registration failed, error:', error); + }); +} + +navigator.serviceWorker.register('./service-worker.js', { + scope: './' +}); + +navigator.serviceWorker.register('./service-worker.js', { + scope: '.' +}); + +Notification.requestPermission(function(status) { + console.log('Notification permission status:', status); +});