Inicio Explorar Ayuda
Iniciar sesión
fgm
/
go__sqs_demo
1
0
Fork 0
Archivos Pull Requests 0
Explorar el Código

ADDED: Confirme page style and messages list and handlers

Axelle Lança hace 2 años
padre
2cb6cc4ae9
commit
d68bcbf12b
Se han modificado 3 ficheros con 130 adiciones y 48 borrados
Unificar vista Mostrar estadísticas de diff
  1. 40 0
      front/assets/script.js
  2. 16 14
      front/templates/confirm.gohtml
  3. 74 34
      front/templates/queue.gohtml

+ 40 - 0
front/assets/script.js
Ver fichero 

@@ -0,0 +1,40 @@
 
+const selectAllBtn = document.querySelector('#select-all');
 
+const checkboxes = document.querySelectorAll('.checkbox');
 
+const deleteBtn = document.querySelector('#delete');
 
+
 
+selectAllBtn.addEventListener('click', eventCheckBox);
 
+
 
+/**
 
+ * @description Event handler for select all checkbox
 
+ */
 
+function eventCheckBox () {
 
+
 
+    if (selectAllBtn.checked) {
 
+        checkboxes.forEach(checkbox => {
 
+            checkbox.checked = true;
 
+        });
 
+    } else {
 
+        checkboxes.forEach(checkbox => {
 
+            checkbox.checked = false;
 
+        });
 
+    }
 
+}
 
+
 
+/**
 
+ * @description Event handler for checkbox to enable/disable delete button
 
+ */
 
+function handleCheckboxChange() {
 
+    let atLeastOneChecked = false;
 
+
 
+    checkboxes.forEach(function(checkbox) {
 
+        if (checkbox.checked) {
 
+            atLeastOneChecked = true;
 
+        }
 
+    });
 
+
 
+    deleteBtn.disabled = !atLeastOneChecked;
 
+}
 
+
 
+checkboxes.forEach((checkbox)=> {
 
+    checkbox.addEventListener("change", handleCheckboxChange);
 
+});

+ 16 - 14
front/templates/confirm.gohtml
Ver fichero 

@@ -5,23 +5,25 @@
 
         <meta charset="UTF-8">
 
         <meta charset="UTF-8">
 
         <title>Confirmation needed</title>
 
         <title>Confirmation needed</title>
 
         <link rel="stylesheet" href="/assets/styles.css"/>
 
         <link rel="stylesheet" href="/assets/styles.css"/>
 
+        <link rel="stylesheet" href="/assets/bootstrap.min.css">
 
     </head>
 
     </head>
 
     <body>
 
     <body>
 
-    <div class="container mx-auto">
 
-        <h1 class="text-3xl font-bold underline">Confirmation needed</h1>
 
-        {{ template "flashes" .flashes }}
 
-        <div>
 
-            <div>
 
-                <img src="/assets/warning-cc0-1.0.png"  style="width:48px" class="float-left" alt="yellow warning sign"/>
 
-                <p class="float-left">{{ .question }}</p>
 
+        <main class="container mt-5">
 
+            <h1 class="display-4 py-4">Confirmation needed</h1>
 
+            {{ template "flashes" .flashes }}
 
+            <div class="border border-danger rounded p-3 bg-danger bg-opacity-10">
 
+                <div>
 
+                    <h3 class="text-danger">{{ .question }}</h3>
 
+                </div>
 
+                <div class="mt-3 mb-5">
 
+                    <p class="fs-4 text">{{ .description }}</p>
 
+                </div>
 
+                <form method="post">
 
+                    <a href="{{ .redirect }}" class="btn btn-outline-dark btn-lg px-4">{{ .cancel }}</a>
 
+                    <button class="btn btn-danger btn-lg px-5">{{ .confirm }}</button>
 
+                </form>
 
             </div>
 
             </div>
 
-            <div class="clear-both">{{ .description }}</div>
 
-            <form method="post">
 
-                <a href="{{ .redirect }}" class="btn-cancel">{{ .cancel }}</a>
 
-                <button class="btn-primary">{{ .confirm }}</button>
 
-            </form>
 
-        </div>
 
-    </div>
 
+        </main>
 
     </body>
 
     </body>
 
     </html>
 
     </html>
 
 {{end}}
 
 {{end}}

+ 74 - 34
front/templates/queue.gohtml
Ver fichero 

@@ -10,40 +10,80 @@
 
     <body>
 
     <body>
 
     {{ $th := "border border-slate-300 dark:border-slate-700 p-4 text-slate-500 dark:text-slate-400" }}
 
     {{ $th := "border border-slate-300 dark:border-slate-700 p-4 text-slate-500 dark:text-slate-400" }}
 
     {{ $td := "border border-slate-300 dark:border-slate-700 p-4 text-slate-500 dark:text-slate-400" }}
 
     {{ $td := "border border-slate-300 dark:border-slate-700 p-4 text-slate-500 dark:text-slate-400" }}
 
