From 59e7e4659f7b79bacc016b77344bcc3d0fdba877 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E9=82=88?= <shankerwangmiao@gmail.com>
Date: Mon, 2 Mar 2020 15:05:40 +0800
Subject: [PATCH] update fancy status

---
 static/css/style.scss | 47 ++++++++++++++++++++++++---------------
 static/js/index.es6   |  2 +-
 static/js/status.es6  | 42 ++++++++++++++++-------------------
 status.html           | 51 +++++++++++++++++++++++++++----------------
 4 files changed, 81 insertions(+), 61 deletions(-)

diff --git a/static/css/style.scss b/static/css/style.scss
index 4c117aa..3bc4973 100644
--- a/static/css/style.scss
+++ b/static/css/style.scss
@@ -172,29 +172,28 @@ body {
     }
     .table-condensed {
       & > thead, & > tbody, & > tfoot{
-        & > tr > th, & > tr > td{
+        & > tr > th, & > tr > td[class*="rolling-"]{
           overflow-y: hidden;
           clip-path: padding-box;
-          &[class*="rolling-"]{
-            & > div {
-              position: absolute;
-              left: 0;
-              top: 0;
+          & > div {
+            position: absolute;
+            left: 0;
+            top: 0;
+            height: 100%;
+            width: 100%;
+            transition-property: transform;
+            transition-duration: 1s;
+            transition-timing-function: ease;
+            div {
+              padding: 5px;
+              white-space: nowrap;
               height: 100%;
-              transition-property: transform;
-              transition-duration: 1s;
-              transition-timing-function: ease;
-              div {
-                padding: 5px;
-                white-space: nowrap;
-                height: 100%;
-              }
-              &.notrans{
-                transition-duration: 0s;
-              }
             }
-            position: relative;
+            &.notrans{
+              transition-duration: 0s;
+            }
           }
+          position: relative;
         }
       }
     }
@@ -265,12 +264,18 @@ body {
 .text-right-xs {
     text-align: right;
 }
+.text-left-xs {
+    text-align: left;
+}
 
 /* Small devices (tablets, 768px and up) */
 @media (min-width: 768px) {
     .text-right-sm {
         text-align: right;
     }
+    .text-left-sm {
+        text-align: left;
+    }
 }
 
 /* Medium devices (desktops, 992px and up) */
@@ -278,6 +283,9 @@ body {
     .text-right-md {
         text-align: right;
     }
+    .text-left-md {
+        text-align: left;
+    }
     .table.flat-md {
         td,tr,th {
             float: none;
@@ -296,6 +304,9 @@ body {
     .text-right-lg {
         text-align: right;
     }
+    .text-left-lg {
+        text-align: left;
+    }
 }
 .table.flat-md {
     word-break: break-all;
diff --git a/static/js/index.es6 b/static/js/index.es6
index 7fb3c41..1abbd5c 100644
--- a/static/js/index.es6
+++ b/static/js/index.es6
@@ -93,7 +93,7 @@ var stringifyTime = function(ts){
 		ago = timeago.format(date);
 	} else {
 		str = "0000-00-00 00:00";
-		ago = "-";
+		ago = "Never";
 	}
 	return [str, ago];
 }
diff --git a/static/js/status.es6 b/static/js/status.es6
index ed94da8..d39fb17 100644
--- a/static/js/status.es6
+++ b/static/js/status.es6
@@ -21,37 +21,33 @@ $(document).ready(() => {
 	var resetToZeroHandler = function(e){
 		var $this = $(this);
 		$this.addClass('notrans').css("transform", "translateY(0)");
+		$this.off('transitioncancel.reset');
 		setTimeout(function(){
 			$this.removeClass('notrans');
 		}, 0);
 	}
+	var clearResetHandler = function(e){
+		var $this = $(this);
+		$this.off('transitionend.reset')
+	}
 	setInterval(function(){
+		if($('#mirror-list .hidden-md:not(.hidden-xs):not(.hidden-sm)').css('display') != 'none'){
+			return;
+		}
 		step += 1;
-		var $objs = $('');
-		
-		var $objs3 = $("tr:not(:hover):not(:active):not(.last-succ) > .rolling-3 > div");
-		$objs3.css("transform", `translateY(-${Math.floor(step / 2) * 100}%)`);
-		$objs = $objs.add($objs3);
-		
-		var $objs3_1 = $("tr.last-succ:not(:hover):not(:active) > .rolling-3 > div");
-		var pos = Math.floor(step / 2);
-		if(pos >= 1) pos--;
-		$objs3_1.css("transform", `translateY(-${pos * 100}%)`);
-		$objs = $objs.add($objs3_1);
-		
-		var $objs6 = $("tr:not(:hover):not(:active):not(.status-syncing) > .rolling-6 > div");
-		$objs6.css("transform", `translateY(-${step * 100}%)`);
-		$objs = $objs.add($objs6);
-		
-		var $objs6_1 = $("tr.status-syncing:not(:hover):not(:active) > .rolling-6 > div");
-		pos = step;
-		if(pos >= 5) pos--;
-		$objs6_1.css("transform", `translateY(-${pos * 100}%)`);
-		$objs = $objs.add($objs6_1);
-		
+		var $objs = $('tr:not(:hover):not(:active) > td[class*="rolling-"] > div');
+		$objs.each(function(){
+			var $this = $(this);
+			var index = $this.children('div[data-tuna-roll-seq="'+step+'"]').index();
+			if(index == -1){
+				return;
+			}
+			$this.css("transform", `translateY(-${index * 100}%)`);
+		});
 		step %= 6;
 		if(step == 0){
-			$objs.one('transitionend', resetToZeroHandler);
+			$objs.one('transitionend.reset', resetToZeroHandler);
+			$objs.one('transitioncancel.reset', clearResetHandler);
 		}
 	}, 2500);
 });
diff --git a/status.html b/status.html
index a068d2a..f96075e 100644
--- a/status.html
+++ b/status.html
@@ -37,10 +37,10 @@ permalink: /status/
 				<thead class="hidden-xs hidden-sm">
 					<tr>
 						<th class="col-xs-12 col-md-2">Name</th>
-						<th class="col-xs-12 col-md-2" colspan=2>Last Update</th>
-						<th class="col-xs-12 col-md-5">Upstream</th>
+						<th class="col-xs-12 col-md-4" colspan=2>Last Update</th>
+						<th class="col-xs-12 col-md-4">Upstream</th>
 						<th class="col-xs-12 col-md-1">Status</th>
-						<th class="col-xs-12 col-md-2">Size</th>
+						<th class="col-xs-12 col-md-1">Size</th>
 					</tr>
 				</thead>
 				<tbody id="mirror-list">
@@ -48,33 +48,46 @@ permalink: /status/
 					<tr v-for="mir in rawMirrorList" :class="['row', 'status-'+mir.status, mir.last_ended_ts == mir.last_update_ts ? 'last-succ' : 'last-fail']" :key="mir.name">
 						<td class="col-xs-4">Name</td>
 						<td class="col-md-2 col-xs-8">{{mir.name}}{{mir.is_master ? '' : ' [slave]'}}</td>
-						<td class="col-xs-4">Last Update</td>
-						<td class="col-md-1 col-xs-3 rolling-3">​
+						<td class="col-xs-4">Last Success</td>
+						<td class="col-xs-8 hidden-md hidden-lg">{{mir.last_update}}, {{mir.last_update_ago}}</td>
+						<template v-if="mir.last_ended_ts != mir.last_update_ts">
+						<td class="col-xs-4">Last Attempt</td>
+						<td class="col-xs-8 hidden-md hidden-lg">{{mir.last_ended}}, {{mir.last_ended_ago}}</td>
+						</template>
+						<td class="col-xs-4">Next Sync</td>
+						<td class="col-xs-8 hidden-md hidden-lg" v-if="mir.status != 'syncing'">{{mir.next_schedule}}, {{mir.next_schedule_ago}}</td>
+						<td class="col-xs-8 hidden-md hidden-lg" v-else>Syncing Now</td>
+						<td class="hidden-xs hidden-sm hidden-md hidden-lg"></td>
+						<td class="col-md-2 col-xs-3 rolling-3 text-left-md text-right-xs hidden-xs hidden-sm">​
 							<div>
-								<div>Last Sync</div>
-								<div v-if="mir.last_ended_ts != mir.last_update_ts">Last Active</div>
-								<div>Next Sync</div>
-								<div>Last Sync</div>
+								<div data-tuna-roll-seq=0>Last Successful Sync</div>
+								<template v-if="mir.last_ended_ts != mir.last_update_ts">
+								<div data-tuna-roll-seq=1>Last Attempted Sync</div>
+								<div data-tuna-roll-seq=2>Last Successful Sync</div>
+								<div data-tuna-roll-seq=3>Last Attempted Sync</div>
+								</template>
+								<div data-tuna-roll-seq=4>Next Scheduled Sync</div>
+								<div data-tuna-roll-seq=6>Last Successful Sync</div>
 							</div>
 						</td>
 						<td class="hidden-xs hidden-sm hidden-md hidden-lg"></td>
-						<td class="col-md-2 col-xs-5 rolling-6">​
+						<td class="col-md-2 col-xs-5 rolling-6 hidden-xs hidden-sm">​
 							<div>
-								<div>{{mir.last_update}}</div>
-								<div>{{mir.last_update_ago}}</div>
-								<div>{{mir.last_ended}}</div>
-								<div>{{mir.last_ended_ago}}</div>
-								<div>{{mir.status != 'syncing' ? mir.next_schedule : 'Syncing'}}</div>
-								<div v-if="mir.status != 'syncing'">{{mir.next_schedule_ago}}</div>
-								<div>{{mir.last_update}}</div>
+								<div data-tuna-roll-seq=0>{{mir.last_update}}</div>
+								<div data-tuna-roll-seq=1 v-if="mir.last_ended_ts != mir.last_update_ts">{{mir.last_ended}}</div>
+								<div data-tuna-roll-seq=2>{{mir.last_update_ago}}</div>
+								<div data-tuna-roll-seq=3 v-if="mir.last_ended_ts != mir.last_update_ts">{{mir.last_ended_ago}}</div>
+								<div data-tuna-roll-seq=4>{{mir.status != 'syncing' ? mir.next_schedule : 'Syncing Now'}}</div>
+								<div data-tuna-roll-seq=5 v-if="mir.status != 'syncing'">{{mir.next_schedule_ago}}</div>
+								<div data-tuna-roll-seq=6>{{mir.last_update}}</div>
 							</div>
 						</td>
 						<td class="col-xs-4">Upstream</td>
-						<td class="col-md-3 col-xs-8">{{mir.upstream}}</td>
+						<td class="col-md-4 col-xs-8">{{mir.upstream}}</td>
 						<td class="col-xs-4">Status</td>
 						<td class="col-md-1 col-xs-8">{{mir.status}}</td>
 						<td class="col-xs-4">Size</td>
-						<td class="col-md-2 col-xs-8">{{mir.size}}</td>
+						<td class="col-md-1 col-xs-8">{{mir.size}}</td>
 					</tr>
 					{% endraw %}
 				</tbody>