From 984309409a435dc89adb6afe466d4b40a742247e Mon Sep 17 00:00:00 2001
From: Terry Geng <gengyanda@gmail.com>
Date: Wed, 29 Apr 2020 10:24:57 +0800
Subject: [PATCH] feat: web interface: mode icon instead of 'Mode'

---
 static/js/custom.js  | 18 ++++++++++++++----
 templates/index.html |  2 +-
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/static/js/custom.js b/static/js/custom.js
index aa016af..06e86db 100644
--- a/static/js/custom.js
+++ b/static/js/custom.js
@@ -52,6 +52,12 @@ var playModeBtns = {
     repeat: $('#repeat-mode-btn'),
     autoplay: $('#autoplay-mode-btn')
 };
+var playModeIcon = {
+    'one-shot': 'fa-tasks',
+    random: 'fa-random',
+    repeat: 'fa-redo',
+    autoplay: 'fa-robot'
+};
 
 function request(_url, _data, refresh = false) {
     console.log(_data);
@@ -263,13 +269,17 @@ function updateControls(empty, play, mode, volume) {
         }
     }
 
-    let otherModes = Object.assign({}, playModeBtns);
-    delete otherModes[mode];
-    for (_mode in otherModes) {
-        otherModes[_mode].removeClass('active');
+    for (const otherModes of Object.values(playModeBtns)) {
+        otherModes.removeClass('active');
     }
     playModeBtns[mode].addClass('active');
 
+    let playModeIndicator = $('#modeIndicator');
+    for (const icon_class of Object.values(playModeIcon)) {
+        playModeIndicator.removeClass(icon_class);
+    }
+    playModeIndicator.addClass(playModeIcon[mode]);
+
     if (volume != last_volume) {
         last_volume = volume;
         if (volume > 1) {
diff --git a/templates/index.html b/templates/index.html
index ea0632b..b73ef00 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -36,7 +36,7 @@
                     <div class="dropdown mb-2 btn-space" style="margin-left: auto;">
                         <button class="btn btn-secondary dropdown-toggle" type="button" id="play-mode"
                                 data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                            Mode
+                            <i class="fas fa-tasks mr-2" aria-hidden="true" id="modeIndicator"></i>
                         </button>
                         <div class="dropdown-menu" aria-labelledby="play-mode">
                             <a class="dropdown-item" href="#" id="one-shot-mode-btn"