Skip to content

Commit

Permalink
Merge branch 'main' into feature/routing
Browse files Browse the repository at this point in the history
  • Loading branch information
datKaMa committed Jan 27, 2025
2 parents 8b1661a + 709dd8c commit 0a23b0c
Show file tree
Hide file tree
Showing 25 changed files with 322 additions and 40 deletions.
12 changes: 12 additions & 0 deletions .github/pull_request_template.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,16 @@ _Summarization of the changes in a short and concise sentence._

## Instructions for local reproduction and review

## Pull Request Checklist (for Reviewee)

- [ ] Changelogs are maintained
- [ ] Functionality has been tested in Firefox, Chrome, Safari
- [ ] Functionality has been tested on a smartphone
- [ ] Functionality has been tested with 200% screen zoom
- [ ] Screenreader functionality has been manually tested with NVDA

UI has been tested in the following tools regarding accessibility (only regarding functionality affected in this PR)
- [ ] Chrome Lighthouse
- [ ] Firefox Accessibility

## Relevant tickets, issues, et cetera
14 changes: 7 additions & 7 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion packages/clients/afm/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
"API.md"
],
"scripts": {
"postversion": "npm run build",
"prepublishOnly": "npm run build",
"build": "rimraf dist && vite build && cd ../../.. && npm run docs:afm",
"dev": "vite --host"
},
Expand Down
2 changes: 1 addition & 1 deletion packages/clients/dish/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
"CHANGELOG.md"
],
"scripts": {
"postversion": "npm run build",
"prepublishOnly": "npm run build",
"build": "rimraf dist && vite build && copyfiles -f src/html/**/* dist",
"dev": "vite --host"
},
Expand Down
2 changes: 1 addition & 1 deletion packages/clients/generic/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
"API.md"
],
"scripts": {
"postversion": "npm run build",
"prepublishOnly": "npm run build",
"build": "rimraf dist && vite build && cd ../../.. && npm run docs:generic"
},
"devDependencies": {
Expand Down
57 changes: 56 additions & 1 deletion packages/clients/meldemichel/API.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ The method expects a single object with the following parameters.
| - | - | - |
| containerId | string | ID of the container the map is supposed to render itself to. |
| mode | enum["REPORT", "SINGLE", "COMPLETE"] | See chapters below for an overview of the modes. |
| 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. |
| afmUrl | string? | `COMPLETE` mode only. The URL used here is the URL of the AfM service to open to create a new damage report. |
| 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. |
| 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. |
Expand Down Expand Up @@ -77,6 +78,8 @@ A document rendering the map client could e.g. look like this:
const meldemichelMapInstance = await meldemichelMapClient.createMap({
containerId: 'meldemichel-map-client',
mode: 'REPORT', // or 'SINGLE',
// This layer only works in 'SINGLE' mode and should not be activated in the others
stadtwaldActive: true, // or `false`; if not set, previous state is kept; off by default
// For 'SINGLE' mode where a singular coordinate is inspected/worked on
configOverride: {
pins: {
Expand Down Expand Up @@ -104,6 +107,12 @@ A document rendering the map client could e.g. look like this:
// NOTE: vendor_maps_distance_to and -_plz are not read
})
/* To change the stadtwald layer's visibility in 'SINGLE' mode, use this;
* this key can be used standalone or within the call seen above */
meldemichelMapInstance.$store.dispatch('meldemichel/setMapState', {
stadtwaldActive: true, // or false
})
// to retrieve map state updates, use this snippet:
const unwatch = mapInstance.$store.watch(
(_, getters) => getters["meldemichel/mapState"],
Expand Down Expand Up @@ -136,8 +145,54 @@ A document rendering the map client could e.g. look like this:
</html>
```

## Rendering COMPLETE mode
## Rendering COMPLETE mode (full page)

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

Please see the table in chapter `Basic usage` about configuration options.

## Rendering COMPLETE mode (embedded element)

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.

The following script tag can then be used to render the productive services of the Meldemichel map client.

```html
<script type="module">
// adjust path to where the client is
import meldemichelMapClient from '../dist/client-meldemichel.js'
meldemichelMapClient.createMap({
containerId: 'meldemichel-map-client', // the id you used
mode: 'COMPLETE',
afmUrl: `https://afm.hamburg.de/intelliform/forms/mml_melde_michel/standard/mml_melde_michel/index`,
reportServiceId: '6059',
configOverride: {
// adjust path to where the client is
stylePath: '../dist/style.css'
}
})
</script>
```

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:

```css
#meldemichel-map-client-wrapper {
/* "position: relative;" is the minimum required styling */
position: relative;
height: 400px;
width: 100%;
}
```

To also serve users with JS disabled some content, this fragment is common:

```html
<div id="meldemichel-map-client">
<!-- Optional, if your page does not have its own <noscript> information -->
<noscript>Please use a browser with active JavaScript to use the map client.</noscript>
</div>
```

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).
3 changes: 2 additions & 1 deletion packages/clients/meldemichel/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
# CHANGELOG

## unpublished
## 1.2.1

- Feature: Add `stadtwaldActive` as startup parameter for `createMap` object and `meldemichel/setMapState` action. Refer to the API.md regarding further details.
- Fix: Import type `MpApiParameters` from correct position.
- Chore: Change value of `pins.movable` configuration to `'drag'` as using a boolean has been deprecated in a future release.
- Chore: Update `@polar`-dependencies to the latest versions.
Expand Down
125 changes: 125 additions & 0 deletions packages/clients/meldemichel/example/complete_embedded.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,125 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<meta
http-equiv="Cache-Control"
content="no-cache, no-store, must-revalidate, max-age=0"
/>
<title>MML INTEGRATION TEST</title>
<style>
/* div with this id is created on `createMap` call to host shadow DOM */
#polarstern-wrapper {
position: relative;
height: 400px;
width: 100%;
}

/* the following styling is purely for surrounding example content */
html, body {
margin: 0;
padding: 0;
font-family: sans-serif;
}

header {
padding: 0 2em;
}

#hh-bug {
height: 35px;
width: 400px;
margin-left: -280px;
transform: skew(-35deg);
background: #e10019;
border-bottom-right-radius: 6px;
margin-bottom: 1em;
}

main {
display: flex;
flex-direction: column;
gap: 2em;
}

.blue-content {
color: white;
background: #1a4573;
}

.padded-x {
padding-right: 10vw;
padding-left: 10vw;
}

.padded-y {
padding-top: 4em;
padding-bottom: 4em;
}

h2 {
font-size: 38pt;
}

p {
font-size: 32px;
}

footer {
color: white;
background: #003063;
padding: 1em 5vw;
}
</style>
</head>
<body>
<nav></nav>
<header>
<h1>Meldemichel-Einbindesimulation</h1>
</header>
<div id="hh-bug"></div>
<main>
<section class="blue-content padded-x padded-y">
<h2>Blindtext</h2>
<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>
</section>
<section>
<h2 class="padded-x">Aktuell gemeldete Schäden</h2>
<!-- ID can be anything as long as it's used in .createMap, too -->
<div id="polarstern"></div>
</section>
<section class="padded-x padded-y">
<h2>Blindtext II.</h2>
<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>
</section>
</main>
<footer>At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.</footer>
<script type="module">
import meldemichelMapClient from '../dist/client-meldemichel.js'

// toggle to switch between stage/prod layer and report system
const stage = true

meldemichelMapClient.createMap({
containerId: 'polarstern',
mode: 'COMPLETE',
afmUrl: `https://${
stage ? 'stage.' : ''
}afm.hamburg.de/intelliform/forms/mml_melde_michel/standard/mml_melde_michel/index`,
reportServiceId: stage ? '6061' : '6059',
configOverride: {
stylePath: '../dist/style.css',
attributions: {
staticAttributions: [
`<a href="https://github.com/Dataport/polar/blob/main/LEGALNOTICE.md">Legal Notice (Impressum)</a>`
]
}
}
})
</script>
</body>
</html>
4 changes: 4 additions & 0 deletions packages/clients/meldemichel/example/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,10 @@ <h1>Meldemichel Example Hub</h1>
<a href="./complete.html">"COMPLETE" (Übersichtskarte)</a>
</dt>
<dd>Meldemichel Map Client rendered fullpage in mode COMPLETE.</dd>
<dt>
<a href="./complete_embedded.html">"COMPLETE_EMBEDDED" (Übersichtskarte eingebettet)</a>
</dt>
<dd>Meldemichel Map Client rendered as page element in mode COMPLETE.</dd>
<dt>
<a href="../dist/index.html"
>"COMPLETE" (Übersichtskarte) – Production Mode Test</a
Expand Down
24 changes: 22 additions & 2 deletions packages/clients/meldemichel/example/single.html
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,15 @@
Simulate SPA-style rerendering
</button>
</fieldset>

<fieldset>
<legend>stadtwaldActive:</legend>
<button id="stadtwaldOn">
Enable stadtwald layer
</button>
<button id="stadtwaldOff">
Disable stadtwald layer
</button>
</fieldset>
<h2>Subscribed data</h2>
<ul id="subscribed-data-list"></ul>
</div>
Expand All @@ -62,12 +70,14 @@ <h2>Subscribed data</h2>
import meldemichelMapClient from '../dist/client-meldemichel.js'
import { makeSimulateRecreate } from './simulateRecreate.js'

let mapInstance

const setup = async () => {
const isMovable = document.querySelector('input[name="move"]:checked').value === 'movable'
const fill = isMovable ? '#0392cf' : '#ff0019'
const movable = isMovable ? 'drag' : 'none'

const mapInstance = await meldemichelMapClient.createMap({
mapInstance = await meldemichelMapClient.createMap({
containerId: 'polarstern',
mode: 'SINGLE',
configOverride: {
Expand Down Expand Up @@ -105,6 +115,16 @@ <h2>Subscribed data</h2>
}

document.getElementById('rerender').onclick = await makeSimulateRecreate(setup)

document.getElementById('stadtwaldOn').onclick = () => {
mapInstance.$store.dispatch('meldemichel/setMapState', {
stadtwaldActive: true,
})}

document.getElementById('stadtwaldOff').onclick = () => {
mapInstance.$store.dispatch('meldemichel/setMapState', {
stadtwaldActive: false,
})}
</script>
</body>
</html>
Loading

0 comments on commit 0a23b0c

Please sign in to comment.