TTMK/web2.0-backend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

New functionality for timetable: header-row with clock on it and animated row deletion

Browse Source
This commit is contained in:
Juuso Käenmäki
2017-02-10 18:02:23 +02:00
parent 8f4c8701ae
commit 8cd8882fb9
3 changed files with 81 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
infoscreen/static/css/hsl.css
+34 -1
View File
@@ -1,5 +1,5 @@
table {
font-size: 3vw;
font-size: 5vh;
font-family: 'Droid Sans Mono', monospace;
}
.red {
@@ -39,3 +39,36 @@ table {
50% { opacity: 0.1; }
100% { opacity: 1.0; }
}
thead{
background: #f0f0f0;
}
.header-row{
background: #f0f0f0;
font-size: 7vh;
font-family: 'Droid Sans Mono', monospace;
text-align: center;
}
.container {
width: 100vw;
padding: 0 0 0 0;
}
.container .table {
margin-left: 0;
margin-right: 0;
}
.repeat-item.ng-leave {
-webkit-transition:0.5s linear all;
transition:0.5s linear all;
}
.repeat-item.ng-leave.ng-leave-active {
opacity: 0;
font-size: 0vh;
}
.repeat-item.ng-leave{
opacity: 1;
font-size: 5vh;
}
infoscreen/static/html/hsl.html
+40 -35
View File
@@ -1,38 +1,43 @@
<link rel="stylesheet" href="/static/css/hsl.css">
<link href="https://fonts.googleapis.com/css?family=Droid+Sans+Mono" rel="stylesheet">
<div ng-app="myApp" ng-controller="timetableCtrl">
<table class="table table-striped">
<thead>
<tr>
<th>
Aika
</th>
<th>
Numero
</th>
<th>
Pys&#228;kki
</th>
<th>
P&#228;&#228;tepys&#228;kki
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in arr | orderBy: ['date','time'] | limitTo: 10">
<td ng-class='{red : x.hurry, black: !x.hurry}'>
{{x.time}}
</td>
<td style="margin-left: 15px">
{{x.bus}}
</td>
<td>
{{x.stop}}
</td>
<td>
{{x.laststop}}
</td>
</tr>
</tbody>
</table>
<div class="container" ng-app="myApp" ng-controller="timetableCtrl">
<div class="header-row row">
<div class="col-sm-2"></div>
<div class="col-sm-8">HSL-Aikataulut</div>
<div class="col-sm-2 time"><p>{{ clock | date:'HH:mm'}}</p></div>
</div>
<table class="table table-striped row">
<thead>
<tr>
<th>
Aika
</th>
<th>
Linja
</th>
<th>
Pys&#228;kki
</th>
<th>
P&#228;&#228;tepys&#228;kki
</th>
</tr>
</thead>
<tbody>
<tr class="repeat-item" ng-repeat="x in arr | orderBy: ['date','time'] | limitTo: 10">
<td ng-class='{red : x.hurry, black: !x.hurry}'>
{{x.timedelta < 10 ?x.timedelta + ' min' : x.time}}
</td>
<td>
{{x.bus}}
</td>
<td>
{{x.stop}}
</td>
<td>
{{x.laststop}}
</td>
</tr>
</tbody>
</table>
</div>
infoscreen/static/js/infoscreen_controllers.js
+7 -1
View File
@@ -83,6 +83,7 @@ app.controller('timetableCtrl',
$scope.$on('$destroy', function() {
$interval.cancel(inter1);
$interval.cancel(inter2);
$interval.cancel(inter3);
});
var objects;
$scope.arr=[];
@@ -169,6 +170,7 @@ app.controller('timetableCtrl',
d.setHours(time[0]);
d.setMinutes(time[1]);
var diff=(d.getTime()-f.getTime());
$scope.arr[a]['timedelta']=Math.floor(diff/60000);
if(diff < tooSoon*60000) {
$scope.arr.splice(a,1);
}
@@ -177,10 +179,14 @@ app.controller('timetableCtrl',
}
}
}
function updateTime(){
$scope.clock = Date.now();
}
$scope.clock = Date.now();
load();
var inter1=$interval(delOld,2000);
var inter2=$interval(load,10000);
var inter3=$interval(updateTime, 1000);
}
);