From e51c877b1cceb89e8f05a75db13746d18eb31fba Mon Sep 17 00:00:00 2001
From: skullbocks <dgikille@gmail.com>
Date: Sun, 27 Jul 2014 23:55:00 +0200
Subject: [PATCH] [WebUI #7] Modified components

---
 .../templates/components/list_tiles.html.ep   |  2 -
 assets/templates/components/menu.html.ep      | 28 ++++-----
 assets/templates/components/scripts.html.ep   |  2 +-
 .../templates/components/show_tiles.html.ep   | 57 +++++--------------
 4 files changed, 29 insertions(+), 60 deletions(-)

diff --git a/assets/templates/components/list_tiles.html.ep b/assets/templates/components/list_tiles.html.ep
index 56923aa..71bb445 100644
--- a/assets/templates/components/list_tiles.html.ep
+++ b/assets/templates/components/list_tiles.html.ep
@@ -1,5 +1,3 @@
-% my $tiles_per_row=4;
-% my $rows= ceil((scalar @$tiles)/$tiles_per_row);
 % my @items=@$tiles;
 <div class="row">
 % foreach my $tile (@items) {
diff --git a/assets/templates/components/menu.html.ep b/assets/templates/components/menu.html.ep
index 67d13bb..ea4ffad 100644
--- a/assets/templates/components/menu.html.ep
+++ b/assets/templates/components/menu.html.ep
@@ -14,35 +14,35 @@
         <div class="navbar-collapse collapse navbar-responsive-collapse" id="navbar-main">
           <ul class="nav navbar-nav">
             <li><%= link_to Home  => 'index' %></li>
+            % if (@rooms) {
             <li class="dropdown">
               <a class="dropdown-toggle" data-toggle="dropdown" href="#" id="themes">
                 Rooms
                 <span class="caret" />
               </a>
               <ul class="dropdown-menu room-menu" role="menu" aria-labelledby="themes">
+            %   foreach (@rooms) {
+                <li>
+                  %= link_to $_ => '#' => (id => $_ ) => (class => 'room') 
+                </li>
+            %   }
               </ul>
             </li>
-            <li class="dropdown">
-              <a class="dropdown-toggle" data-toggle="dropdown" href="#" id="themes" >
-                Another Menu<span class="caret" />
-              </a>
-              <ul class="dropdown-menu room-menu" role="menu" aria-labelledby="themes" style="height: auto; max-height: 200px;">
-                  <li>
-                       <a href='#' > Item 1</a>
-                  </li>
-                   <li>
-                       <a href='#' > Item 2</a>
-                  </li>
-              </ul>
-            </li>
+            % }
           </ul>
-
           <form class="navbar-form navbar-right" action="/search/" method="GET">
             <div class="form-group">
               <input type="text" name="term" placeholder="Search" class="form-control">
             </div>
             <button type="submit" class="btn btn-success">Search</button>
           </form>
+          % #<ul class="nav navbar-nav navbar-right">
+            % # if ($logged == 1) {
+            % #= include 'components/userpanel'
+            % #} else {
+            % #   <li><a href="login/">Login</a></li>
+            % #}
+          % #</ul>
         </div>
       </div>
     </div>
diff --git a/assets/templates/components/scripts.html.ep b/assets/templates/components/scripts.html.ep
index fc344e6..2ef1855 100644
--- a/assets/templates/components/scripts.html.ep
+++ b/assets/templates/components/scripts.html.ep
@@ -4,7 +4,7 @@
 <script>
 $(document).ready(function() {
 	// IE8 compatibility of pseudo-class
-	$('#iso .row').first().css({margin:'0'});
+	$('.iso .row').first().css({margin:'0'});
 });
 </script>
 <![endif]-->
\ No newline at end of file
diff --git a/assets/templates/components/show_tiles.html.ep b/assets/templates/components/show_tiles.html.ep
index b61be34..fe6eb35 100644
--- a/assets/templates/components/show_tiles.html.ep
+++ b/assets/templates/components/show_tiles.html.ep
@@ -3,12 +3,12 @@
 <div class="col-md-12">
   <div class="row">
       <header class="col-md-8 pull-right">
-          <a class="thumbnail" id="<%= '/command/'.$tile->title.'&'.join('&', $tile->params) %>" href="#">
+          <a class="thumbnail command" data-post="<%= '/command/'.$tile->title %>" href="#" <% # TODO add param to toggle 'data-value="join("&", $tile->params) "' %>>
             %= tag h2 => (id => $tile->id), (class => 'tile-heading') => $tile->title
           </a>
       </header>
       <div class="col-md-4 pull-left">
-          <a class="thumbnail" id="<%= '/command/'.$tile->title.'&'.join('&', $tile->params) %>" href="#">
+          <a class="thumbnail command" data-post="<%= '/command/'.$tile->title %>" href="#" <% # TODO add param to toggle 'data-value="join("&", $tile->params) "' %>>
             %= image $tile->image => (class => 'img-responsive img-rounded') , alt => $tile->title, itemprop => "image"
           </a>   
       </div>
@@ -20,47 +20,18 @@
 %  } else {
 % # Tiles Grid
 <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
-<div class="tile_detail box-shadow">
-  <div class="caption">
-    <div class="container col-lg-12 col-md-12 col-xs-12">
-      <div class="row">
-        <div class="container">
-          <h4 itemprop="name">
-          % if ($tile->type eq "toggle"){
-            <a id="<%=  '/command/'.$tile->title.'&'.join('&', $tile->params) %>" href="#">
-              <%= $tile->title =%>
-            </a>
-          % } else {
-            <a href="<%=  '/tile-detail/'.$tile->title %>">
-              <%= $tile->title =%>
-            </a>
-          %}
-          </h4>
-        </div>
-      </div>
-      <div class="row">
-        <div class="col-md-6 pull-right">
-          <div class="row">
-            <div class="col-lg-12 col-md-12 col-xs-12">
-              <span class="pull-left"> 
-              % if ($tile->type ne "toggle"){
-                <span class="glyphicon glyphicon-share-alt" />
-              % } elsif ($tile->type eq "toggle" && $tile->status == "0")
-                <span class="glyphicon glyphicon-remove-circle" />
-              % } else {
-                <span class="glyphicon glyphicon-ok-circle" />
-              % }
-              </span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    % if(defined $tile->picture()) {
-    %= image '/thumb/'.$tile->title.'.jpg'  => (class => 'img-responsive') , width=> '260px', alt => $tile->title, itemprop => "image"
-    % } else {
-    %= image '/thumb/no-image.jpg' => (class => 'img-responsive') , width=> '260px', alt => $tile->title, itemprop => "image"
-    % }
+  % my $class = "tile-default tile-detail";
+  % my $data-post = "/tile-detail/".$tile->title;
+  % if ($tile->toggle == 1) { 
+  %   $class = "tile-toggle command"; 
+  %   $class .= (exists $tile->status && $tile->status == 1) ? "tile-status-on";
+  %   $data-post = "/command/".$tile->title;
+  % }
+  <div <%= 'class="tile-item clickable '.$class.'" data-room="'.$tile->room.'" data-tag="'.$tile->tag.'" data-post="$data-post"' %>>
+    <h3 class="name"><%= $tile->title %></h3>
+    <p class="symbol"><% #glipycon light-bulb %></p>
+    <p class="pin-number"><%= $tile->gpio %></p>
+    <p class="tile-room"><%= $tile->room %></p>
   </div>
 </div>
 %  }
\ No newline at end of file