mirror/RainbowRoad
1
0
Fork 0
mirror of https://github.com/Findus23/RainbowRoad.git synced 2024-09-08 03:13:51 +02:00
Code Releases Activity

info page

Browse source
This commit is contained in:
Lukas Winkler 2022-12-11 20:47:19 +01:00
parent 03b5e2fc8b
commit 2d57022b12
Signed by: lukas
GPG key ID: 54DE4D798D244853
12 changed files with 613 additions and 1476 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
commands/stats.ts
View file

@ -4,6 +4,7 @@ import type {Crossing} from "../interfaces";
function runstats() {
const data: Crossing[] = JSON.parse(fs.readFileSync("../data/Wien.json", 'utf8'));
console.log("total", data.length)
const bezirke = data.map(c => c.bezirk!)
const counts: { [key: number]: number } = {};

3
data/Wien.json
View file

@ -939,7 +939,6 @@
"name": "Mariahilfer Straße/Neubaugasse",
"bezirk": 6,
"type": "prideFlag",
"comment": "Sind es zwei separate Zebrastreifen?",
"sources": [
{
"type": "news",
@ -1420,4 +1419,4 @@
"length": 30.3
}
}
]
]

4
index.html
View file

@ -7,11 +7,11 @@
</head>
<body>
<div id="map"></div>
<div id="popup" class="ol-popup">
<div id="popup" class="ol-popup box">
<a href="#" id="popup-closer" class="ol-popup-closer"></a>
<div id="popup-content"></div>
</div>
<div id="overlay"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>

1847
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

2
package.json
View file

@ -15,7 +15,7 @@
"@types/node": "^18.6.3",
"sass": "^1.54.4",
"typescript": "^4.5.4",
"vite": "^3.0.2"
"vite": "^4.0.0"
},
"dependencies": {
"ajv-cli": "^5.0.0",

23
src/domutils.ts
View file

@ -1 +1,24 @@
export const createElement = document.createElement.bind(document)
export function createElementWithContent(tagName: string, innerText: string): HTMLElement {
const el = createElement(tagName)
el.innerText = innerText
return el
}
export function createAElement(innerText: string, href: string): HTMLAnchorElement {
const el: HTMLAnchorElement = createElement("a")
el.innerText = innerText
el.href = href
return el
}
export function dlSet(dt:string,urlText:string,url:string) {
const dl = createElement("dl")
dl.appendChild(createElementWithContent("dt", dt))
const dd = createElement("dd")
dd.appendChild(createAElement(urlText, url))
dl.appendChild(dd)
return dl
}

86
src/info.ts Normal file
View file

@ -0,0 +1,86 @@
import {Control} from "ol/control";
import {Options} from "ol/control/Control";
import {router} from "./router";
import {createElement, createElementWithContent, dlSet} from "./domutils";
const overlay = document.getElementById("overlay")!
export class InfoButton extends Control {
constructor(opt_options: Options) {
const options = opt_options || {};
const button = createElement('a');
button.dataset.navigo = ""
button.href = "/about"
button.innerHTML = 'i';
const element = createElement('div');
element.className = 'info-button ol-unselectable ol-control';
element.appendChild(button);
router.updatePageLinks()
super({
element: element,
target: options.target,
});
// button.addEventListener('click', this.handleRotateNorth.bind(this), false);
}
}
router.on("/about", () => {
showOverlay()
})
export function hideOverlay(): void {
overlay.style.display = "none"
}
export function setOverlay(): void {
overlay.innerHTML = ""
const content = createElement("div")
content.className = "content box"
const h1 = createElementWithContent("h1", "Rainbox Road")
content.appendChild(h1)
const p = createElement("p")
p.innerText = "Eine (noch unvollständige) Sammlung aller Regenbogen-Zebrastreifen in Österreich. " +
"Hinweise über fehlende Einträge können an rainbowroad@lw1.at geschickt werden!"
content.appendChild(p)
content.appendChild(dlSet(
"Source-Code:",
"github.com/Findus23/RainbowRoad",
"https://github.com/Findus23/RainbowRoad"
))
content.appendChild(dlSet(
"Andere Projekte:",
"lw1.at",
"https://lw1.at/de/"
))
content.appendChild(dlSet(
"Impressum:",
"lw1.at/de/impressum/",
"https://lw1.at/de/impressum/"
))
overlay.appendChild(content)
}
export function showOverlay(): void {
setOverlay()
overlay.style.display = "flex"
}
if (import.meta.hot) {
import.meta.hot.accept((newModule) => {
if (newModule) {
newModule.setOverlay()
}
})
}

1
src/main.ts
View file

@ -1,4 +1,5 @@
import "./font/webfont.css"
import "ol/ol.css"
import "./style.scss"
import "./map"

12
src/map.ts
View file

@ -17,6 +17,8 @@ import {loadAllData} from "./loadData";
import "./router"
import {router} from "./router";
import {transformExtent} from "ol/proj";
import {defaults as defaultControls} from 'ol/control';
import {InfoButton} from "./info";
const map = new Map({
// controls: defaultControls().extend([new AreaControl({router: router})]),
@ -26,9 +28,15 @@ const map = new Map({
source: new OSM({url: "https://maps.lw1.at/tiles/1.0.0/osm/GLOBAL_MERCATOR/{z}/{x}/{y}.png"})
}),
],
view: viewFromArea(Wien)
view: viewFromArea(Wien),
controls: defaultControls().extend([new InfoButton({})])
});
const vectorSource = new VectorSource({
attributions: [
'<a href="https://lw1.at/i" target="_blank">Impressum</a>'
]
});
const vectorSource = new VectorSource();
loadAllData(vectorSource)

