Add hover effects for missing and shared tags

config.json.sample

@@ -5,6 +5,7 @@
 
     "media_path": "/path/to/media",
     "script_path": "/path/to/scripts",
+    "db": "/path/to/jukebox.sqlite3",
 
     "play_throttle": 5000,
     "pause_throttle": 2000,

static/css/index.css

@@ -29,12 +29,21 @@ footer {
     margin-top: 2em;
     font-size: 0.75rem;
 }
-
 .media-track {
     margin: 1ex 0;
     padding: 1ex;
     border: 1px solid hsl(0, 0%, 88.2%);
 }
+.media-track-highlighted {
+    background-color: hsl(81, 100%, 96.1%);
+    border-color: hsl(118.1, 72%, 58%);
+    border-style: dotted;
+}
+.media-track-tagless {
+    background-color: hsl(0, 100%, 95.7%);
+    border-color: hsl(0, 79.5%, 67.5%);
+    border-style: dashed;
+}
 option.unused {
     font-style: italic;
     color: red;

static/library.js

@@ -3,14 +3,20 @@
   var appData = {
     tracks: [],
     tags: [],
+    highlightedTag: null,
   };
 
   const MediaTrack = {
-    props: ['track', 'tags'],
+    props: [
+      'track',
+      'tags',
+      'highlightedTag',
+    ],
     data: function() {
       return {
         editing: false,
         saving: false,
+        trackForReset: {},
       }
     },
     computed: {
@@ -20,9 +26,17 @@
     },
     methods: {
       edit: function() {
+        if (this.editing) {
+          return;
+        }
+        this.trackForReset = Object.assign({}, this.track);
         this.saving = false;
         this.editing = true;
       },
+      cancel: function() {
+        this.track = Object.assign({}, this.trackForReset);
+        this.editing = false;
+      },
       save: function() {
         this.saving = true;
 
@@ -51,11 +65,21 @@
             console.error(error)
           });
       },
+      highlightTag: function() {
+        this.$root.highlightedTag = this.track.tag;
+      },
+      highlightNone: function() {
+        this.$root.highlightedTag = null;
+      },
     },
     template: `
-      <div class="media-track" @click="edit()">
+      <div class="media-track"
+        :class="{ 'media-track-highlighted': track.tag === highlightedTag, 'media-track-tagless': track.tag === '' }"
+        @click="edit()"
+        @mouseover="highlightTag()"
+        @mouseout="highlightNone()">
         <template v-if="editing">
-          <form method="patch" :action="patch_url">
+          <form method="patch" :action="patch_url" @keyup.27="cancel">
             <select v-model="track.tag" :disabled="saving">
               <option value=""></option>
               <option :class="{unused: tag.tag_count == 0}" v-for="tag in tags">
@@ -72,7 +96,7 @@
   };
 
   const MediaLibrary = {
-    props: ['tracks', 'tags'],
+    props: ['tracks', 'tags', 'highlightedTag'],
     components: {
       'media-track': MediaTrack,
     },
@@ -82,6 +106,7 @@
           :key="track.uuid"
           :track="track"
           :tags="tags"
+          :highlightedTag="highlightedTag"
         ></media-track>
       </div>
     `,

views/library.hbs

@@ -1,7 +1,8 @@
 <div id="app">
     <media-library
-        v-bind:tracks="tracks"
+        :tracks="tracks"
-        v-bind:tags="tags"
+        :tags="tags"
+        :highlighted-tag="highlightedTag"
     ></media-library>
     <upload-box></upload-box>
 </div>