Skip to content

Commit a6b18ab

Browse files
FabianWilmsFabianWilms
committed
✨ initial setup of checklist-components with placeholder content
1 parent 2a2e3ac commit a6b18ab

13 files changed

+304
-13
lines changed

‎.github/README.md‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,20 +29,30 @@
2929
[![Made with love by it@M][made-with-love-shield]][itm-opensource]
3030
[![GitHub license][license-shield]][license]
3131

32-
The repository contains components for the Digital Citizen Service of the City of Munich. It currently includes the personalization service. In the future, the repository will be expanded to include web components for the Digital Citizen Service.
32+
The repository contains components for the Digital Citizen Service of the City of Munich. It currently includes the personalization service and it's corresponding webcomponents.
33+
34+
In the future, the repository will be expanded to include the other artifacts which form the Digital Citizen Service.
3335

3436
## Build with
37+
3538
The project is built with technologies we use in our projects ([reference architecture][refarch-documentation]):
3639

3740
- [Spring][spring-documentation]
3841
- [Vue.js][vuejs-documentation]
3942

4043
## Getting Started
4144

45+
### personalization-service
46+
4247
1. Build it with `mvn clean install`
4348
2. Run the stack using `docker-compose` in the stack folder
4449
3. Run the PersonalizationServiceApplication
4550

51+
### personalization-webcomponents
52+
53+
1. Install dependencies with `npm i`
54+
2. Run local dev server with `npm run dev`
55+
4656
## Contributing
4757

4858
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.

‎personalization-webcomponent/index-checklist-detail.html‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta
6+
name="robots"
7+
content="noindex"
8+
/>
9+
<link
10+
href="/favicon.ico"
11+
rel="icon"
12+
/>
13+
<meta
14+
content="width=device-width, initial-scale=1.0"
15+
name="viewport"
16+
/>
17+
<title>personalization-webcomponent</title>
18+
19+
<!-- Muenchen.de Fontfaces -->
20+
<link
21+
href="https://assets.muenchen.de/mde/1.0.10/css/fonts.css"
22+
rel="stylesheet"
23+
/>
24+
25+
<!-- built files will be auto injected -->
26+
<script src="src/checklist-detail-webcomponent.ts" type="module"></script>
27+
</head>
28+
<body>
29+
<noscript>
30+
<strong>
31+
In order for the development page to work correctly, JavaScript needs to
32+
be activated.
33+
</strong>
34+
</noscript>
35+
<div>
36+
<checklist-detail first-name="Julia"/>
37+
</div>
38+
</body>
39+
</html>

‎personalization-webcomponent/index-checklist-overview.html‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta
6+
name="robots"
7+
content="noindex"
8+
/>
9+
<link
10+
href="/favicon.ico"
11+
rel="icon"
12+
/>
13+
<meta
14+
content="width=device-width, initial-scale=1.0"
15+
name="viewport"
16+
/>
17+
<title>personalization-webcomponent</title>
18+
19+
<!-- Muenchen.de Fontfaces -->
20+
<link
21+
href="https://assets.muenchen.de/mde/1.0.10/css/fonts.css"
22+
rel="stylesheet"
23+
/>
24+
25+
<!-- built files will be auto injected -->
26+
<script src="src/checklist-overview-webcomponent.ts" type="module"></script>
27+
</head>
28+
<body>
29+
<noscript>
30+
<strong>
31+
In order for the development page to work correctly, JavaScript needs to
32+
be activated.
33+
</strong>
34+
</noscript>
35+
<div>
36+
<checklist-overview first-name="Simon"/>
37+
</div>
38+
</body>
39+
</html>

‎personalization-webcomponent/index-my-checklists.html‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta
6+
name="robots"
7+
content="noindex"
8+
/>
9+
<link
10+
href="/favicon.ico"
11+
rel="icon"
12+
/>
13+
<meta
14+
content="width=device-width, initial-scale=1.0"
15+
name="viewport"
16+
/>
17+
<title>personalization-webcomponent</title>
18+
19+
<!-- Muenchen.de Fontfaces -->
20+
<link
21+
href="https://assets.muenchen.de/mde/1.0.10/css/fonts.css"
22+
rel="stylesheet"
23+
/>
24+
25+
<!-- built files will be auto injected -->
26+
<script src="src/my-checklists-webcomponent.ts" type="module"></script>
27+
</head>
28+
<body>
29+
<noscript>
30+
<strong>
31+
In order for the development page to work correctly, JavaScript needs to
32+
be activated.
33+
</strong>
34+
</noscript>
35+
<div>
36+
<my-checklists first-name="Fabi"/>
37+
</div>
38+
</body>
39+
</html>

‎personalization-webcomponent/index.html‎

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -14,19 +14,14 @@
1414
content="width=device-width, initial-scale=1.0"
1515
name="viewport"
1616
/>
17-
<title>personalization-webcomponent</title>
17+
<title>personalization-webcomponents</title>
1818

1919
<!-- Muenchen.de Fontfaces -->
2020
<link
2121
href="https://assets.muenchen.de/mde/1.0.10/css/fonts.css"
2222
rel="stylesheet"
2323
/>
2424

