From a59ce762f0096a276157d8dc1321ff18eb4fd282 Mon Sep 17 00:00:00 2001
From: alfredo <20033498@studenti.uniupo.it>
Date: Mon, 13 Jun 2022 13:38:55 +0200
Subject: [PATCH] basically done for scenari
---
webapp/index.html | 7 +++--
webapp/js/alerts.js | 26 +++++++++++++++++
webapp/js/luci.js | 4 +--
webapp/js/scenari.js | 68 +++++++++++++++++++++++++++-----------------
webapp/js/toggles.js | 13 ++++++---
5 files changed, 84 insertions(+), 34 deletions(-)
create mode 100644 webapp/js/alerts.js
diff --git a/webapp/index.html b/webapp/index.html
index 2287b04..9826033 100644
--- a/webapp/index.html
+++ b/webapp/index.html
@@ -27,9 +27,12 @@
<body>
<h1>Pissir SmartHome ${nomeCasa o nomeProprio}</h1>
- <div id="alert-message">
- <!-- TODO use this -->
+ <div id="alert-message" role="alert" class="alert invisible">
+ <!-- <h4 class="alert-heading"></h4>
+ <p></p> -->
<!-- any error or confirmation goes here (updated by JS) -->
+ <!-- alert-danger -->
+ <!-- alert-success -->
</div>
<!-- container of the top buttons to change what is seen -->
diff --git a/webapp/js/alerts.js b/webapp/js/alerts.js
new file mode 100644
index 0000000..ab523df
--- /dev/null
+++ b/webapp/js/alerts.js
@@ -0,0 +1,26 @@
+"use strinct";
+
+const alert = document.getElementById('alert-message');
+/*
+<h4 class="alert-heading"></h4>
+<p></p>
+*/
+
+
+function showAlert(head, body, green) {
+ green ? alert.classList.add('alert-success') : alert.classList.add('alert-danger');
+ alert.innerHTML = `
+ <h4 class="alert-heading">${head}</h4>
+ <p>${body}</p>
+ `;
+ alert.classList.remove('invisible');
+ // dismiss the alert after 3 seconds
+ setTimeout(() => {
+ alert.classList.remove('alert-success');
+ alert.classList.remove('alert-danger');
+ alert.classList.add('invisible');
+ alert.innerHTML = "";
+ }, 3000);
+};
+
+export { showAlert };
\ No newline at end of file
diff --git a/webapp/js/luci.js b/webapp/js/luci.js
index 60f6635..8b38432 100644
--- a/webapp/js/luci.js
+++ b/webapp/js/luci.js
@@ -45,7 +45,7 @@ class Luci {
stanza = nuovaStanza;
}
stanza = stanza[0].toUpperCase() + stanza.substring(1, stanza.length);
- // TODO send stanza to server
+ // TODO server send stanza
// add stanza to table
const table = document.getElementById('table-row-luci');
@@ -81,7 +81,7 @@ class Luci {
}
static fillTable(){
- // TODO get all luci from server
+ // TODO server get all lights
}
// toggle the visibility of the luci container
diff --git a/webapp/js/scenari.js b/webapp/js/scenari.js
index 88088da..7aedae7 100644
--- a/webapp/js/scenari.js
+++ b/webapp/js/scenari.js
@@ -2,6 +2,7 @@
import Luci from './luci.js';
import Antifurto from './antifurto.js';
import { scenariToggleListener } from "./toggles.js";
+import { showAlert } from "./alerts.js";
// JSON templeate for scenario
const scenarioTemplate = {
@@ -63,8 +64,14 @@ class Scenari {
const okBtn = document.getElementById('attiva-antifurto-btn');
const modalBody = document.querySelector('#antifurto-modal .modal-body');
const modalLauncher = document.getElementById('lancia-antifurto-modal');
+ const registerBtn = document.getElementById('scenari-registra');
antifurtoBtn.addEventListener('click', () => {
+ if (registerBtn.innerText !== "Registra") {//sto registrando
+ showAlert("Attenzione", "Stai registrando uno scenario, termina la registrazione per attivare l'antifurto.", false);
+ Scenari.makeElementBounce(registerBtn);
+ return;
+ }
const children = modalBody.children;
// p, p
/*
@@ -86,15 +93,8 @@ class Scenari {
// related: Scenari.antifurtoModalSubmitListener();
}, false);
- // TODO get antifurto status from server and set it correctly
- // antifurtoBtn.innerText = 'ON';
- // antifurtoBtn.classList.remove('btn-danger');
- // antifurtoBtn.classList.add('btn-success');
-
- // antifurtoBtn.addEventListener('click', () => {
- // // when it's called, the modal is shown
- //
- // }, false);
+ // TODO server get antifurto status and set it correctly
+ // toggleAntifurto(response);
}
/**
* listens to the submit button in the modal for the antitheft and activates/deactivates the antitheft
@@ -115,7 +115,7 @@ class Scenari {
Scenari.activateRandomScenario();
else
Scenari.deactivateActiveScenario();//cannot use toggleScenario because I don't have the scenarioID
- // TODO set the status of the antitheft in the server
+ // TODO server set the status of the antitheft
// TODO eventualmente impostare antifurto nella classe Antifurto
}, false);
}
@@ -157,7 +157,6 @@ class Scenari {
static attivaScenarioModal() {
const modalBtn = document.getElementById('attiva-scenari-btn');
const closeBtn = document.querySelector('#attiva-scenari-modal .btn.btn-danger');
- const antifurtoBtn = document.getElementById('scenari-stato-antifurto');
modalBtn.addEventListener('click', () => {
// close the modal by clicking on the close button
@@ -169,7 +168,7 @@ class Scenari {
// const isActivatingNewScenario = ;
// Scenari.toggleToggle(toggle,isActivatingNewScenario);
// Scenari.toggleAntifurto(isActivatingNewScenario);
- Scenari.toggleScenario(scenarioID,toggle !== Scenari.scenarioAttivoToggle);
+ Scenari.toggleScenario(scenarioID, toggle !== Scenari.scenarioAttivoToggle);
}, false);
}
/**
@@ -255,11 +254,11 @@ class Scenari {
// if the user ended the recording, show another modal to ask for the name of the scenario
if (!isAboutToRecord) {
- // TODO send a note to the server to stop recording
+ // TODO server send a note to stop recording
endRecordingModalLauncher.click();
// related: Scenari.endRecordingListener
} else {
- // TODO send a note to the server to start recording
+ // TODO server send a note to start recording
Scenari.deactivateActiveScenario();
Scenari.correctlySetAntifurto();
}
@@ -289,7 +288,7 @@ class Scenari {
// clear the field for the next use
campoNome.value = '';
- // TODO send a note to the server to save the scenario
+ // TODO server send a note to save the scenario
}, false);
}
/**
@@ -299,16 +298,22 @@ class Scenari {
* @param {*} name the name of the scenario (used to find its row in the table as it's the same name as the row's id)
* @see Scenari.correctlySetToggle
*/
- static anteprimaListener(anteprimaBtn, scenario) {//HERE fixing now
+ static anteprimaListener(anteprimaBtn, scenario) {
const scenarioID = scenario.id;
const anterprimaModal = document.getElementById('anteprima-modal');
const modalBody = anterprimaModal.querySelector('.modal-body');
const modalLauncher = document.getElementById('anteprima-modal-launcher');
const okBtn = anterprimaModal.querySelector('#anteprima-scenari-btn');
const scenarioTable = document.getElementById('table-row-scenari');
- anteprimaBtn.addEventListener('click', () => {
- // TODO get the scenario's data from the server
+ const registerBtn = document.getElementById('scenari-registra');
+ anteprimaBtn.addEventListener('click', () => {
+ if (registerBtn.innerText !== "Registra") {//sto registrando
+ showAlert("Attenzione", "Stai registrando uno scenario, termina la registrazione per mostrare l'anteprima.", false);
+ Scenari.makeElementBounce(registerBtn);
+ return;
+ }
+ // TODO server get the scenario's data
// show the scenario in the modal (choose how to display it)
modalBody.innerHTML = `
<p>${scenario.nome}</p>
@@ -330,7 +335,7 @@ class Scenari {
* @see Scenari.mostraNuovoScenario
*/
static fillTable() {
- // TODO get all scenari from server
+ // TODO server get all scenarios
//FIXME remove this test
const natale = Scenari.createScenarioFromName('Natale');
const festaRepublica = Scenari.createScenarioFromName('Festa della Repubblica');
@@ -406,13 +411,13 @@ class Scenari {
static correctlySetAntifurto(activating) {
const antifurtoBtn = document.getElementById('scenari-stato-antifurto');
if (activating) {
- if(antifurtoBtn.innerText === 'ON')
+ if (antifurtoBtn.innerText === 'ON')
return;
antifurtoBtn.innerText = 'ON';
antifurtoBtn.classList.remove('btn-danger');
antifurtoBtn.classList.add('btn-success');
} else {
- if(antifurtoBtn.innerText === 'OFF')
+ if (antifurtoBtn.innerText === 'OFF')
return;
antifurtoBtn.innerText = 'OFF';
antifurtoBtn.classList.remove('btn-success');
@@ -427,10 +432,10 @@ class Scenari {
return;
// Scenari.scenarioAttivoToggle.classList.remove('active');
// Scenari.scenarioAttivoToggle = null;
- // // TODO deactivate the scenario in the server
+ // // TODO server deactivate the scenario
const toggleID = Scenari.scenarioAttivoToggle.id;
const scenarioID = toggleID.substring(toggleID.indexOf('-') + 1);
- Scenari.toggleScenario(scenarioID,false);
+ Scenari.toggleScenario(scenarioID, false);
}
/**
* activates/deactivates the scenario with the given name
@@ -444,9 +449,9 @@ class Scenari {
Scenari.correctlySetToggle(toggle);
Scenari.correctlySetAntifurto(activating);
// if (activating) {
- // // TODO activate the scenario in the server
+ // // TODO server activate the scenario
// } else {
- // // TODO deactivate the scenario in the server
+ // // TODO server deactivate the scenario
// }
}
/**
@@ -478,7 +483,7 @@ class Scenari {
// // enable a random scenario
// const randomScenario = table.children[Math.floor(Math.random() * table.children.length)];
// const scenarioID = randomScenario.id;
- Scenari.toggleScenario(scenarioID,true);
+ Scenari.toggleScenario(scenarioID, true);
}
/**
* creates the scenario and updates index
@@ -504,6 +509,17 @@ class Scenari {
Scenari.scenariContainer.classList.add('invisible');
}
}
+ /**
+ * makes the element bounce for 3 seconds so that it's easily visible
+ * @param {*} element the element to be bounced
+ */
+ static makeElementBounce(element) {
+ element.classList.add('fa-bounce');
+ // stop after 3 seconds
+ setTimeout(() => {
+ element.classList.remove('fa-bounce');
+ }, 3000);
+ }
}
export default Scenari;
\ No newline at end of file
diff --git a/webapp/js/toggles.js b/webapp/js/toggles.js
index 7815998..bf57624 100644
--- a/webapp/js/toggles.js
+++ b/webapp/js/toggles.js
@@ -1,5 +1,6 @@
"use strict";
import Scenari from './scenari.js';
+import { showAlert } from './alerts.js';
function setToggleMovement() {
const toggles = document.querySelectorAll('.toggle-button');
@@ -10,14 +11,20 @@ function setToggleMovement() {
function setToggleMovement2(toggle) {
toggle.addEventListener('click', event => {
- event.preventDefault;
+ event.preventDefault();
toggle.classList.toggle('active');
}, false);
}
function scenariToggleListener(toggle, scenarioID) {
+ const registerBtn = document.getElementById('scenari-registra');
toggle.addEventListener('click', event => {
- event.preventDefault
+ event.preventDefault();
+ if(registerBtn.innerText !== "Registra"){//sto registrando
+ showAlert("Attenzione", "Stai registrando uno scenario, termina la registrazione per attivare lo scenario.", false);
+ Scenari.makeElementBounce(registerBtn);
+ return;
+ }
// select the option from the dropdown
Scenari.addNameHere.value = scenarioID;
// change text of the modal based on toggle state
@@ -49,6 +56,4 @@ function scenariToggleListener(toggle, scenarioID) {
}, false);
}
-
-
export { setToggleMovement, setToggleMovement2, scenariToggleListener };
\ No newline at end of file
--
GitLab