Skip to content

Commit 21d70af

Browse files
JannikBrackJannikBrack
authored
Merge pull request #14 from mapcomponents/Add-MultiTab
Add multi tab to demo applications
2 parents 9bf3aba + 7171581 commit 21d70af

34 files changed

+22362
-0
lines changed

‎multi_tab/.eslintrc.cjs

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
module.exports = {
2+
env: { browser: true, es2020: true },
3+
extends: [
4+
'eslint:recommended',
5+
'plugin:@typescript-eslint/recommended',
6+
'plugin:react-hooks/recommended',
7+
],
8+
parser: '@typescript-eslint/parser',
9+
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
10+
plugins: ['react-refresh'],
11+
rules: {
12+
'react-refresh/only-export-components': 'warn',
13+
},
14+
}

‎multi_tab/.gitignore

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎multi_tab/Dockerfile

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
FROM node:18 as node_builder
2+
WORKDIR /usr/src/app
3+
COPY . /usr/src/app
4+
RUN yarn
5+
RUN yarn build
6+
7+
FROM nginxinc/nginx-unprivileged:1.21
8+
9+
COPY --from=node_builder /usr/src/app/dist /usr/share/nginx/html
10+
EXPOSE 80
11+
CMD ["nginx", "-g", "daemon off;"]

‎multi_tab/README.md

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
# Project description
2+
3+
The idea is a demo application that includes the use of a service worker for communication between two browser tabs in an application. This idea originates from the proof of concept that was developed as part of the DPDHL project.
4+
5+
**The aim of this demo application:**
6+
7+
The data displayed on a map is to be displayed in a second browser tab in the form of a table. Both views (both the map and the table) can interact with each other dynamically and in different ways.
8+
9+
**Examples of the interaction:**
10+
- When zooming in and out, only the data that can be seen in the browser window section is displayed in the table
11+
- Data that is selected in the map is highlighted in the table; data that is selected in the table is highlighted in the map
12+
- Different layers can be displayed in the table (via selection menu in a single table or by activating multiple tables)
13+
14+
15+
**Functionality of this application:**
16+
17+
A **service worker** is registered and then implemented. Service workers enable background synchronization and also the offline use of applications. For our demo application, we need the service worker so that different browser tabs can interact with each other. Service workers react to events.
18+
19+
We also use **React Router**, which enables “client side routing”. The advantage of this is a faster user experience, as the app can update and render the current user interface instead of having to make a new request to the server.
20+
In this demo application, the “App” and the “DataTable” are added to the router.
21+
22+
Using **React Query or TanStack Query** makes it possible to efficiently query and cache data so that it persists when switching between tabs.
23+
24+
# MapComponents + vite + react + typescript
25+
26+
This template is based on the vite ts-react template, and adds all
27+
required basic components for a MapComponents application.
28+
29+
## Start the development server
30+
31+
```bash
32+
yarn dev
33+
```
34+
35+
## Build for production
36+
37+
```bash
38+
yarn build
39+
```
40+
41+
## Create a new app from this template
42+
43+
```bash
44+
npx degit mapcomponents/template my-new-app
45+
```

‎multi_tab/index.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="manifest" href="/manifest.json">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="icon" type="image/png" sizes="196x196" href="favicon-196.png">
8+
<link rel="apple-touch-icon" href="apple-icon-180.png">
9+
<meta name="apple-mobile-web-app-capable" content="yes">
10+
<title>Multi-Tab-Demo</title>
11+
</head>
12+
<body>
13+
<div id="root"></div>
14+
<script type="module" src="/src/main.tsx"></script>
15+
</body>
16+
</html>

‎multi_tab/package.json

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
{
2+
"name": "app_title",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "tsc && vite build",
9+
"lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
10+
"preview": "vite preview"
11+
},
12+
"dependencies": {
13+
"@emotion/react": "^11.13.3",
14+
"@emotion/styled": "^11.13.0",
15+
"@mapcomponents/react-maplibre": "^1.0.8",
16+
"@mui/material": "^6.1.7",
17+
"@tanstack/react-query": "^5.60.5",
18+
"@turf/turf": "^6.5.0",
19+
"geojson": "^0.5.0",
20+
"react": "^18.3.1",
21+
"react-data-table-component": "^7.6.2",
22+
"react-dom": "^18.3.1",
23+
"react-router-dom": "^6.28.0",
24+
"turf": "^3.0.14"
25+
},
26+
"devDependencies": {
27+
"@types/react": "^18.3.12",
28+
"@types/react-dom": "^18.3.1",
29+
"@typescript-eslint/eslint-plugin": "^8.14.0",
30+
"@typescript-eslint/parser": "^8.14.0",
31+
"@vitejs/plugin-react": "^4.3.3",
32+
"eslint": "^9.15.0",
33+
"eslint-plugin-react-hooks": "^5.0.0",
34+
"eslint-plugin-react-refresh": "^0.4.14",
35+
"typescript": "^5.6.3",
36+
"vite": "^5.4.11"
37+
}
38+
}

‎multi_tab/public/apple-icon-180.png

3.75 KB
Loading

‎multi_tab/public/favicon-196.png

3.78 KB
Loading

‎multi_tab/public/manifest-icon-192.maskable.png

4.03 KB
Loading

‎multi_tab/public/manifest-icon-512.maskable.png

12 KB
Loading

‎multi_tab/public/manifest.json

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
{
2+
"short_name": "MapComponents app",
3+
"name": "MapComponents + TypeScript + React App",
4+
"icons": [
5+
{
6+
"src": "manifest-icon-192.maskable.png",
7+
"sizes": "192x192",
8+
"type": "image/png",
9+
"purpose": "any"
10+
},
11+
{
12+
"src": "manifest-icon-192.maskable.png",
13+
"sizes": "192x192",
14+
"type": "image/png",
15+
"purpose": "maskable"
16+
},
17+
{
18+
"src": "manifest-icon-512.maskable.png",
19+
"sizes": "512x512",
20+
"type": "image/png",
21+
"purpose": "any"
22+
},
23+
{
24+
"src": "manifest-icon-512.maskable.png",
25+
"sizes": "512x512",
26+
"type": "image/png",
27+
"purpose": "maskable"
28+
},
29+
{
30+
"src": "favicon.ico",
31+
"sizes": "64x64 32x32 24x24 16x16",
32+
"type": "image/x-icon"
33+
}
34+
],
35+
"start_url": ".",
36+
"display": "standalone",
37+
"theme_color": "#000000",
38+
"background_color": "#ffffff"
39+
}

0 commit comments

Comments
 (0)