Merge pull request #47 from datalab-mi/feature/info-error

Feature/info error
dnum-mi · Apr 7, 2022 · 82af7f1 · 82af7f1
2 parents 161ae1c + 2e07418
commit 82af7f1
Show file tree

Hide file tree

Showing 9 changed files with 175 additions and 20 deletions.
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -30,4 +30,5 @@
 #nav a.router-link-exact-active {
   color: #42b983;
 }
+
 </style>
diff --git a/frontend/src/components/HeaderMain.vue b/frontend/src/components/HeaderMain.vue
@@ -6,10 +6,12 @@
                     <div class="fr-header__brand fr-enlarge-link">
                         <div class="fr-header__brand-top">
                             <div class="fr-header__logo">
-                                <p class="fr-logo">
-                                    Ministère
-                                    <br>de l'Intérieur
-                                </p>
+                                <a href="/">
+                                    <p class="fr-logo">
+                                        Ministère
+                                        <br>de l'Intérieur
+                                    </p>
+                                </a>
                             </div>
                             <div class="fr-header__navbar">
                                 <button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-833" aria-haspopup="menu" title="Menu" id="fr-btn-menu-mobile">

diff --git a/frontend/src/components/ResultsComponent.vue b/frontend/src/components/ResultsComponent.vue
@@ -31,10 +31,12 @@
                     <span class="fr-fi-refresh-line" aria-hidden="true"></span>
                     <p class="action-group-text">RECOMMENCER</p>
                 </div>
-                <div class="action-group">
-                    <span class="fr-fi-information-line" aria-hidden="true"></span>
-                    <p class="action-group-text">A PROPOS</p>
-                </div>
+                <a href="/informations" class="no-shadow">
+                    <div class="action-group">
+                        <span class="fr-fi-information-line" aria-hidden="true"></span>
+                        <p class="action-group-text">A PROPOS</p>
+                    </div>
+                </a>
             </div>
         </div>
     </div>
@@ -164,13 +166,19 @@
     .action-group {
         text-align: center;
         cursor: pointer;
-        margin: 8px 0
+        margin: 8px 0;
+    }
+    .action-group:hover {
+        color: #1212ff;
     }
     .action-group-text {
         font-size: 12px;
         font-weight: bold;
         margin: 0
     }
+    .no-shadow {
+        box-shadow: none;
+    }
     .blank {
         height: 80px
     }

diff --git a/frontend/src/components/UploadButton.vue b/frontend/src/components/UploadButton.vue
@@ -53,12 +53,15 @@
                             if (err.response) {
                                 console.log(err.response.status)
                                 console.log(err.response.data)
+                                window.location.replace("/erreur")
                             } else if (err.request) {
                                 // The request was made but no response was received
                                 console.log(err.request);
+                                window.location.replace("/erreur")
                             } else {
                                 // Something happened in setting up the request that triggered an Error
                                 console.log('Error', err.message);
+                                window.location.replace("/erreur")
                             }
                         });
                     }

diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
@@ -1,5 +1,8 @@
 import { createWebHistory, createRouter } from 'vue-router'
 import Home from '../views/Home.vue'
+import Informations from '../views/Informations.vue'
+import Error from '../views/Error.vue'
+import PageNotFound from '../views/PageNotFound.vue'
 
 
 const routes = [
@@ -9,12 +12,19 @@ const routes = [
     component: Home
   },
   {
-    path: '/about',
-    name: 'About',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import('../views/About.vue')
+    path: '/informations',
+    name: 'Informations',
+    component: Informations
+  },
+  {
+    path: '/erreur',
+    name: 'Error',
+    component: Error
+  },
+  {
+    path: '/:pathMach(.*)*',
+    name: 'PageNotFound',
+    component: PageNotFound
   }
 ]
 

