Merge pull request #278 from sbs20/staging

Multifile delete; bug fixes; system info
sbs20 · May 22, 2021 · b5fbc8c · b5fbc8c
2 parents 7297e68 + 4553509
commit b5fbc8c
Show file tree

Hide file tree

Showing 21 changed files with 116 additions and 68 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "scanservjs",
-  "version": "2.14.0",
+  "version": "2.15.0",
   "description": "scanservjs is a simple web-based UI for SANE which allows you to share a scanner on a network without the need for drivers or complicated installation.",
   "scripts": {
     "clean": "rm -rf ./dist",

diff --git a/packages/client/package-lock.json b/packages/client/package-lock.json
diff --git a/packages/client/package.json b/packages/client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "scanservjs",
-  "version": "2.14.0",
+  "version": "2.15.0",
   "description": "scanservjs is a simple web-based UI for SANE which allows you to share a scanner on a network without the need for drivers or complicated installation.",
   "author": "Sam Strachan",
   "scripts": {

diff --git a/packages/client/src/classes/constants.js b/packages/client/src/classes/constants.js
@@ -1,6 +1,23 @@
 const Constants = {
   Version: process.env.VUE_APP_VERSION,
 
+  DateTimeFormat: {
+    short: {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric'
+    },
+    long: {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+      weekday: 'long',
+      hour: 'numeric',
+      minute: 'numeric',
+      hourCycle: 'h23'
+    }
+  },
+
   Locales: [
     'cs',
     'de',

diff --git a/packages/client/src/components/About.vue b/packages/client/src/components/About.vue
@@ -11,10 +11,18 @@
       <a target="_blank" href="https://github.com/sbs20/scanservjs">https://github.com/sbs20/scanservjs</a>
     </div>
 
-    <div class="body-1 mb-4">
-      {{ $t('about.system-info') }}
-    </div>
-    <pre class="caption text--secondary">{{ systemInfo }}</pre>
+    <v-btn @click="showSystemInfo">{{ $t('about.system-info') }}</v-btn>
+
+    <v-dialog v-model="systemInfoDialog" aria-role="dialog" max-width="480" v-on:keydown.stop="_onKeys" aria-modal>
+      <v-card>
+        <v-card-title>
+          {{ $t('about.system-info') }}
+        </v-card-title>
+        <v-card-text>
+          <pre class="caption text--secondary">{{ systemInfo }}</pre>
+        </v-card-text>
+      </v-card>
+    </v-dialog>
   </div>
 </template>
 
@@ -28,19 +36,23 @@ export default {
   data() {
     return {
       version: Constants.Version,
-      systemInfo: null
+      systemInfo: null,
+      systemInfoDialog: false
     };
   },
 
-  mounted() {
-    this.$emit('mask', 1);
-    Common.fetch('system').then(data => {
-      this.systemInfo = data;
-      this.$emit('mask', -1);
-    }).catch(error => {
-      this.$emit('notify', { type: 'e', message: error });
-      this.$emit('mask', -1);
-    });
+  methods: {
+    showSystemInfo() {
+      this.$emit('mask', 1);
+      Common.fetch('system').then(data => {
+        this.systemInfoDialog = true;
+        this.systemInfo = data;
+        this.$emit('mask', -1);
+      }).catch(error => {
+        this.$emit('notify', { type: 'e', message: error });
+        this.$emit('mask', -1);
+      });
+    }
   }
 };
 </script>

diff --git a/packages/client/src/components/Files.vue b/packages/client/src/components/Files.vue
@@ -2,14 +2,16 @@
   <v-simple-table>
     <thead>
       <tr>
+        <th><v-checkbox @change="selectToggle" /></th>
         <th>{{ $t('files.filename') }}</th>
         <th class="file-date">{{ $t('files.date') }}</th>
         <th>{{ $t('files.size') }}</th>
-        <th></th>
+        <th><v-btn color="primary" v-on:click="multipleDelete()" icon><v-icon>mdi-delete</v-icon></v-btn></th>
       </tr>
     </thead>
     <tbody>
       <tr v-for="file in files" v-bind:key="file.name">
+        <td><v-checkbox v-model="selectedFiles" :value="file.name" /></td>
         <td><a @click="open(file)">{{ file.name }}</a></td>
         <td class="file-date">{{ $d(new Date(file.lastModified), 'long', $i18n.locale) }}</td>
         <td>{{ file.sizeString }}</td>
@@ -31,7 +33,8 @@ export default {
 
   data() {
     return {
-      files: []
+      files: [],
+      selectedFiles: []
     };
   },
 
@@ -61,8 +64,31 @@ export default {
       });
     },
 
+    async multipleDelete() {
+      let refresh = false;
+      while (this.selectedFiles.length > 0) {
+        refresh = true;
+        const name = this.selectedFiles[0];
+        try {
+          await Common.fetch(`files/${name}`, { method: 'DELETE' });
+          this.$emit('notify', { type: 'i', message: `${this.$t('files.message:deleted')} ${name}` });
+        } catch (error) {
+          this.$emit('notify', { type: 'e', message: error });
+        }
+        this.selectedFiles.splice(0, 1);
+      }
+
+      if (refresh) {
+        this.fileList();
+      }
+    },
+
     open(file) {
       window.location.href = `files/${file.name}`;
+    },
+
+    selectToggle(value) {
+      this.selectedFiles = value ? this.files.map(f => f.name) : [];
     }
   }
 };

diff --git a/packages/client/src/components/Navigation.vue b/packages/client/src/components/Navigation.vue
@@ -5,10 +5,10 @@
       <v-toolbar-title class="unselectable">{{ $t('global.application-name') }}</v-toolbar-title>
       <v-spacer></v-spacer>
       <v-toolbar-items class="d-none d-md-block">
-        <v-btn class="transparent" elevation="0" @click="$router.push('/scan')"><v-icon class="mr-2">mdi-camera</v-icon>{{ $t('navigation.scan') }}</v-btn>
-        <v-btn class="transparent" elevation="0" @click="$router.push('/files')"><v-icon class="mr-2">mdi-file-document-multiple</v-icon>{{ $t('navigation.files') }}</v-btn>
-        <v-btn class="transparent" elevation="0" @click="$router.push('/settings')"><v-icon class="mr-2">mdi-cog</v-icon>{{ $t('navigation.settings') }}</v-btn>
-        <v-btn class="transparent" elevation="0" @click="$router.push('/about')"><v-icon class="mr-2">mdi-information</v-icon>{{ $t('navigation.about') }}</v-btn>
+        <v-btn class="transparent" elevation="0" @click="go('/scan')"><v-icon class="mr-2">mdi-camera</v-icon>{{ $t('navigation.scan') }}</v-btn>
+        <v-btn class="transparent" elevation="0" @click="go('/files')"><v-icon class="mr-2">mdi-file-document-multiple</v-icon>{{ $t('navigation.files') }}</v-btn>
+        <v-btn class="transparent" elevation="0" @click="go('/settings')"><v-icon class="mr-2">mdi-cog</v-icon>{{ $t('navigation.settings') }}</v-btn>
+        <v-btn class="transparent" elevation="0" @click="go('/about')"><v-icon class="mr-2">mdi-information</v-icon>{{ $t('navigation.about') }}</v-btn>
       </v-toolbar-items>
     </v-app-bar>
 
@@ -18,22 +18,22 @@
       </v-app-bar>
 
       <v-list nav>
-        <v-list-item @click="$router.push('/scan')">
+        <v-list-item @click="go('/scan')">
           <v-list-item-icon><v-icon>mdi-camera</v-icon></v-list-item-icon>
           <v-list-item-title>{{ $t('navigation.scan') }}</v-list-item-title>
         </v-list-item>
 
-        <v-list-item @click="$router.push('/files')">
+        <v-list-item @click="go('/files')">
           <v-list-item-icon><v-icon>mdi-file-document-multiple</v-icon></v-list-item-icon>
           <v-list-item-title>{{ $t('navigation.files') }}</v-list-item-title>
         </v-list-item>
 
-        <v-list-item @click="$router.push('/settings')">
+        <v-list-item @click="go('/settings')">
           <v-list-item-icon><v-icon>mdi-cog</v-icon></v-list-item-icon>
           <v-list-item-title>{{ $t('navigation.settings') }}</v-list-item-title>
         </v-list-item>
 
-        <v-list-item @click="$router.push('/about')">
+        <v-list-item @click="go('/about')">
           <v-list-item-icon><v-icon>mdi-information</v-icon></v-list-item-icon>
           <v-list-item-title>{{ $t('navigation.about') }}</v-list-item-title>
         </v-list-item>
@@ -77,6 +77,14 @@ export default {
       version: Constants.Version
     };
   },
+
+  methods: {
+    go(location) {
+      if (this.$route.path !== location) {
+        this.$router.push(location);
+      }
+    }
+  }
 };
 </script>
 

