Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use vuejs components #150

Draft
wants to merge 4 commits into
base: master
Choose a base branch
from
Draft

Use vuejs components #150

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
cdf0f36
wip
andig Aug 7, 2020
e1016cf
wip
andig Aug 8, 2020
90dc059
wip
andig Aug 8, 2020
846e5dc
wip
andig Aug 9, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .goreleaser.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ before:
builds:
- id: main
main: main.go
flags:
- -tags=release
ldflags:
- -X github.com/volkszaehler/mbmd/server.Version={{.Version}} -X github.com/volkszaehler/mbmd/server.Commit={{.ShortCommit}}
env:
Expand Down
2 changes: 1 addition & 1 deletion Makefile
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ assets:

build:
@echo Version: $(VERSION) $(BUILD_DATE)
go build -v -ldflags '-X "github.com/volkszaehler/mbmd/server.Version=${VERSION}" -X "github.com/volkszaehler/mbmd/server.Commit=${SHA}"'
go build -v -tags=release -ldflags '-X "github.com/volkszaehler/mbmd/server.Version=${VERSION}" -X "github.com/volkszaehler/mbmd/server.Commit=${SHA}"'

publish-images:
@echo Version: $(VERSION) $(BUILD_DATE)
Expand Down
8 changes: 4 additions & 4 deletions assets/css/bootstrap.min.css
View file
Open in desktop

Large diffs are not rendered by default.

139 changes: 139 additions & 0 deletions assets/css/bootstrap.min.css.map
View file
Open in desktop

Large diffs are not rendered by default.

5 changes: 5 additions & 0 deletions assets/css/fontawesome.min.css
View file
Open in desktop

Large diffs are not rendered by default.

5 changes: 5 additions & 0 deletions assets/css/solid.min.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

61 changes: 37 additions & 24 deletions assets/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,19 @@
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=yes" />
<link rel="stylesheet" href="css/bootstrap.min.css">
<link href="css/app.css" rel="stylesheet">

<!-- CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/fontawesome.min.css" rel="stylesheet">

<!-- Bootstrap -->
<script src="js/jquery-3.4.1.slim.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>

<!-- VueJS -->
<script src="js/vue.min.js"></script>
<script src="js/d3-format.min.js"></script>
</head>

<body>
Expand All @@ -31,42 +44,47 @@
<a class="nav-link" href="#about">About</a>
</li>
</ul>
<span id="time" class="navbar-text">
${ date } ${ time }
</span>
</div>
</nav>

<template id="measurement">
<tr class="d-flex" v-if="data">
<td class="col-3">${title}</td>
<td class="col-2" v-if="data._1">${data._1}</td>
<script type="text/x-template" id="data-row">
<tr class="d-flex">
<td class="col-3">${title}${data}${dump}</td>
<td class="col-2" v-if="typeof data._1 !== 'undefined'">${data}</td>
<td class="col-2" v-else>&mdash;</td>
<td class="col-2" v-if="data._2">${data._2}</td>
<td class="col-2" v-if="typeof data._2 !== 'undefined'">${data}</td>
<td class="col-2" v-else>&mdash;</td>
<td class="col-2" v-if="data._3">${data._3}</td>
<td class="col-2" v-if="typeof data._3 !== 'undefined'">${data}</td>
<td class="col-2" v-else>&mdash;</td>
<td class="col-3" v-if="sum">${fmt(valsum)}</td>
<td class="col-3" v-if="data.total">${data.total}</td>
<td class="col-3" v-else-if="sum">${fmt(valsum)}</td>
<td class="col-3" v-else>&mdash;</td>
</tr>
</template>
</script>

<div class="container">
<div id="realtime">
<h1>Measurements</h1>
<p>${ message }</p>
<p>${message}</p>

<table class="metertable table table-striped" v-for="(m, idx) in sortedMeters">
<table class="metertable table table-striped" v-for="(m, name, idx) in sorted(meters)">
<thead class="thead-dark">
<tr class="d-flex">
<th class="col-3">${ idx }</th>
<th class="col-3">
<a href="#" class="text-white">
${name}
${m.Export}
<i class="fas fa-chevron-up mx-2" data-toggle="collapse" v-bind:data-target="'#data-'+idx"></i>
<i class="fas fa-chevron-down mx-2" data-toggle="collapse" v-bind:data-target="'#data-'+idx"></i>
</a>
</th>
<th class="col-2">L1</th>
<th class="col-2">L2</th>
<th class="col-2">L3</th>
<th class="col-3">Total</th>
</tr>
</thead>
<tbody>
<tbody class="collapse show" v-bind:id="'data-'+idx">
<!-- strings -->
<tr is="row" v-bind:data="m.DCVoltage" title="DC Voltage (V)"></tr>
<tr is="row" v-bind:data="m.DCCurrent" title="DC Current (A)"></tr>
Expand Down Expand Up @@ -126,9 +144,9 @@ <h1>Status</h1>
</thead>
<tbody>
<tr v-for="(m, idx) in sorted(meters)">
<td>${ idx }</td>
<td>${ m.Type }</td>
<td>${ m.Status }</td>
<td>${idx}</td>
<td>${m.Type}</td>
<td>${m.Status}</td>
</tr>
</tbody>
</table>
Expand All @@ -145,12 +163,7 @@ <h1>About MBMD</h1>
</div>
<!-- /.container -->