diff --git a/frontend/src/views/About.vue b/frontend/src/views/About.vue
diff --git a/frontend/src/views/Error.vue b/frontend/src/views/Error.vue
@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <HeaderMain />
+    <div class="text-center m-4">
+        <h1>Erreur</h1>
+        <p>Une erreur est survenue dans le traitement de votre requête.</p>
+        <p>Veuillez réessayer ou <a href="/informations"> nous contacter</a>.</p>
+        <DsfrButton
+        :label="labelButton"
+            @click="homeRedirect"
+        />  
+    </div>
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+import HeaderMain from '@/components/HeaderMain.vue';
+
+export default {
+  name: 'ErrorPage',
+  components: {
+    HeaderMain
+  },
+  data() {
+      return {
+          labelButton: "Retour"
+      }
+  },
+  methods: {
+      homeRedirect() {
+          window.location.replace("/")
+      }
+  }
+}
+</script>
diff --git a/frontend/src/views/Informations.vue b/frontend/src/views/Informations.vue
@@ -0,0 +1,65 @@
+<template>
+  <div>
+    <HeaderMain />
+    <div class="content">
+        <div class="d-flex align-items-center">
+            <a href="/" class="small-link small-text"> Accueil</a>
+            <span class="fr-fi-arrow-right-s-line" aria-hidden="true"></span>
+            <p class="small-text">Informations</p>
+        </div>
+        <h3 class="title-space">Cadre et limitations</h3>
+        <p>Basegun est un projet d'application par apprentissage automatique capable d'identifier et de classifier
+            de manière fiable et rapide une arme à feu.</p>
+        <p>Le projet a été initié en 2021 et est en cours de développement par le Data Lab du Ministère de l'Intérieur.</p>
+        <p>A ce jour, Basegun permet de prendre en photo une arme à feu et d'obtenir un
+            résultat parmi 10 typologies possibles. Ce résultat donne une indication sur la ou les catégories légales
+            à laquelle l'arme appartient.</p>
+        <p class="fr-callout"><span class="fr-fi-alert-fill" aria-hidden="true"></span> Basegun ne prend pas encore en compte l'identification des armes non létales (factices,
+            à air comprimé, à blanc ou neutralisées).</p>
+        <h3 class="title-space">Equipe et contacts</h3>
+        <p>Deux personnes travaillent actuellement à temps plein sur ce projet:
+            <ul class="contact-list">
+                <li>Sarah Gross, data scientist ([email protected])</li>
+                <li>Beryl Koller, développeuse web ([email protected])</li>
+            </ul>
+        </p>
+        <h3 class="title-space">Code source</h3>
+        <p>Le code source du projet est disponible publiquement à l'adresse <a href="https://github.com/datalab-mi/Basegun" target="blank">https://github.com/datalab-mi/Basegun</a></p>
+    </div>
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+import HeaderMain from '@/components/HeaderMain.vue';
+
+export default {
+  name: 'InformationsPage',
+  components: {
+    HeaderMain
+  }
+}
+</script>
+
+<style scoped>
+    .content {
+        margin: min(5vw, 10rem);
+    }
+    .title-space {
+        margin-top: 20px;
+    }
+    .contact-list {
+        margin-left: 2rem;
+    }
+    .small-text {
+        font-size: 10pt;
+        margin-bottom: 0;
+    }
+    .small-link {
+        color: #000091;
+    }
+    .small-link:hover {
+        color: #1212ff
+    }
+
+</style>
diff --git a/frontend/src/views/PageNotFound.vue b/frontend/src/views/PageNotFound.vue
@@ -0,0 +1,35 @@
+<template>
+    <div>       
+        <HeaderMain />
+        <div class="text-center m-4">
+            <h1>Page non trouvée</h1>
+            <p>Vous avez saisi ou suivi un lien vers une page qui n'existe pas.</p>
+            <DsfrButton
+            :label="labelButton"
+             @click="homeRedirect"
+            />
+        </div>
+    </div>
+</template>
+
+<script>
+// @ is an alias to /src
+import HeaderMain from '@/components/HeaderMain.vue';
+
+export default {
+  name: 'PageNotFound',
+  components: {
+    HeaderMain
+  },
+  data() {
+      return {
+          labelButton: "Retour"
+      }
+  },
+  methods: {
+      homeRedirect() {
+          window.location.replace("/")
+      }
+  }
+}
+</script>