diff --git a/packages/client/src/i18n.js b/packages/client/src/i18n.js
@@ -6,22 +6,7 @@ Vue.use(VueI18n);
 
 const dateTimeFormats = {};
 for (const locale of Constants.Locales) {
-  dateTimeFormats[locale] = {
-    short: {
-      year: 'numeric',
-      month: 'short',
-      day: 'numeric'
-    },
-    long: {
-      year: 'numeric',
-      month: 'long',
-      day: 'numeric',
-      weekday: 'long',
-      hour: 'numeric',
-      minute: 'numeric',
-      hour12: false
-    }
-  };
+  dateTimeFormats[locale] = Constants.DateTimeFormat;
 }
 
 function loadLocaleMessages () {

diff --git a/packages/client/src/locales/cs.json b/packages/client/src/locales/cs.json
@@ -6,7 +6,7 @@
   "about": {
     "main": "scanservjs je jednoduché webové uživatelské rozhraní pro váš skener. Umožňuje vám sdílet jeden nebo více skenerů (s využitím SANE) bez ovladačů nebo komplikované instalace. Umí ukládat do TIF, JPG, PNG, PDF a TXT (využívá Tesseract OCR) s různými nastaveními komprese, vše je možné konfigurovat. Podporuje vícestránkové skenování a všechna zařízení kompatibilní se SANE.",
     "issue": "Ohlaste chybu nebo se podívejte na zdrojový kód:",
-    "system-info": "Informace o systému:"
+    "system-info": "Informace o systému"
   },
 
   "colors": {

diff --git a/packages/client/src/locales/de.json b/packages/client/src/locales/de.json
@@ -6,7 +6,7 @@
   "about": {
     "main": "scanservjs ist ein einfaches, web-basiertes UI für Scanner. Es erlaubt es, einen oder mehrere Scanner (mittels SANE) über das Netzwerk ohne Treiber oder komplizierte Installation freizugeben. Eingescannte Dokumente können als TIF, JPG, PNG, PDF und TXT (mit Tesseract OCR) in verschiedenen, konfigurierbaren Kompressionseinstellungen gespeichert werden. Neben allen SANE-kompatiblen Geräten, wird außerdem mehrseitiges Scannen unterstützt.",
     "issue": "Melde Fehler oder wirf einen Blick auf den Quelltext:",
-    "system-info": "System information:"
+    "system-info": "System information"
   },
 
   "colors": {

diff --git a/packages/client/src/locales/en.json b/packages/client/src/locales/en.json
@@ -6,7 +6,7 @@
   "about": {
     "main": "scanservjs is a simple web-based UI for your scanner. It allows you to share one or more scanners (using SANE) on a network without the need for drivers or complicated installation. It can save to TIF, JPG, PNG, PDF and TXT (with Tesseract OCR) with varying compression settings, all of which can be configured. It supports multipage scanning and all SANE compatible devices.",
     "issue": "File an issue or view the source code:",
-    "system-info": "System information:"
+    "system-info": "System information"
   },
 
   "colors": {
@@ -154,15 +154,15 @@
   },
 
   "locales": {
-    "cs": "Czech",
+    "cs": "Čeština",
     "de": "Deutsche",
     "en": "English",
     "es": "Español",
     "fr": "Français",
     "it": "Italiano",
     "pt-BR": "Portuguese (Brazilian)",
     "ru": "Russian",
-    "zh": "Chinese",
+    "zh": "简体中文",
     "test": "Test"
   }
-}
+}
diff --git a/packages/client/src/locales/es.json b/packages/client/src/locales/es.json
@@ -6,7 +6,7 @@
   "about": {
     "main": "scanservjs es una interfaz gráfica simple y basada en web. Permite compartir uno o mas escáneres (utilizando SANE) en una red sin la necesidad de controladores adicionales o una instalación complicada. Permite guardar en formato TIF, JPG, PNG, PDF, y TXT (con Tesseract OCR) con varias configuraciones de compresión, todas ellas configurables. Soporta el escaneo multipágina y todos los dispositivos SANE compatibles.",
     "issue": "Indicar una incidencia o ver el código fuente:",
-    "system-info": "System information:"
+    "system-info": "System information"
   },
 
   "colors": {

diff --git a/packages/client/src/locales/fr.json b/packages/client/src/locales/fr.json
@@ -6,7 +6,7 @@
   "about": {
     "main": "scanservjs est une simple interface web pour votre scanner. Cette interface permet de partager un ou plusieurs scanners (utilisant SANE) sur un réseau sans avoir besoin de drivers ou d'installation complexe.Cela permet de sauvegarder les images scannées dans les formats de fichiers TIF, JPG, PNG, PDF et TXT (avec Tesseract OCR) avec des compressions paramétrables. Cela supporte les scans avec plusieurs pages et tout matériel compatible avec SANE.",
     "issue": "Signaler un problème ou afficher le code source:",
-    "system-info": "System information:"
+    "system-info": "System information"
   },
 
   "colors": {

diff --git a/packages/client/src/locales/it.json b/packages/client/src/locales/it.json
@@ -6,7 +6,7 @@
   "about": {
     "main": "scanservjs è una semplice interfaccia web per il tuo scanner. Permette di condividere uno o più scanner (usando SANE) in una rete, senza necessità di driver o installazioni complicate. Può salvare nei formati TIF, JPG, PNG, PDF e TXT (via Tesseract OCR) con vari livelli di compressione. Supporta la scansione multi-pagina e tutti i dispositivi compatibili con SANE.",
     "issue": "Segnala problemi o visualizza il codice sorgente:",
-    "system-info": "Informazioni di sistema:"
+    "system-info": "Informazioni di sistema"
   },
 
   "colors": {

diff --git a/packages/client/src/locales/pt-BR.json b/packages/client/src/locales/pt-BR.json
@@ -6,7 +6,7 @@
   "about": {
     "main": "scanservjs é uma interface via web simplea. Permite compartilhar via rede um ou mais scanners (pelo SANE) sem precisar instalação local. Permite gravar nos formatos TIF, JPG, PNG, PDF, y TXT (com Tesseract OCR) com diversas configurações de compressão, configuráveis. Suporta digitalizar multipágina e todos dispositivos SANE compatíveis.",
     "issue": "Relatar uma questão ou ver código fonte:",
-    "system-info": "System information:"
+    "system-info": "System information"
   },
 
   "colors": {

diff --git a/packages/client/src/locales/ru.json b/packages/client/src/locales/ru.json
@@ -6,7 +6,7 @@
   "about": {
     "main": "scanservjs - простой веб-интерфейс для сканеров, который предоставляет общий доступ к сканерам по сети (используя SANE) без необходимости устанавливать драйверы и исключая сложную процедуру настройки. Поддерживаются форматы TIF, JPG, PNG, PDF и TXT (используется Tesseract OCR) с возможностью задать степень сжатия. Доступно сканирование многостраничных документов. Работает со всеми SANE-совместимыми устройствами.",
     "issue": "Обратная связь, исходный код:",
-    "system-info": "System information:"
+    "system-info": "System information"
   },
 
   "colors": {