3
src/popups.ts
View file

@ -8,6 +8,7 @@ import {router} from "./router";
import VectorSource from "ol/source/Vector";
import {FeatureProperties} from "./features";
import {Point} from "ol/geom";
import {hideOverlay} from "./info";
const container = document.getElementById('popup')!;
const content = document.getElementById('popup-content')!;
@ -41,6 +42,7 @@ export function initPopups(map: Map, vectorSource: VectorSource) {
}
});
router.on("/flag/:id", (match) => {
hideOverlay()
const id = match?.data?.id
if (!id) {
return
@ -81,6 +83,7 @@ export function initPopups(map: Map, vectorSource: VectorSource) {
})
router.on("/", () => {
overlay.setPosition(undefined);
hideOverlay()
closer.blur();
})
router.resolve()

1
src/router.ts
View file

@ -12,6 +12,7 @@ class CustomNavigo extends Navigo {
export const router = new CustomNavigo("/")
// router.on("/Wien", () => {
// map.setView(viewFromArea(Wien))
//

106
src/style.scss
View file

@ -1,5 +1,3 @@
@import "../node_modules/ol/ol.css";
html, body {
margin: 0;
height: 100%;
@ -19,8 +17,8 @@ html, body {
.ol-popup {
#popup-content > * {
padding-left: 15px;
padding-right: 15px;
padding-left: 1rem;
padding-right: 1rem;
}
a {
@ -50,15 +48,11 @@ html, body {
.ol-popup {
position: absolute;
background-color: white;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
//padding: 15px;
padding: 15px 0;
border-radius: 10px;
border: 1px solid #cccccc;
bottom: 12px;
left: -50px;
min-width: 280px;
padding-top: 1rem;
padding-bottom: 1rem;
//min-width: 280px;
}
.ol-popup:after, .ol-popup:before {
@ -102,19 +96,85 @@ p {
margin-bottom: .5rem;
}
#city-selector {
right: 0.5em;
top: 0.5em;
.ol-control.info-button {
bottom: .5rem;
left: .5rem;
.textbox {
position: absolute;
right: 1em;
top: 1em;
display: flex;
flex-direction: column;
margin: .5rem;
a {
display: block;
a {
display: block;
margin: 1px;
padding: 0;
color: var(--ol-subtle-foreground-color);
font-weight: bold;
text-decoration: none;
font-size: inherit;
text-align: center;
height: 1.375em;
width: 1.375em;
//line-height: .4em;
background-color: var(--ol-background-color);
border: none;
border-radius: 2px;
&:hover, &:focus {
text-decoration: none;
outline: 1px solid var(--ol-subtle-foreground-color);
color: var(--ol-foreground-color);
}
}
}
.ol-touch .ol-control.info-button a {
font-size: 1.5em;
}
#overlay {
pointer-events: none;
display: flex;
justify-content: center;
align-items: center;
top: 0;
bottom: 0;
width: 100%;
position: absolute;
.content {
padding: 1rem;
max-width: 600px;
pointer-events: all;
z-index: 100;
//border-width: 3px;
//border-style: solid;
//border-color: #e40303;
h1 {
margin-top: 0;
}
a{
color: green;
text-decoration: none;
}
}
}
h1 {
font-weight: bold;
text-align: center;
font-family: Gilbert-Color, sans-serif;
}
dl {
font-weight: bold;
}
.box{
background-color: white;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
border-radius: 1rem;
border: 1px solid #cccccc;
}