melch/wundertile
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

First Component

Browse Source
This commit is contained in:
Alfred Melch 2019-04-28 20:03:32 +02:00
parent f75110450f
commit fcae9e9282
9 changed files with 327 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

255
app/static/bundle.js
View File

File diff suppressed because one or more lines are too long

28
app/static/style.css
View File

@ -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 { #map {
height: 60vh; height: 60vh;
} }
.flex {
display: flex;
}
.flex > *[main] {
flex: 1;
}

31
app/templates/base.html
View File

@ -12,21 +12,28 @@
</head> </head>
<body> <body>
<header> <header class="flex">
<a href="{{ url_for('index') }}">Home</a> <div main>
{% if g.user %} <a href="{{ url_for('index') }}"><img main alt="Wundertile logo"></a>
| <span>Hello {{ g.user.name }}</span> </div>
| <a href="{{ url_for('auth.logout') }}">Logout</a> <div>
{% else %} {% if g.user %}
| <a href="{{ url_for('auth.login') }}">Sign in</a> <span>Hello {{ g.user.name }}</span>
| <a href="{{ url_for('auth.register') }}">Register</a> | <a href="{{ url_for('auth.logout') }}">Logout</a>
{% endif %} {% else %}
<a href="{{ url_for('auth.login') }}">Sign in</a>
| <a href="{{ url_for('auth.register') }}">Register</a>
{% endif %}
</div>
</header> </header>
<main>
{% block body %}{% endblock %}
</main>
<hr> <footer>
Made by Alfred Melch
{% block body %}{% endblock %} </footer>
<hr> <hr>
<h2>Messages</h2> <h2>Messages</h2>

12
app/templates/index.html
View File

@ -2,10 +2,18 @@
{% block body %} {% 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> <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> <script src="{{ url_for('static', filename='bundle.js') }}"></script>
{% endblock %} {% endblock %}

3
web/index.js
View File

@ -1,3 +1,4 @@
import './map.js' import './src/map.js'
console.log('Hello World') console.log('Hello World')
console.log('lala')

1
web/package.json
View File

@ -5,6 +5,7 @@
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {
"build": "webpack --mode production", "build": "webpack --mode production",
"dev": "webpack --mode development --watch",
"lint": "eslint '**/*.js'", "lint": "eslint '**/*.js'",
"test": "echo \"Error: no test specified\" && exit 1" "test": "echo \"Error: no test specified\" && exit 1"
}, },

12
web/src/currentTile.js Normal file
View File

@ -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)}
`
}

7
web/map.js → web/src/map.js
View File

@ -1,6 +1,8 @@
import { map as LMap, tileLayer } from 'leaflet' import { map as LMap, tileLayer } from 'leaflet'
import 'leaflet/dist/leaflet.css' import 'leaflet/dist/leaflet.css'
import { render } from './currentTile'
export const map = LMap('map') export const map = LMap('map')
map.setView([0, 0], 1) map.setView([0, 0], 1)
@ -25,4 +27,7 @@ const getTileCoords = (lat, lon, zoom) => {
} }
// demo: how to get tile coords on click // 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)
})

1
web/src/util.js Normal file
View File

@ -0,0 +1 @@
export const coordsToPath = coords => `/${coords.z}/${coords.x}/${coords.y}`