diff --git a/webapp/css/style.css b/webapp/css/style.css
index 5e4b9fbbbcb7b0f51274d7275b1079b45cd71b77..5352fd3659ed4bf4c46bfcb76c7ab08ab6b880c3 100644
--- a/webapp/css/style.css
+++ b/webapp/css/style.css
@@ -47,18 +47,7 @@
.more-margin-top {
border-top: 20px solid transparent;
}
-/* center on the screen below any other element */
-.center-on-screen {
- position: relative;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
-}
-/* set to the right of the screen, below any other element */
-.right-on-screen {
- position: relative;
- top: 50%;
- right: 50%;
- /* transform: translate(-50%, -50%); */
- /* left: 0; */
+
+.end-10px {
+ right: 10px;
}
\ No newline at end of file
diff --git a/webapp/index.html b/webapp/index.html
index baa409e44880dadf9dd739f6de3abba45dee1a8b..2287b04fc2d38eed0478ec35454a835fee43179d 100644
--- a/webapp/index.html
+++ b/webapp/index.html
@@ -38,7 +38,6 @@
<span>Luci</span>
</button>
<button class="btn-12 btn btn-dark">
-
<span>Scenari</span>
</button>
<button class="btn-12 btn btn-dark">
@@ -114,31 +113,22 @@
</tr> -->
</tbody>
</table>
- <!-- <div> -->
- <!-- class="d-flex justify-content-around" -->
- <span class="invisible">
- <span id="termina-registrazione-launcher" data-bs-toggle="modal"
- data-bs-target="#termina-registrazione-modal"></span>
- <span id="registra-modal-launcer" data-bs-toggle="modal" data-bs-target="#scenari-modal"></span>
- </span>
- <!-- TODO center button -->
- <button id="scenari-registra" type="button" class="btn btn-info center-on-screen">
- Registra
- </button>
- <!-- TODO set to the right -->
- <div class="right-on-screen">
- <span>
- Antifurto:
- </span>
- <!-- change btn-danger to btn-success when ON -->
- <button type="button" class="btn btn-danger" id="scenari-stato-antifurto">
- OFF
+ <div class="position-relative">
+ <button id="scenari-registra" type="button"
+ class="btn btn-info position-absolute top-0 start-50 translate-middle-x">
+ Registra
</button>
- <span id="lancia-antifurto-modal" data-bs-toggle="modal" data-bs-target="#antifurto-modal"></span>
+ <div class="position-absolute top-0 end-10px">
+ <span>
+ Antifurto:
+ </span>
+ <button type="button" class="btn btn-danger" id="scenari-stato-antifurto">
+ OFF
+ </button>
+ </div>
</div>
- <!-- </div> -->
</div>
- <!-- antifurto -->
+ <!-- TODO antifurto -->
<div id="antifurtoContainer" class="invisible">
<div class="switch-container no-box-sizing">
<div class="toggle-button no-box-sizing">
@@ -192,6 +182,11 @@
</div>
</div>
<!-- scenari modal -->
+ <span class="invisible">
+ <span id="termina-registrazione-launcher" data-bs-toggle="modal"
+ data-bs-target="#termina-registrazione-modal"></span>
+ <span id="registra-modal-launcer" data-bs-toggle="modal" data-bs-target="#scenari-modal"></span>
+ </span>
<div class="modal fade" id="scenari-modal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
@@ -281,6 +276,7 @@
</div>
</div>
<!-- antifurto modal -->
+ <span id="lancia-antifurto-modal" data-bs-toggle="modal" data-bs-target="#antifurto-modal"></span>
<div class="modal fade" id="antifurto-modal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
diff --git a/webapp/js/scenari.js b/webapp/js/scenari.js
index 977460adf1a678af79cc6fa772860ef203a1d429..88088da8db1ee336cbb32ebc3733eddcbb8ed54b 100644
--- a/webapp/js/scenari.js
+++ b/webapp/js/scenari.js
@@ -6,24 +6,37 @@ import { scenariToggleListener } from "./toggles.js";
// JSON templeate for scenario
const scenarioTemplate = {
"nome": "",
- "data": ""
+ "data": "",
+ "id": ""
};
class Scenari {
static scenariContainer;
+ /**
+ * this is the select element where to add all the scenarios
+ */
static addNameHere;
static initialized = false;
+ /**
+ * contains the toggle that is currently active
+ */
static scenarioAttivoToggle = null;
+ /**
+ * counts how many scenarios are available
+ */
static index = 0;
constructor() {
Scenari.scenariContainer = document.getElementById('scenariContainer');
Scenari.addNameHere = document.getElementById('p');
Scenari.init();
- Scenari.antifurtoListener();
+ Scenari.antifurtoModalLauncherListener();
Scenari.anyModalListener();
}
-
+ /**
+ * sets up the listener for the button in the top of the page
+ * i'm also leaving here what I haven't yet implemented
+ */
static init() {
const scenariBtn = document.getElementById('mainButtonContainer').children[1];
scenariBtn.addEventListener('click', () => {
@@ -41,9 +54,11 @@ class Scenari {
// TODO choose how to register the scenario
}, false);
}
-
- static antifurtoListener() {
- // for the antitheft button, before opening a modal, change the text of it then open it
+ /**
+ * used for the antitheft button (ON/OFF): before opening the connected modal, change its text then open it
+ * @see Scenari.antifurtoModalSubmitListener
+ */
+ static antifurtoModalLauncherListener() {
const antifurtoBtn = document.getElementById('scenari-stato-antifurto');
const okBtn = document.getElementById('attiva-antifurto-btn');
const modalBody = document.querySelector('#antifurto-modal .modal-body');
@@ -65,10 +80,10 @@ class Scenari {
// the antitheft is off
children[0].innerText = "Stai per abilitare l'antifurto.";
okBtn.innerText = 'Attiva';
- // TODO activate the antitheft in the server
}
// launch the modal
modalLauncher.click();
+ // related: Scenari.antifurtoModalSubmitListener();
}, false);
// TODO get antifurto status from server and set it correctly
@@ -81,8 +96,12 @@ class Scenari {
//
// }, false);
}
-
- static antifurtoModal() {
+ /**
+ * listens to the submit button in the modal for the antitheft and activates/deactivates the antitheft
+ * this modal is shown when the user clicks on the antitheft button
+ * @see Scenari.antifurtoModalLauncherListener
+ */
+ static antifurtoModalSubmitListener() {
const antifurtoOkBtn = document.getElementById('attiva-antifurto-btn');
const closeBtn = document.querySelector('#antifurto-modal .btn.btn-danger');
const antifurtoBtn = document.getElementById('scenari-stato-antifurto');
@@ -91,24 +110,50 @@ class Scenari {
closeBtn.click();
// switch the antitheft status button
const isActivatingAntitheft = antifurtoBtn.innerText === 'OFF';
- Scenari.toggleAntifurto(isActivatingAntitheft);
-
- // TODO set the status of the antitheft in the server
- // eventualmente impostare antifurto nella classe Antifurto
+ // Scenari.toggleAntifurto(isActivatingAntitheft);
if (isActivatingAntitheft)
Scenari.activateRandomScenario();
else
- Scenari.deactivateActiveScenario();
+ Scenari.deactivateActiveScenario();//cannot use toggleScenario because I don't have the scenarioID
+ // TODO set the status of the antitheft in the server
+ // TODO eventualmente impostare antifurto nella classe Antifurto
}, false);
}
-
+ /**
+ * sets up various listeners for the modals
+ * @see Scenari.attivaScenarioModal
+ * @see Scenari.registraModal
+ * @see Scenari.antifurtoModalSubmitListener
+ */
static anyModalListener() {
- // Scenari.anteprimaModal();
+ Scenari.anteprimaModal();
Scenari.attivaScenarioModal();
Scenari.registraModal();
- Scenari.antifurtoModal();
+ Scenari.antifurtoModalSubmitListener();
}
-
+ /**
+ * listens for the submit of the anteprima modal
+ */
+ static anteprimaModal() {
+ const anterprimaModal = document.getElementById('anteprima-modal');
+ const okBtn = anterprimaModal.querySelector('#anteprima-scenari-btn');
+ const modalBody = anterprimaModal.querySelector('.modal-body');
+ const closeBtn = anterprimaModal.querySelector('.btn.btn-danger');
+ okBtn.addEventListener('click', () => {//activate the scenario
+ // close the modal
+ closeBtn.click();
+ // get the scenario from the modal body
+ const scenarioID = modalBody.querySelector('.invisible').innerText;
+ // find the scenario's row on the page
+ // const scenarioRow = scenarioTable.querySelector(`#${scenarioName}`);
+ // const toggle = scenarioTable.querySelector(`#${scenarioName} .toggle-button`);
+ Scenari.toggleScenario(scenarioID, okBtn.innerText === 'Attiva');
+ }, false);
+ }
+ /**
+ * listenes for the submit button in the modal for activating/deactivating a scenario when chosen from the toggles
+ * @see scenariToggleListener
+ */
static attivaScenarioModal() {
const modalBtn = document.getElementById('attiva-scenari-btn');
const closeBtn = document.querySelector('#attiva-scenari-modal .btn.btn-danger');
@@ -118,32 +163,21 @@ class Scenari {
// close the modal by clicking on the close button
closeBtn.click();
// I have to get to the toggle and activate it from the value of the select
- const toggle = document.querySelector(`#${Scenari.addNameHere.value} .toggle-button`);
+ const scenarioID = Scenari.addNameHere.value;
+ const toggle = document.querySelector(`#${scenarioID} .toggle-button`);
// has the user chosen to activate the scenario?
- const isActivatingNewScenario = toggle !== Scenari.scenarioAttivoToggle;
-
- if (isActivatingNewScenario) {
- Scenari.activateToggleByPreview(toggle);
- // TODO activate the new scenario in the server
-
- // set the antitheft status for the on-screen button
- antifurtoBtn.innerText = 'ON';
- antifurtoBtn.classList.remove('btn-danger');
- antifurtoBtn.classList.add('btn-success');
- } else {
- //here toggle and Scenari.scenarioAttivoToggle are the same
- toggle.classList.remove('active');
- Scenari.scenarioAttivoToggle = null;
- // TODO deactivate the scenario in the server
-
- // set the antitheft status for the on-screen button
- antifurtoBtn.innerText = 'OFF';
- antifurtoBtn.classList.remove('btn-success');
- antifurtoBtn.classList.add('btn-danger');
- }
+ // const isActivatingNewScenario = ;
+ // Scenari.toggleToggle(toggle,isActivatingNewScenario);
+ // Scenari.toggleAntifurto(isActivatingNewScenario);
+ Scenari.toggleScenario(scenarioID,toggle !== Scenari.scenarioAttivoToggle);
}, false);
}
-
+ /**
+ * this is for the button "registra"/"termina" and the related modals
+ * @see Scenari.registraBtnListener
+ * @see Scenari.submitRecordModalListener
+ * @see Scenari.endRecordingListener
+ */
static registraModal() {
const scenariModal = document.getElementById('scenari-modal');
@@ -173,7 +207,15 @@ class Scenari {
Scenari.submitRecordModalListener(okBtn, registraBtn, closeScenariModalBtn, endRecordingModalLauncher);
Scenari.endRecordingListener(endRecordingForm, modalBody, htmlForModalBody, closeRecordingBtn, campoNome);
}
-
+ /**
+ * listens for the actual "registra"/"termina" button on the page and edits the related modal accordingly
+ * @param {*} registraBtn the button on the page
+ * @param {*} okBtn the submit button in the modal
+ * @param {*} modalBody the body of the modal which is to be changed
+ * @param {*} htmlForModalBody a string containing the html to be inserted in the modal body
+ * @param {*} modalLauncher the button which launches the modal
+ * @see Scenari.registraModal
+ */
static registraBtnListener(registraBtn, okBtn, modalBody, htmlForModalBody, modalLauncher) {
registraBtn.addEventListener('click', () => {
const isAboutToRecord = registraBtn.innerText === 'Registra';
@@ -189,9 +231,17 @@ class Scenari {
}
// launch the modal
modalLauncher.click();
+ // related: Scenari.submitRecordModalListener
}, false);
}
-
+ /**
+ * listens for the submit of the modal which is launched when the user clicks on the "registra"/"termina" button
+ * @param {*} okBtn the submit button in the modal
+ * @param {*} registraBtn the button on the page (to understand if the user is about to record or not)
+ * @param {*} closeScenariModalBtn the button used to close the modal
+ * @param {*} endRecordingModalLauncher the button which launches the next modal (used if the user has finished recording)
+ * @see Scenari.registraModal
+ */
static submitRecordModalListener(okBtn, registraBtn, closeScenariModalBtn, endRecordingModalLauncher) {
okBtn.addEventListener('click', () => {
const isAboutToRecord = registraBtn.innerText === 'Registra';
@@ -201,15 +251,30 @@ class Scenari {
closeScenariModalBtn.click();
// get the current time
// const timeBegin = new Date();
- // TODO send a note to the server to start/stop recording
+
// 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
endRecordingModalLauncher.click();
+ // related: Scenari.endRecordingListener
+ } else {
+ // TODO send a note to the server to start recording
+ Scenari.deactivateActiveScenario();
+ Scenari.correctlySetAntifurto();
}
}, false);
}
-
+ /**
+ * listens for the submit of the modal which is launched when the user is done recording a scenario
+ * @param {*} endRecordingForm the form used to submit the name of the scenario
+ * @param {*} modalBody the body of the modal which is to be changed
+ * @param {*} htmlForModalBody a string containing the html to be inserted in the modal body
+ * @param {*} closeRecordingBtn the button used to close the modal
+ * @param {*} campoNome the input field used to insert the name of the scenario by the user
+ * @see Scenari.registraModal
+ * @see Scenari.mostraNuovoScenario
+ */
static endRecordingListener(endRecordingForm, modalBody, htmlForModalBody, closeRecordingBtn, campoNome) {
endRecordingForm.addEventListener('submit', event => {
event.preventDefault();
@@ -219,162 +284,219 @@ class Scenari {
closeRecordingBtn.click();
const name = campoNome.value;
- const timeEnd = new Date();
-
- const scenario = Object.assign({}, scenarioTemplate);
- scenario.nome = name;
- scenario.data = timeEnd.toLocaleDateString();// assign at scenario.data the string YYYY/MM/DD from timeEnd
+ const scenario = Scenari.createScenarioFromName(name)
Scenari.mostraNuovoScenario(scenario);
// clear the field for the next use
campoNome.value = '';
+ // TODO send a note to the server to save the scenario
}, false);
}
+ /**
+ * takes care of launching a modal to preview the actions of the chosen scenario; it also listens for the submit of the launched modal
+ * @param {*} anteprimaBtn the button used to launch the modal
+ * @param {*} scenario the JSON scenario to be previewed
+ * @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
+ 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
- static toggleAntifurto(activating) {
- const antifurtoBtn = document.getElementById('scenari-stato-antifurto');
- if(activating) {
- antifurtoBtn.innerText = 'ON';
- antifurtoBtn.classList.remove('btn-danger');
- antifurtoBtn.classList.add('btn-success');
- } else {
- antifurtoBtn.innerText = 'OFF';
- antifurtoBtn.classList.remove('btn-success');
- antifurtoBtn.classList.add('btn-danger');
- }
- }
-
-
-
- static activateRandomScenario() {
- const table = document.getElementById('table-row-scenari');
-
- // enable a random scenario
- const randomScenario = table.children[Math.floor(Math.random() * table.children.length)];
-
- const toggle = randomScenario.querySelector('.toggle-button');
- Scenari.activateToggleByPreview(toggle);
- // TODO activate the scenario in the server
- }
-
- static deactivateActiveScenario() {
- Scenari.scenarioAttivoToggle.classList.remove('active');
- Scenari.scenarioAttivoToggle = null;
- // TODO deactivate the scenario in the server
+ // show the scenario in the modal (choose how to display it)
+ modalBody.innerHTML = `
+ <p>${scenario.nome}</p>
+ <p>${scenario.data}</p>
+ <span class='invisible'>${scenarioID}</span>`;//FIXME remove this test (be sure to keep the last span as is)
+ // if the scenario is already active, change the okBtn text
+ // to find if it's active, find the relative toggle
+ // and check if it's active
+ // const scenarioRow = scenarioTable.querySelector(`#${name}`);
+ const toggle = scenarioTable.querySelector(`#${scenarioID} .toggle-button`);
+ okBtn.innerText = toggle.classList.contains('active') ? 'Disattiva' : 'Attiva';
+ // launch the modal
+ modalLauncher.click();
+ }, false);
}
-
+ // utilility functions
+ /**
+ * fills the table with the scenarios available for the user in the server
+ * @see Scenari.mostraNuovoScenario
+ */
static fillTable() {
// TODO get all scenari from server
//FIXME remove this test
- const natale = Object.assign({}, scenarioTemplate);
- natale.nome = 'Natale';
- natale.data = new Date(2018, 11, 25).toLocaleDateString();
- const festaRepublica = Object.assign({}, scenarioTemplate);
- festaRepublica.nome = 'Festa della Repubblica';
- festaRepublica.data = new Date(2018, 6, 2).toLocaleDateString();
+ const natale = Scenari.createScenarioFromName('Natale');
+ const festaRepublica = Scenari.createScenarioFromName('Festa della Repubblica');
var scenari = [
natale,
festaRepublica
];
- // const scenario = Object.assign({}, scenarioTemplate);
for (const scenario of scenari) {
Scenari.mostraNuovoScenario(scenario)
}
}
-
-
+ /**
+ * displays the given scenario on the screen (below every other one) and hooks up the listeners; then it increments the index
+ * @param {*} scenario the JSON scenario to be displayed
+ * @see Scenari.createScenarioRow
+ * @see Scenari.anteprimaListener
+ * @see scenariToggleListener
+ */
static mostraNuovoScenario(scenario) {
- const { row, name } = Scenari.createScenarioRow(scenario);
-
+ const row = Scenari.createScenarioRow(scenario);
+ const scenarioID = scenario.id;
const tableBody = document.getElementById('table-row-scenari');
tableBody.appendChild(row);
const anteprimaBtn = row.querySelector('.badge.rounded-pill');
- Scenari.anteprimaListener(anteprimaBtn, scenario, name);
+ Scenari.anteprimaListener(anteprimaBtn, scenario);
// add the name of the scenario as option in the select of the modal
- const optionName = document.createElement('option');
- optionName.value = name;
- optionName.innerText = scenario.nome;
- Scenari.addNameHere.appendChild(optionName);
+ const option = document.createElement('option');
+ option.value = scenarioID;
+ option.innerText = scenario.nome;
+ Scenari.addNameHere.appendChild(option);
const toggle = row.querySelector('.toggle-button');
- scenariToggleListener(toggle, name);
+ scenariToggleListener(toggle, scenarioID);
-
- Scenari.index++;
+ // Scenari.index++;
}
-
- static anteprimaListener(anteprimaBtn, scenario, name) {
- const anterprimaModal = document.getElementById('anteprima-modal');
- const modalBody = anterprimaModal.querySelector('.modal-body');
- const modalLauncher = document.getElementById('anteprima-modal-launcher');
- const okBtn = document.getElementById('anteprima-scenari-btn');
- const scenarioTable = document.getElementById('table-row-scenari');
- anteprimaBtn.addEventListener('click', () => {
- // TODO get the scenario from the server
-
- // TODO show the scenario in the modal
- modalBody.innerHTML = `<p>${scenario.nome}</p>
- <p>${scenario.data}</p>
- <span class='invisible'>${name}</span>`;//FIXME remove this test
- // if the scenario is already active, change the okBtn text
- // to find if it's active, find the relative toggle
- // and check if it's active
- // const scenarioRow = scenarioTable.querySelector(`#${name}`);
- const toggle = scenarioTable.querySelector(`#${name} .toggle-button`);
- okBtn.innerText = toggle.classList.contains('active') ? 'Disattiva' : 'Attiva';
- // launch the modal
- modalLauncher.click();
- }, false);
-
- const closeBtn = anterprimaModal.querySelector('.btn.btn-danger');
- okBtn.addEventListener('click', () => {
- // close the modal
- closeBtn.click();
- // get the scenario from the modal body
- const scenarioName = modalBody.querySelector('.invisible').innerText;
- // find the scenario's row on the page
- // const scenarioRow = scenarioTable.querySelector(`#${scenarioName}`);
- const toggle = scenarioTable.querySelector(`#${scenarioName} .toggle-button`);
- Scenari.activateToggleByPreview(toggle,okBtn.innerText === 'Attiva');
- }, false);
- }
-
+ /**
+ * creates a table entry for the given scenario and returns it
+ * @param {*} scenario the JSON scenario to be displayed
+ * @returns {HTMLTableRowElement} the row containing the given scenario
+ */
static createScenarioRow(scenario) {
const row = document.createElement('tr');
- const name = 'scenario-' + Scenari.index;
- row.id = name
- row.innerHTML = `<th scope="row">${scenario.nome.trim()}</th>
- <td>
- <span>${scenario.data}</span>
- </td>
- <td>
- <h5>
- <span class="badge rounded-pill bg-secondary">anteprima</span>
- </h5>
- </td>
- <td>
- <div class="switch-container no-box-sizing">
- <div class="toggle-button no-box-sizing">
- <div class="inner-circle no-box-sizing"></div>
- </div>
- </div>
- <span id="launch-modal-${name}" data-bs-toggle="modal" data-bs-target="#attiva-scenari-modal"></span>
- </td>`;
- return { row, name };
+ row.id = scenario.id;
+ row.innerHTML = `
+ <th scope="row">${scenario.nome.trim()}</th>
+ <td>
+ <span>${scenario.data}</span>
+ </td>
+ <td>
+ <h5>
+ <span class="badge rounded-pill bg-secondary">anteprima</span>
+ </h5>
+ </td>
+ <td>
+ <div class="switch-container no-box-sizing">
+ <div id="toggle-${scenario.id}" class="toggle-button no-box-sizing">
+ <div class="inner-circle no-box-sizing"></div>
+ </div>
+ </div>
+ <span id="launch-modal-${scenario.id}" data-bs-toggle="modal" data-bs-target="#attiva-scenari-modal"></span>
+ </td>`;
+ // the span is used by the toggle to launch the modal
+ return row;
}
-
- static activateToggleByPreview(toggle,activating) {
+ /**
+ * changes the antifurto button to the given state
+ * @param {*} activating true if the antitheft is being activated, false otherwise
+ */
+ static correctlySetAntifurto(activating) {
+ const antifurtoBtn = document.getElementById('scenari-stato-antifurto');
+ if (activating) {
+ if(antifurtoBtn.innerText === 'ON')
+ return;
+ antifurtoBtn.innerText = 'ON';
+ antifurtoBtn.classList.remove('btn-danger');
+ antifurtoBtn.classList.add('btn-success');
+ } else {
+ if(antifurtoBtn.innerText === 'OFF')
+ return;
+ antifurtoBtn.innerText = 'OFF';
+ antifurtoBtn.classList.remove('btn-success');
+ antifurtoBtn.classList.add('btn-danger');
+ }
+ }
+ /**
+ * turns off the active scenario if there is one; useful if you don't have the scenarioID
+ */
+ static deactivateActiveScenario() {
+ if (Scenari.scenarioAttivoToggle == null)
+ return;
+ // Scenari.scenarioAttivoToggle.classList.remove('active');
+ // Scenari.scenarioAttivoToggle = null;
+ // // TODO deactivate the scenario in the server
+ const toggleID = Scenari.scenarioAttivoToggle.id;
+ const scenarioID = toggleID.substring(toggleID.indexOf('-') + 1);
+ Scenari.toggleScenario(scenarioID,false);
+ }
+ /**
+ * activates/deactivates the scenario with the given name
+ * @param {*} scenarioID the ID of the scenario to be activated/deactivated
+ * @param {*} activating true if the scenario should be activated, false otherwise
+ */
+ static toggleScenario(scenarioID, activating) {
+ // find the scenario's row on the page
+ const scenarioRow = document.getElementById(`${scenarioID}`);
+ const toggle = scenarioRow.querySelector('.toggle-button');
+ Scenari.correctlySetToggle(toggle);
+ Scenari.correctlySetAntifurto(activating);
+ // if (activating) {
+ // // TODO activate the scenario in the server
+ // } else {
+ // // TODO deactivate the scenario in the server
+ // }
+ }
+ /**
+ * takes care of activating or deactivating the scenario's toggle based on the given boolean
+ * @param {*} toggle the toggle to be activated or deactivated
+ * @param {*} activating true if the toggle should be activated, false otherwise
+ * @see Scenari.correctlySetAntifurto
+ */
+ static correctlySetToggle(toggle) {
+ const isActivatingNewScenario = toggle !== Scenari.scenarioAttivoToggle;
Scenari.scenarioAttivoToggle?.classList.remove('active');
- activating ? toggle.classList.add('active') : toggle.classList.remove('active');
- Scenari.scenarioAttivoToggle = toggle;
- // also toggle the antitheft button
- Scenari.toggleAntifurto(activating)
+ if (isActivatingNewScenario) {
+ toggle.classList.add('active');
+ Scenari.scenarioAttivoToggle = toggle;
+ } else {
+ toggle.classList.remove('active');
+ Scenari.scenarioAttivoToggle = null;
+ }
}
-
- // toggle the visibility of the scenari container
+ /**
+ * activates a random scenario from the ones available
+ */
+ static activateRandomScenario() {
+ if (Scenari.index === 0)
+ return;//TODO show alert?
+ const randomIndex = Math.floor(Math.random() * Scenari.index);
+ const scenarioID = `scenario-${randomIndex}`;
+ // const table = document.getElementById('table-row-scenari');
+ // // enable a random scenario
+ // const randomScenario = table.children[Math.floor(Math.random() * table.children.length)];
+ // const scenarioID = randomScenario.id;
+ Scenari.toggleScenario(scenarioID,true);
+ }
+ /**
+ * creates the scenario and updates index
+ * @param {*} scenarioName the string of the scenario to create
+ * @returns {JSON} the JSON scenario
+ */
+ static createScenarioFromName(scenarioName) {
+ const scenario = Object.assign({}, scenarioTemplate);
+ scenario.nome = scenarioName;
+ scenario.data = new Date().toLocaleDateString();// assign at scenario.data the string YYYY/MM/DD from the current date
+ scenario.id = `scenario-${Scenari.index}`;
+ Scenari.index++;
+ return scenario;
+ }
+ /**
+ * toggle the visibility of the scenari container
+ * @param {*} visible true if the container should be shown, false otherwise
+ */
static toggleContainer(visible) {
if (visible) {
Scenari.scenariContainer.classList.remove('invisible');
@@ -382,9 +504,6 @@ class Scenari {
Scenari.scenariContainer.classList.add('invisible');
}
}
-
-
-
}
export default Scenari;
\ No newline at end of file
diff --git a/webapp/js/toggles.js b/webapp/js/toggles.js
index 546ac6e0f24316f556a6e4e62d456a7346c3a932..7815998e23f7b478c7e835f6a926856d28ac985a 100644
--- a/webapp/js/toggles.js
+++ b/webapp/js/toggles.js
@@ -15,11 +15,11 @@ function setToggleMovement2(toggle) {
}, false);
}
-function scenariToggleListener(toggle, name) {
+function scenariToggleListener(toggle, scenarioID) {
toggle.addEventListener('click', event => {
event.preventDefault
// select the option from the dropdown
- Scenari.addNameHere.value = name;
+ Scenari.addNameHere.value = scenarioID;
// change text of the modal based on toggle state
const modalBody = document.getElementById('attiva-scenari-modal').querySelector('.modal-body');
const children = modalBody.children;
@@ -44,7 +44,7 @@ function scenariToggleListener(toggle, name) {
okBtn.innerText = "Attiva";
}
// launch the modal
- const modalLauncher = document.getElementById('launch-modal-' + name);
+ const modalLauncher = document.getElementById('launch-modal-' + scenarioID);
modalLauncher.click();
}, false);
}