Started with html development

- Designing the Interface now
- Added data.json
- Added data.html: For viewing graphs
- Added Icons: RCN-icon & new Favicon
- Switched to develop vue.js. Switching back on release
- Removed testing data.json
- Modified readme
pull/4/head
Trivernis 6 years ago
parent 21bbcbb3cd
commit e21ebee005

1
.gitignore vendored

@ -29,3 +29,4 @@ node_modules
# Custom additions # Custom additions
.ssh .ssh
.log .log
package-lock.json

@ -1,6 +1,6 @@
rcn-frontserver rcn-frontserver
==== ====
![Raspberry Communication Network](https://raw.githubusercontent.com/Trivernis/rcn-frontserver/develop/res/img/RCN-Logo.png)
About About
---- ----
This is the front-web-server of the Raspberry pi Communication network. This is the front-web-server of the Raspberry pi Communication network.

@ -19,7 +19,9 @@ function bindModelData(model) {
$.get(model.attr('src'), function(data){ $.get(model.attr('src'), function(data){
$('*[model='+model.attr('name')+']').each(function() { $('*[model='+model.attr('name')+']').each(function() {
let elem = $(this); let elem = $(this);
elem.html(getDataByPath(JSON.parse(data), elem.attr('datapath'))); let data = getDataByPath(JSON.parse(data), elem.attr('datapath'));
this.setAttribute(":data", data);
//elem.html();
}) })
}); });
} }

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

@ -0,0 +1,29 @@
{
"last-perc": 11.5,
"last-temp": 31.2,
"labels":[
"1",
"2",
"3",
"4",
"5"
],
"100perc": [
[0,1],
[1,3],
[2,12],
[3,10]
],
"100temp": [
[1,30],
[2,33],
[3,32],
[4,31],
[5,30],
[6,29],
[7,32],
[8,31],
[9,34],
[10,33]
]
}

@ -1,5 +0,0 @@
{
"name": "NoName",
"date": "today is the day",
"1": "no"
}

@ -0,0 +1,20 @@
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<script src="https://unpkg.com/vue-chartjs/dist/vue-chartjs.min.js"></script>
</head>
<body>
<h1> Data </h1>
<div id="app">
<div style="height: 100px; width: 100%">
<svg viewBox="0 0 100 100" style="height: 100%; width: 100%">
<polygon
v-bind:points="temperatureData">
</polygon>
</svg>
</div>
</div>
<script src="/data.js" type="text/javascript">
</script>
</body>
</html>

@ -1,16 +1,10 @@
<html> <html>
<head> <head>
<title> Landing 1 </title> <title> Landing 1 </title>
<model name="jsonmodel" src="data.json" refresh-interval="10000">
</model>
</head> </head>
<body> <body>
<h1> <h1>
You made it to the Index! You made it to the Index!
</h1> </h1>
<h2 model="jsonmodel" datapath="name">
</h2>
<p model="jsonmodel" datapath="date">
</p>
</body> </body>
</html> </html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 83 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 118 KiB

@ -0,0 +1,28 @@
function getFormattedData(dataArray) {
let arrData = ["0,100"];
for (d of dataArray) {
arrData.push(d[0]+","+(100-d[1]));
}
arrData.push("100,100");
return arrData.join(" ");
}
var vueApp = new Vue({
el: '#app',
data: {
temperatureData: [1,2,3,4],
percentData: [2,3,4,5],
labels: ["1", "2", "3", "4", "5"],
chartOptions: {
responsive: true,
maintainAspectRatio: false
}
},
mounted() {
let self = this;
$.getJSON('cpu.json', d => {
self.temperatureData = getFormattedData(d['100temp']),
self.percentData = getFormattedData(d['100perc'])
})
}
})

@ -138,16 +138,19 @@ function getResponse(uri) {
// get the file extension // get the file extension
let extension = getExtension(uri); let extension = getExtension(uri);
// returns the global script or css if the extension is css or js and the root-uriis glob. // returns the global script or css if the extension is css or js and the root-uriis glob.
if (uri.includes("/glob") && extension == ".css" || extension == ".js") { if (uri.includes("/glob") && (extension == ".css" || extension == ".js")) {
logger.verbose("Using global uri");
if (extension == ".css") return [fs.readFileSync("." + uri), "text/css"]; if (extension == ".css") return [fs.readFileSync("." + uri), "text/css"];
else return [fs.readFileSync("." + uri), "text/javascript"]; else return [fs.readFileSync("." + uri), "text/javascript"];
} }
let mount = getMount(uri); // get mount for uri it will be uses as path later instead of route let mount = getMount(uri); // get mount for uri it will be uses as path later instead of route
logger.verbose("Mount for uri is "+ mount)
let route = routes[extension]; // get the route from the extension json let route = routes[extension]; // get the route from the extension json
logger.verbose("Found route: "+JSON.stringify(route))
if (!route) return ["Not Allowed", "text/plain"]; // return not allowed if no route was found if (!route) return ["Not Allowed", "text/plain"]; // return not allowed if no route was found
let rf = fs.readFileSync; // shorten filesync let rf = fs.readFileSync; // shorten filesync
if (extension == ".html") return [formatHtml(rf(mount || path.join(route["path"]+uri))), route["mime"]]; // format if html and return if (extension == ".html") return [formatHtml(rf(mount || path.join(route["path"]+uri))), route["mime"]]; // format if html and return
return [rf(mount || route["path"]+uri), route["mime"]]; // return without formatting if it's not an html file. (htm files won't be manipulated) return [rf(mount || path.join(route["path"],uri)), route["mime"]]; // return without formatting if it's not an html file. (htm files won't be manipulated)
// test the extension for differend file types. // test the extension for differend file types.
logger.verbose({'msg': 'Error', 'path': uri}) logger.verbose({'msg': 'Error', 'path': uri})
return ["Error with url", "text/plain"]; // return an error if above has not returned return ["Error with url", "text/plain"]; // return an error if above has not returned

Loading…
Cancel
Save