Merge pull request #16 from eastanganelli/development

Adding little animation and loading screen
eastanganelli · Sep 5, 2023 · a292c74 · a292c74
2 parents 06b42e5 + 36031c4
commit a292c74
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 10 deletions.
diff --git a/controllers/status/status.controller.js b/controllers/status/status.controller.js
@@ -13,7 +13,7 @@ const StudentStatus = (req, res) => {
             subject_ = new iri();
             subject_.studentData(studentFilter).then((student) => {
                 res.status(200).send(`
-                    <div class="card">
+                    <div class="animate__animated animate__tada card">
                         <div class="card-header">
                             <h5 ${streaming ? 'aria-hidden="true"' : ''} class="card-title placeholder-glow"><span class="${streaming ? 'placeholder' : ''}"">${student['name']} ${student['lastname']}</span></h5>
                             <h6 ${streaming ? 'aria-hidden="true"' : ''} class="card-subtitle mb-2 text-body-secondary placeholder-glow"><span class="${streaming ? 'placeholder' : ''}">${student['dni']}</span></h6>
@@ -43,7 +43,7 @@ const StudentStatus = (req, res) => {
             subject_ = new lpii();
             subject_.studentData(studentFilter).then((student) => {
                 res.status(200).send(`
-                    <div class="card">
+                    <div class="animate__animated animate__tada card">
                         <div class="card-header">
                             <h5 ${streaming ? 'aria-hidden="true"' : ''} class="card-title placeholder-glow"><span class="${streaming ? 'placeholder' : ''}"">${student['name']} ${student['lastname']}</span></h5>
                             <h6 ${streaming ? 'aria-hidden="true"' : ''} class="card-subtitle mb-2 text-body-secondary placeholder-glow"><span class="${streaming ? 'placeholder' : ''}">${student['dni']}</span></h6>

diff --git a/public/javascripts/functions.js b/public/javascripts/functions.js
@@ -1,4 +1,6 @@
 const alertPlaceholder = $(`#liveAlertPlaceholder`);
+const statusResponse = $(`#statusResponse`);
+const loadingPlaceholder = $(`#loadingPlaceholder`);
 
 const appendAlert = (message, type) => {
     const wrapper = document.createElement('div');
@@ -15,4 +17,30 @@ const appendAlert = (message, type) => {
             $(`#myAlert`).remove();
         });
     });
-}
+}
+
+const loadingCard = () => {
+    const wrapper = `<div class="animate__animated animate__zoomIn card placeholder-glow">
+                        <div class="card-header">
+                            <h5 class="card-title"><span class="placeholder col-6"></span></h5>
+                            <h6 class="card-subtitle mb-2 text-body-secondary"><span class="placeholder col-6"></span></h6>
+                        </div>
+                        <div class="card-body">
+                            <blockquote class="blockquote mb-0">
+                                <p>Notas</p>
+                                <footer class="blockquote-footer"><span class="placeholder col-7"></span></footer>
+                            </blockquote>
+                            <blockquote class="blockquote mb-0">
+                                <p>Porcentaje de Asistencia Teórica:</p>
+                                <footer class="blockquote-footer"><span class="placeholder col-7"></span></footer>
+                            </blockquote>
+                            <blockquote class="blockquote mb-0">
+                                <p>Porcentaje de Asistencia Práctica:</p>
+                                <footer class="blockquote-footer"><span class="placeholder col-7"></span></footer>
+                            </blockquote>
+                        </div>
+                    </div>`;
+    statusResponse.html(wrapper).ready(() => {
+
+    });
+};
diff --git a/public/javascripts/index.js b/public/javascripts/index.js
@@ -12,8 +12,10 @@
             else
                 appendAlert(`No se seleccionó la materia`, `danger`);
         } else {
+            loadingCard();
             $.get(`/studentstatus`, { student: student_, subject: subject_ }).done((data) => {
                 $(`#statusResponse`).html(data);
+                loadingPlaceholder.remove();
             }).fail((err) => {
                 appendAlert(err.responseText, `danger`);
             });

diff --git a/routes/index.route.js b/routes/index.route.js
@@ -10,8 +10,6 @@ IndexRoute.get('/', (req, res, next) => {
 		</option><option value="1" ${selSubject == 1 ? 'selected' : ''}>IRI</option>
 		<option value="2" ${selSubject == 2 ? 'selected' : ''}>LP II</option>
     </select>`;
-
-console.log(selSubject,subjects);
 
 	res.render('pages/index', { title: 'Estado Materias',
 								year: new Date().getUTCFullYear(),

diff --git a/views/partials/head.ejs b/views/partials/head.ejs
@@ -3,11 +3,9 @@
   <head>
     <title><%= title %></title>
     <link rel='stylesheet' href='/stylesheets/style.css' />
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet"
-        integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"
-        integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
-        crossorigin="anonymous"></script>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
     <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
   </head>
   <body>