From ff27e5ba4ca1c0e8c1ccfe5c3e6db5e4eee37322 Mon Sep 17 00:00:00 2001
From: Jonas Heinrich <onny@project-insanity.org>
Date: Sat, 5 Aug 2017 19:41:29 +0200
Subject: [PATCH] indicate favorite stations

---
 css/main.css |  5 +++++
 js/main.js   | 56 ++++++++++++++++++++++++++++++++--------------------
 2 files changed, 40 insertions(+), 21 deletions(-)

diff --git a/css/main.css b/css/main.css
index 7d80648..31b6d82 100644
--- a/css/main.css
+++ b/css/main.css
@@ -35,6 +35,11 @@
 	opacity: 0.3;
 }
 
+.starred {
+	background-image: url('../img/starred.svg');
+	opacity: 1;
+}
+
 .icon-stationfav:hover {
 	background-image: url('../img/starred.svg');
 	opacity: 1;
diff --git a/js/main.js b/js/main.js
index f1275f4..dc8d498 100644
--- a/js/main.js
+++ b/js/main.js
@@ -36,10 +36,7 @@ $(function(){
               url: baseUrl + '/stations/' + data[station]["id"],
               method: 'DELETE'
             }).done(function(){
-              if ($('li.nav-favorites').hasClass('active')){
-                $( "tr[data-id='"+data[station]["stationid"]+"']" ).slideUp();
-                $( "tr[data-id='"+data[station]["stationid"]+"']" ).remove();
-              };
+              $( "tr[data-id='"+data[station]["stationid"]+"']" ).find('.icon-stationfav').removeClass('starred');
             });
         };
       };
@@ -55,6 +52,8 @@ $(function(){
                 method: 'POST',
                 contentType: 'application/json',
                 data: JSON.stringify(station)
+        }).done(function(){
+          $( "tr[data-id='"+stationid+"']" ).find('.icon-stationfav').addClass('starred');
         });
       };
     });
@@ -76,23 +75,38 @@ $(function(){
   };
 
   function render_result(data){
-    $.each(data, function(i, station) {
-      $('tbody').append('<tr data-src='+station['url']+' data-id='+station['id']+'>\
-                          <td class="favcolumn">\
-                            <a href="#" class="favpls" onclick="station_fav();">\
-                              <span class="icon-stationfav"></span>\
-                              <span class="hidden-visually">Favorite</span>\
-                            </a>\
-                          </td>\
-                          <td class="filename">\
-                            <label for="select-files-3">\
-                              <div class="thumbnail" style="background-image:url('+station['favicon']+'); background-size: 32px;"></div>\
-                            </label>\
-                            <a class="name" href="#">\
-                              <span class="nametext"><span class="innernametext">'+station['name']+'</span></span>\
-                            </a>\
-                          </td>\
-                        </tr>');
+
+    var baseUrl = OC.generateUrl('/apps/radio');
+    $.get(baseUrl + '/stations', function ( fav_stations ) {
+
+      $.each(data, function(i, station) {
+
+        var isstarred = ""
+        for (var fav_station in fav_stations) {
+          if (fav_stations[fav_station]["stationid"] == station['id']) {
+            isstarred = "starred";
+            break;
+          }
+        };
+
+        $('tbody').append('<tr data-src='+station['url']+' data-id='+station['id']+'>\
+                            <td class="favcolumn">\
+                              <a href="#" class="favpls" onclick="station_fav();">\
+                                <span class="icon-stationfav ' + isstarred + '"></span>\
+                                <span class="hidden-visually">Favorite</span>\
+                              </a>\
+                            </td>\
+                            <td class="filename">\
+                              <label for="select-files-3">\
+                                <div class="thumbnail" style="background-image:url('+station['favicon']+'); background-size: 32px;"></div>\
+                              </label>\
+                              <a class="name" href="#">\
+                                <span class="nametext"><span class="innernametext">'+station['name']+'</span></span>\
+                              </a>\
+                            </td>\
+                          </tr>');
+      });
+
     });
   }