Skip to content

Commit 0a23b0c

Browse files
datKaMadatKaMa
committed
Merge branch 'main' into feature/routing
2 parents 8b1661a + 709dd8c commit 0a23b0c

25 files changed

+322
-40
lines changed

‎.github/pull_request_template.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,16 @@ _Summarization of the changes in a short and concise sentence._
44

55
## Instructions for local reproduction and review
66

7+
## Pull Request Checklist (for Reviewee)
8+
9+
- [ ] Changelogs are maintained
10+
- [ ] Functionality has been tested in Firefox, Chrome, Safari
11+
- [ ] Functionality has been tested on a smartphone
12+
- [ ] Functionality has been tested with 200% screen zoom
13+
- [ ] Screenreader functionality has been manually tested with NVDA
14+
15+
UI has been tested in the following tools regarding accessibility (only regarding functionality affected in this PR)
16+
- [ ] Chrome Lighthouse
17+
- [ ] Firefox Accessibility
18+
719
## Relevant tickets, issues, et cetera

‎package-lock.json

Lines changed: 7 additions & 7 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/clients/afm/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
"API.md"
2222
],
2323
"scripts": {
24-
"postversion": "npm run build",
24+
"prepublishOnly": "npm run build",
2525
"build": "rimraf dist && vite build && cd ../../.. && npm run docs:afm",
2626
"dev": "vite --host"
2727
},

‎packages/clients/dish/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
"CHANGELOG.md"
1818
],
1919
"scripts": {
20-
"postversion": "npm run build",
20+
"prepublishOnly": "npm run build",
2121
"build": "rimraf dist && vite build && copyfiles -f src/html/**/* dist",
2222
"dev": "vite --host"
2323
},

