Merge branch 'dev' into dev

marconicivitavecchia · Nov 28, 2023 · e8e6943 · e8e6943
2 parents e95ec71 + 4af150e
commit e8e6943
Show file tree

Hide file tree

Showing 5 changed files with 126 additions and 44 deletions.
diff --git a/Frontend/app.js b/Frontend/app.js
@@ -1,40 +1,43 @@
+function myDone(data) {
+    console.log("Done");
+    console.log(data);
+    $("#follower-content").text(data.followerCount);
+}
+function onFail() {
+    console.log("Fail");
+}
 function myCall() { 
     console.log("interval timer...");
-    $.getJSON("./data.json").done(myDone).fail(onFail);
-}
-
-function myDone(dataJson) {
-    console.log(dataJson.follower);  //chiamiamo follower all'interno del file data.json, quindi stamperà 100 
+    $.getJSON("http://localhost:3000/getFollowerCount").done(myDone).fail(onFail);
 }
-
-function onFail(e){
-    console.log(e);       //nel caso di errore, verrà stampato 
-}   
-
 function myInit() {
     console.log("OK!");
     setInterval(myCall, 1000);  //chiama la funzione myCall ogni 1000ms
 }
-
-function loadJSON() {
-    fetch('data.json')
-        .then(response => response.json())
-        .then(data => {
-            // Estrai il valore della variabile "follower"
-            const followerValue = data.follower;
-
-            // Ottieni l'elemento HTML in cui desideri stampare il valore
-            const followerContent = document.getElementById('follower-content');
-
-            // Assegna il valore della variabile "follower" all'elemento HTML
-            followerContent.textContent = followerValue;
-        })
-        .catch(error => {
-            console.error('Errore nel caricamento del file JSON:', error);
-        });
-}
-
-// Carica il JSON inizialmente
-loadJSON();
-
-$(document).init(myInit);
+// Fetch the initial follower count from the server
+fetch('http://localhost:3000/getFollowerCount')
+.then(response => {
+    // Check if the response status is ok (HTTP status code 200-299)
+    if (!response.ok) {
+        // Handle non-ok responses
+        if (response.status === 404) {
+            // Throw an error if the endpoint is not found
+            throw new Error('Endpoint not found');
+        } else {
+            // Try to get the response body as text for further examination
+                return response.text();
+        }
+    }
+    // If the response is ok, parse it as JSON
+    return response.json();
+})
+.catch(error => console.error(error));
+$(document).ready(myInit);
+
+document.addEventListener('DOMContentLoaded', function() {
+    // Mostra il contenuto principale
+    document.querySelector('.main-content').style.display = 'block';
+
+    // Nascondi la pagina di caricamento
+    document.querySelector('.loader-container').style.display = 'none';
+});
diff --git a/Frontend/data.json b/Frontend/data.json
diff --git a/Frontend/index.html b/Frontend/index.html
@@ -8,18 +8,40 @@
     <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
 </head>
 <body>
-    <h1>INSTAGRAM FOLLOWER COUNTER</h1>
+
+<div class="loader-container">
+        <img src="tuo-logo.png" alt="Logo" class="logo"> <!-- Sostituisci "tuo-logo.png" con il percorso del tuo logo -->
+        <p class="loading-text">Caricamento in corso...</p>
+    </div>
+
+    <!-- Contenuto principale che sarà nascosto durante il caricamento -->
+<div class="main-content"> <!-- Inserisci qui il tuo contenuto principale -->
+
+	<h1>INSTAGRAM FOLLOWER COUNTER</h1>
     <hr style="height: 4px; width: 55%" class="line">
     <div class="centered-object" id="follower-content"></div>
     <img src="logo_marconi.png" class="image">
     <p>IIS G.Marconi</p>
-
+
+    <div class="empty-space"></div>
+
+
+    <footer>
+      Email di supporto : 
+        <a href="mailto:[email protected]">[email protected]</a><br>
+        <a href="https://www.marconicivitavecchia.it/">Marconi Civitavecchia</a>
+        <p>Realizzato dalla 5C Informatica</p>
+        <small>© Tutti i diritti riservati. </small><br>
+
+    </footer>
+
     <script src="jquery.js"></script>
     <script src="app.js"></script>
-    <script src="printJson.js"></script>
+</div>
+
 </body>
 </html>
 
 
 
-
+
diff --git a/Frontend/style.css b/Frontend/style.css
@@ -21,16 +21,38 @@
 }
 
 body {
-    font-family: 'Montserrat';font-size: 30px;
+    font-family: 'Montserrat'; font-size: 30px;
     text-align:center;
 
     background: var(--body-bg);
     color: var(--body-color);
 
 }
 
-.image {
-    margin-top: 3%;
+.loader-container {
+    text-align: center;
+}
+
+.logo {
+    width: 100px; /* Personalizza la larghezza del tuo logo */
+    height: 100px; /* Personalizza l'altezza del tuo logo */
+    animation: spin 1s linear infinite;
+    margin-bottom: 20px;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+.loading-text {
+    font-size: 18px;
+    color: #333;
+}
+
+/* Stile del contenuto principale che sarà nascosto durante il caricamento */
+.main-content {
+    display: none;
 }
 
 .centered-object {
@@ -53,4 +75,17 @@ body {
         background-color:black;
         border: 2px solid white;
     }
-}
+}
+
+.empty-space {
+    height: 800px;
+}
+
+a {color : white}
+
+footer {
+    background-color: darkgrey;
+    color: white;
+    text-align: center;
+    padding: 3px;
+}
diff --git a/docs/index.rst b/docs/index.rst
@@ -15,6 +15,31 @@ In questa società dove tutti noi vogliamo controllare tutto, ma soprattutto vog
 
 Con l\'**Instagram Follower Counter** vi basterà posizionarlo dove preferite e semplicemente collegando il vostro account, vi basterà girare la testa per vedere il numero attuale di follower del vostro profilo Instagram e perché no, farlo vedere a tutti!
 
+Personas
+--------
+
+Per l'Instagram Follower Counter abbiamo pensato a due tipologie di utenti:
+
+.. admonition:: Personas 1
+   :class: defn
+
+   **Nome:** Mario Lugani
+
+   **Obbiettivo principale:** Mostrare i suoi follower nelle live e nei post.
+
+   **Descrizione:** Mario è un ragazzo di 18 anni, che vive a Milano. Ha la passione per i videogiochi e per i social, infatti si è aperto un canale Twitch e Youtube dove tre volte a settimana fa le sue live. Lavorando sui social, durante le live a Marco piace far vedere agli spettatori il numero di follower della sua pagina Instagram.
+
+--------------------------------------------------------------------------------
+
+.. admonition:: Personas 2
+   :class: defn
+
+   **Nome:** Alessia Ercole
+
+   **Obbiettivo principale:** Commerciante che vuole mettersi a paro con i tempi mostrando ai clienti il numero di follower del suo account Instagram.
+
+   **Descrizione:** Alessia è una ragazza di 23 anni che vive a Torino. Ha appena aperto un negozio sotto casa che vende cosmetici. Essendo un negozio molto moderno Alessia punta molto sui social per vendere i suoi prodotti. Vuole quindi un oggetto di design per mostrare ai clienti il numero di follower della sua pagina Instagram.
+
 Licenza
 -------