Image resize and conversion to webp format

prociv-sm · Sep 22, 2022 · 030e2d0 · 030e2d0
1 parent 49dfcb3
commit 030e2d0
Show file tree

Hide file tree

Showing 24 changed files with 123 additions and 9 deletions.
diff --git a/nuxt.config.js b/nuxt.config.js
@@ -9,8 +9,7 @@ module.exports = {
     title: 'Home' || '',
     meta: [
       { charset: 'utf-8' },
-      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
-      { hid: 'description', name: 'description', content: '' }
+      { name: 'viewport', content: 'width=device-width, initial-scale=1' }
     ],
     link: [
       { rel: 'icon', type: 'image/png', href: '/index.png' },

diff --git a/src/assets/img/activity.jpg b/src/assets/img/activity.jpg
diff --git a/src/assets/img/groups.jpg b/src/assets/img/groups.jpg
diff --git a/src/assets/img/hq.png b/src/assets/img/hq.png
diff --git a/src/assets/img/hq.webp b/src/assets/img/hq.webp
diff --git a/src/assets/img/lazy.webp b/src/assets/img/lazy.webp
diff --git a/src/assets/img/reportage_car.webp b/src/assets/img/reportage_car.webp
diff --git a/src/assets/img/vehicles/cars/land.webp b/src/assets/img/vehicles/cars/land.webp
diff --git a/src/assets/img/vehicles/cars/mitsubishi.webp b/src/assets/img/vehicles/cars/mitsubishi.webp
diff --git a/src/assets/img/vehicles/ducato/ducato.jpg b/src/assets/img/vehicles/ducato/ducato.jpg
diff --git a/src/assets/img/vehicles/iveco/iveco2.jpg b/src/assets/img/vehicles/iveco/iveco2.jpg
diff --git a/src/assets/img/vehicles/land/land.jpg b/src/assets/img/vehicles/land/land.jpg
diff --git a/src/assets/img/vehicles/land/land2.jpg b/src/assets/img/vehicles/land/land2.jpg
diff --git a/src/assets/img/vehicles/mitsu/mitsubishi.jpg b/src/assets/img/vehicles/mitsu/mitsubishi.jpg
diff --git a/src/assets/img/vehicles/mitsu/mitsubishi3.jpg b/src/assets/img/vehicles/mitsu/mitsubishi3.jpg
diff --git a/src/assets/img/vehicles/trucks/ducato.webp b/src/assets/img/vehicles/trucks/ducato.webp
diff --git a/src/assets/img/vehicles/trucks/iveco.webp b/src/assets/img/vehicles/trucks/iveco.webp
diff --git a/src/assets/img/volunteers/groups.webp b/src/assets/img/volunteers/groups.webp
diff --git a/src/components/navigation/LowerBar.vue b/src/components/navigation/LowerBar.vue
@@ -31,8 +31,8 @@
         <v-container class="py-0 px-0 px-sm-2">
           <v-btn text color="#ffffff" nuxt :to="{ path: localePath('/')}">{{ $t('menu.home') }}</v-btn>
           <v-btn text color="#ffffff" nuxt :to="{ path: localePath('/about')}">{{ $t('menu.about') }}</v-btn>
-          <v-btn text color="#ffffff" nuxt :to="{ path: localePath('/operations')}">{{ $t('menu.activity') }}</v-btn>
-          <v-btn text color="#ffffff" nuxt :to="{ path: localePath('/headquarter')}">{{ $t('menu.headquarters') }}</v-btn>
+          <v-btn text color="#ffffff" nuxt :to="{ path: localePath('/operations')}">{{ $t('operations.title') }}</v-btn>
+          <v-btn text color="#ffffff" nuxt :to="{ path: localePath('/headquarter')}">{{ $t('headquarters.title') }}</v-btn>
           <v-btn text color="#ffffff" nuxt :to="{ path: localePath('/volunteer')}">{{ $t('menu.volunteer') }}</v-btn>
           <v-btn text color="#ffffff" nuxt :to="{ path: localePath('/vehicle')}">{{ $t('menu.vehicles') }}</v-btn>
         </v-container>

diff --git a/src/layouts/default.vue b/src/layouts/default.vue
@@ -86,7 +86,7 @@ export default {
       sidebar: [
         { icon: 'home', i18n: 'menu.home', path: '/'},
         { icon: 'account-group', i18n: 'menu.about', path: '/about'},
-        { icon: 'shield-alert-outline', i18n: 'menu.activity', path: '/operations'},
+        { icon: 'shield-alert-outline', i18n: 'operations.title', path: '/operations'},
         { icon: 'office-building', i18n: 'menu.headquarters', path: '/headquarter'},
         { icon: 'account-group', i18n: 'menu.volunteer', path: '/volunteer'},
         { icon: 'car-settings', i18n: 'menu.vehicles', path: '/vehicle'},
@@ -106,7 +106,6 @@ export default {
       this.$auth.setUser(user)
       // Set axios token
       this.$axios.setToken(token, 'Bearer')
-      console.log('auth done!')
     } else {
       this.$auth.logout()
     }

diff --git a/src/pages/alerts.vue b/src/pages/alerts.vue
@@ -4,6 +4,122 @@
       <page-title i18n="menu.alerts" title='Allerte' class="mb-2" />
       <!-- Allerte list -->
       <div class="flex-grow-1 min-w-0">
+        <v-row dense>
+          <v-col cols="12" md="12">
+            <v-card>
+              <v-card-title>
+                 Le fasi operative
+              </v-card-title>
+              <v-card-text>
+                Quando c'è un'allerta, Regioni e comuni valutano, in base alla propria organizzazione e al proprio territorio, quale fase operativa del piano di Protezione Civile attivare:
+                <strong>ATTENZIONE</strong>, <strong>PRE-ALLARME</strong>, <strong>ALLARME</strong>. In caso di allerta rossa sul territorio, si attiva almeno la fase di pre-allarme.
+              </v-card-text>
+            </v-card>
+          </v-col>
+          <v-col cols="12" md="12">
+            <v-row dense>
+              <v-col cols="12" md="4">
+                <v-card>
+                  <v-card-title>
+                    <v-icon class="mr-2">mdi-alert-circle-outline</v-icon>
+                    ATTENZIONE
+                  </v-card-title>
+                  <v-divider />
+                  <v-card-subtitle>
+                    Il comune si prepara a rispondere all'eventuale emergenza attivando risorse e prodecure
+                  </v-card-subtitle>
+                  <v-card-text>
+                    <p class="center-text"><strong>VERIFICA</strong></p>
+                    <p>la prontezza operativa della propria struttura in contatto con Regione e Prefettura. <br>
+                      Verifica le reperibilità del personale e dei volontari</p>
+                  </v-card-text>
+                </v-card>
+              </v-col>
+              <v-col cols="12" md="4">
+                <v-card>
+                  <v-card-title>
+                    <v-icon class="mr-2">mdi-alert-circle-outline</v-icon>
+                    PRE-ALLARME
+                  </v-card-title>
+                  <v-divider />
+                  <v-card-subtitle>
+                    Il comune si mobilita per prevenire o ridurre i possibili danni a persone, animali e cose
+                  </v-card-subtitle>
+                  <v-card-text>
+                    <p class="center-text"><strong>ATTIVA</strong></p>
+                    <p>il Centro Operativo Comunale per coordinbare gli interventi <br>
+                    il personale e i volontari iniziano le attività di monitoraggio di sottopassi, argini, ponti,...</p>
+                  </v-card-text>
+                </v-card>
+              </v-col>
+              <v-col cols="12" md="4">
+                <v-card>
+                  <v-card-title>
+                    <v-icon class="mr-2">mdi-alert-circle-outline</v-icon>
+                    ALLARME
+                  </v-card-title>
+                  <v-divider />
+                  <v-card-subtitle>
+                    Il comune pienamente operativo per fronteggiare effetti e danni previsti o in atto
+                  </v-card-subtitle>
+                  <v-card-text>
+                    <p class="center-text"><strong>COORDINA</strong></p>
+                    <p>tutte le attività di assistenza e soccorso alla popolazione <br>
+                    l'evacuazione delle aree a rischio e il soccorso ai cittadini in difficoltà</p>
+                  </v-card-text>
+                </v-card>
+              </v-col>
+            </v-row>
+          </v-col>
+          <v-col cols="12" md="12">
+            <v-card>
+              <v-card-title>
+                I colori delle allerte
+              </v-card-title>
+              <v-card-text>
+                <p>Il dipartimento di protezione civile invia bollettini giornalieri codificando lo stato delle zone tramite codici colori, verde, giallo, arancione e rosso. In base al colore assegnato il territorio dovrà attivare le risorse opportune per verificare, mitigare ed eventualmente gestire l'emergenza in arrivo. Più l'allerta è importante, peggiori sono i possibili danni previsti </p>
+                <v-row dense>
+                  <v-col cols="12" md="4">
+                    <v-card color="yellow" outlined>
+                      <v-card-title>
+                        <v-icon class="mr-2">mdi-alert-circle-outline</v-icon>
+                        Giallo
+                      </v-card-title>
+                      <v-divider />
+                      <v-card-text>
+                        <p>Il territorio è soggetto a condizioni meteorologiche avverse, ma non è previsto alcun fenomeno particolarmente pericoloso</p>
+                      </v-card-text>
+                    </v-card>
+                  </v-col>
+                  <v-col cols="12" md="4">
+                    <v-card color="orange" outlined>
+                      <v-card-title>
+                        <v-icon class="mr-2">mdi-alert-circle-outline</v-icon>
+                        Arancione
+                      </v-card-title>
+                      <v-divider />
+                      <v-card-text>
+                        <p>Il territorio è soggetto a condizioni meteorologiche avverse, ma non è previsto alcun fenomeno particolarmente pericoloso</p>
+                      </v-card-text>
+                    </v-card>
+                  </v-col>
+                  <v-col cols="12" md="4">
+                    <v-card color="red" outlined rounded>
+                      <v-card-title>
+                        <v-icon class="mr-2">mdi-alert-circle-outline</v-icon>
+                        Rosso
+                      </v-card-title>
+                      <v-divider />
+                      <v-card-text>
+                        <p>Il territorio è soggetto a condizioni meteorologiche avverse, ma non è previsto alcun fenomeno particolarmente pericoloso</p>
+                      </v-card-text>
+                    </v-card>
+                  </v-col>
+                </v-row>
+              </v-card-text>
+            </v-card>
+          </v-col>
+        </v-row>
       </div>
     </v-container>
   </div>

diff --git a/src/pages/vehicle.vue b/src/pages/vehicle.vue
@@ -95,7 +95,7 @@ export default {
       { name: "og:description", content: "" },
       { name: "og:type", content: "website" },
       { name: "og:url", content: "https://procivsettimomi.it" },
-      { name: "og:image", content: "/assets/img/activity.jpg" },
+      { name: "og:image", content: "/assets/img/lazy.webp" },
     ]
   },
   data() {

diff --git a/src/pages/volunteer.vue b/src/pages/volunteer.vue
@@ -9,7 +9,7 @@
             <v-card>
               <v-img
                 :lazy-src="require('@/assets/img/lazy.webp')"
-                :src="require('@/assets/img/groups.jpg')"
+                :src="require('@/assets/img/volunteers/groups.webp')"
                 max-height="250"
               ></v-img>
             </v-card>
@@ -65,7 +65,7 @@ export default {
       { name: "og:description", content: "" },
       { name: "og:type", content: "website" },
       { name: "og:url", content: "https://procivsettimomi.it" },
-      { name: "og:image", content: "/assets/img/activity.jpg" },
+      { name: "og:image", content: "/assets/img/lazy.webp" },
     ]
   }
 };

diff --git a/src/static/index.png b/src/static/index.png