[web-src] Turn "Update library" into an action

web-src/src/components/ModalDialog.vue

@@ -13,7 +13,7 @@
             </div>
             <footer class="card-footer">
               <a class="card-footer-item has-text-dark" @click="$emit('close')">
-                <span class="icon"><i class="mdi mdi-cancel"></i></span> <span class="is-size-7">Cancel</span>
+                <span class="icon"><i class="mdi mdi-cancel"></i></span> <span class="is-size-7">{{ close_action ? close_action : 'Cancel' }}</span>
               </a>
               <a v-if="delete_action" class="card-footer-item has-background-danger has-text-white has-text-weight-bold" @click="$emit('delete')">
                 <span class="icon"><i class="mdi mdi-delete"></i></span> <span class="is-size-7">{{ delete_action }}</span>
@@ -33,7 +33,7 @@
 <script>
 export default {
   name: 'ModalDialog',
-  props: ['show', 'title', 'ok_action', 'delete_action']
+  props: ['show', 'title', 'ok_action', 'delete_action', 'close_action']
 }
 </script>
 

web-src/src/components/NavbarTop.vue

@@ -36,7 +36,7 @@
 
       <div class="navbar-end">
 
-        <!-- Settings drop down -->
+        <!-- Burger menu entries -->
         <div class="navbar-item has-dropdown is-hoverable"
             :class="{ 'is-active': show_settings_menu }"
             @click="on_click_outside_settings">
@@ -61,7 +61,10 @@
             <hr class="fd-navbar-divider">
 
             <navbar-item-link to="/settings/webinterface">Settings</navbar-item-link>
-            <navbar-item-link to="/about">Update Library</navbar-item-link>
+            <a class="navbar-item" @click.stop.prevent="show_update_library = true">
+              Update Library
+            </a>
+            <navbar-item-link to="/about">About</navbar-item-link>
 
             <div class="navbar-item is-hidden-desktop" style="margin-bottom: 2.5rem;"></div>
           </div>
@@ -69,6 +72,29 @@
       </div>
     </div>
 
+    <modal-dialog
+        :show="show_update_library"
+        title="Update library"
+        :ok_action="library.updating ? '' : 'Rescan'"
+        close_action="Close"
+        @ok="update_library"
+        @close="show_update_library = false">
+      <template slot="modal-content">
+        <div v-if="!library.updating">
+          <p class="mb-3">Scan for new, deleted and modified files</p>
+          <div class="field">
+            <label class="checkbox is-size-7 is-small">
+              <input type="checkbox" v-model="rescan_metadata">
+              Rescan metadata for unmodified files
+            </label>
+          </div>
+        </div>
+        <div v-else>
+          <p class="mb-3">Library update in progress ...</p>
+        </div>
+      </template>
+    </modal-dialog>
+
     <div class="is-overlay" v-show="show_settings_menu"
         style="z-index:10; width: 100vw; height:100vh;"
         @click="show_settings_menu = false"></div>
@@ -77,15 +103,19 @@
 
 <script>
 import NavbarItemLink from './NavbarItemLink'
+import ModalDialog from '@/components/ModalDialog'
 import * as types from '@/store/mutation_types'
+import webapi from '@/webapi'
 
 export default {
   name: 'NavbarTop',
-  components: { NavbarItemLink },
+  components: { NavbarItemLink, ModalDialog },
 
   data () {
     return {
-      show_settings_menu: false
+      show_settings_menu: false,
+      show_update_library: false,
+      rescan_metadata: false
     }
   },
 
@@ -160,6 +190,14 @@ export default {
   methods: {
     on_click_outside_settings () {
       this.show_settings_menu = !this.show_settings_menu
+    },
+
+    update_library () {
+      if (this.rescan_metadata) {
+        webapi.library_rescan()
+      } else {
+        webapi.library_update()
+      }
     }
   },