Skip to content
Snippets Groups Projects
Commit 7f5005ed authored by Peter Morstein's avatar Peter Morstein
Browse files

frontend: add gauges

parent 3896f2f1
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 463 additions and 55 deletions
dataacquisition/output/countryAnnualTemperature.dbf
+ 0
− 0
View file @ 7f5005ed
No preview for this file type
dataacquisition/output/germanStation.geojson 0 → 100644
+ 207
− 0
View file @ 7f5005ed
Source diff could not be displayed: it is too large. Options to address this: view the blob.
frontend/App.vue
+ 18
− 27
View file @ 7f5005ed
<template>
<div ref="weathermap"
style="width: 100%; height: 100%">
<div class="main">
<WeatherMap />
</div>
</template>
<style scoped>
.main {
width: 100%;
height: 100%;
}
</style>
<script lang="ts">
import Vue from "vue";
import View from 'ol/View';
import Map from 'ol/Map';
import OSM from 'ol/source/OSM';
import TileLayer from 'ol/layer/Tile';
import { fromLonLat} from 'ol/proj';
import { Component, Vue} from 'vue-property-decorator';
import 'ol/ol.css';
import WeatherMap from './src/WeatherMap.vue'
export default Vue.extend({
name: 'MapContainer',
mounted(){
new Map({
target: this.$refs['weathermap'],
layers: [
new TileLayer({
source: new OSM()
})
],
view: new View({
zoom: 6.45,
center: fromLonLat([11, 51.3]),
constrainResolution: true
})
});
}
});
@Component({
components: {WeatherMap}
})
export default class App extends Vue{
name: 'App'
}
</script>
frontend/index.html
+ 2
− 9
View file @ 7f5005ed
......@@ -2,23 +2,16 @@
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" >
<title>Temperatures in Germany</title>
<style>
@import "node_modules/ol/ol.css";
</style>
<style>
html, body {
margin: 0;
height: 100%;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id="app"></div>
......
frontend/index.js
+ 3
− 1
View file @ 7f5005ed
import Vue from 'vue';
import App from './App.vue';
import vuetify from './src/plugins/vuetify'
new Vue({ render: createElement => createElement(App) }).$mount('#app');
\ No newline at end of file
//new Vue({ render: createElement => createElement(App) }).$mount('#app');
new Vue({vuetify, render: createElement => createElement(App)}).$mount('#app')
\ No newline at end of file
frontend/package-lock.json
+ 62
− 1
View file @ 7f5005ed
......@@ -9,7 +9,11 @@
"dependencies": {
"ol": "^6.6.1",
"vue": "^2.6.14",
"vue-hot-reload-api": "^2.3.4"
"vue-class-component": "^7.2.6",
"vue-decorator": "^1.1.3",
"vue-hot-reload-api": "^2.3.4",
"vue-property-decorator": "^9.1.2",
"vuetify": "^2.5.8"
},
"devDependencies": {
"@vue/component-compiler-utils": "^3.2.2",
......@@ -14418,11 +14422,33 @@
"resolved": "https://registry.npmjs.org/vue/-/vue-2.6.14.tgz",
"integrity": "sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ=="
},
"node_modules/vue-class-component": {
"version": "7.2.6",
"resolved": "https://registry.npmjs.org/vue-class-component/-/vue-class-component-7.2.6.tgz",
"integrity": "sha512-+eaQXVrAm/LldalI272PpDe3+i4mPis0ORiMYxF6Ae4hyuCh15W8Idet7wPUEs4N4YptgFHGys4UrgNQOMyO6w==",
"peerDependencies": {
"vue": "^2.0.0"
}
},
"node_modules/vue-decorator": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/vue-decorator/-/vue-decorator-1.1.3.tgz",
"integrity": "sha512-UJQmVyIhccovtRR71B4Maj92iF4Ey04frBmIgLyAHU4g4UboxNtxizr8AqVHzx8tQUherS0/u+n3aVy/PMuspQ=="
},
"node_modules/vue-hot-reload-api": {
"version": "2.3.4",
"resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
"integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog=="
},
"node_modules/vue-property-decorator": {
"version": "9.1.2",
"resolved": "https://registry.npmjs.org/vue-property-decorator/-/vue-property-decorator-9.1.2.tgz",
"integrity": "sha512-xYA8MkZynPBGd/w5QFJ2d/NM0z/YeegMqYTphy7NJQXbZcuU6FC6AOdUAcy4SXP+YnkerC6AfH+ldg7PDk9ESQ==",
"peerDependencies": {
"vue": "*",
"vue-class-component": "*"
}
},
"node_modules/vue-template-compiler": {
"version": "2.6.14",
"resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.6.14.tgz",
......@@ -14439,6 +14465,18 @@
"integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
"dev": true
},
"node_modules/vuetify": {
"version": "2.5.8",
"resolved": "https://registry.npmjs.org/vuetify/-/vuetify-2.5.8.tgz",
"integrity": "sha512-paLmNhKTYFD41+14rIHnCo+P1jHbUzwBiMowxs5qXVq8RdRMqRmcy05Sfse1WUu90amPGK2fIFQq5rL2N8zqZg==",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/johnleider"
},
"peerDependencies": {
"vue": "^2.6.4"
}
},
"node_modules/w3c-hr-time": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
......@@ -25824,11 +25862,28 @@
"resolved": "https://registry.npmjs.org/vue/-/vue-2.6.14.tgz",
"integrity": "sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ=="
},
"vue-class-component": {
"version": "7.2.6",
"resolved": "https://registry.npmjs.org/vue-class-component/-/vue-class-component-7.2.6.tgz",
"integrity": "sha512-+eaQXVrAm/LldalI272PpDe3+i4mPis0ORiMYxF6Ae4hyuCh15W8Idet7wPUEs4N4YptgFHGys4UrgNQOMyO6w==",
"requires": {}
},
"vue-decorator": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/vue-decorator/-/vue-decorator-1.1.3.tgz",
"integrity": "sha512-UJQmVyIhccovtRR71B4Maj92iF4Ey04frBmIgLyAHU4g4UboxNtxizr8AqVHzx8tQUherS0/u+n3aVy/PMuspQ=="
},
"vue-hot-reload-api": {
"version": "2.3.4",
"resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
"integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog=="
},
"vue-property-decorator": {
"version": "9.1.2",
"resolved": "https://registry.npmjs.org/vue-property-decorator/-/vue-property-decorator-9.1.2.tgz",
"integrity": "sha512-xYA8MkZynPBGd/w5QFJ2d/NM0z/YeegMqYTphy7NJQXbZcuU6FC6AOdUAcy4SXP+YnkerC6AfH+ldg7PDk9ESQ==",
"requires": {}
},
"vue-template-compiler": {
"version": "2.6.14",
"resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.6.14.tgz",
......@@ -25845,6 +25900,12 @@
"integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
"dev": true
},
"vuetify": {
"version": "2.5.8",
"resolved": "https://registry.npmjs.org/vuetify/-/vuetify-2.5.8.tgz",
"integrity": "sha512-paLmNhKTYFD41+14rIHnCo+P1jHbUzwBiMowxs5qXVq8RdRMqRmcy05Sfse1WUu90amPGK2fIFQq5rL2N8zqZg==",
"requires": {}
},
"w3c-hr-time": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
......
frontend/package.json
+ 5
− 1
View file @ 7f5005ed
......@@ -9,7 +9,11 @@
"dependencies": {
"ol": "^6.6.1",
"vue": "^2.6.14",
"vue-hot-reload-api": "^2.3.4"
"vue-class-component": "^7.2.6",
"vue-decorator": "^1.1.3",
"vue-hot-reload-api": "^2.3.4",
"vue-property-decorator": "^9.1.2",
"vuetify": "^2.5.8"
},
"devDependencies": {
"@vue/component-compiler-utils": "^3.2.2",
......
frontend/src/Map.js deleted 100644 → 0
+ 0
− 16
View file @ 3896f2f1
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
const map = new Map({
target: 'map',
layers: [
new TileLayer({
source: new OSM()
})
],
view: new View({
center: [0, 0],
zoom: 2
})
});
frontend/src/MapProperties.ts 0 → 100644
+ 21
− 0
View file @ 7f5005ed
import Map from 'ol/Map';
export default class MapProperties{
private map: Map;
private projection: string;
constructor(map:Map, projection: string){
this.map = map;
this.projection = projection;
}
public getZoomLevel():number{
return this.map.getView().getZoom();
}
public getProjection(): string{
return this.projection;
}
}
\ No newline at end of file
frontend/src/StationLayer.ts 0 → 100644
+ 50
− 0
View file @ 7f5005ed
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import GeoJSON from 'ol/format/GeoJSON';
import {Circle as CircleStyle, Fill, Stroke, Style, Text} from 'ol/style';
import MapProperties from './MapProperties';
export default class StationLayer{
private layer: any;
private mapProperties: MapProperties;
constructor(mapProperties: MapProperties){
this.mapProperties = mapProperties;
this.layer = new VectorLayer({
source: new VectorSource({
url: "http://localhost/germanStation.geojson",
format: new GeoJSON(),
}),
style: (feature)=>{return this.stationStyle(feature)}
})
}
public getLayer(): any{
return this.layer;
}
protected stationStyle(feature){
console.log(feature.getProperties());
let fontSize = 15
let label = '\u272A';
if(this.mapProperties.getZoomLevel()>=8){
label += "\n"+feature.get("id");
}
return new Style({
text: new Text({
font: fontSize+'px Helvetica,bold',
overflow: true,
fill: new Fill({
color: 'rgba(0,0,0,1)'
}),
offsetY: 0,
text: label
})
});
}
}
\ No newline at end of file
frontend/src/WeatherMap.vue 0 → 100644
+ 65
− 0
View file @ 7f5005ed
<template>
<div class="weatherContainer">
<div ref="weathermap" class="weathermap" />
</div>
</template>
<style scoped>
.weathermap {
width: inherit;
height: inherit;
}
</style>
<script lang="ts">
import {Vue, Ref, Component } from 'vue-property-decorator';
import View from 'ol/View';
import Map from 'ol/Map';
import OSM from 'ol/source/OSM';
import TileLayer from 'ol/layer/Tile';
import { fromLonLat} from 'ol/proj';
import 'ol/ol.css';
import StationLayer from './StationLayer';
import MapProperties from './MapProperties';
@Component({name : 'WeatherMap'})
export default class WeatherMap extends Vue{
@Ref('weathermap') readonly targetElement!: HTMLElement;
private map!: Map;
private projection: string = 'EPSG:3857'; //4236
private mapProperties: MapProperties;
private stationLayer: StationLayer;
public mounted(): void{
this.map = new Map({
target: this.targetElement,
layers: [
new TileLayer({
source: new OSM()
})
],
view: new View({
zoom: 6.45,
center: fromLonLat([11, 51.3]),
constrainResolution: true,
projection: this.projection
})
});
this.mapProperties = new MapProperties(this.map, this.projection);
this.appendStationLayer();
}
private appendStationLayer(){
this.stationLayer = new StationLayer(this.mapProperties);
this.map.addLayer(this.stationLayer.getLayer());
}
};
</script>
frontend/src/plugins/vuetify.js 0 → 100644
+ 9
− 0
View file @ 7f5005ed
import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
Vue.use(Vuetify)
const opts = {}
export default new Vuetify(opts)
\ No newline at end of file
frontend/tsconfig.json 0 → 100644
+ 21
− 0
View file @ 7f5005ed
{
"compilerOptions": {
"target":"esnext",
"module":"esnext",
"moduleResolution": "node",
"esModuleInterop": true,
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"allowJs": true,
"noEmit": true,
"baseUrl": ".",
"paths": {
"~/*": [
"./*"
],
"@/*": [
"./*"
]
}
}
}
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment