First Component

6 years ago · b82dc913a6
parent 73780d9530
commit b82dc913a6
9 changed files with 327 additions and 23 deletions
--- a/app/static/bundle.js
+++ b/app/static/bundle.js
--- a/app/static/style.css
+++ b/app/static/style.css
@ -1,3 +1,29 @@
+html, body {
+    margin: 0;
+    padding: 0;
+    font-family: sans-serif;
+}
+
+header, footer {
+    background-color: aqua;
+    padding: 14px 10px;
+}
+
+main {
+    background-color: red;
+    width: 80%;
+    margin: 0 auto;
+}
+
+
 #map {
    height: 60vh;
 }
+
+.flex {
+    display: flex;
+}
+
+.flex > *[main] {
+    flex: 1;
+}
--- a/app/templates/base.html
+++ b/app/templates/base.html
@ -12,21 +12,28 @@
 </head>

 <body>
-    <header>
-        <a href="{{ url_for('index') }}">Home</a>
-        {% if g.user %}
-        | <span>Hello {{ g.user.name }}</span>
-        | <a href="{{ url_for('auth.logout') }}">Logout</a>
-        {% else %}
-        | <a href="{{ url_for('auth.login') }}">Sign in</a>
-        | <a href="{{ url_for('auth.register') }}">Register</a>
-        {% endif %}
+    <header class="flex">
+        <div main>
+            <a href="{{ url_for('index') }}"><img main alt="Wundertile logo"></a>
+        </div>
+        <div>
+            {% if g.user %}
+            <span>Hello {{ g.user.name }}</span>
+            | <a href="{{ url_for('auth.logout') }}">Logout</a>
+            {% else %}
+            <a href="{{ url_for('auth.login') }}">Sign in</a>
+            | <a href="{{ url_for('auth.register') }}">Register</a>
+            {% endif %}
+        </div>
    </header>

+    <main>
+        {% block body %}{% endblock %}
+    </main>

-    <hr>
-
-    {% block body %}{% endblock %}
+    <footer>
+        Made by Alfred Melch
+    </footer>

    <hr>
    <h2>Messages</h2>
--- a/app/templates/index.html
+++ b/app/templates/index.html
@ -2,10 +2,18 @@


 {% block body %}
-<h1>Wundertile - This is home page</h1>
+<h1>Wundertile - A collaborative TileLayer</h1>
+
+<p>Hello Friend, this Website Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti adipisci est quo libero odit modi iste corporis debitis tenetur sunt similique alias consequuntur, cupiditate suscipit impedit maiores, recusandae fugiat. Obcaecati?</p>

-<a href="{{ url_for('tiles.upload') }}">Upload</a><br>

 <div id="map"></div>
+
+<h2>Current tile</h2>
+<div id="currentTile"></div>
+
+<h2>About</h2>
+<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto sed vero, doloribus, dolor laborum cumque ab quo odio dolorem voluptas asperiores debitis reiciendis? Sint aut, iusto sapiente eaque ipsa dolorum.</p>
+<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Error veniam consectetur accusamus distinctio fugit, omnis voluptas. Iure voluptatum omnis unde quas voluptates suscipit neque libero a recusandae quisquam, dolorum voluptate?</p>
 <script src="{{ url_for('static', filename='bundle.js') }}"></script>
 {% endblock %}
--- a/web/index.js
+++ b/web/index.js
@ -1,3 +1,4 @@
-import './map.js'
+import './src/map.js'

 console.log('Hello World')
+console.log('lala')
--- a/web/package.json
+++ b/web/package.json
@ -5,6 +5,7 @@
  "main": "index.js",
  "scripts": {
    "build": "webpack --mode production",
+    "dev": "webpack --mode development --watch",
    "lint": "eslint '**/*.js'",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
--- a/web/src/currentTile.js
+++ b/web/src/currentTile.js
@ -0,0 +1,12 @@
+import { coordsToPath } from './util.js'
+
+const root = document.getElementById('currentTile')
+
+export const render = (coords) => {
+  root.innerHTML = `
+  <div class="flex">
+    <img src="/tiles${coordsToPath(coords)}">
+  </div>
+    Hello World! ${JSON.stringify(coords)}
+  `
+}
--- a/web/src/map.js
+++ b/web/src/map.js
@ -1,6 +1,8 @@
 import { map as LMap, tileLayer } from 'leaflet'
 import 'leaflet/dist/leaflet.css'

+import { render } from './currentTile'
+
 export const map = LMap('map')
 map.setView([0, 0], 1)

@ -25,4 +27,7 @@ const getTileCoords = (lat, lon, zoom) => {
 }

 // demo: how to get tile coords on click
-map.on('click', (e) => { console.log(getTileCoords(e.latlng.lat, e.latlng.lng, map.getZoom())) })
+map.on('click', (e) => {
+  let coords = getTileCoords(e.latlng.lat, e.latlng.lng, map.getZoom())
+  render(coords)
+})
--- a/web/src/util.js
+++ b/web/src/util.js
@ -0,0 +1 @@
+export const coordsToPath = coords => `/${coords.z}/${coords.x}/${coords.y}`
				`@ -0,0 +1 @@`
				export const coordsToPath = coords => `/${coords.z}/${coords.x}/${coords.y}`