From 4c79a7859a12c05b78262beecbc90dd9830a4ea3 Mon Sep 17 00:00:00 2001
From: Annika Backstrom <annika@sixohthree.com>
Date: Tue, 17 Dec 2019 10:41:24 -0500
Subject: [PATCH] Add hightlight style for unused tags in editor

---
 player.js            | 2 +-
 static/css/index.css | 5 +++++
 static/library.js    | 6 +++---
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/player.js b/player.js
index 77a9931..b41becc 100644
--- a/player.js
+++ b/player.js
@@ -124,7 +124,7 @@ app.get('/', function(req, res, next) {
 });
 
 app.get('/api/tags', function(req, res, next) {
-  db.all("SELECT DISTINCT tag FROM tags", (err, rows) => {
+  db.all("SELECT tags.tag, count(library.tag) tag_count FROM (SELECT DISTINCT tag FROM tags) tags LEFT JOIN library ON tags.tag = library.tag GROUP BY tags.tag", (err, rows) => {
     res.send(rows);
   });
 });
diff --git a/static/css/index.css b/static/css/index.css
index 49e448a..754125c 100644
--- a/static/css/index.css
+++ b/static/css/index.css
@@ -27,3 +27,8 @@ footer {
     padding: 1ex;
     border: 1px solid hsl(0, 0%, 88.2%);
 }
+
+option.unused {
+    font-style: italic;
+    color: red;
+}
diff --git a/static/library.js b/static/library.js
index adcd5cc..caca290 100644
--- a/static/library.js
+++ b/static/library.js
@@ -57,8 +57,8 @@
         <template v-if="editing">
           <form method="patch" :action="patch_url">
             <select v-model="track.tag" :disabled="saving">
-              <option v-for="tag in tags">
-                {{ tag }}
+              <option :class="{unused: tag.tag_count == 0}" v-for="tag in tags">
+                {{ tag.tag }}
               </option>
             </select>
             <input type="text" v-model="track.label" :disabled="saving">
@@ -100,7 +100,7 @@
       return response.json();
     })
     .then(response => {
-      appData.tags = response.map(tag => tag.tag);
+      appData.tags = response;
     })
     .catch(error => {
       console.error(error);