-    <main class="container">
 
-    <div class="container mt-5">
 
-        <nav aria-label="breadcrumb">
 
-            <ol class="breadcrumb">
 
-                <li class="breadcrumb-item"><a href="#">Home</a></li>
 
-                <li class="breadcrumb-item active" aria-current="page">{{ .info.Name }}</li>
 
-            </ol>
 
-        </nav>
 
-        <h1 class="text-3xl font-bold underline">Queue view for {{ .info.Name }}</h1>
 
-        {{ template "flashes" .flashes }}
 
-        <table class="table">
 
-            <thead>
 
-            <tr>
 
-                <th scope="col" class="{{ $th }}">Propriété</th>
 
-                <th scope="col" class="{{ $th }}">Valeur</th>
 
-            </tr>
 
-            </thead>
 
-            <tbody>
 
-            <tr>
 
-                <th scope="row" class="{{ $th }}">Nom</th>
 
-                <td class="{{ $td }}">
 
-                    <pre>{{ .info.Name }}</pre>
 
-                </td>
 
-            </tr>
 
-            <tr>
 
-                <th scope="row" class="{{ $th }}">URL</th>
 
-                <td class="{{ $td }}">
 
-                    <pre><a href="{{ .info.URL }}">{{ .info.URL }}</a></pre>
 
-                </td>
 
-            </tr>
 
-            </tbody>
 
-        </table>
 
-    </div>
 
-    </main>
 
+        <main class="container">
 
+        <div class="container mt-5">
 
+            <nav aria-label="breadcrumb">
 
+                <ol class="breadcrumb">
 
+                    <li class="breadcrumb-item"><a href="#">Home</a></li>
 
+                    <li class="breadcrumb-item active" aria-current="page">{{ .info.Name }}</li>
 
+                </ol>
 
+            </nav>
 
+            <h1 class="text-3xl font-bold underline">Queue view for {{ .info.Name }}</h1>
 
+            {{ template "flashes" .flashes }}
 
+            <table class="table">
 
+                <thead>
 
+                <tr>
 
+                    <th scope="col" class="{{ $th }}">Propriété</th>
 
+                    <th scope="col" class="{{ $th }}">Valeur</th>
 
+                </tr>
 
+                </thead>
 
+                <tbody>
 
+                <tr>
 
+                    <th scope="row" class="{{ $th }}">Nom</th>
 
+                    <td class="{{ $td }}">
 
+                        <pre>{{ .info.Name }}</pre>
 
+                    </td>
 
+                </tr>
 
+                <tr>
 
+                    <th scope="row" class="{{ $th }}">URL</th>
 
+                    <td class="{{ $td }}">
 
+                        <pre><a href="{{ .info.URL }}">{{ .info.URL }}</a></pre>
 
+                    </td>
 
+                </tr>
 
+                </tbody>
 
+            </table>
 
+        </div>
 
+
 
+            <section class="container mt-5">
 
+                <div class="d-flex align-items-center justify-content-between">
 
+                    <h2 class="my-5">Messages</h2>
 
+                    <button type="submit" form="msg-form" id="delete" class="btn btn-outline-danger" disabled>Delete selection</button>
 
+                </div>
 
+
 
+                <table class="table">
 
+                    <thead>
 
+                    <tr>
 
+                        <th scope="col d-flex align-items-center">
 
+                            <input id="select-all" class="form-check-input mt-0 me-3" type="checkbox">
 
+                            <span>Select all</span>
 
+                        </th>
 
+                        <th scope="col" >Propriété</th>
 
+                        <th scope="col">Valeur</th>
 
+                    </tr>
 
+                    </thead>
 
+                    <form action="post" id="msg-form">
 
+                    <tbody>
 
+                    <tr>
 
+                        <td><input class="form-check-input checkbox" type="checkbox" id="flexCheckDefault"></td>
 
+                        <td><label for="flexCheckDefault">{{ info message }}</label></td>
 
+                        <td>Some value ?</td>
 
+                    </tr>
 
+                    <tr>
 
+                        <td><input class="form-check-input checkbox" type="checkbox" id="flexCheckChecked"></td>
 
+                        <td><label for="flexCheckChecked">{{ info message }}</label></td>
 
+                        <td>Some value ?</td>
 
+                    </tr>
 
+                    <tr>
 
+                        <td><input class="form-check-input checkbox" type="checkbox" id="flexCheckChecked2"></td>
 
+                        <td><label for="flexCheckChecked2">{{ info message }}</label></td>
 
+                        <td>Some value ?</td>
 
+                    </tr>
 
+                    </tbody>
 
+                    </form>
 
+                </table>
 
+            </section>
 
+        </main>
 
+        <srcipt src="/assets/script.js"></srcipt>
 
     </body>
 
     </body>
 
     </html>
 
     </html>
 
 {{end}}
 
 {{end}}