<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/d3-format.min.js"></script>
<script src="js/tether.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/vue.min.js"></script>
<script src="js/app.js"></script>
<script src="js/app.js?{{.Tag}}"></script>
</body>

</html>
84 changes: 28 additions & 56 deletions assets/js/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,47 +25,24 @@ let formatter = {
}
}

let timeapp = new Vue({
el: '#time',
delimiters: ['${', '}'],
data: {
time: 'n/a',
date: 'n/a'
}
});

let statusapp = new Vue({
el: '#status',
delimiters: ['${', '}'],
mixins: [sort],
data: {
meters: {}
}
});

let dataapp = new Vue({
el: '#realtime',
delimiters: ['${', '}'],
mixins: [sort, formatter],
mixins: [sort],
data: {
meters: {},
message: 'Loading...'
},
methods: {
// pop returns true if it was called with any non-null argument
pop: function () {
for(var i=0; i<arguments.length; i++) {
if (arguments[i] !== undefined && arguments[i] !== null && arguments[i] !== "") {
return true;
}
}
return false;
},
computed: {
sortedMeters: function() {
console.log(this.meters)
return this.sorted(this.meters);
}
}
});

Vue.component('row', {
template: '#measurement',
template: '#data-row',
delimiters: ["${", "}"],
mixins: [formatter],
props: {
Expand All @@ -74,7 +51,11 @@ Vue.component('row', {
sum: Boolean,
},
computed: {
dump: function (){
return this.data
},
valsum: function () {
console.log("valsum:"+this)
if (this.total !== undefined) {
return this.total;
} else {
Expand All @@ -84,34 +65,19 @@ Vue.component('row', {
},
});

var fixed = d3.format(".2f")
var si = d3.format(".3~s")
let statusapp = new Vue({
el: '#status',
delimiters: ['${', '}'],
mixins: [sort],
data: {
meters: {}
}
});

$().ready(function () {
connectSocket();
});

function convertDate(unixtimestamp){
var date = new Date(unixtimestamp);
var day = "0" + date.getDate();
var month = "0" + (date.getMonth() + 1);
var year = date.getFullYear();
return year + '/' + month.substr(-2) + '/' + day.substr(-2);
}

function convertTime(unixtimestamp){
var date = new Date(unixtimestamp);
var hours = date.getHours();
var minutes = "0" + date.getMinutes();
var seconds = "0" + date.getSeconds();
return hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);
}

function updateTime(data) {
timeapp.date = convertDate(data["Timestamp"])
timeapp.time = convertTime(data["Timestamp"])
}

function updateStatus(status) {
var id = status["Device"]
status["Status"] = status["Online"] ? "online" : "offline"
Expand All @@ -127,6 +93,9 @@ function updateStatus(status) {

const re = /^(.+?)([SL]([1-9]))?$/

let fixed = d3.format(".2f")
let si = d3.format(".3~s")

function updateData(data) {
// extract the last update
let id = data["Device"]
Expand All @@ -136,6 +105,10 @@ function updateData(data) {
// put into status line
dataapp.message = "Received " + id + " / " + type + ": " + si(value)

if (type.indexOf("Reactive") === 0) {
console.log(type)
}

// match type
let match = re.exec(type)
let base = match[1]
Expand Down Expand Up @@ -163,7 +136,6 @@ function processMessage(data) {
}
}
else if (data.Device) {
updateTime(data);
updateData(data);
}
}
Expand All @@ -172,8 +144,7 @@ function connectSocket() {
var ws, loc = window.location;
var protocol = loc.protocol == "https:" ? "wss:" : "ws:"

// ws = new WebSocket(protocol + "//" + loc.hostname + (loc.port ? ":" + loc.port : "") + "/ws");
ws = new WebSocket("ws://localhost:8081/ws");
ws = new WebSocket(protocol + "//" + loc.hostname + (loc.port ? ":" + loc.port : "") + "/ws");

ws.onerror = function () {
ws.close();
Expand All @@ -182,6 +153,7 @@ function connectSocket() {
window.setTimeout(connectSocket, 1000);
}
ws.onmessage = function (evt) {
// console.log(evt.data);
var json = JSON.parse(evt.data);
processMessage(json);
}
Expand Down
7 changes: 7 additions & 0 deletions assets/js/bootstrap.bundle.min.js
View file
Open in desktop

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions assets/js/bootstrap.bundle.min.js.map
View file
Open in desktop

Large diffs are not rendered by default.

7 changes: 0 additions & 7 deletions assets/js/bootstrap.min.js
View file
Open in desktop

This file was deleted.

4 changes: 0 additions & 4 deletions assets/js/jquery-3.2.1.min.js
View file
Open in desktop

This file was deleted.

2 changes: 2 additions & 0 deletions assets/js/jquery-3.4.1.slim.min.js
View file
Open in desktop

Large diffs are not rendered by default.

5 changes: 5 additions & 0 deletions assets/js/popper.min.js
View file
Open in desktop

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions assets/js/popper.min.js.map
View file
Open in desktop

Large diffs are not rendered by default.

1 change: 0 additions & 1 deletion assets/js/tether.min.js
View file
Open in desktop

This file was deleted.

8 changes: 3 additions & 5 deletions assets/js/vue.min.js
View file
Open in desktop

Large diffs are not rendered by default.

Binary file added assets/webfonts/fa-brands-400.eot
View file
Open in desktop
Binary file not shown.
Loading