25-
<!-- built files will be auto injected -->
26-
<script
27-
src="src/personalization-hello-world-webcomponent.ts"
28-
type="module"
29-
></script>
3025
</head>
3126
<body>
3227
<noscript>
@@ -36,9 +31,18 @@
3631
</strong>
3732
</noscript>
3833
<div>
39-
<personalization-hello-world-webcomponent
40-
first-name="John"
41-
></personalization-hello-world-webcomponent>
34+
<h1>The following webcomponents are available:</h1>
35+
<ul>
36+
<li>
37+
<a href="index-checklist-detail.html">checklist-detail webcomp</a>
38+
</li>
39+
<li>
40+
<a href="index-checklist-overview.html">checklist-overview webcomp</a>
41+
</li>
42+
<li>
43+
<a href="index-my-checklists.html">my-checklists webcomp</a>
44+
</li>
45+
</ul>
4246
</div>
4347
</body>
4448
</html>

‎personalization-webcomponent/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "personalization-webcomponent",
2+
"name": "personalization-webcomponents",
33
"version": "0.0.0",
44
"type": "module",
55
"private": true,

‎personalization-webcomponent/src/checklist-detail-webcomponent.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { defineCustomElement } from "vue";
2+
3+
import ChecklistDetailVueComponent from "@/checklist-detail.ce.vue";
4+
5+
// convert into custom element constructor
6+
const ChecklistDetailWebcomponent = defineCustomElement(
7+
ChecklistDetailVueComponent
8+
);
9+
10+
// register
11+
customElements.define(
12+
"checklist-detail",
13+
ChecklistDetailWebcomponent
14+
);

‎personalization-webcomponent/src/checklist-detail.ce.vue‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<template>
2+
<div>
3+
<!-- eslint-disable-next-line vue/no-v-html -->
4+
<div v-html="mucIconsSprite" />
5+
<!-- eslint-disable-next-line vue/no-v-html -->
6+
<div v-html="customIconsSprite" />
7+
<muc-callout>
8+
<template #header>
9+
<p>checklist-detail Webcomponent</p>
10+
</template>
11+
<template #content>
12+
<p>{{ calloutContent }}</p>
13+
</template>
14+
</muc-callout>
15+
</div>
16+
</template>
17+
18+
<script setup lang="ts">
19+
import { MucCallout } from "@muenchen/muc-patternlab-vue";
20+
import customIconsSprite from "@muenchen/muc-patternlab-vue/assets/icons/custom-icons.svg?raw";
21+
import mucIconsSprite from "@muenchen/muc-patternlab-vue/assets/icons/muc-icons.svg?raw";
22+
import { computed } from "vue";
23+
24+
import { FIRSTNAME_DEFAULT } from "@/util/constants";
25+
26+
const { firstName = FIRSTNAME_DEFAULT } = defineProps<{
27+
firstName?: string;
28+
}>();
29+
30+
const calloutContent = computed(() => {
31+
return `Hello ${firstName}`;
32+
});
33+
</script>
34+
35+
<style>
36+
@import url("https://assets.muenchen.de/mde/1.0.10/css/style.css");
37+
@import "@muenchen/muc-patternlab-vue/assets/css/custom-style.css";
38+
@import "@muenchen/muc-patternlab-vue/style.css";
39+
</style>

‎personalization-webcomponent/src/checklist-overview-webcomponent.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { defineCustomElement } from "vue";
2+
3+
import ChecklistOverviewVueComponent from "@/checklist-overview.ce.vue";
4+
5+
// convert into custom element constructor
6+
const ChecklistOverviewWebcomponent = defineCustomElement(
7+
ChecklistOverviewVueComponent
8+
);
9+
10+
// register
11+
customElements.define(
12+
"checklist-overview",
13+
ChecklistOverviewWebcomponent
14+
);

‎personalization-webcomponent/src/checklist-overview.ce.vue‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<template>
2+
<div>
3+
<!-- eslint-disable-next-line vue/no-v-html -->
4+
<div v-html="mucIconsSprite" />
5+
<!-- eslint-disable-next-line vue/no-v-html -->
6+
<div v-html="customIconsSprite" />
7+
<muc-callout>
8+
<template #header>
9+
<p>checklist-overview Webcomponent</p>
10+
</template>
11+
<template #content>
12+
<p>{{ calloutContent }}</p>
13+
</template>
14+
</muc-callout>
15+
</div>
16+
</template>
17+
18+
<script setup lang="ts">
19+
import { MucCallout } from "@muenchen/muc-patternlab-vue";
20+
import customIconsSprite from "@muenchen/muc-patternlab-vue/assets/icons/custom-icons.svg?raw";
21+
import mucIconsSprite from "@muenchen/muc-patternlab-vue/assets/icons/muc-icons.svg?raw";
22+
import { computed } from "vue";
23+
24+
import { FIRSTNAME_DEFAULT } from "@/util/constants";
25+
26+
const { firstName = FIRSTNAME_DEFAULT } = defineProps<{
27+
firstName?: string;
28+
}>();
29+
30+
const calloutContent = computed(() => {
31+
return `Hello ${firstName}`;
32+
});
33+
</script>
34+
35+
<style>
36+
@import url("https://assets.muenchen.de/mde/1.0.10/css/style.css");
37+
@import "@muenchen/muc-patternlab-vue/assets/css/custom-style.css";
38+
@import "@muenchen/muc-patternlab-vue/style.css";
39+
</style>

0 commit comments

Comments
 (0)