initial frontend setup

e3580047 · Peter Morstein · 488fbc65 · e3580047 · e3580047 · e3580047
Commit e3580047 authored 3 years ago by Peter Morstein
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
+/.parcel-cache/
+/dist/
+/node_modules/
+/.cache/
\ No newline at end of file
--- a/frontend/App.vue
+++ b/frontend/App.vue
+<template>
+  <div ref="weathermap"
+       style="width: 100%; height: 100%">
+  </div>
+</template>
+<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 'ol/ol.css';
+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
+          })
+      });
+  }
+});
+</script>
--- a/frontend/assets/all_data.json
+++ b/frontend/assets/all_data.json
--- a/frontend/index.html
+++ b/frontend/index.html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <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>
+    <script src="./index.js"></script>
+  </body>
+</html>
--- a/frontend/index.js
+++ b/frontend/index.js
+import Vue from 'vue';
+import App from './App.vue';
+new Vue({ render: createElement => createElement(App) }).$mount('#app');
\ No newline at end of file
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
+{
+  "name": "frontend",
+  "version": "1.0.0",
+  "description": "Temperature in Germany",
+  "scripts": {
+    "start": "parcel serve index.html",
+    "build": "parcel build --public-url . index.html"
+  },
+  "dependencies": {
+    "ol": "^6.6.1",
+    "vue": "^2.6.14",
+    "vue-hot-reload-api": "^2.3.4"
+  },
+  "devDependencies": {
+    "@vue/component-compiler-utils": "^3.2.2",
+    "parcel": "^2.0.0-rc.0",
+    "parcel-bundler": "^1.12.5",
+    "typescript": "^4.4.3",
+    "vue-template-compiler": "^2.6.14"
+  },
+  "browserslist": "defaults"
+}
--- a/frontend/readme.md
+++ b/frontend/readme.md
+## OpenLayers + Parcel + Typescript
+# to start the development mode type 
+    npm start
+# To generate a build ready for production:
+    npm run build
+    Then deploy the contents of the `dist` directory to your server.
--- a/frontend/src/Map.js
+++ b/frontend/src/Map.js
+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
+  })
+});