Skip to content

Commit bf0af5a

Browse files
mrspartakmrspartak
committed
diff format + a bit of css for graph page
1 parent 8ccdb8c commit bf0af5a

File tree

2 files changed

+39
-26408
lines changed

2 files changed

+39
-26408
lines changed

‎public/graph.html

+39-20
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4+
<meta name="viewport" content="width=device-width, initial-scale=1">
45
<title>Js connection check GRAPHS</title>
56
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
67
<script src="https://unpkg.com/fusioncharts@3.15.0-sr.1/fusioncharts.js"></script>
@@ -11,30 +12,46 @@
1112
<style type="text/css">
1213
.source_wrapper {
1314
display: flex;
14-
flex-flow: row wrap;
15+
flex-wrap: wrap;
1516
}
1617
.source_box {
17-
border: 1px solid black;
18-
width: 45%;
19-
margin: 1%;
20-
padding: 1%;
18+
flex: 0 0 33%;
19+
}
20+
.source_box_content {
21+
border: 1px solid gray;
22+
padding: 10px;
23+
margin: 10px;
24+
}
25+
.text-color-green {color: green;}
26+
.text-color-red {color: red;}
27+
@media (max-width:1024px) {
28+
.source_box {
29+
flex: 0 0 50%;
30+
}
31+
}
32+
@media (max-width:720px) {
33+
.source_box {
34+
flex: 0 0 100%;
35+
}
2136
}
2237
</style>
2338
</head>
2439
<body>
2540
<div id="app">
2641
<div class="source_wrapper">
2742
<div v-for="(source, index) in sources" v-bind:key="index" class="source_box">
28-
<h2>
29-
Source: {{ source.name }} <small>{{ source.url }}</small>
30-
<button @click="delete_source(index)">Delete source</button>
31-
</h2>
32-
<h3 v-if="source.data">
33-
Connection: {{ source.data.currentStatus ? 'true' : 'false' }} ||
34-
Last disconnect: {{ source.data.lastTs }} sec
35-
<span v-if="source.data.updatedDiff"> || Last updated: {{ source.data.updatedDiff }} sec</span>
36-
</h3>
37-
<fusioncharts v-if="source.data && source.data.chart" type="column2d" width="100%" height="350" :dataSource="source.data.chart"></fusioncharts>
43+
<div class="source_box_content">
44+
<h2>
45+
Source: {{ source.name }} <small>{{ source.url }}</small>
46+
<button @click="delete_source(index)">Delete source</button>
47+
</h2>
48+
<h4 v-if="source.data">
49+
<span :class="[source.data.currentStatus ? 'text-color-green' : 'text-color-red']">{{ source.data.currentStatus ? 'Connected' : 'Disconnected'}}</span> |
50+
Last disconnect: {{ diffFormatted( source.data.lastTs ) }}
51+
<span v-if="source.data.updatedDiff"> | Last updated: {{ diffFormatted( source.data.updatedDiff ) }}</span>
52+
</h4>
53+
<fusioncharts v-if="source.data && source.data.chart" type="column2d" width="100%" height="350" :dataSource="source.data.chart"></fusioncharts>
54+
</div>
3855
</div>
3956
</div>
4057

@@ -86,11 +103,7 @@ <h3 v-if="source.data">
86103

87104
let chart = []
88105
data.archive.forEach((item) => {
89-
let diff = data.serverTS - item.start
90-
if(diff > 60 * 60 * 24) diff = ( diff / (60 * 60 * 24) ).toFixed(1) +'d'
91-
else if(diff > 60 * 60) diff = ( diff / (60 * 60) ).toFixed(1) +'h'
92-
else if(diff > 60) diff = ( diff / 60 ).toFixed(1) +'m'
93-
else diff = diff +'s'
106+
let diff = this.diffFormatted(data.serverTS - item.start)
94107

95108
chart.push({
96109
"label": diff,
@@ -115,6 +128,12 @@ <h3 v-if="source.data">
115128

116129
this.save_state()
117130
},
131+
diffFormatted(diff) {
132+
if(diff > 60 * 60 * 24) return ( diff / (60 * 60 * 24) ).toFixed(1) +'d'
133+
else if(diff > 60 * 60) return( diff / (60 * 60) ).toFixed(1) +'h'
134+
else if(diff > 60) return ( diff / 60 ).toFixed(1) +'m'
135+
else return diff +'s'
136+
},
118137
add_source() {
119138
if(!this.form.source || this.form.source.length == 0) return alert('Enter source')
120139
this.sources.push({url: this.form.source, name: this.form.name, data: null})

0 commit comments

Comments
 (0)