From bf4bb179969005146926905b280eb641555af7a0 Mon Sep 17 00:00:00 2001
From: Lisa Passing <mail@lislis.de>
Date: Fri, 16 Jan 2015 16:57:56 +0100
Subject: [PATCH] make dashboard more dynamic

---
 assets/scripts/app/routes/dashboard.coffee |  12 ++
 assets/scripts/app/templates/dashboard.hbs |  63 ++--------
 assets/styles/dashboard/dashboard.scss     | 138 +++++++++------------
 3 files changed, 81 insertions(+), 132 deletions(-)

diff --git a/assets/scripts/app/routes/dashboard.coffee b/assets/scripts/app/routes/dashboard.coffee
index 0921fd09..ef307bc9 100644
--- a/assets/scripts/app/routes/dashboard.coffee
+++ b/assets/scripts/app/routes/dashboard.coffee
@@ -11,4 +11,16 @@ Route = TravisRoute.extend
     @get('stylesheetsManager').enable('main')
     @get('stylesheetsManager').disable('dashboard')
 
+  model: ->
+    apiEndpoint = @get('config').api_endpoint
+    $.ajax(apiEndpoint + '/repos?member=lislis', {
+      beforeSend: (xhr) -> 
+        xhr.setRequestHeader('accept', 'application/json; version=2')
+    }).then (response) ->
+      response.repos.map (elem) ->
+        [owner, name] = elem.slug.split('/')
+        elem.owner = owner
+        elem.name = name
+        Ember.Object.create(elem)
+
 Travis.DashboardRoute = Route
diff --git a/assets/scripts/app/templates/dashboard.hbs b/assets/scripts/app/templates/dashboard.hbs
index 4c1fcaee..01ffb61b 100644
--- a/assets/scripts/app/templates/dashboard.hbs
+++ b/assets/scripts/app/templates/dashboard.hbs
@@ -1,66 +1,21 @@
 <div class="tiles">
   <div class="row">
