commenti per scenari e qualche fix

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

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">

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);
 }