15308555518/ mirror-web
1
0
Fork 0
mirror of https://github.com/tuna/mirror-web.git synced 2025-12-25 20:32:46 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

update fancy status

This commit is contained in:
王邈 2020-03-02 15:05:40 +08:00
parent 052eab1d6d
commit 59e7e4659f
4 changed files with 81 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
static/css/style.scss
View File

@ -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;

2
static/js/index.es6
View File

@ -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];
}

42
static/js/status.es6
View File

@ -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);
});

51
status.html
View File

@ -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>