diff --git a/app/public/css/style.css b/app/public/css/style.css index ac1f0fefcbac77e9e4a7c9a2bb2725e23825df67..a974fe17be7a96ef01123dc5a81a0a124d6893f2 100644 --- a/app/public/css/style.css +++ b/app/public/css/style.css @@ -8,4 +8,12 @@ color: #333; font-size: 16px; margin-bottom: 5px; -} \ No newline at end of file +} + +.bg-beige { + background-color: #DCF5F4FF; +} +.bg-custom { + background-color: #42a4b2; +} + diff --git a/app/public/images/logo2.webp b/app/public/images/logo2.webp new file mode 100644 index 0000000000000000000000000000000000000000..ef4740620ac7b94d61d062ebf3ed63746620ceff Binary files /dev/null and b/app/public/images/logo2.webp differ diff --git a/app/views/dashboard.pug b/app/views/dashboard.pug index f4841953f4e7ecea0f38004137b45deaff8b03e6..fc0a7d23d9f1ef840390c721175bd449e2cd3191 100644 --- a/app/views/dashboard.pug +++ b/app/views/dashboard.pug @@ -2,18 +2,18 @@ extends layout block content div#app-container.container - div.mb-4(style='border: 1px solid #ccc; padding: 10px; border-radius: 5px;') + div.bg-custom.text-white.py-2.mb-4(style='border: 1px solid #ccc; padding: 10px; border-radius: 5px;') h2.mb-3.text-center Paramètres du Seau - div#seau-parameters - hr - div.mb-3 + div#seau-parameters.row + + //div.mb-3 label(for='distanceCapteur', class='form-label') Consommation d'eau: input(type='number', class='form-control', id='distanceCapteur', placeholder='Entrez la distance en cm') - button.btn.btn-primary.mb-3(onclick='calculateVolume()') Calculer le volume et la consommation + //button.btn.btn-primary.mb-3(onclick='calculateVolume()') Calculer le volume et la consommation + + //div#result - div#result - hr div.mb-3 label(for='notificationMethod', class='form-label') Méthode de notification: select(id='notificationMethod', class='form-select', onchange='updateNotificationMethod()') @@ -27,20 +27,21 @@ block content const responseParameters = await fetch('/parametres-seau'); const seauParameters = await responseParameters.json(); - // Afficher les paramètres du seau dans la page - seauParametersDiv.innerHTML = ` -

Rayon du seau: ${seauParameters.rayonSeau} cm

-

Hauteur initiale de l'eau: ${seauParameters.hauteurInitialeEau} cm

-

Distance supplémentaire entre le capteur et le bord supérieur du seau: ${seauParameters.distanceSupplementaire} cm

-

Volume initial d'eau: ${seauParameters.volumeEauInitial.toFixed(2)} cm³

+ let seauParametersHTML = ''; + + seauParametersHTML += ` +

Rayon du seau ${seauParameters.rayonSeau} cm

+

Hauteur initiale de l'eau ${seauParameters.hauteurInitialeEau} cm

+

Distance supplémentaire ${seauParameters.distanceSupplementaire} cm

+

Volume initial d'eau ${seauParameters.volumeEauInitial.toFixed(2)} cm³

`; - // Charger la méthode de notification actuelle + seauParametersDiv.innerHTML = seauParametersHTML; + const notificationMethodSelect = document.getElementById('notificationMethod'); const responseNotification = await fetch('/methode-notification'); const {methodeNotification} = await responseNotification.json(); - // Mettre à jour le formulaire avec la méthode de notification actuelle notificationMethodSelect.value = methodeNotification; }); diff --git a/app/views/index.pug b/app/views/index.pug index 741f61d2d0131fdf78c0c5bdb7bebdae0bc3160a..ca333addba8c73a8f40bc8ffda9f31565a37155e 100644 --- a/app/views/index.pug +++ b/app/views/index.pug @@ -3,12 +3,26 @@ extends layout block content .container-md .card.mt-4 - .card-body + .card-body.bg-custom.text-white + img(src="/images/logo2.webp", width="120", height="120", alt="Image", class="img-fluid mx-auto d-block mt-4 rounded-circle") h1.card-title.text-center Abreuvoir Intelligent - p.card-text + p.card-text.text-center | Bienvenue sur l'application d'abreuvoir intelligent. Notre application surveille la consommation d'eau des vaches | pour vous fournir des informations utiles sur leur comportement d'abreuvement. - h2.card-title.text-center Consommation d'eau des vaches - p Découvrez en temps réel la consommation d'eau de vos vaches grâce à notre système intelligent. - h2.card-title.text-center Graphique des Consommations - p Consultez le graphique interactif pour visualiser la consommation d'eau au fil du temps et prendre des décisions éclairées. + + .row.mt-4 + .col-md-4 + .card + .card-body + h2.card-title.text-center Consommation d'eau des vaches + p Découvrez en temps réel la consommation d'eau de vos vaches grâce à notre système intelligent. + .col-md-4 + .card + .card-body + h2.card-title.text-center Graphique des Consommations + p Consultez le graphique interactif pour visualiser la consommation d'eau au fil du temps et prendre des décisions éclairées. + .col-md-4 + .card + .card-body + h2.card-title.text-center Consommations par Période + p Découvrez les statistiques de consommation d'eau de vos vaches regroupées par période de temps spécifique. diff --git a/app/views/layout.pug b/app/views/layout.pug index 58b19a4c334a5124e3ecad5a3027a70e90cb2e5f..c895b68ba981df292f64c0d07654e52b268ff5c4 100644 --- a/app/views/layout.pug +++ b/app/views/layout.pug @@ -5,25 +5,30 @@ html(lang="en") meta(name="viewport", content="width=device-width, initial-scale=1.0") title Abreuvoir Intelligent link(rel="stylesheet", href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css") + link(rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous") + link(rel='stylesheet', href='/css/style.css') script(src="https://cdn.jsdelivr.net/npm/chart.js") - link(rel='stylesheet', href='../public/css/style.css') body - nav.navbar.navbar-expand-lg.navbar-light.bg-light - .container-fluid - a.navbar-brand(href="/") Accueil + nav.navbar.navbar-expand-lg.navbar-light.bg-beige + .container-fluid.d-flex.align-items-center + div.d-flex.align-items-center + a.navbar-brand(href="/") + img(src="/images/logo2.webp", alt="Logo", width="60", height="60", class="d-inline-block align-top me-2 rounded-circle") + h3.mb-2 Abreuvoir Intelligent button.navbar-toggler(type="button", data-bs-toggle="collapse", data-bs-target="#navbarNav", aria-controls="navbarNav", aria-expanded="false", aria-label="Toggle navigation") span.navbar-toggler-icon #navbarNav.collapse.navbar-collapse ul.navbar-nav - li.nav-item - a.nav-link(href="/information-generale") Information Générale - li.nav-item - a.nav-link(href="/graphique-consommations") Graphique des Consommations - li.nav-item - a.nav-link(href="/liste-consommations") Liste des Consommations - li.nav-item - a.nav-link(href="/consommations-par-periode") Consommations par Période + li.nav-item.mx-3 + a.nav-link(href="/information-generale", class="fw-bold") Information Générale + li.nav-item.mx-3 + a.nav-link(href="/graphique-consommations", class="fw-bold") Graphique des Consommations + li.nav-item.mx-3 + a.nav-link(href="/liste-consommations", class="fw-bold") Liste des Consommations + li.nav-item.mx-3 + a.nav-link(href="/consommations-par-periode", class="fw-bold") Consommations par Période + .container.mt-5 block content script(src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js")