‎packages/clients/generic/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
"API.md"
2020
],
2121
"scripts": {
22-
"postversion": "npm run build",
22+
"prepublishOnly": "npm run build",
2323
"build": "rimraf dist && vite build && cd ../../.. && npm run docs:generic"
2424
},
2525
"devDependencies": {

‎packages/clients/meldemichel/API.md

Lines changed: 56 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ The method expects a single object with the following parameters.
1616
| - | - | - |
1717
| containerId | string | ID of the container the map is supposed to render itself to. |
1818
| mode | enum["REPORT", "SINGLE", "COMPLETE"] | See chapters below for an overview of the modes. |
19+
| stadtwaldActive | boolean? | This layer only works in 'SINGLE' mode and should not be activated in the others. If not set, any existing previous state is kept; off by default. |
1920
| afmUrl | string? | `COMPLETE` mode only. The URL used here is the URL of the AfM service to open to create a new damage report. |
2021
| reportServiceId | string? | `COMPLETE` mode only. ID of the report layer to display. Both the Filter and the Feature List will work with this layer. The client will also provide tooltips and cluster the features. |
2122
| configOverride | object? | This can be used to override the configuration of any installed plugin; see full documentation. It is also used to set initial pins in `SINGLE` mode. See documentation of `SINGLE` further below. |
@@ -77,6 +78,8 @@ A document rendering the map client could e.g. look like this:
7778
const meldemichelMapInstance = await meldemichelMapClient.createMap({
7879
containerId: 'meldemichel-map-client',
7980
mode: 'REPORT', // or 'SINGLE',
81+
// This layer only works in 'SINGLE' mode and should not be activated in the others
82+
stadtwaldActive: true, // or `false`; if not set, previous state is kept; off by default
8083
// For 'SINGLE' mode where a singular coordinate is inspected/worked on
8184
configOverride: {
8285
pins: {
@@ -104,6 +107,12 @@ A document rendering the map client could e.g. look like this:
104107
// NOTE: vendor_maps_distance_to and -_plz are not read
105108
})
106109
110+
/* To change the stadtwald layer's visibility in 'SINGLE' mode, use this;
111+
* this key can be used standalone or within the call seen above */
112+
meldemichelMapInstance.$store.dispatch('meldemichel/setMapState', {
113+
stadtwaldActive: true, // or false
114+
})
115+
107116
// to retrieve map state updates, use this snippet:
108117
const unwatch = mapInstance.$store.watch(
109118
(_, getters) => getters["meldemichel/mapState"],
@@ -136,8 +145,54 @@ A document rendering the map client could e.g. look like this:
136145
</html>
137146
```
138147

139-
## Rendering COMPLETE mode
148+
## Rendering COMPLETE mode (full page)
140149

141150
The `index.html` included in the package's `dist` folder has been prepared for this mode and must merely be hosted.
142151

143152
Please see the table in chapter `Basic usage` about configuration options.
153+
154+
## Rendering COMPLETE mode (embedded element)
155+
156+
To embed the COMPLETE mode map on any page, provide a div with an id like `meldemichel-map-client`; you may choose any id you like.
157+
158+
The following script tag can then be used to render the productive services of the Meldemichel map client.
159+
160+
```html
161+
<script type="module">
162+
// adjust path to where the client is
163+
import meldemichelMapClient from '../dist/client-meldemichel.js'
164+
165+
meldemichelMapClient.createMap({
166+
containerId: 'meldemichel-map-client', // the id you used
167+
mode: 'COMPLETE',
168+
afmUrl: `https://afm.hamburg.de/intelliform/forms/mml_melde_michel/standard/mml_melde_michel/index`,
169+
reportServiceId: '6059',
170+
configOverride: {
171+
// adjust path to where the client is
172+
stylePath: '../dist/style.css'
173+
}
174+
})
175+
</script>
176+
```
177+
178+
POLAR will rebuild the given div to contain a ShadowDOM that hosts the map. The outer div will change to have the id `meldemichel-map-client-wrapper` (resp. `${yourId}-wrapper`) and can be used to style the map's height and width with, for example:
179+
180+
```css
181+
#meldemichel-map-client-wrapper {
182+
/* "position: relative;" is the minimum required styling */
183+
position: relative;
184+
height: 400px;
185+
width: 100%;
186+
}
187+
```
188+
189+
To also serve users with JS disabled some content, this fragment is common:
190+
191+
```html
192+
<div id="meldemichel-map-client">
193+
<!-- Optional, if your page does not have its own <noscript> information -->
194+
<noscript>Please use a browser with active JavaScript to use the map client.</noscript>
195+
</div>
196+
```
197+
198+
For a complete example, you may also check [the running embedded scenario](https://dataport.github.io/polar/docs/meldemichel/example/complete_embedded.html) or its [source file](https://github.com/Dataport/polar/blob/main/packages/clients/meldemichel/example/complete_embedded.html).

‎packages/clients/meldemichel/CHANGELOG.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
# CHANGELOG
22

3-
## unpublished
3+
## 1.2.1
44

5+
- Feature: Add `stadtwaldActive` as startup parameter for `createMap` object and `meldemichel/setMapState` action. Refer to the API.md regarding further details.
56
- Fix: Import type `MpApiParameters` from correct position.
67
- Chore: Change value of `pins.movable` configuration to `'drag'` as using a boolean has been deprecated in a future release.
78
- Chore: Update `@polar`-dependencies to the latest versions.

‎packages/clients/meldemichel/example/complete_embedded.html

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5+
<meta
6+
name="viewport"
7+
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
8+
/>
9+
<meta
10+
http-equiv="Cache-Control"
11+
content="no-cache, no-store, must-revalidate, max-age=0"
12+
/>
13+
<title>MML INTEGRATION TEST</title>
14+
<style>
15+
/* div with this id is created on `createMap` call to host shadow DOM */
16+
#polarstern-wrapper {
17+
position: relative;
18+
height: 400px;
19+
width: 100%;
20+
}
21+
22+
/* the following styling is purely for surrounding example content */
23+
html, body {
24+
margin: 0;
25+
padding: 0;
26+
font-family: sans-serif;
27+
}
28+
29+
header {
30+
padding: 0 2em;
31+
}
32+
33+
#hh-bug {
34+
height: 35px;
35+
width: 400px;
36+
margin-left: -280px;
37+
transform: skew(-35deg);
38+
background: #e10019;
39+
border-bottom-right-radius: 6px;
40+
margin-bottom: 1em;
41+
}
42+
43+
main {
44+
display: flex;
45+
flex-direction: column;
46+
gap: 2em;
47+
}
48+
49+
.blue-content {
50+
color: white;
51+
background: #1a4573;
52+
}
53+
54+
.padded-x {
55+
padding-right: 10vw;
56+
padding-left: 10vw;
57+
}
58+
59+
.padded-y {
60+
padding-top: 4em;
61+
padding-bottom: 4em;
62+
}
63+
64+
h2 {
65+
font-size: 38pt;
66+
}
67+
68+
p {
69+
font-size: 32px;
70+
}
71+
72+
footer {
73+
color: white;
74+
background: #003063;
75+
padding: 1em 5vw;
76+
}
77+
</style>
78+
</head>
79+
<body>
80+
<nav></nav>
81+
<header>
82+
<h1>Meldemichel-Einbindesimulation</h1>
83+
</header>
84+
<div id="hh-bug"></div>
85+
<main>
86+
<section class="blue-content padded-x padded-y">
87+
<h2>Blindtext</h2>
88+
<p>Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular.</p>
89+
</section>
90+
<section>
91+
<h2 class="padded-x">Aktuell gemeldete Schäden</h2>
92+
<!-- ID can be anything as long as it's used in .createMap, too -->
93+
<div id="polarstern"></div>
94+
</section>
95+
<section class="padded-x padded-y">
96+
<h2>Blindtext II.</h2>
97+
<p>Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores.</p>
98+
</section>
99+
</main>
100+
<footer>At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.</footer>
101+
<script type="module">
102+
import meldemichelMapClient from '../dist/client-meldemichel.js'
103+
104+
// toggle to switch between stage/prod layer and report system
105+
const stage = true
106+
107+
meldemichelMapClient.createMap({
108+
containerId: 'polarstern',
109+
mode: 'COMPLETE',
110+
afmUrl: `https://${
111+
stage ? 'stage.' : ''
112+
}afm.hamburg.de/intelliform/forms/mml_melde_michel/standard/mml_melde_michel/index`,
113+
reportServiceId: stage ? '6061' : '6059',
114+
configOverride: {
115+
stylePath: '../dist/style.css',
116+
attributions: {
117+
staticAttributions: [
118+
`<a href="https://github.com/Dataport/polar/blob/main/LEGALNOTICE.md">Legal Notice (Impressum)</a>`
119+
]
120+
}
121+
}
122+
})
123+
</script>
124+
</body>
125+
</html>

‎packages/clients/meldemichel/example/index.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,10 @@ <h1>Meldemichel Example Hub</h1>
3838
<a href="./complete.html">"COMPLETE" (Übersichtskarte)</a>
3939
</dt>
4040
<dd>Meldemichel Map Client rendered fullpage in mode COMPLETE.</dd>
41+
<dt>
42+
<a href="./complete_embedded.html">"COMPLETE_EMBEDDED" (Übersichtskarte eingebettet)</a>
43+
</dt>
44+
<dd>Meldemichel Map Client rendered as page element in mode COMPLETE.</dd>
4145
<dt>
4246
<a href="../dist/index.html"
4347
>"COMPLETE" (Übersichtskarte) – Production Mode Test</a

‎packages/clients/meldemichel/example/single.html

Lines changed: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,15 @@
5252
Simulate SPA-style rerendering
5353
</button>
5454
</fieldset>
55-
55+
<fieldset>
56+
<legend>stadtwaldActive:</legend>
57+
<button id="stadtwaldOn">
58+
Enable stadtwald layer
59+
</button>
60+
<button id="stadtwaldOff">
61+
Disable stadtwald layer
62+
</button>
63+
</fieldset>
5664
<h2>Subscribed data</h2>
5765
<ul id="subscribed-data-list"></ul>
5866
</div>
@@ -62,12 +70,14 @@ <h2>Subscribed data</h2>
6270
import meldemichelMapClient from '../dist/client-meldemichel.js'
6371
import { makeSimulateRecreate } from './simulateRecreate.js'
6472

73+
let mapInstance
74+
6575
const setup = async () => {
6676
const isMovable = document.querySelector('input[name="move"]:checked').value === 'movable'
6777
const fill = isMovable ? '#0392cf' : '#ff0019'
6878
const movable = isMovable ? 'drag' : 'none'
6979

70-
const mapInstance = await meldemichelMapClient.createMap({
80+
mapInstance = await meldemichelMapClient.createMap({
7181
containerId: 'polarstern',
7282
mode: 'SINGLE',
7383
configOverride: {
@@ -105,6 +115,16 @@ <h2>Subscribed data</h2>
105115
}
106116

107117
document.getElementById('rerender').onclick = await makeSimulateRecreate(setup)
118+
119+
document.getElementById('stadtwaldOn').onclick = () => {
120+
mapInstance.$store.dispatch('meldemichel/setMapState', {
121+
stadtwaldActive: true,
122+
})}
123+
124+
document.getElementById('stadtwaldOff').onclick = () => {
125+
mapInstance.$store.dispatch('meldemichel/setMapState', {
126+
stadtwaldActive: false,
127+
})}
108128
</script>
109129
</body>
110130
</html>

0 commit comments

Comments
 (0)