volume, stop

kitchenradio/public/javascripts/radio.js

@@ -9,13 +9,16 @@ var Radio = function() {
 
   var channels;
   var $navigation;
+  var $controlPanel;
 
   return {
     init: function(channels_) {
       channels = channels_;
       $navigation = $('#navigation');
+      $controlPanel = $('#controls');
       
       initTiles();
+      initClickOfControls();
       console.log('Radio initialized with ' + channels.length + ' channels');
     }
   };
@@ -81,5 +84,33 @@ var Radio = function() {
       });
     });
   }
+  
+  /* private */
+  function initClickOfControls() {
+    $controlPanel.find('a').click(function(e) {
+      e.preventDefault();
+      
+      var stream = $(this).attr('href');
+      console.log('Action: ' + stream);
+      
+      $.ajax({
+        url: stream,
+        context: document.body,
+        statusCode: {
+          200: function() {
+            console.log('ok');
+          },
+          404: function() {
+            console.log('Resource not found');
+          },
+          500: function() {
+            console.log('Something went wrong');
+          }
+        }
+      }).done(function() {
+        
+      });
+    });
+  }
 
 }();

kitchenradio/public/stylesheets/style.css

@@ -129,8 +129,12 @@ body {
   height: 98.5%;
 }
 body {
-  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
+  font: 12px "Lucida Grande", Helvetica, Arial, sans-serif;
   background-color: rgba(0, 0, 0, 0.38);
+  background-image: url('/images/gl_formentera_seil.jpg');
+  background-size: auto 100%;
+  background-repeat: no-repeat;
+  background-position: left top;
 }
 a {
   color: #00B7FF;
@@ -147,8 +151,8 @@ a {
   align-content: center;
 }
 #navigation .tile {
-  background-color: rgba(255, 255, 255, 0.68);
-  margin: 10px;
+  background-color: rgba(255, 255, 255, 0.25);
+  margin: 2px;
   flex-grow: 1;
   flex-basis: auto;
   align-self: flex-start;
@@ -157,7 +161,7 @@ a {
 #navigation .tile .content {
   height: inherit;
   text-align: center;
-  padding: 10px;
+  padding: 2px;
 }
 #navigation .tile .content .icon {
   display: block;
@@ -169,9 +173,34 @@ a {
   margin-top: 20px;
   font-size: 2.2em;
 }
-#information {
-  background-color: rgba(255, 255, 255, 0.68);
+#navigation .tile:hover {
+  background-color: rgba(255, 255, 255, 0.5);
+}
+#controls {
+  background-color: rgba(255, 255, 255, 0.25);
   height: 30%;
-  margin: 10px;
-  margin-top: 20px;
+  margin: 2px;
+  margin-top: 4px;
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: center;
+  align-items: stretch;
+  align-content: center;
+}
+#controls .control {
+  display: block;
+  margin: 2px;
+  flex-grow: 1;
+  flex-basis: auto;
+  align-self: flex-start;
+  height: 100%;
+  text-align: center;
+  text-decoration: none;
+  font-size: 50px;
+}
+#controls .control:hover {
+  background-color: rgba(255, 255, 255, 0.5);
+}
+#controls .control.empty {
+  visibility: hidden;
 }

kitchenradio/public/stylesheets/style.less

@@ -1,6 +1,7 @@
 @backgroundcolor: rgba(0,0,0,0.38);
-@backgroundcolor_element: rgba(255,255,255,0.68);
-@margin_element: 10px;
+@backgroundcolor_element: rgba(255,255,255,0.25);
+@backgroundcolor_element_hover: rgba(255,255,255,0.50);
+@margin_element: 2px;
 
 
 
@@ -59,8 +60,12 @@ html, body {
 }
 
 body {
-  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
+  font: 12px "Lucida Grande", Helvetica, Arial, sans-serif;
   background-color: @backgroundcolor;
+  background-image: url('/images/gl_formentera_seil.jpg');
+  background-size: auto 100%;
+  background-repeat: no-repeat;
+  background-position: left top;
 }
 
 a {
@@ -104,12 +109,41 @@ a {
         font-size: 2.2em;
       }
     }
+    
+    &:hover {
+      background-color: @backgroundcolor_element_hover;
+    }
   }
 }
 
-#information {
+#controls {
   background-color: @backgroundcolor_element;
   height: 30%;
   margin: @margin_element;
   margin-top: (@margin_element * 2);
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: center;
+  align-items: stretch;
+  align-content: center;
+  
+  .control {
+    display: block;
+    margin: @margin_element;
+    flex-grow: 1;
+    flex-basis: auto;
+    align-self: flex-start;
+    height: 100%;
+    text-align: center;
+    text-decoration: none;
+    font-size: 50px;
+    
+    &:hover {
+      background-color: @backgroundcolor_element_hover;
+    }
+    
+    &.empty {
+      visibility: hidden;
+    }
+  }
 }