+  {{#each repo in model}}
     <div class="large-4 medium-6 columns">
-      <div class="tile">
-        <div class="build-failed">
+      <div {{bind-attr class=":tile repo.last_build_state"}}>
+        <div class="build-bar">
         </div>
         <div class="build-information">
-          <p class="org failed">travis-ci</p>
-          <p class="repo failed">travisbot</p>
-          <div class="duration">56 sec</div>
-          <div class="finished">1 day ago</div>
-          <p class="build-status failed">#3286 Failed</p>
-        </div>
-        <div class="star-feature">
-        </div>
-      </div>
-    </div>
-    <div class="large-4 medium-6 columns">
-      <div class="tile">
-        <div class="build-pending">
-        </div>
-        <div class="build-information">
-          <p class="org pending">travis-ci</p>
-          <p class="repo pending">travis-cookbooks</p>
-          <div class="if_private">Private</div>
-          <div class="duration"> 27 sec</div>
-          <div class="finished"> 3 min ago</div>
-          <p class="build-status pending">#3286 Started</p>
-        </div>
-        <div class="star-feature">
-        </div>
-      </div>
-    </div>
-    
-    <div class="large-4 medium-6 columns">
-      <div class="tile">
-        <div class="build-passed">
-        </div>
-        <div class="build-information">
-          <p class="org passed">travis-ci</p>
-          <p class="repo passed">docs-travis-ci-com</p>
-          <div class="duration">4 min 5 sec</div>
-          <div class="finished">1 day ago</div>
-          <p class="build-status passed">#3286 Passed</p>
-        </div>
-        <div class="star-feature">
-        </div>
-      </div>
-    </div>
-    <div class="large-4 medium-6 columns end">
-      <div class="tile">
-        <div class="build-passed">
-        </div>
-        <div class="build-information">
-          <p class="org passed">travis-ci</p>
-          <p class="repo passed">travis-worker</p>
-          <div class="duration">11 min 12 sec</div>
-          <div class="finished">2 days ago</div>
-          <p class="build-status passed">#3286 Passed</p>
+          <p class="org">{{repo.owner}}</p>
+          <p class="repo">{{repo.name}}</p>
+          <div class="duration">{{formatDuration repo.last_build_duration}}</div>
+          <div class="finished">{{formatTime repo.last_build_finished_at}}</div>
+          <p class="build-status">#{{repo.last_build_number}} {{repo.last_build_state}}</p>
         </div>
         <div class="star-feature">
         </div>
       </div>
     </div>
+  {{/each}}
   </div>
 </div>
diff --git a/assets/styles/dashboard/dashboard.scss b/assets/styles/dashboard/dashboard.scss
index f3e23745..baeb2291 100644
--- a/assets/styles/dashboard/dashboard.scss
+++ b/assets/styles/dashboard/dashboard.scss
@@ -391,40 +391,73 @@ a {
   -moz-border-radius    : 4px;
 }
 
-.build-passed {
+.build-bar {
   position        : absolute;
-  background      : #3ba85d url('/images/dashboard/status-passed.svg') no-repeat 7px 10px;
-  background-size : 20px 20px;
+  background: {
+    repeat: no-repeat;
+    position: 7px 10px;
+    size: 20px 20px;
+  }
   min-height      : 125px;
   width           : 33px;
   border-radius   : 4px 0 0 4px;
 }
 
-.build-failed {
-  position        : absolute;
-  background      : #d04729 url('/images/dashboard/status-failed.svg') no-repeat 7px 10px;
-  background-size : 20px 20px;
-  min-height      : 125px;
-  width           : 33px;
-  border-radius   : 4px 0 0 4px;
+.passed {
+  .build-bar {
+    background: {
+      color: #3ba85d;
+      image: url('/images/dashboard/status-passed.svg');
+    }
+  }
+  .org,
+  .repo,
+  .build-status {
+    color: #3ba85d;
+  }
+
 }
 
-.build-pending {
-  position        : absolute;
-  background      : #d2ca28 url('/images/dashboard/status-pending.svg') no-repeat 7px 10px;
-  background-size : 20px 20px;
-  min-height      : 125px;
-  width           : 33px;
-  border-radius   : 4px 0 0 4px;
+.failed {
+  .build-bar {
+    background: {
+      color: #d04729;
+      image: url('/images/dashboard/status-failed.svg');
+    }
+  }
+  .org,
+  .repo,
+  .build-status {
+    color: #d04729;
+  }
 }
 
-.build-errored {
-  position        : absolute;
-  background      : #bec0c2 url('/images/dashboard/status-errored.svg') no-repeat 7px 10px;
-  background-size : 20px 20px;
-  min-height      : 125px;
-  width           : 33px;
-  border-radius   : 4px 0 0 4px;
+.started {
+  .build-bar {
+    background: {
+      color: #848032;
+      image: url('/images/dashboard/status-pending.svg');
+    }
+  }
+  .org,
+  .repo,
+  .build-status {
+    color: #848032;
+  }
+}
+
+.errored {
+  .build-bar {
+    background: {
+      color: #999999;
+      image: url('/images/dashboard/status-errored.svg');
+    }
+  }
+  .org,
+  .repo,
+  .build-status {
+    color: #999999;
+  }
 }
 
 .tile .build-information {
@@ -446,59 +479,6 @@ a {
   text-overflow : ellipsis;
 }
 
-p.org.passed {
-  color : #3ba85d;
-}
-
-p.org.failed {
-  color : #d04729;
-}
-
-p.org.pending {
-  color : #848032;
-}
-
-p.org.errored {
-  color : #999999;
-}
-
-p.repo.passed {
-  color : #3ba85d;
-}
-
-p.repo.failed {
-  color : #d04729;
-}
-
-p.repo.pending {
-  color : #848032;
-}
-
-p.repo.errored {
-  color : #999999;
-}
-
-p.build-status {
-  position : absolute;
-  bottom   : 25px;
-}
-
-p.build-status.passed {
-  color : #3ba85d;
-}
-
-p.build-status.failed {
-  color : #d04729;
-}
-
-p.build-status.pending {
-  color : #848032;
-}
-
-p.repo.errored {
-  color : #999999;
-}
-
 .duration, .finished {
   margin-top : 8px;
   background-repeat: no-repeat;
@@ -520,7 +500,9 @@ p.repo.errored {
 }
 
 .build-status {
-  margin-bottom : 0;
+  position: absolute;
+  bottom: 25px;
+  margin-bottom: 0;
 }
 
 .tile .star-feature {