Compare commits
No commits in common. "8c628f23dcfb1f6f120d19bb3ecdb422ca5093cd" and "38a665024eb1df3eba66c61d8cb3199000b629e5" have entirely different histories.
8c628f23dc
...
38a665024e
@ -1,5 +1,6 @@
|
|||||||
FROM mcr.microsoft.com/vscode/devcontainers/base:alpine-3.12
|
FROM mcr.microsoft.com/vscode/devcontainers/base:alpine-3.12
|
||||||
RUN apk update
|
RUN apk update
|
||||||
RUN apk add --upgrade nodejs-current npm
|
RUN apk add --upgrade nodejs-current npm
|
||||||
RUN npm i -g pnpm rimraf
|
RUN npm i -g yarn rimraf
|
||||||
RUN rimraf node_modules
|
RUN rimraf node_modules
|
||||||
|
RUN yarn set version berry
|
||||||
@ -1,20 +1,20 @@
|
|||||||
{
|
{
|
||||||
"name": "Node.js",
|
"name": "Node.js",
|
||||||
"build": {
|
"build": {
|
||||||
"dockerfile": "Dockerfile"
|
"dockerfile": "Dockerfile"
|
||||||
},
|
},
|
||||||
"settings": {
|
"settings": {
|
||||||
"terminal.integrated.shell.linux": "/bin/sh"
|
"terminal.integrated.shell.linux": "/bin/sh"
|
||||||
},
|
},
|
||||||
"extensions": [
|
"extensions": [
|
||||||
"dbaeumer.vscode-eslint",
|
"dbaeumer.vscode-eslint",
|
||||||
"2gua.rainbow-brackets",
|
"2gua.rainbow-brackets",
|
||||||
"christian-kohler.npm-intellisense",
|
"christian-kohler.npm-intellisense",
|
||||||
"remimarsal.prettier-now",
|
"remimarsal.prettier-now",
|
||||||
"svelte.svelte-vscode",
|
"svelte.svelte-vscode",
|
||||||
"lokalise.i18n-ally",
|
"lokalise.i18n-ally",
|
||||||
"fivethree.vscode-svelte-snippets",
|
"fivethree.vscode-svelte-snippets",
|
||||||
"voorjaar.windicss-intellisense"
|
"voorjaar.windicss-intellisense"
|
||||||
],
|
],
|
||||||
"postCreateCommand": "yarn && yarn dev --open"
|
"postCreateCommand": "yarn && yarn dev --open"
|
||||||
}
|
}
|
||||||
@ -98,4 +98,4 @@ steps:
|
|||||||
registry: registry.odit.services
|
registry: registry.odit.services
|
||||||
trigger:
|
trigger:
|
||||||
event:
|
event:
|
||||||
- tag
|
- tag
|
||||||
22
.vscode/extensions.json
vendored
22
.vscode/extensions.json
vendored
@ -1,12 +1,14 @@
|
|||||||
{
|
{
|
||||||
"recommendations": [
|
"recommendations": [
|
||||||
"2gua.rainbow-brackets",
|
"2gua.rainbow-brackets",
|
||||||
"christian-kohler.npm-intellisense",
|
"christian-kohler.npm-intellisense",
|
||||||
"remimarsal.prettier-now",
|
"remimarsal.prettier-now",
|
||||||
"svelte.svelte-vscode",
|
"svelte.svelte-vscode",
|
||||||
"lokalise.i18n-ally",
|
"lokalise.i18n-ally",
|
||||||
"fivethree.vscode-svelte-snippets",
|
"fivethree.vscode-svelte-snippets",
|
||||||
"voorjaar.windicss-intellisense"
|
"voorjaar.windicss-intellisense"
|
||||||
],
|
],
|
||||||
"unwantedRecommendations": ["antfu.i18n-ally"]
|
"unwantedRecommendations": [
|
||||||
|
"antfu.i18n-ally"
|
||||||
|
]
|
||||||
}
|
}
|
||||||
8
.vscode/i18n-ally-custom-framework.yml
vendored
8
.vscode/i18n-ally-custom-framework.yml
vendored
@ -1,7 +1,7 @@
|
|||||||
languageIds:
|
languageIds:
|
||||||
- javascript
|
- javascript
|
||||||
- svelte
|
- svelte
|
||||||
- html
|
- html
|
||||||
monopoly: false
|
monopoly: false
|
||||||
refactorTemplates:
|
refactorTemplates:
|
||||||
- "{$_('$1')}"
|
- "{$_('$1')}"
|
||||||
6
.vscode/settings.json
vendored
6
.vscode/settings.json
vendored
@ -1,5 +1,5 @@
|
|||||||
{
|
{
|
||||||
"i18n-ally.localesPaths": "src/locales",
|
"i18n-ally.localesPaths": "src/locales",
|
||||||
"i18n-ally.keystyle": "nested",
|
"i18n-ally.keystyle": "nested",
|
||||||
"windicss.enableCodeFolding": false
|
"windicss.enableCodeFolding": false,
|
||||||
}
|
}
|
||||||
@ -1,27 +1,21 @@
|
|||||||
# @odit/lfk-frontend
|
# @odit/lfk-frontend
|
||||||
|
|
||||||
## ✒️ Overview
|
## ✒️ Overview
|
||||||
|
|
||||||
This is an API client for [https://git.odit.services/lfk/backend](@lfk/backend)
|
This is an API client for [https://git.odit.services/lfk/backend](@lfk/backend)
|
||||||
|
|
||||||
This application is intended for use by admin users/ members only.
|
This application is intended for use by admin users/ members only.
|
||||||
|
|
||||||
## 🚀 Getting Started
|
## 🚀 Getting Started
|
||||||
|
|
||||||
```
|
```
|
||||||
pnpm i
|
pnpm i
|
||||||
```
|
```
|
||||||
|
|
||||||
## Development
|
## Development
|
||||||
|
|
||||||
```
|
```
|
||||||
pnpm dev
|
pnpm dev
|
||||||
/
|
/
|
||||||
pnpm dev --open
|
pnpm dev --open
|
||||||
```
|
```
|
||||||
|
|
||||||
## Build
|
## Build
|
||||||
|
|
||||||
```
|
```
|
||||||
pnpm build
|
pnpm build
|
||||||
```
|
```
|
||||||
@ -1,8 +1,8 @@
|
|||||||
version: "3"
|
version: "3"
|
||||||
services:
|
services:
|
||||||
httpd:
|
httpd:
|
||||||
build: .
|
build: .
|
||||||
volumes:
|
volumes:
|
||||||
- ./public/env.sample.js:/usr/share/nginx/html/env.js
|
- ./public/env.sample.js:/usr/share/nginx/html/env.js
|
||||||
ports:
|
ports:
|
||||||
- 4050:80
|
- 4050:80
|
||||||
|
|||||||
36
index.html
36
index.html
@ -1,22 +1,22 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
|
||||||
<meta charset="utf-8" />
|
|
||||||
<link rel="icon" href="/favicon.png" />
|
|
||||||
<link rel="manifest" href="/manifest.webmanifest" />
|
|
||||||
<link rel="apple-touch-icon" href="/lfk-logo.png" />
|
|
||||||
<meta name="theme-color" content="#FFFFFF" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
||||||
<meta name="description" content="Lauf Für Kaya! - Admin" />
|
|
||||||
<title>Lauf für Kaya! - Admin</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
<head>
|
||||||
<span style="display: none; visibility: hidden" id="buildinfo"
|
<meta charset="utf-8" />
|
||||||
>RELEASE_INFO-1.3.4-RELEASE_INFO</span
|
<link rel="icon" href="/favicon.png" />
|
||||||
>
|
<link rel="manifest" href="/manifest.webmanifest">
|
||||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
<link rel="apple-touch-icon" href="/lfk-logo.png">
|
||||||
<script src="/env.js"></script>
|
<meta name="theme-color" content="#FFFFFF">
|
||||||
<script type="module" src="/src/main.js"></script>
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
</body>
|
<meta name="description" content="Lauf Für Kaya! - Admin" />
|
||||||
|
<title>Lauf für Kaya! - Admin</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<span style="display: none;visibility: hidden;" id="buildinfo">RELEASE_INFO-1.3.4-RELEASE_INFO</span>
|
||||||
|
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||||
|
<script src="/env.js"></script>
|
||||||
|
<script type="module" src="/src/main.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
28
order.js
28
order.js
@ -1,18 +1,16 @@
|
|||||||
import fs from "fs";
|
import fs from 'fs'
|
||||||
// get all language files
|
// get all language files
|
||||||
const files = fs.readdirSync("./src/locales/");
|
const files = fs.readdirSync('./src/locales/');
|
||||||
files.forEach((f) => {
|
files.forEach((f) => {
|
||||||
// read file as object
|
// read file as object
|
||||||
const unordered = JSON.parse(fs.readFileSync(`src/locales/${f}`));
|
const unordered = JSON.parse(fs.readFileSync(`src/locales/${f}`));
|
||||||
// order object by keys alpabetically A-Z
|
// order object by keys alpabetically A-Z
|
||||||
const ordered = Object.keys(unordered)
|
const ordered = Object.keys(unordered).sort().reduce((obj, key) => {
|
||||||
.sort()
|
obj[key] = unordered[key];
|
||||||
.reduce((obj, key) => {
|
return obj;
|
||||||
obj[key] = unordered[key];
|
}, {});
|
||||||
return obj;
|
// format output as json for commit diff compatibility
|
||||||
}, {});
|
const out = JSON.stringify(ordered, 0, 4);
|
||||||
// format output as json for commit diff compatibility
|
// write output file
|
||||||
const out = JSON.stringify(ordered, 0, 4);
|
fs.writeFileSync(`src/locales/${f}`, out);
|
||||||
// write output file
|
|
||||||
fs.writeFileSync(`src/locales/${f}`, out);
|
|
||||||
});
|
});
|
||||||
|
|||||||
121
package.json
121
package.json
@ -1,63 +1,62 @@
|
|||||||
{
|
{
|
||||||
"name": "@odit/lfk-frontend",
|
"name": "@odit/lfk-frontend",
|
||||||
"version": "1.3.4",
|
"version": "1.3.4",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"i18n-order": "node order.js",
|
"i18n-order": "node order.js",
|
||||||
"dev": "vite",
|
"dev": "vite",
|
||||||
"format": "prettier --write --plugin-search-dir=. .",
|
"build": "vite build",
|
||||||
"build": "vite build",
|
"release": "release-it",
|
||||||
"release": "release-it",
|
"licenses:export": "license-exporter --json -o public"
|
||||||
"licenses:export": "license-exporter --json -o public"
|
},
|
||||||
},
|
"license": "CC-BY-NC-SA-4.0",
|
||||||
"license": "CC-BY-NC-SA-4.0",
|
"devDependencies": {
|
||||||
"devDependencies": {
|
"@odit/license-exporter": "0.0.12",
|
||||||
"@odit/license-exporter": "0.0.12",
|
"@sveltejs/vite-plugin-svelte": "2.1.0",
|
||||||
"@sveltejs/vite-plugin-svelte": "2.1.1",
|
"auto-changelog": "2.4.0",
|
||||||
"auto-changelog": "2.4.0",
|
"autoprefixer": "10.4.14",
|
||||||
"autoprefixer": "10.4.14",
|
"postcss": "8.4.23",
|
||||||
"postcss": "8.4.23",
|
"release-it": "15.10.1",
|
||||||
"prettier": "^2.8.8",
|
"svelte-select": "3.17.0",
|
||||||
"prettier-plugin-svelte": "^2.10.0",
|
"tailwindcss": "3.3.1",
|
||||||
"release-it": "15.10.1",
|
"vite": "4.3.1"
|
||||||
"svelte-select": "3.17.0",
|
},
|
||||||
"tailwindcss": "3.3.2",
|
"release-it": {
|
||||||
"vite": "4.3.3"
|
"git": {
|
||||||
},
|
"commit": true,
|
||||||
"release-it": {
|
"requireCleanWorkingDir": false,
|
||||||
"git": {
|
"commitMessage": "🚀RELEASE v${version}",
|
||||||
"commit": true,
|
"push": true,
|
||||||
"requireCleanWorkingDir": false,
|
"tag": true,
|
||||||
"commitMessage": "🚀RELEASE v${version}",
|
"tagName": null,
|
||||||
"push": true,
|
"tagAnnotation": "v${version}"
|
||||||
"tag": true,
|
},
|
||||||
"tagName": null,
|
"npm": {
|
||||||
"tagAnnotation": "v${version}"
|
"publish": false
|
||||||
},
|
},
|
||||||
"npm": {
|
"hooks": {
|
||||||
"publish": false
|
"after:bump": "npx auto-changelog --commit-limit false -p -u --hide-credit && git add CHANGELOG.md && node versionbuilder.js && git add index.html && node order.js && git add src/locales"
|
||||||
},
|
}
|
||||||
"hooks": {
|
},
|
||||||
"after:bump": "npx auto-changelog --commit-limit false -p -u --hide-credit && git add CHANGELOG.md && node versionbuilder.js && git add index.html && node order.js && git add src/locales"
|
"dependencies": {
|
||||||
}
|
"@odit/lfk-client-js": "1.1.1",
|
||||||
},
|
"@paralleldrive/cuid2": "^2.2.0",
|
||||||
"dependencies": {
|
"@tanstack/svelte-table": "^8.8.5",
|
||||||
"@odit/lfk-client-js": "1.1.1",
|
"bwip-js": "^3.4.0",
|
||||||
"@paralleldrive/cuid2": "^2.2.0",
|
"check-password-strength": "2.0.7",
|
||||||
"@tanstack/svelte-table": "^8.8.6",
|
"csvtojson": "2.0.10",
|
||||||
"bwip-js": "^3.4.0",
|
"gridjs": "3.4.0",
|
||||||
"check-password-strength": "2.0.7",
|
"localforage": "1.10.0",
|
||||||
"csvtojson": "2.0.10",
|
"marked": "2.0.3",
|
||||||
"localforage": "1.10.0",
|
"svelte": "3.58.0",
|
||||||
"marked": "4.3.0",
|
"svelte-french-toast": "1.0.4-beta.0",
|
||||||
"svelte": "3.58.0",
|
"svelte-i18n": "3.6.0",
|
||||||
"svelte-french-toast": "1.0.4-beta.0",
|
"tinro": "0.6.12",
|
||||||
"svelte-i18n": "3.6.0",
|
"toastify-js": "1.12.0",
|
||||||
"tinro": "0.6.12",
|
"validator": "13.9.0",
|
||||||
"validator": "13.9.0",
|
"xlsx": "0.18.5"
|
||||||
"xlsx": "0.18.5"
|
},
|
||||||
},
|
"volta": {
|
||||||
"volta": {
|
"node": "20.0.0"
|
||||||
"node": "20.0.0"
|
}
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
141
pnpm-lock.yaml
generated
141
pnpm-lock.yaml
generated
@ -8,8 +8,8 @@ dependencies:
|
|||||||
specifier: ^2.2.0
|
specifier: ^2.2.0
|
||||||
version: 2.2.0
|
version: 2.2.0
|
||||||
'@tanstack/svelte-table':
|
'@tanstack/svelte-table':
|
||||||
specifier: ^8.8.6
|
specifier: ^8.8.5
|
||||||
version: 8.8.6(svelte@3.58.0)
|
version: 8.8.5(svelte@3.58.0)
|
||||||
bwip-js:
|
bwip-js:
|
||||||
specifier: ^3.4.0
|
specifier: ^3.4.0
|
||||||
version: 3.4.0
|
version: 3.4.0
|
||||||
@ -19,12 +19,15 @@ dependencies:
|
|||||||
csvtojson:
|
csvtojson:
|
||||||
specifier: 2.0.10
|
specifier: 2.0.10
|
||||||
version: 2.0.10
|
version: 2.0.10
|
||||||
|
gridjs:
|
||||||
|
specifier: 3.4.0
|
||||||
|
version: 3.4.0
|
||||||
localforage:
|
localforage:
|
||||||
specifier: 1.10.0
|
specifier: 1.10.0
|
||||||
version: 1.10.0
|
version: 1.10.0
|
||||||
marked:
|
marked:
|
||||||
specifier: 4.3.0
|
specifier: 2.0.3
|
||||||
version: 4.3.0
|
version: 2.0.3
|
||||||
svelte:
|
svelte:
|
||||||
specifier: 3.58.0
|
specifier: 3.58.0
|
||||||
version: 3.58.0
|
version: 3.58.0
|
||||||
@ -37,6 +40,9 @@ dependencies:
|
|||||||
tinro:
|
tinro:
|
||||||
specifier: 0.6.12
|
specifier: 0.6.12
|
||||||
version: 0.6.12
|
version: 0.6.12
|
||||||
|
toastify-js:
|
||||||
|
specifier: 1.12.0
|
||||||
|
version: 1.12.0
|
||||||
validator:
|
validator:
|
||||||
specifier: 13.9.0
|
specifier: 13.9.0
|
||||||
version: 13.9.0
|
version: 13.9.0
|
||||||
@ -49,8 +55,8 @@ devDependencies:
|
|||||||
specifier: 0.0.12
|
specifier: 0.0.12
|
||||||
version: 0.0.12
|
version: 0.0.12
|
||||||
'@sveltejs/vite-plugin-svelte':
|
'@sveltejs/vite-plugin-svelte':
|
||||||
specifier: 2.1.1
|
specifier: 2.1.0
|
||||||
version: 2.1.1(svelte@3.58.0)(vite@4.3.3)
|
version: 2.1.0(svelte@3.58.0)(vite@4.3.1)
|
||||||
auto-changelog:
|
auto-changelog:
|
||||||
specifier: 2.4.0
|
specifier: 2.4.0
|
||||||
version: 2.4.0
|
version: 2.4.0
|
||||||
@ -60,12 +66,6 @@ devDependencies:
|
|||||||
postcss:
|
postcss:
|
||||||
specifier: 8.4.23
|
specifier: 8.4.23
|
||||||
version: 8.4.23
|
version: 8.4.23
|
||||||
prettier:
|
|
||||||
specifier: ^2.8.8
|
|
||||||
version: 2.8.8
|
|
||||||
prettier-plugin-svelte:
|
|
||||||
specifier: ^2.10.0
|
|
||||||
version: 2.10.0(prettier@2.8.8)(svelte@3.58.0)
|
|
||||||
release-it:
|
release-it:
|
||||||
specifier: 15.10.1
|
specifier: 15.10.1
|
||||||
version: 15.10.1
|
version: 15.10.1
|
||||||
@ -73,19 +73,14 @@ devDependencies:
|
|||||||
specifier: 3.17.0
|
specifier: 3.17.0
|
||||||
version: 3.17.0
|
version: 3.17.0
|
||||||
tailwindcss:
|
tailwindcss:
|
||||||
specifier: 3.3.2
|
specifier: 3.3.1
|
||||||
version: 3.3.2
|
version: 3.3.1(postcss@8.4.23)
|
||||||
vite:
|
vite:
|
||||||
specifier: 4.3.3
|
specifier: 4.3.1
|
||||||
version: 4.3.3
|
version: 4.3.1
|
||||||
|
|
||||||
packages:
|
packages:
|
||||||
|
|
||||||
/@alloc/quick-lru@5.2.0:
|
|
||||||
resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
|
|
||||||
engines: {node: '>=10'}
|
|
||||||
dev: true
|
|
||||||
|
|
||||||
/@babel/code-frame@7.21.4:
|
/@babel/code-frame@7.21.4:
|
||||||
resolution: {integrity: sha512-LYvhNKfwWSPpocw8GI7gpK2nq3HSDuEPC/uSYaALSJu9xjsalaaYFOq0Pwt5KmVqwEbZlDu81aLXwBOmD/Fv9g==}
|
resolution: {integrity: sha512-LYvhNKfwWSPpocw8GI7gpK2nq3HSDuEPC/uSYaALSJu9xjsalaaYFOq0Pwt5KmVqwEbZlDu81aLXwBOmD/Fv9g==}
|
||||||
engines: {node: '>=6.9.0'}
|
engines: {node: '>=6.9.0'}
|
||||||
@ -561,8 +556,8 @@ packages:
|
|||||||
engines: {node: '>=14.16'}
|
engines: {node: '>=14.16'}
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/@sveltejs/vite-plugin-svelte@2.1.1(svelte@3.58.0)(vite@4.3.3):
|
/@sveltejs/vite-plugin-svelte@2.1.0(svelte@3.58.0)(vite@4.3.1):
|
||||||
resolution: {integrity: sha512-7YeBDt4us0FiIMNsVXxyaP4Hwyn2/v9x3oqStkHU3ZdIc5O22pGwUwH33wUqYo+7Itdmo8zxJ45Qvfm3H7UUjQ==}
|
resolution: {integrity: sha512-Bc9A8mtTGlhTICdLL/aZ+jyHI3kwtkcXremOH5xwjbNNKOTOtY8nMyG8/oZ5KK8IuUfAn1WL58Bp2tofDJBW0w==}
|
||||||
engines: {node: ^14.18.0 || >= 16}
|
engines: {node: ^14.18.0 || >= 16}
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
svelte: ^3.54.0
|
svelte: ^3.54.0
|
||||||
@ -574,8 +569,8 @@ packages:
|
|||||||
magic-string: 0.30.0
|
magic-string: 0.30.0
|
||||||
svelte: 3.58.0
|
svelte: 3.58.0
|
||||||
svelte-hmr: 0.15.1(svelte@3.58.0)
|
svelte-hmr: 0.15.1(svelte@3.58.0)
|
||||||
vite: 4.3.3
|
vite: 4.3.1
|
||||||
vitefu: 0.2.4(vite@4.3.3)
|
vitefu: 0.2.4(vite@4.3.1)
|
||||||
transitivePeerDependencies:
|
transitivePeerDependencies:
|
||||||
- supports-color
|
- supports-color
|
||||||
dev: true
|
dev: true
|
||||||
@ -587,8 +582,8 @@ packages:
|
|||||||
defer-to-connect: 2.0.1
|
defer-to-connect: 2.0.1
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/@tanstack/svelte-table@8.8.6(svelte@3.58.0):
|
/@tanstack/svelte-table@8.8.5(svelte@3.58.0):
|
||||||
resolution: {integrity: sha512-/5cJ9w4rhq6iqts8dR31JSOqavV6Ug6KZPFXpQaj3hs2JWQiNPw24tOOrFkXVaD4AQ6D2EEH/R0XoX9moQRY5A==}
|
resolution: {integrity: sha512-d33JJwEe5AbwH6sBnRDfTL3gianA7if0fUTqxLNKK6P51IAIgMgAW+ahbCeg+5wJ9KcMSyTEOHs2Fg03oP6tvA==}
|
||||||
engines: {node: '>=12'}
|
engines: {node: '>=12'}
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
svelte: ^3.49.0
|
svelte: ^3.49.0
|
||||||
@ -1794,6 +1789,13 @@ packages:
|
|||||||
resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
|
resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
|
/gridjs@3.4.0:
|
||||||
|
resolution: {integrity: sha512-wkRbtOblx2EXJCk4j+cgJSFB02PCyx33mIZlcyWZOmrFGbfc6ITq8vhZxaxV5jeBvtixoJ/csMTkpugVsHAlMw==}
|
||||||
|
dependencies:
|
||||||
|
preact: 10.13.2
|
||||||
|
tslib: 2.5.0
|
||||||
|
dev: false
|
||||||
|
|
||||||
/handlebars@4.7.7:
|
/handlebars@4.7.7:
|
||||||
resolution: {integrity: sha512-aAcXm5OAfE/8IXkcZvCepKU3VzW1/39Fb5ZuqMtgI/hT8X2YgoMvBY5dLhq/cpOvw7Lk1nK/UF71aLG/ZnVYRA==}
|
resolution: {integrity: sha512-aAcXm5OAfE/8IXkcZvCepKU3VzW1/39Fb5ZuqMtgI/hT8X2YgoMvBY5dLhq/cpOvw7Lk1nK/UF71aLG/ZnVYRA==}
|
||||||
engines: {node: '>=0.4.7'}
|
engines: {node: '>=0.4.7'}
|
||||||
@ -2444,9 +2446,9 @@ packages:
|
|||||||
'@jridgewell/sourcemap-codec': 1.4.15
|
'@jridgewell/sourcemap-codec': 1.4.15
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/marked@4.3.0:
|
/marked@2.0.3:
|
||||||
resolution: {integrity: sha512-PRsaiG84bK+AMvxziE/lCFss8juXjNaWzVbN5tXAm4XjeaS9NAHhop+PjQxz2A9h8Q4M/xGmzP8vqNwy6JeK0A==}
|
resolution: {integrity: sha512-5otztIIcJfPc2qGTN8cVtOJEjNJZ0jwa46INMagrYfk0EvqtRuEHLsEe0LrFS0/q+ZRKT0+kXK7P2T1AN5lWRA==}
|
||||||
engines: {node: '>= 12'}
|
engines: {node: '>= 8.16.2'}
|
||||||
hasBin: true
|
hasBin: true
|
||||||
dev: false
|
dev: false
|
||||||
|
|
||||||
@ -2847,9 +2849,9 @@ packages:
|
|||||||
engines: {node: '>= 6'}
|
engines: {node: '>= 6'}
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/postcss-import@15.1.0(postcss@8.4.23):
|
/postcss-import@14.1.0(postcss@8.4.23):
|
||||||
resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
|
resolution: {integrity: sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==}
|
||||||
engines: {node: '>=14.0.0'}
|
engines: {node: '>=10.0.0'}
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
postcss: ^8.0.0
|
postcss: ^8.0.0
|
||||||
dependencies:
|
dependencies:
|
||||||
@ -2869,9 +2871,9 @@ packages:
|
|||||||
postcss: 8.4.23
|
postcss: 8.4.23
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/postcss-load-config@4.0.1(postcss@8.4.23):
|
/postcss-load-config@3.1.4(postcss@8.4.23):
|
||||||
resolution: {integrity: sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==}
|
resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==}
|
||||||
engines: {node: '>= 14'}
|
engines: {node: '>= 10'}
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
postcss: '>=8.0.9'
|
postcss: '>=8.0.9'
|
||||||
ts-node: '>=9.0.0'
|
ts-node: '>=9.0.0'
|
||||||
@ -2883,11 +2885,11 @@ packages:
|
|||||||
dependencies:
|
dependencies:
|
||||||
lilconfig: 2.1.0
|
lilconfig: 2.1.0
|
||||||
postcss: 8.4.23
|
postcss: 8.4.23
|
||||||
yaml: 2.2.2
|
yaml: 1.10.2
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/postcss-nested@6.0.1(postcss@8.4.23):
|
/postcss-nested@6.0.0(postcss@8.4.23):
|
||||||
resolution: {integrity: sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==}
|
resolution: {integrity: sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==}
|
||||||
engines: {node: '>=12.0'}
|
engines: {node: '>=12.0'}
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
postcss: ^8.2.14
|
postcss: ^8.2.14
|
||||||
@ -2917,27 +2919,15 @@ packages:
|
|||||||
source-map-js: 1.0.2
|
source-map-js: 1.0.2
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
|
/preact@10.13.2:
|
||||||
|
resolution: {integrity: sha512-q44QFLhOhty2Bd0Y46fnYW0gD/cbVM9dUVtNTDKPcdXSMA7jfY+Jpd6rk3GB0lcQss0z5s/6CmVP0Z/hV+g6pw==}
|
||||||
|
dev: false
|
||||||
|
|
||||||
/prelude-ls@1.1.2:
|
/prelude-ls@1.1.2:
|
||||||
resolution: {integrity: sha512-ESF23V4SKG6lVSGZgYNpbsiaAkdab6ZgOxe52p7+Kid3W3u3bxR4Vfd/o21dmN7jSt0IwgZ4v5MUd26FEtXE9w==}
|
resolution: {integrity: sha512-ESF23V4SKG6lVSGZgYNpbsiaAkdab6ZgOxe52p7+Kid3W3u3bxR4Vfd/o21dmN7jSt0IwgZ4v5MUd26FEtXE9w==}
|
||||||
engines: {node: '>= 0.8.0'}
|
engines: {node: '>= 0.8.0'}
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/prettier-plugin-svelte@2.10.0(prettier@2.8.8)(svelte@3.58.0):
|
|
||||||
resolution: {integrity: sha512-GXMY6t86thctyCvQq+jqElO+MKdB09BkL3hexyGP3Oi8XLKRFaJP1ud/xlWCZ9ZIa2BxHka32zhHfcuU+XsRQg==}
|
|
||||||
peerDependencies:
|
|
||||||
prettier: ^1.16.4 || ^2.0.0
|
|
||||||
svelte: ^3.2.0
|
|
||||||
dependencies:
|
|
||||||
prettier: 2.8.8
|
|
||||||
svelte: 3.58.0
|
|
||||||
dev: true
|
|
||||||
|
|
||||||
/prettier@2.8.8:
|
|
||||||
resolution: {integrity: sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==}
|
|
||||||
engines: {node: '>=10.13.0'}
|
|
||||||
hasBin: true
|
|
||||||
dev: true
|
|
||||||
|
|
||||||
/promise.allsettled@1.0.6:
|
/promise.allsettled@1.0.6:
|
||||||
resolution: {integrity: sha512-22wJUOD3zswWFqgwjNHa1965LvqTX87WPu/lreY2KSd7SVcERfuZ4GfUaOnJNnvtoIv2yXT/W00YIGMetXtFXg==}
|
resolution: {integrity: sha512-22wJUOD3zswWFqgwjNHa1965LvqTX87WPu/lreY2KSd7SVcERfuZ4GfUaOnJNnvtoIv2yXT/W00YIGMetXtFXg==}
|
||||||
engines: {node: '>= 0.4'}
|
engines: {node: '>= 0.4'}
|
||||||
@ -3160,8 +3150,8 @@ packages:
|
|||||||
engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
|
engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/rollup@3.21.0:
|
/rollup@3.20.2:
|
||||||
resolution: {integrity: sha512-ANPhVcyeHvYdQMUyCbczy33nbLzI7RzrBje4uvNiTDJGIMtlKoOStmympwr9OtS1LZxiDmE2wvxHyVhoLtf1KQ==}
|
resolution: {integrity: sha512-3zwkBQl7Ai7MFYQE0y1MeQ15+9jsi7XxfrqwTb/9EK8D9C9+//EBR4M+CuA1KODRaNbFez/lWxA5vhEGZp4MUg==}
|
||||||
engines: {node: '>=14.18.0', npm: '>=8.0.0'}
|
engines: {node: '>=14.18.0', npm: '>=8.0.0'}
|
||||||
hasBin: true
|
hasBin: true
|
||||||
optionalDependencies:
|
optionalDependencies:
|
||||||
@ -3506,14 +3496,16 @@ packages:
|
|||||||
resolution: {integrity: sha512-brIBNNB76mXFmU/Kerm4wFnkskBbluBDCjx/8TcpYRb298Yh2dztS2kQ6bhtjMcvUhd5ynClfwpz5h2gnzdQ1A==}
|
resolution: {integrity: sha512-brIBNNB76mXFmU/Kerm4wFnkskBbluBDCjx/8TcpYRb298Yh2dztS2kQ6bhtjMcvUhd5ynClfwpz5h2gnzdQ1A==}
|
||||||
engines: {node: '>= 8'}
|
engines: {node: '>= 8'}
|
||||||
|
|
||||||
/tailwindcss@3.3.2:
|
/tailwindcss@3.3.1(postcss@8.4.23):
|
||||||
resolution: {integrity: sha512-9jPkMiIBXvPc2KywkraqsUfbfj+dHDb+JPWtSJa9MLFdrPyazI7q6WX2sUrm7R9eVR7qqv3Pas7EvQFzxKnI6w==}
|
resolution: {integrity: sha512-Vkiouc41d4CEq0ujXl6oiGFQ7bA3WEhUZdTgXAhtKxSy49OmKs8rEfQmupsfF0IGW8fv2iQkp1EVUuapCFrZ9g==}
|
||||||
engines: {node: '>=14.0.0'}
|
engines: {node: '>=12.13.0'}
|
||||||
hasBin: true
|
hasBin: true
|
||||||
|
peerDependencies:
|
||||||
|
postcss: ^8.0.9
|
||||||
dependencies:
|
dependencies:
|
||||||
'@alloc/quick-lru': 5.2.0
|
|
||||||
arg: 5.0.2
|
arg: 5.0.2
|
||||||
chokidar: 3.5.3
|
chokidar: 3.5.3
|
||||||
|
color-name: 1.1.4
|
||||||
didyoumean: 1.2.2
|
didyoumean: 1.2.2
|
||||||
dlv: 1.1.3
|
dlv: 1.1.3
|
||||||
fast-glob: 3.2.12
|
fast-glob: 3.2.12
|
||||||
@ -3526,12 +3518,13 @@ packages:
|
|||||||
object-hash: 3.0.0
|
object-hash: 3.0.0
|
||||||
picocolors: 1.0.0
|
picocolors: 1.0.0
|
||||||
postcss: 8.4.23
|
postcss: 8.4.23
|
||||||
postcss-import: 15.1.0(postcss@8.4.23)
|
postcss-import: 14.1.0(postcss@8.4.23)
|
||||||
postcss-js: 4.0.1(postcss@8.4.23)
|
postcss-js: 4.0.1(postcss@8.4.23)
|
||||||
postcss-load-config: 4.0.1(postcss@8.4.23)
|
postcss-load-config: 3.1.4(postcss@8.4.23)
|
||||||
postcss-nested: 6.0.1(postcss@8.4.23)
|
postcss-nested: 6.0.0(postcss@8.4.23)
|
||||||
postcss-selector-parser: 6.0.11
|
postcss-selector-parser: 6.0.11
|
||||||
postcss-value-parser: 4.2.0
|
postcss-value-parser: 4.2.0
|
||||||
|
quick-lru: 5.1.1
|
||||||
resolve: 1.22.2
|
resolve: 1.22.2
|
||||||
sucrase: 3.32.0
|
sucrase: 3.32.0
|
||||||
transitivePeerDependencies:
|
transitivePeerDependencies:
|
||||||
@ -3592,6 +3585,10 @@ packages:
|
|||||||
is-number: 7.0.0
|
is-number: 7.0.0
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
|
/toastify-js@1.12.0:
|
||||||
|
resolution: {integrity: sha512-HeMHCO9yLPvP9k0apGSdPUWrUbLnxUKNFzgUoZp1PHCLploIX/4DSQ7V8H25ef+h4iO9n0he7ImfcndnN6nDrQ==}
|
||||||
|
dev: false
|
||||||
|
|
||||||
/toidentifier@1.0.1:
|
/toidentifier@1.0.1:
|
||||||
resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==}
|
resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==}
|
||||||
engines: {node: '>=0.6'}
|
engines: {node: '>=0.6'}
|
||||||
@ -3740,8 +3737,8 @@ packages:
|
|||||||
engines: {node: '>= 0.10'}
|
engines: {node: '>= 0.10'}
|
||||||
dev: false
|
dev: false
|
||||||
|
|
||||||
/vite@4.3.3:
|
/vite@4.3.1:
|
||||||
resolution: {integrity: sha512-MwFlLBO4udZXd+VBcezo3u8mC77YQk+ik+fbc0GZWGgzfbPP+8Kf0fldhARqvSYmtIWoAJ5BXPClUbMTlqFxrA==}
|
resolution: {integrity: sha512-EPmfPLAI79Z/RofuMvkIS0Yr091T2ReUoXQqc5ppBX/sjFRhHKiPPF/R46cTdoci/XgeQpB23diiJxq5w30vdg==}
|
||||||
engines: {node: ^14.18.0 || >=16.0.0}
|
engines: {node: ^14.18.0 || >=16.0.0}
|
||||||
hasBin: true
|
hasBin: true
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
@ -3767,12 +3764,12 @@ packages:
|
|||||||
dependencies:
|
dependencies:
|
||||||
esbuild: 0.17.16
|
esbuild: 0.17.16
|
||||||
postcss: 8.4.23
|
postcss: 8.4.23
|
||||||
rollup: 3.21.0
|
rollup: 3.20.2
|
||||||
optionalDependencies:
|
optionalDependencies:
|
||||||
fsevents: 2.3.2
|
fsevents: 2.3.2
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/vitefu@0.2.4(vite@4.3.3):
|
/vitefu@0.2.4(vite@4.3.1):
|
||||||
resolution: {integrity: sha512-fanAXjSaf9xXtOOeno8wZXIhgia+CZury481LsDaV++lSvcU2R9Ch2bPh3PYFyoHW+w9LqAeYRISVQjUIew14g==}
|
resolution: {integrity: sha512-fanAXjSaf9xXtOOeno8wZXIhgia+CZury481LsDaV++lSvcU2R9Ch2bPh3PYFyoHW+w9LqAeYRISVQjUIew14g==}
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
vite: ^3.0.0 || ^4.0.0
|
vite: ^3.0.0 || ^4.0.0
|
||||||
@ -3780,7 +3777,7 @@ packages:
|
|||||||
vite:
|
vite:
|
||||||
optional: true
|
optional: true
|
||||||
dependencies:
|
dependencies:
|
||||||
vite: 4.3.3
|
vite: 4.3.1
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/vm2@3.9.16:
|
/vm2@3.9.16:
|
||||||
@ -3948,9 +3945,9 @@ packages:
|
|||||||
resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
|
resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/yaml@2.2.2:
|
/yaml@1.10.2:
|
||||||
resolution: {integrity: sha512-CBKFWExMn46Foo4cldiChEzn7S7SRV+wqiluAb6xmueD/fGyRHIhX8m14vVGgeFWjN540nKCNVj6P21eQjgTuA==}
|
resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
|
||||||
engines: {node: '>= 14'}
|
engines: {node: '>= 6'}
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/yargs-parser@21.1.1:
|
/yargs-parser@21.1.1:
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
plugins: {
|
plugins: {
|
||||||
tailwindcss: {},
|
tailwindcss: {},
|
||||||
autoprefixer: {},
|
autoprefixer: {}
|
||||||
},
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,10 +1,9 @@
|
|||||||
const config = {
|
const config = {
|
||||||
baseurl: "http://localhost:4010",
|
baseurl: 'http://localhost:4010',
|
||||||
baseurl_documentserver: "http://localhost:4010/documents",
|
baseurl_documentserver: 'http://localhost:4010/documents',
|
||||||
documentserver_key:
|
documentserver_key: 'NqZSYTy5AFQ7MppbLW5moqpTk7u7YrNUHKYhKYuThnnya2WpCOIU694hIZT1FzYe',
|
||||||
"NqZSYTy5AFQ7MppbLW5moqpTk7u7YrNUHKYhKYuThnnya2WpCOIU694hIZT1FzYe",
|
// optional
|
||||||
// optional
|
default_username: 'demo',
|
||||||
default_username: "demo",
|
default_password: 'demo',
|
||||||
default_password: "demo",
|
prefersHashRouting: true
|
||||||
prefersHashRouting: true,
|
|
||||||
};
|
};
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
@ -1,39 +1,34 @@
|
|||||||
{
|
{
|
||||||
"name": "Lauf für Kaya! - Admin",
|
"name": "Lauf für Kaya! - Admin",
|
||||||
"short_name": "LfK!Admin",
|
"short_name": "LfK!Admin",
|
||||||
"start_url": "/?utm_source=pwa",
|
"start_url": "/?utm_source=pwa",
|
||||||
"orientation": "portrait-primary",
|
"orientation": "portrait-primary",
|
||||||
"display": "standalone",
|
"display": "standalone",
|
||||||
"background_color": "#fff",
|
"background_color": "#fff",
|
||||||
"theme_color": "#fff",
|
"theme_color": "#fff",
|
||||||
"description": "Lauf für Kaya! - Admin",
|
"description": "Lauf für Kaya! - Admin",
|
||||||
"shortcuts": [
|
"shortcuts": [
|
||||||
{
|
{
|
||||||
"name": "Users",
|
"name": "Users",
|
||||||
"url": "/users/?utm_source=pwa"
|
"url": "/users/?utm_source=pwa"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"icons": [
|
"icons": [
|
||||||
{
|
{
|
||||||
"src": "/favicon.png",
|
"src": "/favicon.png",
|
||||||
"sizes": "48x48",
|
"sizes": "48x48",
|
||||||
"type": "image/png"
|
"type": "image/png"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"src": "/favicon.png",
|
"src": "/favicon.png",
|
||||||
"sizes": "144x144",
|
"sizes": "144x144",
|
||||||
"type": "image/png"
|
"type": "image/png"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"src": "/lfk-logo.png",
|
"src": "/lfk-logo.png",
|
||||||
"sizes": "1540x144",
|
"sizes": "1540x144",
|
||||||
"type": "image/png"
|
"type": "image/png"
|
||||||
},
|
},
|
||||||
{
|
{ "src": "/maskable_icon_x1.png", "sizes": "750x750", "type": "image/png", "purpose": "any maskable" }
|
||||||
"src": "/maskable_icon_x1.png",
|
]
|
||||||
"sizes": "750x750",
|
|
||||||
"type": "image/png",
|
|
||||||
"purpose": "any maskable"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,4 +1,6 @@
|
|||||||
<script>
|
<script>
|
||||||
|
import "toastify-js/src/toastify.css";
|
||||||
|
import "gridjs/dist/theme/mermaid.css";
|
||||||
import { Route, router } from "tinro";
|
import { Route, router } from "tinro";
|
||||||
router.subscribe((routeInfo) => {
|
router.subscribe((routeInfo) => {
|
||||||
window.scrollTo(0, 0);
|
window.scrollTo(0, 0);
|
||||||
@ -22,10 +24,11 @@
|
|||||||
name: "lfk_admin",
|
name: "lfk_admin",
|
||||||
version: 1.0,
|
version: 1.0,
|
||||||
storeName: "lfk_admin",
|
storeName: "lfk_admin",
|
||||||
description: "LfK! admin dashboard",
|
description: "LfK! admin dashbaord",
|
||||||
});
|
});
|
||||||
window.onunhandledrejection = (event) => {
|
window.onunhandledrejection = (event) => {
|
||||||
if (event.reason.toString() == "Error: Unauthorized") {
|
if (event.reason.toString() == "Error: Unauthorized") {
|
||||||
|
console.log("Found 1");
|
||||||
localForage.clear();
|
localForage.clear();
|
||||||
location.replace("/");
|
location.replace("/");
|
||||||
}
|
}
|
||||||
@ -69,29 +72,29 @@
|
|||||||
import Scans from "./components/scans/Scans.svelte";
|
import Scans from "./components/scans/Scans.svelte";
|
||||||
import ScanDetail from "./components/scans/ScanDetail.svelte";
|
import ScanDetail from "./components/scans/ScanDetail.svelte";
|
||||||
import Cards from "./components/cards/Cards.svelte";
|
import Cards from "./components/cards/Cards.svelte";
|
||||||
import StatsClients from "./components/statsclients/StatsClients.svelte";
|
import StatsClients from "./components/statsclients/StatsClients.svelte";
|
||||||
import StatsClientDetail from "./components/statsclients/StatsClientDetail.svelte";
|
import StatsClientDetail from "./components/statsclients/StatsClientDetail.svelte";
|
||||||
store.init();
|
store.init();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Route>
|
<Route>
|
||||||
{#if $router.path === "/forgot_password"}
|
{#if $router.path === '/forgot_password'}
|
||||||
<Route path="/forgot_password">
|
<Route path="/forgot_password">
|
||||||
<ForgotPassword />
|
<ForgotPassword />
|
||||||
</Route>
|
</Route>
|
||||||
{:else if $router.path.includes("/reset")}
|
{:else if $router.path.includes('/reset')}
|
||||||
<Route path="/reset/:resetkey" let:params>
|
<Route path="/reset/:resetkey" let:params>
|
||||||
<ResetPassword {params} />
|
<ResetPassword {params} />
|
||||||
</Route>
|
</Route>
|
||||||
{:else if $router.path === "/about"}
|
{:else if $router.path === '/about'}
|
||||||
<Route path="/about">
|
<Route path="/about">
|
||||||
<About />
|
<About />
|
||||||
</Route>
|
</Route>
|
||||||
{:else if $router.path === "/imprint"}
|
{:else if $router.path === '/imprint'}
|
||||||
<Route path="/imprint">
|
<Route path="/imprint">
|
||||||
<Imprint />
|
<Imprint />
|
||||||
</Route>
|
</Route>
|
||||||
{:else if $router.path === "/privacy"}
|
{:else if $router.path === '/privacy'}
|
||||||
<Route path="/privacy">
|
<Route path="/privacy">
|
||||||
<Privacy />
|
<Privacy />
|
||||||
</Route>
|
</Route>
|
||||||
|
|||||||
@ -1,22 +1,28 @@
|
|||||||
<script>
|
<script>
|
||||||
import { AuthService } from "@odit/lfk-client-js";
|
import { ApiError, AuthService } from "@odit/lfk-client-js";
|
||||||
import toast from "svelte-french-toast";
|
|
||||||
import { _ } from "svelte-i18n";
|
import { _ } from "svelte-i18n";
|
||||||
|
import Toastify from "toastify-js";
|
||||||
|
import "toastify-js/src/toastify.css";
|
||||||
import isEmail from "validator/es/lib/isEmail";
|
import isEmail from "validator/es/lib/isEmail";
|
||||||
|
|
||||||
let reset_mail_sent = false;
|
let reset_mail_sent = false;
|
||||||
let usersEmail = "";
|
let usersEmail = "";
|
||||||
function reset() {
|
function reset() {
|
||||||
if (isEmail(usersEmail)) {
|
if (isEmail(usersEmail)) {
|
||||||
toast.loading($_("mail-validation-in-progress"));
|
|
||||||
AuthService.authControllerGetResetToken("de", { email: usersEmail })
|
AuthService.authControllerGetResetToken("de", { email: usersEmail })
|
||||||
.then((resp) => {
|
.then((resp) => {
|
||||||
toast.dismiss();
|
Toastify({
|
||||||
|
text: $_("mail-validation-in-progress"),
|
||||||
|
duration: 3500,
|
||||||
|
}).showToast();
|
||||||
reset_mail_sent = true;
|
reset_mail_sent = true;
|
||||||
})
|
})
|
||||||
.catch((err) => {});
|
.catch((err) => {});
|
||||||
} else {
|
} else {
|
||||||
toast($_("invalid-mail-reset"));
|
Toastify({
|
||||||
|
text: $_("invalid-mail-reset"),
|
||||||
|
duration: 3500,
|
||||||
|
}).showToast();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
@ -26,18 +32,17 @@
|
|||||||
<div class="max-w-md w-full py-12 px-6">
|
<div class="max-w-md w-full py-12 px-6">
|
||||||
<img style="height:10rem;" class="mx-auto" src="/lfk-logo.png" alt="" />
|
<img style="height:10rem;" class="mx-auto" src="/lfk-logo.png" alt="" />
|
||||||
<p class="mt-6 text-lg text-center font-bold text-gray-900">
|
<p class="mt-6 text-lg text-center font-bold text-gray-900">
|
||||||
{$_("application_name")}
|
{$_('application_name')}
|
||||||
</p>
|
</p>
|
||||||
<p class="mt-2 mb-2 text-sm text-center text-gray-900">
|
<p class="mt-2 mb-2 text-sm text-center text-gray-900">
|
||||||
{$_("password-reset-mail-sent", { values: { usersEmail: usersEmail } })}
|
{$_('password-reset-mail-sent', { values: { usersEmail: usersEmail } })}
|
||||||
</p>
|
</p>
|
||||||
<div class="mt-6">
|
<div class="mt-6">
|
||||||
<div class="mt-6">
|
<div class="mt-6">
|
||||||
<a
|
<a
|
||||||
href="/"
|
href="/"
|
||||||
class="block w-full text-center py-2 px-3 border border-gray-300 rounded-md text-gray-900 font-medium hover:border-gray-400 focus:outline-none focus:border-gray-400 sm:text-sm"
|
class="block w-full text-center py-2 px-3 border border-gray-300 rounded-md text-gray-900 font-medium hover:border-gray-400 focus:outline-none focus:border-gray-400 sm:text-sm">
|
||||||
>
|
{$_('goback')}
|
||||||
{$_("goback")}
|
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -48,26 +53,25 @@
|
|||||||
<div class="max-w-md w-full py-12 px-6">
|
<div class="max-w-md w-full py-12 px-6">
|
||||||
<img style="height:10rem;" class="mx-auto" src="/lfk-logo.png" alt="" />
|
<img style="height:10rem;" class="mx-auto" src="/lfk-logo.png" alt="" />
|
||||||
<p class="mt-6 text-lg text-center font-bold text-gray-900">
|
<p class="mt-6 text-lg text-center font-bold text-gray-900">
|
||||||
{$_("application_name")}
|
{$_('application_name')}
|
||||||
</p>
|
</p>
|
||||||
<p class="mt-6 text-sm text-center text-gray-900">
|
<p class="mt-6 text-sm text-center text-gray-900">
|
||||||
{$_("forgot_password")}
|
{$_('forgot_password')}
|
||||||
</p>
|
</p>
|
||||||
<p class="mt-2 mb-2 text-sm text-center text-gray-900">
|
<p class="mt-2 mb-2 text-sm text-center text-gray-900">
|
||||||
{$_("dont-panic-were-resetting-it")}
|
{$_('dont-panic-were-resetting-it')}
|
||||||
</p>
|
</p>
|
||||||
<div>
|
<div>
|
||||||
<div class="rounded-md shadow-sm">
|
<div class="rounded-md shadow-sm">
|
||||||
<div>
|
<div>
|
||||||
<input
|
<input
|
||||||
aria-label={$_("e-mail-adress")}
|
aria-label={$_('e-mail-adress')}
|
||||||
name="email"
|
name="email"
|
||||||
type="email"
|
type="email"
|
||||||
required=""
|
required=""
|
||||||
class="border-gray-300 placeholder-gray-500 appearance-none rounded-none relative block w-full px-3 py-2 border text-gray-900 rounded-t-md focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm"
|
class="border-gray-300 placeholder-gray-500 appearance-none rounded-none relative block w-full px-3 py-2 border text-gray-900 rounded-t-md focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm"
|
||||||
placeholder={$_("e-mail-adress")}
|
placeholder={$_('e-mail-adress')}
|
||||||
bind:value={usersEmail}
|
bind:value={usersEmail} />
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -75,22 +79,19 @@
|
|||||||
<button
|
<button
|
||||||
on:click={reset}
|
on:click={reset}
|
||||||
type="submit"
|
type="submit"
|
||||||
class="relative block w-full py-2 px-3 border border-transparent rounded-md text-white font-semibold bg-gray-800 hover:bg-gray-700 focus:bg-gray-900 focus:outline-none focus:shadow-outline sm:text-sm"
|
class="relative block w-full py-2 px-3 border border-transparent rounded-md text-white font-semibold bg-gray-800 hover:bg-gray-700 focus:bg-gray-900 focus:outline-none focus:shadow-outline sm:text-sm">
|
||||||
>
|
|
||||||
<span class="absolute left-0 inset-y pl-3">
|
<span class="absolute left-0 inset-y pl-3">
|
||||||
<svg
|
<svg
|
||||||
class="h-5 w-5 text-gray-500"
|
class="h-5 w-5 text-gray-500"
|
||||||
fill="currentColor"
|
fill="currentColor"
|
||||||
viewBox="0 0 20 20"
|
viewBox="0 0 20 20">
|
||||||
>
|
|
||||||
<path
|
<path
|
||||||
fill-rule="evenodd"
|
fill-rule="evenodd"
|
||||||
d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"
|
d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"
|
||||||
clip-rule="evenodd"
|
clip-rule="evenodd" />
|
||||||
/>
|
|
||||||
</svg>
|
</svg>
|
||||||
</span>
|
</span>
|
||||||
{$_("reset-my-password")}
|
{$_('reset-my-password')}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-6">
|
<div class="mt-6">
|
||||||
@ -99,30 +100,24 @@
|
|||||||
<div class="w-full border-t border-gray-300" />
|
<div class="w-full border-t border-gray-300" />
|
||||||
</div>
|
</div>
|
||||||
<div class="relative flex justify-center text-sm">
|
<div class="relative flex justify-center text-sm">
|
||||||
<span class="px-2 bg-gray-100 text-gray-500"
|
<span
|
||||||
>{$_("dont-have-your-email-connected")}</span
|
class="px-2 bg-gray-100 text-gray-500">{$_('dont-have-your-email-connected')}</span>
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<span
|
<span
|
||||||
class="mt-2 text-sm px-2 bg-gray-100 text-gray-500 justify-center relative flex"
|
class="mt-2 text-sm px-2 bg-gray-100 text-gray-500 justify-center relative flex">{$_('cannot-reset-your-password-directly')}</span>
|
||||||
>{$_("cannot-reset-your-password-directly")}</span
|
|
||||||
>
|
|
||||||
|
|
||||||
<div class="mt-6">
|
<div class="mt-6">
|
||||||
<a
|
<a
|
||||||
href="mailto:lfk@odit.services"
|
href="mailto:lfk@odit.services"
|
||||||
class="block w-full text-center py-2 px-3 border border-gray-300 rounded-md text-gray-900 font-medium hover:border-gray-400 focus:outline-none focus:border-gray-400 sm:text-sm"
|
class="block w-full text-center py-2 px-3 border border-gray-300 rounded-md text-gray-900 font-medium hover:border-gray-400 focus:outline-none focus:border-gray-400 sm:text-sm">
|
||||||
>
|
{$_('send-a-mail-to-lfk-odit-services')}
|
||||||
{$_("send-a-mail-to-lfk-odit-services")}
|
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-6">
|
<div class="mt-6">
|
||||||
<a
|
<a
|
||||||
href="/"
|
href="/"
|
||||||
class="block w-full text-center py-2 px-3 border border-gray-300 rounded-md text-gray-900 font-medium hover:border-gray-400 focus:outline-none focus:border-gray-400 sm:text-sm"
|
class="block w-full text-center py-2 px-3 border border-gray-300 rounded-md text-gray-900 font-medium hover:border-gray-400 focus:outline-none focus:border-gray-400 sm:text-sm">{$_('goback')}</a>
|
||||||
>{$_("goback")}</a
|
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -76,8 +76,8 @@
|
|||||||
>
|
>
|
||||||
<div class="max-w-md w-full py-12 px-6" role="main">
|
<div class="max-w-md w-full py-12 px-6" role="main">
|
||||||
<img style="height:10rem;" class="mx-auto" src="/lfk-logo.png" alt="" />
|
<img style="height:10rem;" class="mx-auto" src="/lfk-logo.png" alt="" />
|
||||||
<p class="mt-6 text-xl text-center font-bold">{$_("application_name")}</p>
|
<p class="mt-6 text-lg text-center font-bold">{$_("application_name")}</p>
|
||||||
<p class="mt-2 mb-6 text-sm text-center">{$_("log_in_to_your_account")}</p>
|
<p class="mt-6 text-sm text-center">{$_("log_in_to_your_account")}</p>
|
||||||
<div>
|
<div>
|
||||||
<div class="rounded-md shadow-sm">
|
<div class="rounded-md shadow-sm">
|
||||||
<div>
|
<div>
|
||||||
@ -129,14 +129,14 @@
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- <div class="mt-2">
|
<div class="mt-2">
|
||||||
<a
|
<a
|
||||||
href="/forgot_password"
|
href="/forgot_password"
|
||||||
class="block w-full text-center py-2 px-3 border border-gray-300 rounded-md font-medium hover:border-gray-400 focus:outline-none focus:border-gray-400 sm:text-sm"
|
class="block w-full text-center py-2 px-3 border border-gray-300 rounded-md font-medium hover:border-gray-400 focus:outline-none focus:border-gray-400 sm:text-sm"
|
||||||
>
|
>
|
||||||
{$_("forgot_password")}
|
{$_("forgot_password")}
|
||||||
</a>
|
</a>
|
||||||
</div> -->
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<Footer />
|
<Footer />
|
||||||
|
|||||||
@ -1,52 +1,52 @@
|
|||||||
<script context="module">
|
<script context="module">
|
||||||
import { passwordStrength } from "check-password-strength";
|
import { passwordStrength } from "check-password-strength";
|
||||||
export function password_strong_enough(password_change) {
|
export function password_strong_enough(password_change) {
|
||||||
let strength = passwordStrength(password_change);
|
let strength = passwordStrength(password_change);
|
||||||
return (
|
return (
|
||||||
strength?.contains.includes("lowercase") &&
|
strength?.contains.includes("lowercase") &&
|
||||||
strength?.contains.includes("uppercase") &&
|
strength?.contains.includes("uppercase") &&
|
||||||
strength?.contains.includes("number") &&
|
strength?.contains.includes("number") &&
|
||||||
strength?.length > 9
|
strength?.length > 9
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
export function password_strong_enough_and_equal(
|
export function password_strong_enough_and_equal(
|
||||||
password_change,
|
password_change,
|
||||||
password_confirm
|
password_confirm
|
||||||
) {
|
) {
|
||||||
return (
|
return (
|
||||||
password_strong_enough(password_change) &&
|
password_strong_enough(password_change) &&
|
||||||
password_change === password_confirm
|
password_change === password_confirm
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { getLocaleFromNavigator, _ } from "svelte-i18n";
|
import { getLocaleFromNavigator, _ } from "svelte-i18n";
|
||||||
import { passwordStrength as Strength } from "check-password-strength";
|
import { passwordStrength as Strength } from "check-password-strength";
|
||||||
export let password_change;
|
export let password_change;
|
||||||
export let password_confirm;
|
export let password_confirm;
|
||||||
|
|
||||||
$: strength = Strength(password_change);
|
$: strength = Strength(password_change);
|
||||||
$: passwords_match =
|
$: passwords_match =
|
||||||
!password_confirm || password_confirm === password_change;
|
!password_confirm || password_confirm === password_change;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="ml-4">
|
<div class="ml-4">
|
||||||
<ul class="list-disc font-medium tracking-wide text-red-500 text-xs">
|
<ul class="list-disc font-medium tracking-wide text-red-500 text-xs">
|
||||||
{#if !strength.contains.includes("lowercase")}
|
{#if !strength.contains.includes('lowercase')}
|
||||||
<li>{$_("must-contain-a-lowercase-letter")}</li>
|
<li>{$_('must-contain-a-lowercase-letter')}</li>
|
||||||
{/if}
|
{/if}
|
||||||
{#if !strength.contains.includes("uppercase")}
|
{#if !strength.contains.includes('uppercase')}
|
||||||
<li>{$_("must-contain-a-uppercase-letter")}</li>
|
<li>{$_('must-contain-a-uppercase-letter')}</li>
|
||||||
{/if}
|
{/if}
|
||||||
{#if !strength.contains.includes("number")}
|
{#if !strength.contains.includes('number')}
|
||||||
<li>{$_("must-contain-a-number")}</li>
|
<li>{$_('must-contain-a-number')}</li>
|
||||||
{/if}
|
{/if}
|
||||||
{#if !(strength.length > 9)}
|
{#if !(strength.length > 9)}
|
||||||
<li>{$_("must-be-at-least-10-characters-long")}</li>
|
<li>{$_('must-be-at-least-10-characters-long')}</li>
|
||||||
{/if}
|
{/if}
|
||||||
{#if !(passwords_match == true)}
|
{#if !(passwords_match == true)}
|
||||||
<li>{$_("passwords-dont-match")}</li>
|
<li>{$_('passwords-dont-match')}</li>
|
||||||
{/if}
|
{/if}
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,7 +1,8 @@
|
|||||||
<script>
|
<script>
|
||||||
import { AuthService } from "@odit/lfk-client-js";
|
import { AuthService } from "@odit/lfk-client-js";
|
||||||
import { _ } from "svelte-i18n";
|
import { _ } from "svelte-i18n";
|
||||||
import toast from "svelte-french-toast";
|
import Toastify from "toastify-js";
|
||||||
|
import "toastify-js/src/toastify.css";
|
||||||
import PasswordStrength, {
|
import PasswordStrength, {
|
||||||
password_strong_enough,
|
password_strong_enough,
|
||||||
} from "../auth/PasswordStrength.svelte";
|
} from "../auth/PasswordStrength.svelte";
|
||||||
@ -10,97 +11,101 @@
|
|||||||
export let params;
|
export let params;
|
||||||
function set_new_password() {
|
function set_new_password() {
|
||||||
if (password.trim() !== "") {
|
if (password.trim() !== "") {
|
||||||
toast.loading($_("password-reset-in-progress"));
|
Toastify({
|
||||||
|
text: $_("password-reset-in-progress"),
|
||||||
|
duration: 3500,
|
||||||
|
}).showToast();
|
||||||
AuthService.authControllerResetPassword(atob(params.resetkey), {
|
AuthService.authControllerResetPassword(atob(params.resetkey), {
|
||||||
password,
|
password,
|
||||||
})
|
})
|
||||||
.then((resp) => {
|
.then((resp) => {
|
||||||
toast.dismiss();
|
Toastify({
|
||||||
toast($_("password-reset-successful"));
|
text: $_("password-reset-successful"),
|
||||||
|
duration: 3500,
|
||||||
|
}).showToast();
|
||||||
state = "reset_success";
|
state = "reset_success";
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
state = "reset_error";
|
state = "reset_error";
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
toast.dismiss();
|
Toastify({
|
||||||
toast.error($_("please-provide-a-password"));
|
text: $_("please-provide-a-password"),
|
||||||
|
duration: 3500,
|
||||||
|
}).showToast();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if state === "reset_success"}
|
{#if state === 'reset_success'}
|
||||||
<div class="min-h-screen flex items-center justify-center bg-gray-100">
|
<div class="min-h-screen flex items-center justify-center bg-gray-100">
|
||||||
<div class="max-w-md w-full py-12 px-6">
|
<div class="max-w-md w-full py-12 px-6">
|
||||||
<img style="height:10rem;" class="mx-auto" src="/lfk-logo.png" alt="" />
|
<img style="height:10rem;" class="mx-auto" src="/lfk-logo.png" alt="" />
|
||||||
<p class="mt-6 text-lg text-center font-bold text-gray-900">
|
<p class="mt-6 text-lg text-center font-bold text-gray-900">
|
||||||
{$_("application_name")}
|
{$_('application_name')}
|
||||||
</p>
|
</p>
|
||||||
<p class="mt-2 mb-2 text-sm text-center text-gray-900 font-bold">
|
<p class="mt-2 mb-2 text-sm text-center text-gray-900 font-bold">
|
||||||
{$_("successful-password-reset")}
|
{$_('successful-password-reset')}
|
||||||
</p>
|
</p>
|
||||||
<p class="mt-2 mb-2 text-sm text-center text-gray-900">
|
<p class="mt-2 mb-2 text-sm text-center text-gray-900">
|
||||||
{$_("you-can-now-use-your-new-password-to-log-in-to-your-account")}
|
{$_('you-can-now-use-your-new-password-to-log-in-to-your-account')}
|
||||||
</p>
|
</p>
|
||||||
<div class="mt-6">
|
<div class="mt-6">
|
||||||
<div class="mt-6">
|
<div class="mt-6">
|
||||||
<a
|
<a
|
||||||
href="/login/"
|
href="/login/"
|
||||||
class="text-center relative block w-full py-2 px-3 border border-transparent rounded-md text-white font-semibold bg-gray-800 hover:bg-gray-700 focus:bg-gray-900 focus:outline-none focus:shadow-outline sm:text-sm"
|
class="text-center relative block w-full py-2 px-3 border border-transparent rounded-md text-white font-semibold bg-gray-800 hover:bg-gray-700 focus:bg-gray-900 focus:outline-none focus:shadow-outline sm:text-sm">
|
||||||
>
|
{$_('go-to-login')}
|
||||||
{$_("go-to-login")}
|
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{:else if state === "reset_error"}
|
{:else if state === 'reset_error'}
|
||||||
<div class="min-h-screen flex items-center justify-center bg-gray-100">
|
<div class="min-h-screen flex items-center justify-center bg-gray-100">
|
||||||
<div class="max-w-md w-full py-12 px-6">
|
<div class="max-w-md w-full py-12 px-6">
|
||||||
<img style="height:10rem;" class="mx-auto" src="/lfk-logo.png" alt="" />
|
<img style="height:10rem;" class="mx-auto" src="/lfk-logo.png" alt="" />
|
||||||
<p class="mt-6 text-lg text-center font-bold text-gray-900">
|
<p class="mt-6 text-lg text-center font-bold text-gray-900">
|
||||||
{$_("application_name")}
|
{$_('application_name')}
|
||||||
</p>
|
</p>
|
||||||
<p class="mt-2 mb-2 text-sm text-center text-gray-900 font-bold">
|
<p class="mt-2 mb-2 text-sm text-center text-gray-900 font-bold">
|
||||||
{$_("password-reset-failed")}
|
{$_('password-reset-failed')}
|
||||||
</p>
|
</p>
|
||||||
<p class="mt-2 mb-2 text-sm text-center text-gray-900">
|
<p class="mt-2 mb-2 text-sm text-center text-gray-900">
|
||||||
{$_("please-request-a-new-reset-mail")}
|
{$_('please-request-a-new-reset-mail')}
|
||||||
</p>
|
</p>
|
||||||
<div class="mt-6">
|
<div class="mt-6">
|
||||||
<div class="mt-6">
|
<div class="mt-6">
|
||||||
<a
|
<a
|
||||||
href="/forgot_password/"
|
href="/forgot_password/"
|
||||||
class="text-center relative block w-full py-2 px-3 border border-transparent rounded-md text-white font-semibold bg-gray-800 hover:bg-gray-700 focus:bg-gray-900 focus:outline-none focus:shadow-outline sm:text-sm"
|
class="text-center relative block w-full py-2 px-3 border border-transparent rounded-md text-white font-semibold bg-gray-800 hover:bg-gray-700 focus:bg-gray-900 focus:outline-none focus:shadow-outline sm:text-sm">
|
||||||
>
|
{$_('request-a-new-reset-mail')}
|
||||||
{$_("request-a-new-reset-mail")}
|
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{:else if state === "reset_in_progress"}
|
{:else if state === 'reset_in_progress'}
|
||||||
<div class="min-h-screen flex items-center justify-center bg-gray-100">
|
<div class="min-h-screen flex items-center justify-center bg-gray-100">
|
||||||
<div class="max-w-md w-full py-12 px-6">
|
<div class="max-w-md w-full py-12 px-6">
|
||||||
<img style="height:10rem;" class="mx-auto" src="/lfk-logo.png" alt="" />
|
<img style="height:10rem;" class="mx-auto" src="/lfk-logo.png" alt="" />
|
||||||
<p class="mt-6 text-lg text-center font-bold text-gray-900">
|
<p class="mt-6 text-lg text-center font-bold text-gray-900">
|
||||||
{$_("application_name")}
|
{$_('application_name')}
|
||||||
</p>
|
</p>
|
||||||
<p class="mt-2 mb-4 text-md text-center text-gray-900">
|
<p class="mt-2 mb-4 text-md text-center text-gray-900">
|
||||||
{$_("reset-password")}
|
{$_('reset-password')}
|
||||||
</p>
|
</p>
|
||||||
<div>
|
<div>
|
||||||
<div class="rounded-md shadow-sm">
|
<div class="rounded-md shadow-sm">
|
||||||
<div>
|
<div>
|
||||||
<input
|
<input
|
||||||
aria-label={$_("new-password")}
|
aria-label={$_('new-password')}
|
||||||
name="password"
|
name="password"
|
||||||
type="password"
|
type="password"
|
||||||
required=""
|
required=""
|
||||||
class="border-gray-300 placeholder-gray-500 appearance-none rounded-md relative block w-full px-3 py-2 border text-gray-900 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm"
|
class="border-gray-300 placeholder-gray-500 appearance-none rounded-md relative block w-full px-3 py-2 border text-gray-900 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm"
|
||||||
placeholder={$_("new-password")}
|
placeholder={$_('new-password')}
|
||||||
bind:value={password}
|
bind:value={password} />
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<PasswordStrength bind:password_change={password} />
|
<PasswordStrength bind:password_change={password} />
|
||||||
</div>
|
</div>
|
||||||
@ -111,22 +116,19 @@
|
|||||||
disabled={!password_strong_enough(password)}
|
disabled={!password_strong_enough(password)}
|
||||||
class:opacity-50={!password_strong_enough(password)}
|
class:opacity-50={!password_strong_enough(password)}
|
||||||
type="submit"
|
type="submit"
|
||||||
class="relative block w-full py-2 px-3 border border-transparent rounded-md text-white font-semibold bg-gray-800 hover:bg-gray-700 focus:bg-gray-900 focus:outline-none focus:shadow-outline sm:text-sm"
|
class="relative block w-full py-2 px-3 border border-transparent rounded-md text-white font-semibold bg-gray-800 hover:bg-gray-700 focus:bg-gray-900 focus:outline-none focus:shadow-outline sm:text-sm">
|
||||||
>
|
|
||||||
<span class="absolute left-0 inset-y pl-3">
|
<span class="absolute left-0 inset-y pl-3">
|
||||||
<svg
|
<svg
|
||||||
class="h-5 w-5 text-gray-500"
|
class="h-5 w-5 text-gray-500"
|
||||||
fill="currentColor"
|
fill="currentColor"
|
||||||
viewBox="0 0 20 20"
|
viewBox="0 0 20 20">
|
||||||
>
|
|
||||||
<path
|
<path
|
||||||
fill-rule="evenodd"
|
fill-rule="evenodd"
|
||||||
d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"
|
d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"
|
||||||
clip-rule="evenodd"
|
clip-rule="evenodd" />
|
||||||
/>
|
|
||||||
</svg>
|
</svg>
|
||||||
</span>
|
</span>
|
||||||
{$_("reset-my-password")}
|
{$_('reset-my-password')}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
274
src/components/base/FormLayout.svelte
Normal file
274
src/components/base/FormLayout.svelte
Normal file
@ -0,0 +1,274 @@
|
|||||||
|
<!--
|
||||||
|
This example requires Tailwind CSS v2.0+
|
||||||
|
|
||||||
|
This example requires some changes to your config:
|
||||||
|
|
||||||
|
```
|
||||||
|
// tailwind.config.js
|
||||||
|
module.exports = {
|
||||||
|
// ...
|
||||||
|
plugins: [
|
||||||
|
// ...
|
||||||
|
require('@tailwindcss/forms'),
|
||||||
|
]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
-->
|
||||||
|
<div>
|
||||||
|
<div class="md:grid md:grid-cols-3 md:gap-6">
|
||||||
|
<div class="md:col-span-1">
|
||||||
|
<div class="px-4 sm:px-0">
|
||||||
|
<h3 class="text-lg font-medium leading-6 text-gray-900">Profile</h3>
|
||||||
|
<p class="mt-1 text-sm text-gray-600">
|
||||||
|
This information will be displayed publicly so be careful what you share.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mt-5 md:mt-0 md:col-span-2">
|
||||||
|
<form action="#" method="POST">
|
||||||
|
<div class="shadow sm:rounded-md sm:overflow-hidden">
|
||||||
|
<div class="px-4 py-5 bg-white space-y-6 sm:p-6">
|
||||||
|
<div class="grid grid-cols-3 gap-6">
|
||||||
|
<div class="col-span-3 sm:col-span-2">
|
||||||
|
<label for="company_website" class="block text-sm font-medium text-gray-700">
|
||||||
|
Website
|
||||||
|
</label>
|
||||||
|
<div class="mt-1 flex rounded-md shadow-sm">
|
||||||
|
<span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 text-sm">
|
||||||
|
http://
|
||||||
|
</span>
|
||||||
|
<input type="text" name="company_website" id="company_website" class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-r-md sm:text-sm border-gray-300" placeholder="www.example.com">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="about" class="block text-sm font-medium text-gray-700">
|
||||||
|
About
|
||||||
|
</label>
|
||||||
|
<div class="mt-1">
|
||||||
|
<textarea id="about" name="about" rows="3" class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 mt-1 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="you@example.com"></textarea>
|
||||||
|
</div>
|
||||||
|
<p class="mt-2 text-sm text-gray-500">
|
||||||
|
Brief description for your profile. URLs are hyperlinked.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<!-- svelte-ignore a11y-label-has-associated-control -->
|
||||||
|
<label class="block text-sm font-medium text-gray-700">
|
||||||
|
Photo
|
||||||
|
</label>
|
||||||
|
<div class="mt-2 flex items-center">
|
||||||
|
<span class="inline-block h-12 w-12 rounded-full overflow-hidden bg-gray-100">
|
||||||
|
<svg class="h-full w-full text-gray-300" fill="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" />
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<button type="button" class="ml-5 bg-white py-2 px-3 border border-gray-300 rounded-md shadow-sm text-sm leading-4 font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
||||||
|
Change
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<!-- svelte-ignore a11y-label-has-associated-control -->
|
||||||
|
<label class="block text-sm font-medium text-gray-700">
|
||||||
|
Cover photo
|
||||||
|
</label>
|
||||||
|
<div class="mt-2 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md">
|
||||||
|
<div class="space-y-1 text-center">
|
||||||
|
<svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true">
|
||||||
|
<path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||||
|
</svg>
|
||||||
|
<div class="flex text-sm text-gray-600">
|
||||||
|
<label for="file-upload" class="relative cursor-pointer bg-white rounded-md font-medium text-indigo-600 hover:text-indigo-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500">
|
||||||
|
<span>Upload a file</span>
|
||||||
|
<input id="file-upload" name="file-upload" type="file" class="sr-only">
|
||||||
|
</label>
|
||||||
|
<p class="pl-1">or drag and drop</p>
|
||||||
|
</div>
|
||||||
|
<p class="text-xs text-gray-500">
|
||||||
|
PNG, JPG, GIF up to 10MB
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
|
||||||
|
<button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
||||||
|
Save
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="hidden sm:block" aria-hidden="true">
|
||||||
|
<div class="py-5">
|
||||||
|
<div class="border-t border-gray-200"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-10 sm:mt-0">
|
||||||
|
<div class="md:grid md:grid-cols-3 md:gap-6">
|
||||||
|
<div class="md:col-span-1">
|
||||||
|
<div class="px-4 sm:px-0">
|
||||||
|
<h3 class="text-lg font-medium leading-6 text-gray-900">Personal Information</h3>
|
||||||
|
<p class="mt-1 text-sm text-gray-600">
|
||||||
|
Use a permanent address where you can receive mail.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mt-5 md:mt-0 md:col-span-2">
|
||||||
|
<form action="#" method="POST">
|
||||||
|
<div class="shadow overflow-hidden sm:rounded-md">
|
||||||
|
<div class="px-4 py-5 bg-white sm:p-6">
|
||||||
|
<div class="grid grid-cols-6 gap-6">
|
||||||
|
<div class="col-span-6 sm:col-span-3">
|
||||||
|
<label for="first_name" class="block text-sm font-medium text-gray-700">First name</label>
|
||||||
|
<input type="text" name="first_name" id="first_name" autocomplete="given-name" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-span-6 sm:col-span-3">
|
||||||
|
<label for="last_name" class="block text-sm font-medium text-gray-700">Last name</label>
|
||||||
|
<input type="text" name="last_name" id="last_name" autocomplete="family-name" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-span-6 sm:col-span-4">
|
||||||
|
<label for="email_address" class="block text-sm font-medium text-gray-700">Email address</label>
|
||||||
|
<input type="text" name="email_address" id="email_address" autocomplete="email" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-span-6 sm:col-span-3">
|
||||||
|
<label for="country" class="block text-sm font-medium text-gray-700">Country / Region</label>
|
||||||
|
<select id="country" name="country" autocomplete="country" class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
|
||||||
|
<option>United States</option>
|
||||||
|
<option>Canada</option>
|
||||||
|
<option>Mexico</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-span-6">
|
||||||
|
<label for="street_address" class="block text-sm font-medium text-gray-700">Street address</label>
|
||||||
|
<input type="text" name="street_address" id="street_address" autocomplete="street-address" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-span-6 sm:col-span-6 lg:col-span-2">
|
||||||
|
<label for="city" class="block text-sm font-medium text-gray-700">City</label>
|
||||||
|
<input type="text" name="city" id="city" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-span-6 sm:col-span-3 lg:col-span-2">
|
||||||
|
<label for="state" class="block text-sm font-medium text-gray-700">State / Province</label>
|
||||||
|
<input type="text" name="state" id="state" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-span-6 sm:col-span-3 lg:col-span-2">
|
||||||
|
<label for="postal_code" class="block text-sm font-medium text-gray-700">ZIP / Postal</label>
|
||||||
|
<input type="text" name="postal_code" id="postal_code" autocomplete="postal-code" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
|
||||||
|
<button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
||||||
|
Save
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="hidden sm:block" aria-hidden="true">
|
||||||
|
<div class="py-5">
|
||||||
|
<div class="border-t border-gray-200"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-10 sm:mt-0">
|
||||||
|
<div class="md:grid md:grid-cols-3 md:gap-6">
|
||||||
|
<div class="md:col-span-1">
|
||||||
|
<div class="px-4 sm:px-0">
|
||||||
|
<h3 class="text-lg font-medium leading-6 text-gray-900">Notifications</h3>
|
||||||
|
<p class="mt-1 text-sm text-gray-600">
|
||||||
|
Decide which communications you'd like to receive and how.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mt-5 md:mt-0 md:col-span-2">
|
||||||
|
<form action="#" method="POST">
|
||||||
|
<div class="shadow overflow-hidden sm:rounded-md">
|
||||||
|
<div class="px-4 py-5 bg-white space-y-6 sm:p-6">
|
||||||
|
<fieldset>
|
||||||
|
<legend class="text-base font-medium text-gray-900">By Email</legend>
|
||||||
|
<div class="mt-4 space-y-4">
|
||||||
|
<div class="flex items-start">
|
||||||
|
<div class="flex items-center h-5">
|
||||||
|
<input id="comments" name="comments" type="checkbox" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
|
||||||
|
</div>
|
||||||
|
<div class="ml-3 text-sm">
|
||||||
|
<label for="comments" class="font-medium text-gray-700">Comments</label>
|
||||||
|
<p class="text-gray-500">Get notified when someones posts a comment on a posting.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start">
|
||||||
|
<div class="flex items-center h-5">
|
||||||
|
<input id="candidates" name="candidates" type="checkbox" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
|
||||||
|
</div>
|
||||||
|
<div class="ml-3 text-sm">
|
||||||
|
<label for="candidates" class="font-medium text-gray-700">Candidates</label>
|
||||||
|
<p class="text-gray-500">Get notified when a candidate applies for a job.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start">
|
||||||
|
<div class="flex items-center h-5">
|
||||||
|
<input id="offers" name="offers" type="checkbox" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
|
||||||
|
</div>
|
||||||
|
<div class="ml-3 text-sm">
|
||||||
|
<label for="offers" class="font-medium text-gray-700">Offers</label>
|
||||||
|
<p class="text-gray-500">Get notified when a candidate accepts or rejects an offer.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
<fieldset>
|
||||||
|
<div>
|
||||||
|
<legend class="text-base font-medium text-gray-900">Push Notifications</legend>
|
||||||
|
<p class="text-sm text-gray-500">These are delivered via SMS to your mobile phone.</p>
|
||||||
|
</div>
|
||||||
|
<div class="mt-4 space-y-4">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input id="push_everything" name="push_notifications" type="radio" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
|
||||||
|
<label for="push_everything" class="ml-3 block text-sm font-medium text-gray-700">
|
||||||
|
Everything
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input id="push_email" name="push_notifications" type="radio" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
|
||||||
|
<label for="push_email" class="ml-3 block text-sm font-medium text-gray-700">
|
||||||
|
Same as email
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input id="push_nothing" name="push_notifications" type="radio" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
|
||||||
|
<label for="push_nothing" class="ml-3 block text-sm font-medium text-gray-700">
|
||||||
|
No push notifications
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
</div>
|
||||||
|
<div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
|
||||||
|
<button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
||||||
|
Save
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@ -4,22 +4,19 @@
|
|||||||
|
|
||||||
<body class="antialiased font-sans">
|
<body class="antialiased font-sans">
|
||||||
<div class="flex min-h-screen">
|
<div class="flex min-h-screen">
|
||||||
<div class="w-full bg-white flex items-center justify-center">
|
<div class="w-full bg-white flex items-center justify-center ">
|
||||||
<div class="max-w-sm m-8">
|
<div class="max-w-sm m-8">
|
||||||
<div class="text-black text-5xl md:text-15xl font-black">
|
<div class="text-black text-5xl md:text-15xl font-black">
|
||||||
{$_("internal-error")}
|
{$_('internal-error')}
|
||||||
</div>
|
</div>
|
||||||
<div class="w-16 h-1 bg-purple-light my-3 md:my-6" />
|
<div class="w-16 h-1 bg-purple-light my-3 md:my-6" />
|
||||||
<p
|
<p
|
||||||
class="text-grey-darker text-2xl md:text-3xl font-light mb-8 leading-normal"
|
class="text-grey-darker text-2xl md:text-3xl font-light mb-8 leading-normal">
|
||||||
>
|
{$_('generic-ui-logic-error')}
|
||||||
{$_("generic-ui-logic-error")}
|
|
||||||
</p>
|
</p>
|
||||||
<a
|
<a
|
||||||
href="/"
|
href="/"
|
||||||
class="bg-transparent text-grey-darkest font-bold uppercase tracking-wide py-3 px-6 border-2 border-grey-light hover:border-grey rounded-lg"
|
class="bg-transparent text-grey-darkest font-bold uppercase tracking-wide py-3 px-6 border-2 border-grey-light hover:border-grey rounded-lg">{$_('goback')}</a>
|
||||||
>{$_("goback")}</a
|
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -5,7 +5,7 @@
|
|||||||
|
|
||||||
<div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
|
<div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
|
||||||
<span class="inline-block align-middle mr-8">
|
<span class="inline-block align-middle mr-8">
|
||||||
<b class="capitalize">{$_("general_promise_error")}</b>
|
<b class="capitalize">{$_('general_promise_error')}</b>
|
||||||
{error}
|
{error}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,25 +1,24 @@
|
|||||||
export function getlang(langkeys) {
|
export function getlang(langkeys) {
|
||||||
return {
|
return {
|
||||||
search: {
|
search: {
|
||||||
placeholder: langkeys.search,
|
placeholder: langkeys.search
|
||||||
},
|
},
|
||||||
sort: {
|
sort: {
|
||||||
sortAsc: langkeys.sort_column_ascending,
|
sortAsc: langkeys.sort_column_ascending,
|
||||||
sortDesc: langkeys.sort_column_descending,
|
sortDesc: langkeys.sort_column_descending
|
||||||
},
|
},
|
||||||
pagination: {
|
pagination: {
|
||||||
previous: langkeys.previous,
|
previous: langkeys.previous,
|
||||||
next: langkeys.next,
|
next: langkeys.next,
|
||||||
navigate: (page, pages) =>
|
navigate: (page, pages) => `${langkeys.page} ${page} ${langkeys.of} ${pages}`,
|
||||||
`${langkeys.page} ${page} ${langkeys.of} ${pages}`,
|
page: (page) => `${langkeys.page} ${page}`,
|
||||||
page: (page) => `${langkeys.page} ${page}`,
|
showing: langkeys.showing,
|
||||||
showing: langkeys.showing,
|
of: langkeys.of,
|
||||||
of: langkeys.of,
|
to: langkeys.to,
|
||||||
to: langkeys.to,
|
results: langkeys.records
|
||||||
results: langkeys.records,
|
},
|
||||||
},
|
loading: langkeys.loading,
|
||||||
loading: langkeys.loading,
|
noRecordsFound: langkeys.no_matching_records_found,
|
||||||
noRecordsFound: langkeys.no_matching_records_found,
|
error: langkeys.an_error_happened_while_fetching_the_data
|
||||||
error: langkeys.an_error_happened_while_fetching_the_data,
|
};
|
||||||
};
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -3,4 +3,4 @@
|
|||||||
Or as others may call it: Real big bullshit time.
|
Or as others may call it: Real big bullshit time.
|
||||||
Issue: https://git.odit.services/lfk/frontend/issues/136
|
Issue: https://git.odit.services/lfk/frontend/issues/136
|
||||||
-->
|
-->
|
||||||
<div class="opacity-50" />
|
<div class="opacity-50"></div>
|
||||||
@ -1,10 +1,10 @@
|
|||||||
/** Dispatch event on click outside of node */
|
/** Dispatch event on click outside of node */
|
||||||
export function clickOutside(node) {
|
export function clickOutside(node) {
|
||||||
const handleClick = (event) => {
|
const handleClick = (event) => {
|
||||||
if (event.target.getAttribute("data-id") === "modal_backdrop") {
|
if (event.target.getAttribute('data-id') === 'modal_backdrop') {
|
||||||
node.dispatchEvent(new CustomEvent("click_outside", node));
|
node.dispatchEvent(new CustomEvent('click_outside', node));
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
document.removeEventListener("click", handleClick, true);
|
document.removeEventListener('click', handleClick, true);
|
||||||
document.addEventListener("click", handleClick, true);
|
document.addEventListener('click', handleClick, true);
|
||||||
}
|
}
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
@ -3,9 +3,12 @@
|
|||||||
import { clickOutside } from "../base/outsideclick";
|
import { clickOutside } from "../base/outsideclick";
|
||||||
|
|
||||||
import { RunnerCardService } from "@odit/lfk-client-js";
|
import { RunnerCardService } from "@odit/lfk-client-js";
|
||||||
|
import Toastify from "toastify-js";
|
||||||
import { createEventDispatcher } from "svelte";
|
import { createEventDispatcher } from "svelte";
|
||||||
import toast from "svelte-french-toast";
|
|
||||||
export let bulk_modal_open;
|
export let bulk_modal_open;
|
||||||
|
function focus(el) {
|
||||||
|
el.focus();
|
||||||
|
}
|
||||||
const dispatch = createEventDispatcher();
|
const dispatch = createEventDispatcher();
|
||||||
|
|
||||||
$: card_count = 0;
|
$: card_count = 0;
|
||||||
@ -29,20 +32,28 @@
|
|||||||
function submit_without_print() {
|
function submit_without_print() {
|
||||||
if (processed_last_submit === true) {
|
if (processed_last_submit === true) {
|
||||||
processed_last_submit = false;
|
processed_last_submit = false;
|
||||||
toast.loading($_("creating-blanco-cards"));
|
const toast = Toastify({
|
||||||
|
text: $_("creating-blanco-cards"),
|
||||||
|
duration: -1,
|
||||||
|
}).showToast();
|
||||||
RunnerCardService.runnerCardControllerPostBlancoBulk(card_count, true)
|
RunnerCardService.runnerCardControllerPostBlancoBulk(card_count, true)
|
||||||
.then((result) => {
|
.then((result) => {
|
||||||
bulk_modal_open = false;
|
bulk_modal_open = false;
|
||||||
//
|
//
|
||||||
toast.dismiss();
|
Toastify({
|
||||||
toast.success($_("created-blanco-cards"));
|
text: $_("created-blanco-cards"),
|
||||||
dispatch("created", { cards: result });
|
duration: 500,
|
||||||
|
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||||
|
}).showToast();
|
||||||
|
dispatch("created", {cards: result})
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
//
|
//
|
||||||
})
|
})
|
||||||
.finally(() => {
|
.finally(() => {
|
||||||
processed_last_submit = true;
|
processed_last_submit = true;
|
||||||
|
//
|
||||||
|
toast.hideToast();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -50,16 +61,24 @@
|
|||||||
function submit_with_print() {
|
function submit_with_print() {
|
||||||
if (processed_last_submit === true) {
|
if (processed_last_submit === true) {
|
||||||
processed_last_submit = false;
|
processed_last_submit = false;
|
||||||
toast.dismiss();
|
const toast = Toastify({
|
||||||
toast.loading($_("creating-blanco-cards"));
|
text: $_("creating-blanco-cards"),
|
||||||
|
duration: -1,
|
||||||
|
}).showToast();
|
||||||
RunnerCardService.runnerCardControllerPostBlancoBulk(card_count, true)
|
RunnerCardService.runnerCardControllerPostBlancoBulk(card_count, true)
|
||||||
.then((result) => {
|
.then((result) => {
|
||||||
bulk_modal_open = false;
|
bulk_modal_open = false;
|
||||||
//
|
//
|
||||||
toast.dismiss();
|
Toastify({
|
||||||
toast.success($_("created-blanco-cards"));
|
text: $_("created-blanco-cards"),
|
||||||
toast.loading($_("generating-pdf"));
|
duration: 500,
|
||||||
dispatch("created", { cards: result });
|
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||||
|
}).showToast();
|
||||||
|
const toast = Toastify({
|
||||||
|
text: $_("generating-pdf"),
|
||||||
|
duration: -1,
|
||||||
|
}).showToast();
|
||||||
|
dispatch("created", {cards: result})
|
||||||
fetch(
|
fetch(
|
||||||
`${config.baseurl_documentserver}/cards?&download=true&key=${config.documentserver_key}`,
|
`${config.baseurl_documentserver}/cards?&download=true&key=${config.documentserver_key}`,
|
||||||
{
|
{
|
||||||
@ -72,8 +91,13 @@
|
|||||||
)
|
)
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
if (response.status != "200") {
|
if (response.status != "200") {
|
||||||
toast.dismiss();
|
toast.hideToast();
|
||||||
toast.error($_("pdf-generation-failed"));
|
Toastify({
|
||||||
|
text: $_("pdf-generation-failed"),
|
||||||
|
duration: 3500,
|
||||||
|
backgroundColor:
|
||||||
|
"linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
|
||||||
|
}).showToast();
|
||||||
} else {
|
} else {
|
||||||
return response.blob();
|
return response.blob();
|
||||||
}
|
}
|
||||||
@ -86,8 +110,12 @@
|
|||||||
document.body.appendChild(a);
|
document.body.appendChild(a);
|
||||||
a.click();
|
a.click();
|
||||||
a.remove();
|
a.remove();
|
||||||
toast.dismiss();
|
toast.hideToast();
|
||||||
toast.success($_("pdf-successfully-generated"));
|
Toastify({
|
||||||
|
text: $_("pdf-successfully-generated"),
|
||||||
|
duration: 3500,
|
||||||
|
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||||
|
}).showToast();
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
console.error(err);
|
console.error(err);
|
||||||
@ -98,6 +126,8 @@
|
|||||||
})
|
})
|
||||||
.finally(() => {
|
.finally(() => {
|
||||||
processed_last_submit = true;
|
processed_last_submit = true;
|
||||||
|
//
|
||||||
|
toast.hideToast();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -106,67 +136,55 @@
|
|||||||
{#if bulk_modal_open}
|
{#if bulk_modal_open}
|
||||||
<div
|
<div
|
||||||
class="fixed z-10 inset-0 overflow-y-auto"
|
class="fixed z-10 inset-0 overflow-y-auto"
|
||||||
|
|
||||||
use:clickOutside
|
use:clickOutside
|
||||||
on:click_outside={() => {
|
on:click_outside={() => {
|
||||||
bulk_modal_open = false;
|
bulk_modal_open = false;
|
||||||
}}
|
}}>
|
||||||
>
|
|
||||||
<div
|
<div
|
||||||
class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
|
class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
|
||||||
>
|
|
||||||
<div class="fixed inset-0 transition-opacity" aria-hidden="true">
|
<div class="fixed inset-0 transition-opacity" aria-hidden="true">
|
||||||
<div
|
<div
|
||||||
class="absolute inset-0 bg-gray-500 opacity-75"
|
class="absolute inset-0 bg-gray-500 opacity-75"
|
||||||
data-id="modal_backdrop"
|
data-id="modal_backdrop" />
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<span
|
<span
|
||||||
class="hidden sm:inline-block sm:align-middle sm:h-screen"
|
class="hidden sm:inline-block sm:align-middle sm:h-screen"
|
||||||
aria-hidden="true">​</span
|
aria-hidden="true">​</span>
|
||||||
>
|
|
||||||
<div
|
<div
|
||||||
class="inline-block align-bottom bg-white rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full"
|
class="inline-block align-bottom bg-white rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full"
|
||||||
role="dialog"
|
role="dialog"
|
||||||
aria-modal="true"
|
aria-modal="true"
|
||||||
aria-labelledby="modal-headline"
|
aria-labelledby="modal-headline">
|
||||||
>
|
|
||||||
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
||||||
<div class="sm:flex sm:items-start">
|
<div class="sm:flex sm:items-start">
|
||||||
<div
|
<div
|
||||||
class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w- rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
|
class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w- rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
|
||||||
>
|
|
||||||
<svg
|
<svg
|
||||||
class="h-6 w-6 text-blue-600"
|
class="h-6 w-6 text-blue-600"
|
||||||
fill="currentColor"
|
fill="currentColor"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
width="24"
|
width="24"
|
||||||
height="24"
|
height="24"><path fill="none" d="M0 0h24v24H0z" />
|
||||||
><path fill="none" d="M0 0h24v24H0z" />
|
|
||||||
<path
|
<path
|
||||||
fill="currentColor"
|
fill="currentColor"
|
||||||
d="M22 10v10a1 1 0 01-1 1H3a1 1 0 01-1-1V10h20zm0-2H2V4a1 1 0 011-1h18a1 1 0 011 1v4zm-7 8v2h4v-2h-4z"
|
d="M22 10v10a1 1 0 01-1 1H3a1 1 0 01-1-1V10h20zm0-2H2V4a1 1 0 011-1h18a1 1 0 011 1v4zm-7 8v2h4v-2h-4z" /></svg>
|
||||||
/></svg
|
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
|
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
|
||||||
<h3 class="text-lg leading-6 font-medium text-gray-900">
|
<h3 class="text-lg leading-6 font-medium text-gray-900">
|
||||||
{$_("create-bulk-blanco-cards")}
|
{$_('create-bulk-blanco-cards')}
|
||||||
</h3>
|
</h3>
|
||||||
<div class="mt-2 mb-6">
|
<div class="mt-2 mb-6">
|
||||||
<p class="text-sm text-gray-500">
|
<p class="text-sm text-gray-500">
|
||||||
{$_(
|
{$_('just-enter-how-many-you-want-and-the-system-will-create-them')}
|
||||||
"just-enter-how-many-you-want-and-the-system-will-create-them"
|
|
||||||
)}
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="grid grid-cols-6 gap-6">
|
<div class="grid grid-cols-6 gap-6">
|
||||||
<div class="col-span-6">
|
<div class="col-span-6">
|
||||||
<label
|
<label
|
||||||
for="amount"
|
for="amount"
|
||||||
class="block text-sm font-medium text-gray-700"
|
class="block text-sm font-medium text-gray-700">{$_('amount')}</label>
|
||||||
>{$_("amount")}</label
|
|
||||||
>
|
|
||||||
<div class="mt-1 flex rounded-md shadow-sm">
|
<div class="mt-1 flex rounded-md shadow-sm">
|
||||||
<input
|
<input
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
@ -178,18 +196,14 @@
|
|||||||
step="1"
|
step="1"
|
||||||
name="amount"
|
name="amount"
|
||||||
class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 p-2"
|
class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 p-2"
|
||||||
placeholder="400"
|
placeholder="400" />
|
||||||
/>
|
|
||||||
<span
|
<span
|
||||||
class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500 text-sm"
|
class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500 text-sm">{$_('cards')}</span>
|
||||||
>{$_("cards")}</span
|
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
{#if !is_card_count_valid}
|
{#if !is_card_count_valid}
|
||||||
<span
|
<span
|
||||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
|
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||||
>
|
{$_('you-must-create-at-least-one-card-or-cancel')}
|
||||||
{$_("you-must-create-at-least-one-card-or-cancel")}
|
|
||||||
</span>
|
</span>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
@ -203,27 +217,24 @@
|
|||||||
class:opacity-50={!createbtnenabled}
|
class:opacity-50={!createbtnenabled}
|
||||||
on:click={submit_with_print}
|
on:click={submit_with_print}
|
||||||
type="button"
|
type="button"
|
||||||
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
|
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
|
||||||
>
|
{$_('create-and-generate-pdf')}
|
||||||
{$_("create-and-generate-pdf")}
|
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
disabled={!createbtnenabled}
|
disabled={!createbtnenabled}
|
||||||
class:opacity-50={!createbtnenabled}
|
class:opacity-50={!createbtnenabled}
|
||||||
on:click={submit_without_print}
|
on:click={submit_without_print}
|
||||||
type="button"
|
type="button"
|
||||||
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-400 text-base font-medium text-white hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
|
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-400 text-base font-medium text-white hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
|
||||||
>
|
{$_('create-without-pdf')}
|
||||||
{$_("create-without-pdf")}
|
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
on:click={() => {
|
on:click={() => {
|
||||||
bulk_modal_open = false;
|
bulk_modal_open = false;
|
||||||
}}
|
}}
|
||||||
type="button"
|
type="button"
|
||||||
class="mr-auto mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
|
class="mr-auto mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
|
||||||
>
|
{$_('cancel')}
|
||||||
{$_("cancel")}
|
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -2,10 +2,14 @@
|
|||||||
import { _ } from "svelte-i18n";
|
import { _ } from "svelte-i18n";
|
||||||
import { clickOutside } from "../base/outsideclick";
|
import { clickOutside } from "../base/outsideclick";
|
||||||
|
|
||||||
import { RunnerCardService, RunnerService } from "@odit/lfk-client-js";
|
import {
|
||||||
|
RunnerCardService,
|
||||||
|
RunnerService,
|
||||||
|
ScanService,
|
||||||
|
} from "@odit/lfk-client-js";
|
||||||
import Select from "svelte-select";
|
import Select from "svelte-select";
|
||||||
|
import Toastify from "toastify-js";
|
||||||
import { createEventDispatcher } from "svelte";
|
import { createEventDispatcher } from "svelte";
|
||||||
import toast from "svelte-french-toast";
|
|
||||||
export let modal_open;
|
export let modal_open;
|
||||||
|
|
||||||
const dispatch = createEventDispatcher();
|
const dispatch = createEventDispatcher();
|
||||||
@ -58,7 +62,10 @@
|
|||||||
function submit() {
|
function submit() {
|
||||||
if (processed_last_submit === true) {
|
if (processed_last_submit === true) {
|
||||||
processed_last_submit = false;
|
processed_last_submit = false;
|
||||||
toast.loading($_("adding-card"));
|
const toast = Toastify({
|
||||||
|
text: $_("adding-card"),
|
||||||
|
duration: -1,
|
||||||
|
}).showToast();
|
||||||
let postdata = {
|
let postdata = {
|
||||||
runner,
|
runner,
|
||||||
enabled,
|
enabled,
|
||||||
@ -68,8 +75,11 @@
|
|||||||
runner = 0;
|
runner = 0;
|
||||||
modal_open = false;
|
modal_open = false;
|
||||||
//
|
//
|
||||||
toast.dismiss();
|
Toastify({
|
||||||
toast.success($_("card-added"));
|
text: $_("card-added"),
|
||||||
|
duration: 500,
|
||||||
|
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||||
|
}).showToast();
|
||||||
dispatch("created", { cards: [result] });
|
dispatch("created", { cards: [result] });
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
@ -77,6 +87,8 @@
|
|||||||
})
|
})
|
||||||
.finally(() => {
|
.finally(() => {
|
||||||
processed_last_submit = true;
|
processed_last_submit = true;
|
||||||
|
//
|
||||||
|
toast.hideToast();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -4,17 +4,17 @@
|
|||||||
|
|
||||||
import { RunnerCardService, RunnerService } from "@odit/lfk-client-js";
|
import { RunnerCardService, RunnerService } from "@odit/lfk-client-js";
|
||||||
import Select from "svelte-select";
|
import Select from "svelte-select";
|
||||||
|
import Toastify from "toastify-js";
|
||||||
import { createEventDispatcher } from "svelte";
|
import { createEventDispatcher } from "svelte";
|
||||||
import toast from "svelte-french-toast";
|
|
||||||
export let edit_modal_open;
|
export let edit_modal_open;
|
||||||
export let runner = {};
|
export let runner = {};
|
||||||
export let editable = {};
|
export let editable = {};
|
||||||
export let original_data = {};
|
export let original_data = {};
|
||||||
const getRunnerLabel = (option) =>
|
const getRunnerLabel = (option) =>
|
||||||
option.firstname + " " + (option.middlename || "") + " " + option.lastname;
|
option.firstname + " " + (option.middlename || "") + " " + option.lastname;
|
||||||
const filterRunners = (label, filterText, option) => {
|
const filterRunners = (label, filterText, option) => {
|
||||||
if (filterText.startsWith("#")) {
|
if (filterText.startsWith("#")) {
|
||||||
return option.value.id == parseInt(filterText.replace("#", ""));
|
return option.value.id == parseInt(filterText.replace("#",""))
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
label.toLowerCase().includes(filterText.toLowerCase()) ||
|
label.toLowerCase().includes(filterText.toLowerCase()) ||
|
||||||
@ -54,23 +54,32 @@
|
|||||||
function submit() {
|
function submit() {
|
||||||
if (processed_last_submit === true) {
|
if (processed_last_submit === true) {
|
||||||
processed_last_submit = false;
|
processed_last_submit = false;
|
||||||
toast.loading($_("updating-card"));
|
const toast = Toastify({
|
||||||
|
text: $_("updating-card"),
|
||||||
|
duration: -1,
|
||||||
|
}).showToast();
|
||||||
RunnerCardService.runnerCardControllerPut(original_data.id, editable)
|
RunnerCardService.runnerCardControllerPut(original_data.id, editable)
|
||||||
.then((result) => {
|
.then((result) => {
|
||||||
|
let id = original_data.id;
|
||||||
runner = {};
|
runner = {};
|
||||||
editable = {};
|
editable = {};
|
||||||
original_data = {};
|
original_data = {};
|
||||||
edit_modal_open = false;
|
edit_modal_open = false;
|
||||||
//
|
//
|
||||||
toast.dismiss();
|
Toastify({
|
||||||
toast.success($_("card-updated"));
|
text: $_("card-updated"),
|
||||||
dispatch("dataUpdated", { card: result });
|
duration: 500,
|
||||||
|
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||||
|
}).showToast();
|
||||||
|
dispatch('dataUpdated', {card: result});
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
//
|
//
|
||||||
})
|
})
|
||||||
.finally(() => {
|
.finally(() => {
|
||||||
processed_last_submit = true;
|
processed_last_submit = true;
|
||||||
|
//
|
||||||
|
toast.hideToast();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -79,78 +88,65 @@
|
|||||||
{#if edit_modal_open}
|
{#if edit_modal_open}
|
||||||
<div
|
<div
|
||||||
class="fixed z-10 inset-0 overflow-y-auto"
|
class="fixed z-10 inset-0 overflow-y-auto"
|
||||||
|
|
||||||
use:clickOutside
|
use:clickOutside
|
||||||
on:click_outside={() => {
|
on:click_outside={() => {
|
||||||
edit_modal_open = false;
|
edit_modal_open = false;
|
||||||
}}
|
}}>
|
||||||
>
|
|
||||||
<div
|
<div
|
||||||
class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
|
class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
|
||||||
>
|
|
||||||
<div class="fixed inset-0 transition-opacity" aria-hidden="true">
|
<div class="fixed inset-0 transition-opacity" aria-hidden="true">
|
||||||
<div
|
<div
|
||||||
class="absolute inset-0 bg-gray-500 opacity-75"
|
class="absolute inset-0 bg-gray-500 opacity-75"
|
||||||
data-id="modal_backdrop"
|
data-id="modal_backdrop" />
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<span
|
<span
|
||||||
class="hidden sm:inline-block sm:align-middle sm:h-screen"
|
class="hidden sm:inline-block sm:align-middle sm:h-screen"
|
||||||
aria-hidden="true">​</span
|
aria-hidden="true">​</span>
|
||||||
>
|
|
||||||
<div
|
<div
|
||||||
class="inline-block align-bottom bg-white rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
|
class="inline-block align-bottom bg-white rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
|
||||||
role="dialog"
|
role="dialog"
|
||||||
aria-modal="true"
|
aria-modal="true"
|
||||||
aria-labelledby="modal-headline"
|
aria-labelledby="modal-headline">
|
||||||
>
|
|
||||||
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
||||||
<div class="sm:flex sm:items-start">
|
<div class="sm:flex sm:items-start">
|
||||||
<div
|
<div
|
||||||
class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
|
class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
|
||||||
>
|
|
||||||
<svg
|
<svg
|
||||||
class="h-6 w-6 text-blue-600"
|
class="h-6 w-6 text-blue-600"
|
||||||
fill="currentColor"
|
fill="currentColor"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
width="24"
|
width="24"
|
||||||
height="24"
|
height="24"><path fill="none" d="M0 0h24v24H0z" />
|
||||||
><path fill="none" d="M0 0h24v24H0z" />
|
|
||||||
<path
|
<path
|
||||||
fill="currentColor"
|
fill="currentColor"
|
||||||
d="M22 10v10a1 1 0 01-1 1H3a1 1 0 01-1-1V10h20zm0-2H2V4a1 1 0 011-1h18a1 1 0 011 1v4zm-7 8v2h4v-2h-4z"
|
d="M22 10v10a1 1 0 01-1 1H3a1 1 0 01-1-1V10h20zm0-2H2V4a1 1 0 011-1h18a1 1 0 011 1v4zm-7 8v2h4v-2h-4z" /></svg>
|
||||||
/></svg
|
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
|
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
|
||||||
<h3 class="text-lg leading-6 font-medium text-gray-900">
|
<h3 class="text-lg leading-6 font-medium text-gray-900">
|
||||||
{$_("edit-a-card")}
|
{$_('edit-a-card')}
|
||||||
</h3>
|
</h3>
|
||||||
<div class="mt-2 mb-6">
|
<div class="mt-2 mb-6">
|
||||||
<p class="text-sm text-gray-500">
|
<p class="text-sm text-gray-500">
|
||||||
{$_("you-can-provide-a-runner-but-you-dont-have-to")}
|
{$_('you-can-provide-a-runner-but-you-dont-have-to')}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="grid grid-cols-6 gap-6">
|
<div class="grid grid-cols-6 gap-6">
|
||||||
<div class="col-span-6">
|
<div class="col-span-6">
|
||||||
<label
|
<label
|
||||||
for="runner"
|
for="runner"
|
||||||
class="block text-sm font-medium text-gray-700"
|
class="block text-sm font-medium text-gray-700">{$_('runner')}</label>
|
||||||
>{$_("runner")}</label
|
|
||||||
>
|
|
||||||
<Select
|
<Select
|
||||||
containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
||||||
itemFilter={(label, filterText, option) =>
|
itemFilter={(label, filterText, option) => filterRunners(label, filterText, option)}
|
||||||
filterRunners(label, filterText, option)}
|
|
||||||
items={runners}
|
items={runners}
|
||||||
showChevron={true}
|
showChevron={true}
|
||||||
placeholder={$_("search-for-runner-by-name-or-id")}
|
placeholder={$_('search-for-runner-by-name-or-id')}
|
||||||
noOptionsMessage={$_("no-runners-found")}
|
noOptionsMessage={$_('no-runners-found')}
|
||||||
bind:selectedValue={runner}
|
bind:selectedValue={runner}
|
||||||
on:select={(selectedValue) =>
|
on:select={(selectedValue) => (editable.runner = selectedValue.detail.value.id)}
|
||||||
(editable.runner = selectedValue.detail.value.id)}
|
on:clear={() => (editable.runner = null)} />
|
||||||
on:clear={() => (editable.runner = null)}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="col-span-6">
|
<div class="col-span-6">
|
||||||
<p class="text-gray-500">
|
<p class="text-gray-500">
|
||||||
@ -162,12 +158,11 @@
|
|||||||
name="enabled"
|
name="enabled"
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
checked={editable.enabled}
|
checked={editable.enabled}
|
||||||
class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
|
class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
|
||||||
/>
|
{$_('this-card-is')}
|
||||||
{$_("this-card-is")}
|
|
||||||
{#if editable.enabled}
|
{#if editable.enabled}
|
||||||
{$_("enabled")}
|
{$_('enabled')}
|
||||||
{:else}{$_("disabled")}{/if}
|
{:else}{$_('disabled')}{/if}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -180,18 +175,16 @@
|
|||||||
class:opacity-50={!createbtnenabled}
|
class:opacity-50={!createbtnenabled}
|
||||||
on:click={submit}
|
on:click={submit}
|
||||||
type="button"
|
type="button"
|
||||||
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
|
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
|
||||||
>
|
{$_('save-changes')}
|
||||||
{$_("save-changes")}
|
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
on:click={() => {
|
on:click={() => {
|
||||||
edit_modal_open = false;
|
edit_modal_open = false;
|
||||||
}}
|
}}
|
||||||
type="button"
|
type="button"
|
||||||
class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
|
class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
|
||||||
>
|
{$_('cancel')}
|
||||||
{$_("cancel")}
|
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -41,6 +41,7 @@
|
|||||||
<AddCardModal
|
<AddCardModal
|
||||||
bind:modal_open
|
bind:modal_open
|
||||||
on:created={(event) => {
|
on:created={(event) => {
|
||||||
|
console.log(event)
|
||||||
addCards(event.detail.cards);
|
addCards(event.detail.cards);
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|||||||
@ -6,7 +6,7 @@
|
|||||||
<div class="text-center items-center justify-center">
|
<div class="text-center items-center justify-center">
|
||||||
<p class="mb-16 text-lg text-gray-500">
|
<p class="mb-16 text-lg text-gray-500">
|
||||||
<img class="m-auto" style="height:15rem" src={cards_empty} alt="" />
|
<img class="m-auto" style="height:15rem" src={cards_empty} alt="" />
|
||||||
<span class="font-bold">{$_("there-are-no-cards-yet")}</span><br />
|
<span class="font-bold">{$_('there-are-no-cards-yet')}</span><br />
|
||||||
<span>{$_("add-your-first-card")}</span>
|
<span>{$_('add-your-first-card')}</span>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -32,6 +32,7 @@
|
|||||||
export let original_data = {};
|
export let original_data = {};
|
||||||
export let current_cards = [];
|
export let current_cards = [];
|
||||||
export const addCards = (cards) => {
|
export const addCards = (cards) => {
|
||||||
|
console.log(cards);
|
||||||
current_cards = current_cards.concat(...cards);
|
current_cards = current_cards.concat(...cards);
|
||||||
options.update((options) => ({
|
options.update((options) => ({
|
||||||
...options,
|
...options,
|
||||||
@ -153,11 +154,10 @@
|
|||||||
onMount(async () => {
|
onMount(async () => {
|
||||||
toast.loading($_("loading-cards"));
|
toast.loading($_("loading-cards"));
|
||||||
let page = 0;
|
let page = 0;
|
||||||
let pagesize = 100;
|
|
||||||
while (page >= 0) {
|
while (page >= 0) {
|
||||||
const cards = await RunnerCardService.runnerCardControllerGetAll(
|
const cards = await RunnerCardService.runnerCardControllerGetAll(
|
||||||
page,
|
page,
|
||||||
pagesize
|
500
|
||||||
);
|
);
|
||||||
if (cards.length == 0) {
|
if (cards.length == 0) {
|
||||||
page = -2;
|
page = -2;
|
||||||
@ -171,10 +171,9 @@
|
|||||||
|
|
||||||
dataLoaded = true;
|
dataLoaded = true;
|
||||||
page++;
|
page++;
|
||||||
pagesize += 100;
|
|
||||||
}
|
}
|
||||||
toast.dismiss();
|
toast.dismiss();
|
||||||
toast.success($_("all-cards-loaded"));
|
toast.success($_('all-cards-loaded'));
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@ -267,7 +266,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="overflow-x-auto">
|
<div class="overflow-x-auto">
|
||||||
<table class="w-full">
|
<table class="w-full">
|
||||||
<thead class="border-b border-gray-400">
|
<thead>
|
||||||
{#each $table.getHeaderGroups() as headerGroup}
|
{#each $table.getHeaderGroups() as headerGroup}
|
||||||
<tr class="select-none">
|
<tr class="select-none">
|
||||||
<th class="inset-y-0 left-0 px-4 py-2 text-left w-px">
|
<th class="inset-y-0 left-0 px-4 py-2 text-left w-px">
|
||||||
@ -286,7 +285,7 @@
|
|||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
{#each $table.getRowModel().rows as row}
|
{#each $table.getRowModel().rows as row}
|
||||||
<tr class="odd:bg-white even:bg-gray-100">
|
<tr>
|
||||||
<td class="inset-y-0 left-0 px-4 py-2 text-center w-px">
|
<td class="inset-y-0 left-0 px-4 py-2 text-center w-px">
|
||||||
<InputElement
|
<InputElement
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
@ -312,9 +311,3 @@
|
|||||||
<TableBottom {table} {selected} />
|
<TableBottom {table} {selected} />
|
||||||
{/if}
|
{/if}
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<style>
|
|
||||||
table tbody tr td:nth-child(2) {
|
|
||||||
font-family: monospace;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@ -9,7 +9,7 @@
|
|||||||
} from "@odit/lfk-client-js";
|
} from "@odit/lfk-client-js";
|
||||||
import isEmail from "validator/es/lib/isEmail";
|
import isEmail from "validator/es/lib/isEmail";
|
||||||
import isMobilePhone from "validator/es/lib/isMobilePhone";
|
import isMobilePhone from "validator/es/lib/isMobilePhone";
|
||||||
import toast from "svelte-french-toast";
|
import Toastify from "toastify-js";
|
||||||
export let modal_open;
|
export let modal_open;
|
||||||
export let current_contacts;
|
export let current_contacts;
|
||||||
$: selected_team = [];
|
$: selected_team = [];
|
||||||
@ -85,7 +85,10 @@
|
|||||||
function submit() {
|
function submit() {
|
||||||
if (processed_last_submit === true) {
|
if (processed_last_submit === true) {
|
||||||
processed_last_submit = false;
|
processed_last_submit = false;
|
||||||
toast.loading($_("contact-is-being-added"));
|
const toast = Toastify({
|
||||||
|
text: $_('contact-is-being-added'),
|
||||||
|
duration: -1,
|
||||||
|
}).showToast();
|
||||||
let address = {};
|
let address = {};
|
||||||
if (address_checked === true) {
|
if (address_checked === true) {
|
||||||
address = {
|
address = {
|
||||||
@ -119,8 +122,11 @@
|
|||||||
email_input_value = "";
|
email_input_value = "";
|
||||||
modal_open = false;
|
modal_open = false;
|
||||||
//
|
//
|
||||||
toast.dismiss();
|
Toastify({
|
||||||
toast.success($_("contact-added"));
|
text: $_('contact-added'),
|
||||||
|
duration: 500,
|
||||||
|
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||||
|
}).showToast();
|
||||||
current_contacts.push(result);
|
current_contacts.push(result);
|
||||||
current_contacts = current_contacts;
|
current_contacts = current_contacts;
|
||||||
})
|
})
|
||||||
@ -129,6 +135,8 @@
|
|||||||
})
|
})
|
||||||
.finally(() => {
|
.finally(() => {
|
||||||
processed_last_submit = true;
|
processed_last_submit = true;
|
||||||
|
//
|
||||||
|
toast.hideToast();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -137,70 +145,58 @@
|
|||||||
{#if modal_open}
|
{#if modal_open}
|
||||||
<div
|
<div
|
||||||
class="fixed z-10 inset-0 overflow-y-auto"
|
class="fixed z-10 inset-0 overflow-y-auto"
|
||||||
|
|
||||||
use:clickOutside
|
use:clickOutside
|
||||||
on:click_outside={() => {
|
on:click_outside={() => {
|
||||||
modal_open = false;
|
modal_open = false;
|
||||||
}}
|
}}>
|
||||||
>
|
|
||||||
<div
|
<div
|
||||||
class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
|
class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
|
||||||
>
|
|
||||||
<div class="fixed inset-0 transition-opacity" aria-hidden="true">
|
<div class="fixed inset-0 transition-opacity" aria-hidden="true">
|
||||||
<div
|
<div
|
||||||
class="absolute inset-0 bg-gray-500 opacity-75"
|
class="absolute inset-0 bg-gray-500 opacity-75"
|
||||||
data-id="modal_backdrop"
|
data-id="modal_backdrop" />
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<span
|
<span
|
||||||
class="hidden sm:inline-block sm:align-middle sm:h-screen"
|
class="hidden sm:inline-block sm:align-middle sm:h-screen"
|
||||||
aria-hidden="true">​</span
|
aria-hidden="true">​</span>
|
||||||
>
|
|
||||||
<div
|
<div
|
||||||
class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
|
class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
|
||||||
role="dialog"
|
role="dialog"
|
||||||
aria-modal="true"
|
aria-modal="true"
|
||||||
aria-labelledby="modal-headline"
|
aria-labelledby="modal-headline">
|
||||||
>
|
|
||||||
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
||||||
<div class="sm:flex sm:items-start">
|
<div class="sm:flex sm:items-start">
|
||||||
<div
|
<div
|
||||||
class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
|
class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
|
||||||
>
|
|
||||||
<svg
|
<svg
|
||||||
class="h-6 w-6 text-blue-600"
|
class="h-6 w-6 text-blue-600"
|
||||||
fill="currentColor"
|
fill="currentColor"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
width="24"
|
width="24"
|
||||||
height="24"
|
height="24"><path fill="none" d="M0 0h24v24H0z" />
|
||||||
><path fill="none" d="M0 0h24v24H0z" />
|
|
||||||
<path
|
<path
|
||||||
d="M2 22a8 8 0 1 1 16 0H2zm8-9c-3.315 0-6-2.685-6-6s2.685-6 6-6 6 2.685 6 6-2.685 6-6 6zm10 4h4v2h-4v-2zm-3-5h7v2h-7v-2zm2-5h5v2h-5V7z"
|
d="M2 22a8 8 0 1 1 16 0H2zm8-9c-3.315 0-6-2.685-6-6s2.685-6 6-6 6 2.685 6 6-2.685 6-6 6zm10 4h4v2h-4v-2zm-3-5h7v2h-7v-2zm2-5h5v2h-5V7z" /></svg>
|
||||||
/></svg
|
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
|
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
|
||||||
<h3 class="text-lg leading-6 font-medium text-gray-900">
|
<h3 class="text-lg leading-6 font-medium text-gray-900">
|
||||||
{$_("create-a-new-contact")}
|
{$_('create-a-new-contact')}
|
||||||
</h3>
|
</h3>
|
||||||
<div class="mt-2 mb-6">
|
<div class="mt-2 mb-6">
|
||||||
<p class="text-sm text-gray-500">
|
<p class="text-sm text-gray-500">
|
||||||
{$_(
|
{$_('please-provide-the-required-information-to-add-a-new-contact')}
|
||||||
"please-provide-the-required-information-to-add-a-new-contact"
|
|
||||||
)}
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="grid grid-cols-6 gap-6">
|
<div class="grid grid-cols-6 gap-6">
|
||||||
<div class="col-span-6">
|
<div class="col-span-6">
|
||||||
<label
|
<label
|
||||||
for="firstname"
|
for="firstname"
|
||||||
class="block text-sm font-medium text-gray-700"
|
class="block text-sm font-medium text-gray-700">{$_('first-name')}</label>
|
||||||
>{$_("first-name")}</label
|
|
||||||
>
|
|
||||||
<input
|
<input
|
||||||
use:focus
|
use:focus
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
placeholder={$_("first-name")}
|
placeholder={$_('first-name')}
|
||||||
class:border-red-500={!isFirstnameValid}
|
class:border-red-500={!isFirstnameValid}
|
||||||
class:focus:border-red-500={!isFirstnameValid}
|
class:focus:border-red-500={!isFirstnameValid}
|
||||||
class:focus:ring-red-500={!isFirstnameValid}
|
class:focus:ring-red-500={!isFirstnameValid}
|
||||||
@ -208,41 +204,34 @@
|
|||||||
bind:this={firstname_input}
|
bind:this={firstname_input}
|
||||||
type="text"
|
type="text"
|
||||||
name="firstname"
|
name="firstname"
|
||||||
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
|
||||||
/>
|
|
||||||
{#if !isFirstnameValid}
|
{#if !isFirstnameValid}
|
||||||
<span
|
<span
|
||||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
|
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||||
>
|
{$_('first-name-is-required')}
|
||||||
{$_("first-name-is-required")}
|
|
||||||
</span>
|
</span>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
<div class="col-span-6">
|
<div class="col-span-6">
|
||||||
<label
|
<label
|
||||||
for="trackname"
|
for="trackname"
|
||||||
class="block text-sm font-medium text-gray-700"
|
class="block text-sm font-medium text-gray-700">{$_('middle-name')}</label>
|
||||||
>{$_("middle-name")}</label
|
|
||||||
>
|
|
||||||
<input
|
<input
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
placeholder={$_("middle-name")}
|
placeholder={$_('middle-name')}
|
||||||
bind:value={middlename_input_value}
|
bind:value={middlename_input_value}
|
||||||
bind:this={middlename_input}
|
bind:this={middlename_input}
|
||||||
type="text"
|
type="text"
|
||||||
name="trackname"
|
name="trackname"
|
||||||
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="col-span-6">
|
<div class="col-span-6">
|
||||||
<label
|
<label
|
||||||
for="lastname"
|
for="lastname"
|
||||||
class="block text-sm font-medium text-gray-700"
|
class="block text-sm font-medium text-gray-700">{$_('last-name')}</label>
|
||||||
>{$_("last-name")}</label
|
|
||||||
>
|
|
||||||
<input
|
<input
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
placeholder={$_("last-name")}
|
placeholder="{$_('last-name')}"
|
||||||
class:border-red-500={!isLastnameValid}
|
class:border-red-500={!isLastnameValid}
|
||||||
class:focus:border-red-500={!isLastnameValid}
|
class:focus:border-red-500={!isLastnameValid}
|
||||||
class:focus:ring-red-500={!isLastnameValid}
|
class:focus:ring-red-500={!isLastnameValid}
|
||||||
@ -250,28 +239,23 @@
|
|||||||
bind:this={lastname_input}
|
bind:this={lastname_input}
|
||||||
type="text"
|
type="text"
|
||||||
name="lastname"
|
name="lastname"
|
||||||
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
|
||||||
/>
|
|
||||||
{#if !isLastnameValid}
|
{#if !isLastnameValid}
|
||||||
<span
|
<span
|
||||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
|
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||||
>
|
{$_('last-name-is-required')}
|
||||||
{$_("last-name-is-required")}
|
|
||||||
</span>
|
</span>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
<div class="col-span-6">
|
<div class="col-span-6">
|
||||||
<label
|
<label
|
||||||
for="team"
|
for="team"
|
||||||
class="block text-sm font-medium text-gray-700"
|
class="block text-sm font-medium text-gray-700">{$_('teams')}</label>
|
||||||
>{$_("teams")}</label
|
|
||||||
>
|
|
||||||
<select
|
<select
|
||||||
name="team"
|
name="team"
|
||||||
multiple
|
multiple
|
||||||
bind:value={selected_team}
|
bind:value={selected_team}
|
||||||
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2">
|
||||||
>
|
|
||||||
{#each teams as team}
|
{#each teams as team}
|
||||||
<option value={team.id}>
|
<option value={team.id}>
|
||||||
{team.parentGroup.name}
|
{team.parentGroup.name}
|
||||||
@ -287,12 +271,10 @@
|
|||||||
<div class="col-span-6">
|
<div class="col-span-6">
|
||||||
<label
|
<label
|
||||||
for="phone"
|
for="phone"
|
||||||
class="block text-sm font-medium text-gray-700"
|
class="block text-sm font-medium text-gray-700">{$_('phone')}</label>
|
||||||
>{$_("phone")}</label
|
|
||||||
>
|
|
||||||
<input
|
<input
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
placeholder={$_("phone")}
|
placeholder={$_('phone')}
|
||||||
class:border-red-500={!isPhoneValidOrEmpty}
|
class:border-red-500={!isPhoneValidOrEmpty}
|
||||||
class:focus:border-red-500={!isPhoneValidOrEmpty}
|
class:focus:border-red-500={!isPhoneValidOrEmpty}
|
||||||
class:focus:ring-red-500={!isPhoneValidOrEmpty}
|
class:focus:ring-red-500={!isPhoneValidOrEmpty}
|
||||||
@ -300,27 +282,21 @@
|
|||||||
bind:this={phone_input}
|
bind:this={phone_input}
|
||||||
type="tel"
|
type="tel"
|
||||||
name="phone"
|
name="phone"
|
||||||
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
|
||||||
/>
|
|
||||||
{#if !isPhoneValidOrEmpty}
|
{#if !isPhoneValidOrEmpty}
|
||||||
<span
|
<span
|
||||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
|
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||||
>
|
{@html $_('the-provided-phone-number-is-invalid-less-than-br-greater-than-please-enter-a-valid-international-number')}
|
||||||
{@html $_(
|
|
||||||
"the-provided-phone-number-is-invalid-less-than-br-greater-than-please-enter-a-valid-international-number"
|
|
||||||
)}
|
|
||||||
</span>
|
</span>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
<div class="col-span-6">
|
<div class="col-span-6">
|
||||||
<label
|
<label
|
||||||
for="email"
|
for="email"
|
||||||
class="block text-sm font-medium text-gray-700"
|
class="block text-sm font-medium text-gray-700">{$_('e-mail-adress')}</label>
|
||||||
>{$_("e-mail-adress")}</label
|
|
||||||
>
|
|
||||||
<input
|
<input
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
placeholder={$_("e-mail-adress")}
|
placeholder={$_('e-mail-adress')}
|
||||||
class:border-red-500={!isEmailValidOrEmpty}
|
class:border-red-500={!isEmailValidOrEmpty}
|
||||||
class:focus:border-red-500={!isEmailValidOrEmpty}
|
class:focus:border-red-500={!isEmailValidOrEmpty}
|
||||||
class:focus:ring-red-500={!isEmailValidOrEmpty}
|
class:focus:ring-red-500={!isEmailValidOrEmpty}
|
||||||
@ -328,13 +304,11 @@
|
|||||||
bind:this={email_input}
|
bind:this={email_input}
|
||||||
type="email"
|
type="email"
|
||||||
name="email"
|
name="email"
|
||||||
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
|
||||||
/>
|
|
||||||
{#if !isEmailValidOrEmpty}
|
{#if !isEmailValidOrEmpty}
|
||||||
<span
|
<span
|
||||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
|
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||||
>
|
{$_('valid-email-is-required')}
|
||||||
{$_("valid-email-is-required")}
|
|
||||||
</span>
|
</span>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
@ -345,25 +319,22 @@
|
|||||||
id="comments"
|
id="comments"
|
||||||
name="comments"
|
name="comments"
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
|
class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="ml-3 text-sm">
|
<div class="ml-3 text-sm">
|
||||||
<label for="comments" class="font-medium text-gray-700"
|
<label
|
||||||
>{$_("address")}</label
|
for="comments"
|
||||||
>
|
class="font-medium text-gray-700">{$_('address')}</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{#if address_checked === true}
|
{#if address_checked === true}
|
||||||
<div class="col-span-6">
|
<div class="col-span-6">
|
||||||
<label
|
<label
|
||||||
for="address1"
|
for="address1"
|
||||||
class="block text-sm font-medium text-gray-700"
|
class="block text-sm font-medium text-gray-700">{$_('address')}</label>
|
||||||
>{$_("address")}</label
|
|
||||||
>
|
|
||||||
<input
|
<input
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
placeholder={$_("address")}
|
placeholder="{$_('address')}"
|
||||||
class:border-red-500={!isAddress1Valid}
|
class:border-red-500={!isAddress1Valid}
|
||||||
class:focus:border-red-500={!isAddress1Valid}
|
class:focus:border-red-500={!isAddress1Valid}
|
||||||
class:focus:ring-red-500={!isAddress1Valid}
|
class:focus:ring-red-500={!isAddress1Valid}
|
||||||
@ -371,41 +342,34 @@
|
|||||||
bind:this={address_input1}
|
bind:this={address_input1}
|
||||||
type="text"
|
type="text"
|
||||||
name="address1"
|
name="address1"
|
||||||
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
|
||||||
/>
|
|
||||||
{#if !isAddress1Valid}
|
{#if !isAddress1Valid}
|
||||||
<span
|
<span
|
||||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
|
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||||
>
|
{$_('address-is-required')}
|
||||||
{$_("address-is-required")}
|
|
||||||
</span>
|
</span>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
<div class="col-span-6">
|
<div class="col-span-6">
|
||||||
<label
|
<label
|
||||||
for="address2"
|
for="address2"
|
||||||
class="block text-sm font-medium text-gray-700"
|
class="block text-sm font-medium text-gray-700">{$_('apartment-suite-etc')}</label>
|
||||||
>{$_("apartment-suite-etc")}</label
|
|
||||||
>
|
|
||||||
<input
|
<input
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
placeholder={$_("apartment-suite-etc")}
|
placeholder={$_('apartment-suite-etc')}
|
||||||
bind:value={address_input2_value}
|
bind:value={address_input2_value}
|
||||||
bind:this={address_input2}
|
bind:this={address_input2}
|
||||||
type="text"
|
type="text"
|
||||||
name="address2"
|
name="address2"
|
||||||
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="col-span-6">
|
<div class="col-span-6">
|
||||||
<label
|
<label
|
||||||
for="zipcode"
|
for="zipcode"
|
||||||
class="block text-sm font-medium text-gray-700"
|
class="block text-sm font-medium text-gray-700">{$_('zip-postal-code')}</label>
|
||||||
>{$_("zip-postal-code")}</label
|
|
||||||
>
|
|
||||||
<input
|
<input
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
placeholder={$_("zip-postal-code")}
|
placeholder={$_('zip-postal-code')}
|
||||||
class:border-red-500={!iszipcodevalid}
|
class:border-red-500={!iszipcodevalid}
|
||||||
class:focus:border-red-500={!iszipcodevalid}
|
class:focus:border-red-500={!iszipcodevalid}
|
||||||
class:focus:ring-red-500={!iszipcodevalid}
|
class:focus:ring-red-500={!iszipcodevalid}
|
||||||
@ -413,25 +377,21 @@
|
|||||||
bind:this={address_zipcode}
|
bind:this={address_zipcode}
|
||||||
type="text"
|
type="text"
|
||||||
name="zipcode"
|
name="zipcode"
|
||||||
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
|
||||||
/>
|
|
||||||
{#if !iszipcodevalid}
|
{#if !iszipcodevalid}
|
||||||
<span
|
<span
|
||||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
|
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||||
>
|
{$_('valid-zipcode-postal-code-is-required')}
|
||||||
{$_("valid-zipcode-postal-code-is-required")}
|
|
||||||
</span>
|
</span>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
<div class="col-span-6">
|
<div class="col-span-6">
|
||||||
<label
|
<label
|
||||||
for="city"
|
for="city"
|
||||||
class="block text-sm font-medium text-gray-700"
|
class="block text-sm font-medium text-gray-700">{$_('city')}</label>
|
||||||
>{$_("city")}</label
|
|
||||||
>
|
|
||||||
<input
|
<input
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
placeholder={$_("city")}
|
placeholder="{$_('city')}"
|
||||||
class:border-red-500={!iscityvalid}
|
class:border-red-500={!iscityvalid}
|
||||||
class:focus:border-red-500={!iscityvalid}
|
class:focus:border-red-500={!iscityvalid}
|
||||||
class:focus:ring-red-500={!iscityvalid}
|
class:focus:ring-red-500={!iscityvalid}
|
||||||
@ -439,13 +399,11 @@
|
|||||||
bind:this={address_city}
|
bind:this={address_city}
|
||||||
type="text"
|
type="text"
|
||||||
name="city"
|
name="city"
|
||||||
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
|
||||||
/>
|
|
||||||
{#if !iscityvalid}
|
{#if !iscityvalid}
|
||||||
<span
|
<span
|
||||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
|
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||||
>
|
{$_('valid-city-is-required')}
|
||||||
{$_("valid-city-is-required")}
|
|
||||||
</span>
|
</span>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
@ -460,18 +418,16 @@
|
|||||||
class:opacity-50={!createbtnenabled}
|
class:opacity-50={!createbtnenabled}
|
||||||
on:click={submit}
|
on:click={submit}
|
||||||
type="button"
|
type="button"
|
||||||
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
|
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
|
||||||
>
|
{$_('create')}
|
||||||
{$_("create")}
|
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
on:click={() => {
|
on:click={() => {
|
||||||
modal_open = false;
|
modal_open = false;
|
||||||
}}
|
}}
|
||||||
type="button"
|
type="button"
|
||||||
class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
|
class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
|
||||||
>
|
{$_('cancel')}
|
||||||
{$_("cancel")}
|
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -6,9 +6,9 @@
|
|||||||
RunnerTeamService,
|
RunnerTeamService,
|
||||||
RunnerOrganizationService,
|
RunnerOrganizationService,
|
||||||
} from "@odit/lfk-client-js";
|
} from "@odit/lfk-client-js";
|
||||||
|
import Toastify from "toastify-js";
|
||||||
import PromiseError from "../base/PromiseError.svelte";
|
import PromiseError from "../base/PromiseError.svelte";
|
||||||
import isEmail from "validator/es/lib/isEmail";
|
import isEmail from "validator/es/lib/isEmail";
|
||||||
import toast from "svelte-french-toast";
|
|
||||||
let data_loaded = false;
|
let data_loaded = false;
|
||||||
let orgs = [];
|
let orgs = [];
|
||||||
let teams = [];
|
let teams = [];
|
||||||
@ -31,7 +31,7 @@
|
|||||||
isEmailValid &&
|
isEmailValid &&
|
||||||
isPhoneValidOrEmpty &&
|
isPhoneValidOrEmpty &&
|
||||||
((isAddress1Valid && iszipcodevalid && iscityvalid) ||
|
((isAddress1Valid && iszipcodevalid && iscityvalid) ||
|
||||||
editable.address_checked === false);
|
editable.address_checked === false);
|
||||||
const promise = GroupContactService.groupContactControllerGetOne(
|
const promise = GroupContactService.groupContactControllerGetOne(
|
||||||
params.contact
|
params.contact
|
||||||
).then((data) => {
|
).then((data) => {
|
||||||
@ -42,14 +42,14 @@
|
|||||||
original_data.groups = original_data.groups.map((g) => g.id);
|
original_data.groups = original_data.groups.map((g) => g.id);
|
||||||
editable.address_checked = editable.address.address1 !== null;
|
editable.address_checked = editable.address.address1 !== null;
|
||||||
original_data.address_checked = editable.address.address1 !== null;
|
original_data.address_checked = editable.address.address1 !== null;
|
||||||
if (editable.address_checked === false) {
|
if(editable.address_checked===false){
|
||||||
editable.address = {
|
editable.address = {
|
||||||
address1: "",
|
address1: "",
|
||||||
address2: "",
|
address2: "",
|
||||||
city: "",
|
city: "",
|
||||||
postalcode: "",
|
postalcode: "",
|
||||||
country: "",
|
country: ""
|
||||||
};
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
RunnerOrganizationService.runnerOrganizationControllerGetAll().then((val) => {
|
RunnerOrganizationService.runnerOrganizationControllerGetAll().then((val) => {
|
||||||
@ -67,7 +67,10 @@
|
|||||||
$: iscityvalid = editable.address?.city?.trim().length !== 0;
|
$: iscityvalid = editable.address?.city?.trim().length !== 0;
|
||||||
function submit() {
|
function submit() {
|
||||||
if (data_loaded === true && save_enabled) {
|
if (data_loaded === true && save_enabled) {
|
||||||
toast.loading($_("contact-is-being-updated"));
|
Toastify({
|
||||||
|
text: $_("contact-is-being-updated"),
|
||||||
|
duration: 2500,
|
||||||
|
}).showToast();
|
||||||
editable.address.country = "DE";
|
editable.address.country = "DE";
|
||||||
if (editable.address_checked === false) {
|
if (editable.address_checked === false) {
|
||||||
editable.address = null;
|
editable.address = null;
|
||||||
@ -78,9 +81,12 @@
|
|||||||
GroupContactService.groupContactControllerPut(original_data.id, editable)
|
GroupContactService.groupContactControllerPut(original_data.id, editable)
|
||||||
.then((resp) => {
|
.then((resp) => {
|
||||||
Object.assign(original_data, editable);
|
Object.assign(original_data, editable);
|
||||||
original_data = original_data;
|
original_data=original_data;
|
||||||
toast.dismiss();
|
Toastify({
|
||||||
toast.success($_("updated-contact"));
|
text: $_("updated-contact"),
|
||||||
|
duration: 2500,
|
||||||
|
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||||
|
}).showToast();
|
||||||
})
|
})
|
||||||
.catch((err) => {});
|
.catch((err) => {});
|
||||||
} else {
|
} else {
|
||||||
@ -96,7 +102,7 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#await promise}
|
{#await promise}
|
||||||
{$_("loading-contact-details")}
|
{$_('loading-contact-details')}
|
||||||
{:then}
|
{:then}
|
||||||
<section class="container p-5 select-none">
|
<section class="container p-5 select-none">
|
||||||
<div class="flex flex-row mb-4">
|
<div class="flex flex-row mb-4">
|
||||||
@ -109,15 +115,12 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
width="24"
|
width="24"
|
||||||
height="24"
|
height="24"><path fill="none" d="M0 0h24v24H0z" />
|
||||||
><path fill="none" d="M0 0h24v24H0z" />
|
|
||||||
<path
|
<path
|
||||||
d="M2 22a8 8 0 1 1 16 0H2zm8-9c-3.315 0-6-2.685-6-6s2.685-6 6-6 6 2.685 6 6-2.685 6-6 6zm10 4h4v2h-4v-2zm-3-5h7v2h-7v-2zm2-5h5v2h-5V7z"
|
d="M2 22a8 8 0 1 1 16 0H2zm8-9c-3.315 0-6-2.685-6-6s2.685-6 6-6 6 2.685 6 6-2.685 6-6 6zm10 4h4v2h-4v-2zm-3-5h7v2h-7v-2zm2-5h5v2h-5V7z" /></svg>
|
||||||
/></svg
|
|
||||||
>
|
|
||||||
</li>
|
</li>
|
||||||
<li class="flex items-center ml-2">
|
<li class="flex items-center ml-2">
|
||||||
<a class="mr-2" href="./">{$_("contacts")}</a><svg
|
<a class="mr-2" href="./">{$_('contacts')}</a><svg
|
||||||
stroke="currentColor"
|
stroke="currentColor"
|
||||||
fill="none"
|
fill="none"
|
||||||
stroke-width="2"
|
stroke-width="2"
|
||||||
@ -127,17 +130,17 @@
|
|||||||
class="h-3 w-3 mr-2 stroke-current"
|
class="h-3 w-3 mr-2 stroke-current"
|
||||||
height="1em"
|
height="1em"
|
||||||
width="1em"
|
width="1em"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"><line
|
||||||
><line x1="5" y1="12" x2="19" y2="12" />
|
x1="5"
|
||||||
<polyline points="12 5 19 12 12 19" /></svg
|
y1="12"
|
||||||
>
|
x2="19"
|
||||||
|
y2="12" />
|
||||||
|
<polyline points="12 5 19 12 12 19" /></svg>
|
||||||
</li>
|
</li>
|
||||||
<li class="flex items-center">
|
<li class="flex items-center">
|
||||||
<span class="mr-2"
|
<span class="mr-2">{original_data.firstname}
|
||||||
>{original_data.firstname}
|
{original_data.middlename || ''}
|
||||||
{original_data.middlename || ""}
|
{original_data.lastname}</span>
|
||||||
{original_data.lastname}</span
|
|
||||||
>
|
|
||||||
</li>
|
</li>
|
||||||
</ol>
|
</ol>
|
||||||
</nav>
|
</nav>
|
||||||
@ -145,23 +148,19 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="mb-8 text-3xl font-extrabold leading-tight">
|
<div class="mb-8 text-3xl font-extrabold leading-tight">
|
||||||
{original_data.firstname}
|
{original_data.firstname}
|
||||||
{original_data.middlename || ""}
|
{original_data.middlename || ''}
|
||||||
{original_data.lastname}
|
{original_data.lastname}
|
||||||
<span data-id="contact_actions_${editable.id}">
|
<span data-id="contact_actions_${editable.id}">
|
||||||
{#if store.state.jwtinfo.userdetails.permissions.includes("CONTACT:DELETE")}
|
{#if store.state.jwtinfo.userdetails.permissions.includes('CONTACT:DELETE')}
|
||||||
{#if delete_triggered}
|
{#if delete_triggered}
|
||||||
<button
|
<button
|
||||||
on:click={deleteContact}
|
on:click={deleteContact}
|
||||||
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
|
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('confirm-deletion')}</button>
|
||||||
>{$_("confirm-deletion")}</button
|
|
||||||
>
|
|
||||||
<button
|
<button
|
||||||
on:click={() => {
|
on:click={() => {
|
||||||
delete_triggered = !delete_triggered;
|
delete_triggered = !delete_triggered;
|
||||||
}}
|
}}
|
||||||
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:text-sm"
|
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:text-sm">{$_('cancel')}</button>
|
||||||
>{$_("cancel")}</button
|
|
||||||
>
|
|
||||||
{/if}
|
{/if}
|
||||||
{#if !delete_triggered}
|
{#if !delete_triggered}
|
||||||
<button
|
<button
|
||||||
@ -169,9 +168,7 @@
|
|||||||
delete_triggered = true;
|
delete_triggered = true;
|
||||||
}}
|
}}
|
||||||
type="button"
|
type="button"
|
||||||
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
|
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('delete-contact')}</button>
|
||||||
>{$_("delete-contact")}</button
|
|
||||||
>
|
|
||||||
{/if}
|
{/if}
|
||||||
{/if}
|
{/if}
|
||||||
{#if !delete_triggered}
|
{#if !delete_triggered}
|
||||||
@ -180,124 +177,112 @@
|
|||||||
class:opacity-50={!save_enabled}
|
class:opacity-50={!save_enabled}
|
||||||
type="button"
|
type="button"
|
||||||
on:click={submit}
|
on:click={submit}
|
||||||
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
|
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('save-changes')}</button>
|
||||||
>{$_("save-changes")}</button
|
|
||||||
>
|
|
||||||
{/if}
|
{/if}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<!-- -->
|
<!-- -->
|
||||||
<div class="text-sm w-full">
|
<div class="text-sm w-full">
|
||||||
<label for="firstname" class="font-medium text-gray-700"
|
<label
|
||||||
>{$_("first-name")}</label
|
for="firstname"
|
||||||
>
|
class="font-medium text-gray-700">{$_('first-name')}</label>
|
||||||
<input
|
<input
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
placeholder={$_("first-name")}
|
placeholder={$_('first-name')}
|
||||||
type="text"
|
type="text"
|
||||||
class:border-red-500={!isFirstnameValid}
|
class:border-red-500={!isFirstnameValid}
|
||||||
class:focus:border-red-500={!isFirstnameValid}
|
class:focus:border-red-500={!isFirstnameValid}
|
||||||
class:focus:ring-red-500={!isFirstnameValid}
|
class:focus:ring-red-500={!isFirstnameValid}
|
||||||
bind:value={editable.firstname}
|
bind:value={editable.firstname}
|
||||||
name="firstname"
|
name="firstname"
|
||||||
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
|
||||||
/>
|
|
||||||
{#if !isFirstnameValid}
|
{#if !isFirstnameValid}
|
||||||
<span
|
<span
|
||||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
|
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||||
>
|
{$_('first-name-is-required')}
|
||||||
{$_("first-name-is-required")}
|
|
||||||
</span>
|
</span>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
<div class="text-sm w-full">
|
<div class="text-sm w-full">
|
||||||
<label for="middlename" class="font-medium text-gray-700"
|
<label
|
||||||
>{$_("middle-name")}</label
|
for="middlename"
|
||||||
>
|
class="font-medium text-gray-700">{$_('middle-name')}</label>
|
||||||
<input
|
<input
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
placeholder={$_("middle-name")}
|
placeholder={$_('middle-name')}
|
||||||
type="text"
|
type="text"
|
||||||
bind:value={editable.middlename}
|
bind:value={editable.middlename}
|
||||||
name="middlename"
|
name="middlename"
|
||||||
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="text-sm w-full">
|
<div class="text-sm w-full">
|
||||||
<label for="lastname" class="font-medium text-gray-700"
|
<label
|
||||||
>{$_("last-name")}</label
|
for="lastname"
|
||||||
>
|
class="font-medium text-gray-700">{$_('last-name')}</label>
|
||||||
<input
|
<input
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
placeholder={$_("last-name")}
|
placeholder={$_('last-name')}
|
||||||
type="text"
|
type="text"
|
||||||
bind:value={editable.lastname}
|
bind:value={editable.lastname}
|
||||||
class:border-red-500={!isLastnameValid}
|
class:border-red-500={!isLastnameValid}
|
||||||
class:focus:border-red-500={!isLastnameValid}
|
class:focus:border-red-500={!isLastnameValid}
|
||||||
class:focus:ring-red-500={!isLastnameValid}
|
class:focus:ring-red-500={!isLastnameValid}
|
||||||
name="lastname"
|
name="lastname"
|
||||||
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
|
||||||
/>
|
|
||||||
{#if !isLastnameValid}
|
{#if !isLastnameValid}
|
||||||
<span
|
<span
|
||||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
|
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||||
>
|
{$_('last-name-is-required')}
|
||||||
{$_("last-name-is-required")}
|
|
||||||
</span>
|
</span>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
<div class="text-sm w-full">
|
<div class="text-sm w-full">
|
||||||
<label for="email" class="font-medium text-gray-700"
|
<label
|
||||||
>{$_("e-mail-adress")}</label
|
for="email"
|
||||||
>
|
class="font-medium text-gray-700">{$_('e-mail-adress')}</label>
|
||||||
<input
|
<input
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
placeholder={$_("e-mail-adress")}
|
placeholder={$_('e-mail-adress')}
|
||||||
type="email"
|
type="email"
|
||||||
bind:value={editable.email}
|
bind:value={editable.email}
|
||||||
class:border-red-500={!isEmailValid}
|
class:border-red-500={!isEmailValid}
|
||||||
class:focus:border-red-500={!isEmailValid}
|
class:focus:border-red-500={!isEmailValid}
|
||||||
class:focus:ring-red-500={!isEmailValid}
|
class:focus:ring-red-500={!isEmailValid}
|
||||||
name="email"
|
name="email"
|
||||||
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
|
||||||
/>
|
|
||||||
{#if !isEmailValid}
|
{#if !isEmailValid}
|
||||||
<span
|
<span
|
||||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
|
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||||
>
|
{$_('valid-email-is-required')}
|
||||||
{$_("valid-email-is-required")}
|
|
||||||
</span>
|
</span>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
<div class="text-sm w-full">
|
<div class="text-sm w-full">
|
||||||
<label for="phone" class="font-medium text-gray-700">{$_("phone")}</label>
|
<label for="phone" class="font-medium text-gray-700">{$_('phone')}</label>
|
||||||
<input
|
<input
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
placeholder={$_("phone")}
|
placeholder={$_('phone')}
|
||||||
type="tel"
|
type="tel"
|
||||||
class:border-red-500={!isPhoneValidOrEmpty}
|
class:border-red-500={!isPhoneValidOrEmpty}
|
||||||
class:focus:border-red-500={!isPhoneValidOrEmpty}
|
class:focus:border-red-500={!isPhoneValidOrEmpty}
|
||||||
class:focus:ring-red-500={!isPhoneValidOrEmpty}
|
class:focus:ring-red-500={!isPhoneValidOrEmpty}
|
||||||
bind:value={editable.phone}
|
bind:value={editable.phone}
|
||||||
name="phone"
|
name="phone"
|
||||||
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
|
||||||
/>
|
|
||||||
{#if !isPhoneValidOrEmpty}
|
{#if !isPhoneValidOrEmpty}
|
||||||
<span
|
<span
|
||||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
|
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||||
>
|
{$_('valid-international-phone-number-is-required')}
|
||||||
{$_("valid-international-phone-number-is-required")}
|
|
||||||
</span>
|
</span>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
<div class="text-sm w-full">
|
<div class="text-sm w-full">
|
||||||
<span class="font-medium text-gray-700">{$_("groups")}</span>
|
<span class="font-medium text-gray-700">{$_('groups')}</span>
|
||||||
<select
|
<select
|
||||||
bind:value={editable.groups}
|
bind:value={editable.groups}
|
||||||
name="team"
|
name="team"
|
||||||
multiple
|
multiple
|
||||||
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2">
|
||||||
>
|
|
||||||
{#each teams as team}
|
{#each teams as team}
|
||||||
<option value={team.id}>
|
<option value={team.id}>
|
||||||
{team.parentGroup.name}
|
{team.parentGroup.name}
|
||||||
@ -318,20 +303,19 @@
|
|||||||
id="comments"
|
id="comments"
|
||||||
name="comments"
|
name="comments"
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
|
class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="ml-3 text-sm">
|
<div class="ml-3 text-sm">
|
||||||
<label for="comments" class="font-medium text-gray-700"
|
<label
|
||||||
>{$_("address")}</label
|
for="comments"
|
||||||
>
|
class="font-medium text-gray-700">{$_('address')}</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{#if editable.address_checked === true}
|
{#if editable.address_checked === true}
|
||||||
<div class="col-span-6">
|
<div class="col-span-6">
|
||||||
<label for="address1" class="block text-sm font-medium text-gray-700"
|
<label
|
||||||
>{$_("address")}</label
|
for="address1"
|
||||||
>
|
class="block text-sm font-medium text-gray-700">{$_('address')}</label>
|
||||||
<input
|
<input
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
placeholder="Address"
|
placeholder="Address"
|
||||||
@ -341,72 +325,65 @@
|
|||||||
bind:value={editable.address.address1}
|
bind:value={editable.address.address1}
|
||||||
type="text"
|
type="text"
|
||||||
name="address1"
|
name="address1"
|
||||||
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
|
||||||
/>
|
|
||||||
{#if !isAddress1Valid}
|
{#if !isAddress1Valid}
|
||||||
<span
|
<span
|
||||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
|
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||||
>
|
{$_('address-is-required')}
|
||||||
{$_("address-is-required")}
|
|
||||||
</span>
|
</span>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
<div class="col-span-6">
|
<div class="col-span-6">
|
||||||
<label for="address2" class="block text-sm font-medium text-gray-700"
|
<label
|
||||||
>{$_("apartment-suite-etc")}</label
|
for="address2"
|
||||||
>
|
class="block text-sm font-medium text-gray-700">{$_('apartment-suite-etc')}</label>
|
||||||
<input
|
<input
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
placeholder={$_("apartment-suite-etc")}
|
placeholder={$_('apartment-suite-etc')}
|
||||||
bind:value={editable.address.address2}
|
bind:value={editable.address.address2}
|
||||||
type="text"
|
type="text"
|
||||||
name="address2"
|
name="address2"
|
||||||
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="col-span-6">
|
<div class="col-span-6">
|
||||||
<label for="zipcode" class="block text-sm font-medium text-gray-700"
|
<label
|
||||||
>{$_("zip-postal-code")}</label
|
for="zipcode"
|
||||||
>
|
class="block text-sm font-medium text-gray-700">{$_('zip-postal-code')}</label>
|
||||||
<input
|
<input
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
placeholder={$_("zip-postal-code")}
|
placeholder={$_('zip-postal-code')}
|
||||||
class:border-red-500={!iszipcodevalid}
|
class:border-red-500={!iszipcodevalid}
|
||||||
class:focus:border-red-500={!iszipcodevalid}
|
class:focus:border-red-500={!iszipcodevalid}
|
||||||
class:focus:ring-red-500={!iszipcodevalid}
|
class:focus:ring-red-500={!iszipcodevalid}
|
||||||
bind:value={editable.address.postalcode}
|
bind:value={editable.address.postalcode}
|
||||||
type="text"
|
type="text"
|
||||||
name="zipcode"
|
name="zipcode"
|
||||||
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
|
||||||
/>
|
|
||||||
{#if !iszipcodevalid}
|
{#if !iszipcodevalid}
|
||||||
<span
|
<span
|
||||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
|
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||||
>
|
{$_('valid-zipcode-postal-code-is-required')}
|
||||||
{$_("valid-zipcode-postal-code-is-required")}
|
|
||||||
</span>
|
</span>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
<div class="col-span-6">
|
<div class="col-span-6">
|
||||||
<label for="city" class="block text-sm font-medium text-gray-700"
|
<label
|
||||||
>{$_("city")}</label
|
for="city"
|
||||||
>
|
class="block text-sm font-medium text-gray-700">{$_('city')}</label>
|
||||||
<input
|
<input
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
placeholder={$_("city")}
|
placeholder={$_('city')}
|
||||||
class:border-red-500={!iscityvalid}
|
class:border-red-500={!iscityvalid}
|
||||||
class:focus:border-red-500={!iscityvalid}
|
class:focus:border-red-500={!iscityvalid}
|
||||||
class:focus:ring-red-500={!iscityvalid}
|
class:focus:ring-red-500={!iscityvalid}
|
||||||
bind:value={editable.address.city}
|
bind:value={editable.address.city}
|
||||||
type="text"
|
type="text"
|
||||||
name="city"
|
name="city"
|
||||||
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
|
||||||
/>
|
|
||||||
{#if !iscityvalid}
|
{#if !iscityvalid}
|
||||||
<span
|
<span
|
||||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
|
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||||
>
|
{$_('valid-city-is-required')}
|
||||||
{$_("valid-city-is-required")}
|
|
||||||
</span>
|
</span>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -9,22 +9,21 @@
|
|||||||
|
|
||||||
<section class="container p-5">
|
<section class="container p-5">
|
||||||
<span class="mb-1 text-3xl font-extrabold leading-tight">
|
<span class="mb-1 text-3xl font-extrabold leading-tight">
|
||||||
{$_("contacts")}
|
{$_('contacts')}
|
||||||
{#if store.state.jwtinfo.userdetails.permissions.includes("CONTACT:CREATE")}
|
{#if store.state.jwtinfo.userdetails.permissions.includes('CONTACT:CREATE')}
|
||||||
<button
|
<button
|
||||||
on:click={() => {
|
on:click={() => {
|
||||||
modal_open = true;
|
modal_open = true;
|
||||||
}}
|
}}
|
||||||
type="button"
|
type="button"
|
||||||
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
|
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
|
||||||
>
|
{$_('create-a-new-contact')}
|
||||||
{$_("create-a-new-contact")}
|
|
||||||
</button>
|
</button>
|
||||||
{/if}
|
{/if}
|
||||||
</span>
|
</span>
|
||||||
<ContactsOverview bind:current_contacts />
|
<ContactsOverview bind:current_contacts />
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{#if store.state.jwtinfo.userdetails.permissions.includes("CONTACT:CREATE")}
|
{#if store.state.jwtinfo.userdetails.permissions.includes('CONTACT:CREATE')}
|
||||||
<AddContactModal bind:current_contacts bind:modal_open />
|
<AddContactModal bind:current_contacts bind:modal_open />
|
||||||
{/if}
|
{/if}
|
||||||
|
|||||||
@ -9,8 +9,8 @@
|
|||||||
<div class="text-center items-center justify-center">
|
<div class="text-center items-center justify-center">
|
||||||
<p class="mb-16 text-lg text-gray-500">
|
<p class="mb-16 text-lg text-gray-500">
|
||||||
<img class="w-full h-44" src={team_empty} alt="" />
|
<img class="w-full h-44" src={team_empty} alt="" />
|
||||||
<span class="font-bold">{$_("there-are-no-contacts-added-yet")}</span><br />
|
<span class="font-bold">{$_('there-are-no-contacts-added-yet')}</span><br />
|
||||||
<span>{$_("add-your-first-contact")}</span>
|
<span>{$_('add-your-first-contact')}</span>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@ -1,5 +1,6 @@
|
|||||||
<script>
|
<script>
|
||||||
import { _ } from "svelte-i18n";
|
import { _ } from "svelte-i18n";
|
||||||
|
import Toastify from "toastify-js";
|
||||||
import { GroupContactService } from "@odit/lfk-client-js";
|
import { GroupContactService } from "@odit/lfk-client-js";
|
||||||
const promise = GroupContactService.groupContactControllerGetAll().then(
|
const promise = GroupContactService.groupContactControllerGetAll().then(
|
||||||
(result) => {
|
(result) => {
|
||||||
@ -8,20 +9,18 @@
|
|||||||
);
|
);
|
||||||
import store from "../../store";
|
import store from "../../store";
|
||||||
import ContactsEmptyState from "./ContactsEmptyState.svelte";
|
import ContactsEmptyState from "./ContactsEmptyState.svelte";
|
||||||
import toast from "svelte-french-toast";
|
|
||||||
$: searchvalue = "";
|
$: searchvalue = "";
|
||||||
$: active_deletes = [];
|
$: active_deletes = [];
|
||||||
export let current_contacts = [];
|
export let current_contacts = [];
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if store.state.jwtinfo.userdetails.permissions.includes("TEAM:GET")}
|
{#if store.state.jwtinfo.userdetails.permissions.includes('TEAM:GET')}
|
||||||
{#await promise}
|
{#await promise}
|
||||||
<div
|
<div
|
||||||
class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
|
class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
|
||||||
role="alert"
|
role="alert">
|
||||||
>
|
<p class="font-bold">{$_('contacts-are-being-loaded')}</p>
|
||||||
<p class="font-bold">{$_("contacts-are-being-loaded")}</p>
|
<p class="text-sm">{$_('this-might-take-a-moment')}</p>
|
||||||
<p class="text-sm">{$_("this-might-take-a-moment")}</p>
|
|
||||||
</div>
|
</div>
|
||||||
{:then}
|
{:then}
|
||||||
{#if current_contacts.length === 0}
|
{#if current_contacts.length === 0}
|
||||||
@ -30,36 +29,31 @@
|
|||||||
<input
|
<input
|
||||||
type="search"
|
type="search"
|
||||||
bind:value={searchvalue}
|
bind:value={searchvalue}
|
||||||
placeholder={$_("datatable.search")}
|
placeholder={$_('datatable.search')}
|
||||||
aria-label={$_("datatable.search")}
|
aria-label={$_('datatable.search')}
|
||||||
class="mb-4"
|
class="mb-4" />
|
||||||
/>
|
|
||||||
<div
|
<div
|
||||||
class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll"
|
class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
|
||||||
>
|
|
||||||
<table class="divide-y divide-gray-200 w-full">
|
<table class="divide-y divide-gray-200 w-full">
|
||||||
<thead class="bg-gray-50">
|
<thead class="bg-gray-50">
|
||||||
<tr class="odd:bg-white even:bg-gray-100">
|
<tr>
|
||||||
<th
|
<th
|
||||||
scope="col"
|
scope="col"
|
||||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
>
|
{$_('name')}
|
||||||
{$_("name")}
|
|
||||||
</th>
|
</th>
|
||||||
<th
|
<th
|
||||||
scope="col"
|
scope="col"
|
||||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
>
|
{$_('groups')}
|
||||||
{$_("groups")}
|
|
||||||
</th>
|
</th>
|
||||||
<th
|
<th
|
||||||
scope="col"
|
scope="col"
|
||||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
>
|
{$_('address')}
|
||||||
{$_("address")}
|
|
||||||
</th>
|
</th>
|
||||||
<th scope="col" class="relative px-6 py-3">
|
<th scope="col" class="relative px-6 py-3">
|
||||||
<span class="sr-only">{$_("action")}</span>
|
<span class="sr-only">{$_('action')}</span>
|
||||||
</th>
|
</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
@ -69,16 +63,13 @@
|
|||||||
.toString()
|
.toString()
|
||||||
.toLowerCase()
|
.toLowerCase()
|
||||||
.includes(searchvalue)}
|
.includes(searchvalue)}
|
||||||
<tr
|
<tr data-rowid="team_{t.id}">
|
||||||
class="odd:bg-white even:bg-gray-100"
|
|
||||||
data-rowid="team_{t.id}"
|
|
||||||
>
|
|
||||||
<td class="px-6 py-4 whitespace-nowrap">
|
<td class="px-6 py-4 whitespace-nowrap">
|
||||||
<div class="flex items-center">
|
<div class="flex items-center">
|
||||||
<div class="ml-4">
|
<div class="ml-4">
|
||||||
<div class="text-sm font-medium text-gray-900">
|
<div class="text-sm font-medium text-gray-900">
|
||||||
{t.firstname}
|
{t.firstname}
|
||||||
{t.middlename || ""}
|
{t.middlename || ''}
|
||||||
{t.lastname}
|
{t.lastname}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -90,24 +81,20 @@
|
|||||||
<div class="text-sm font-medium text-gray-900">
|
<div class="text-sm font-medium text-gray-900">
|
||||||
{#if t.groups.length > 0}
|
{#if t.groups.length > 0}
|
||||||
{#each t.groups as g}
|
{#each t.groups as g}
|
||||||
{#if g.responseType === "RUNNERORGANIZATION"}
|
{#if g.responseType === 'RUNNERORGANIZATION'}
|
||||||
<a
|
<a
|
||||||
href="../orgs/{g.id}"
|
href="../orgs/{g.id}"
|
||||||
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
|
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{g.name}</a>
|
||||||
>{g.name}</a
|
|
||||||
>
|
|
||||||
{:else}
|
{:else}
|
||||||
<a
|
<a
|
||||||
href="../teams/{g.id}"
|
href="../teams/{g.id}"
|
||||||
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
|
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{g.parentGroup.name}
|
||||||
>{g.parentGroup.name}
|
|
||||||
>
|
>
|
||||||
{g.name}</a
|
{g.name}</a>
|
||||||
>
|
|
||||||
{/if}
|
{/if}
|
||||||
{/each}
|
{/each}
|
||||||
{:else}
|
{:else}
|
||||||
{$_("contact-is-not-a-member-in-any-group")}
|
{$_('contact-is-not-a-member-in-any-group')}
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -119,7 +106,7 @@
|
|||||||
<div class="text-sm font-medium text-gray-900">
|
<div class="text-sm font-medium text-gray-900">
|
||||||
{#if t.address.address1 !== null}
|
{#if t.address.address1 !== null}
|
||||||
{t.address.address1}<br />
|
{t.address.address1}<br />
|
||||||
{t.address.address2 || ""}<br />
|
{t.address.address2 || ''}<br />
|
||||||
{t.address.postalcode}
|
{t.address.postalcode}
|
||||||
{t.address.city}
|
{t.address.city}
|
||||||
{t.address.country}
|
{t.address.country}
|
||||||
@ -130,53 +117,45 @@
|
|||||||
</td>
|
</td>
|
||||||
{#if active_deletes[t.id] === true}
|
{#if active_deletes[t.id] === true}
|
||||||
<td
|
<td
|
||||||
class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
|
class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
||||||
>
|
|
||||||
<button
|
<button
|
||||||
on:click={() => {
|
on:click={() => {
|
||||||
active_deletes[t.id] = false;
|
active_deletes[t.id] = false;
|
||||||
}}
|
}}
|
||||||
tabindex="0"
|
tabindex="0"
|
||||||
class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer"
|
class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">{$_('cancel-delete')}</button>
|
||||||
>{$_("cancel-delete")}</button
|
|
||||||
>
|
|
||||||
<button
|
<button
|
||||||
on:click={() => {
|
on:click={() => {
|
||||||
toast.loading($_("deleting-contact"));
|
GroupContactService.groupContactControllerRemove(t.id, false).then(
|
||||||
GroupContactService.groupContactControllerRemove(
|
(resp) => {
|
||||||
t.id,
|
current_contacts = current_contacts.filter(
|
||||||
false
|
(obj) => obj.id !== t.id
|
||||||
).then((resp) => {
|
);
|
||||||
current_contacts = current_contacts.filter(
|
Toastify({
|
||||||
(obj) => obj.id !== t.id
|
text: $_('contact-deleted'),
|
||||||
);
|
duration: 500,
|
||||||
toast.dismiss();
|
backgroundColor:
|
||||||
toast($_("contact-deleted"));
|
'linear-gradient(to right, #00b09b, #96c93d)',
|
||||||
});
|
}).showToast();
|
||||||
|
}
|
||||||
|
);
|
||||||
}}
|
}}
|
||||||
tabindex="0"
|
tabindex="0"
|
||||||
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
|
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('confirm-delete')}</button>
|
||||||
>{$_("confirm-delete")}</button
|
|
||||||
>
|
|
||||||
</td>
|
</td>
|
||||||
{:else}
|
{:else}
|
||||||
<td
|
<td
|
||||||
class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
|
class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
||||||
>
|
|
||||||
<a
|
<a
|
||||||
href="./{t.id}"
|
href="./{t.id}"
|
||||||
class="text-indigo-600 hover:text-indigo-900"
|
class="text-indigo-600 hover:text-indigo-900">{$_('details')}</a>
|
||||||
>{$_("details")}</a
|
{#if store.state.jwtinfo.userdetails.permissions.includes('TEAM:DELETE')}
|
||||||
>
|
|
||||||
{#if store.state.jwtinfo.userdetails.permissions.includes("TEAM:DELETE")}
|
|
||||||
<button
|
<button
|
||||||
on:click={() => {
|
on:click={() => {
|
||||||
active_deletes[t.id] = true;
|
active_deletes[t.id] = true;
|
||||||
}}
|
}}
|
||||||
tabindex="0"
|
tabindex="0"
|
||||||
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
|
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('delete')}</button>
|
||||||
>{$_("delete")}</button
|
|
||||||
>
|
|
||||||
{/if}
|
{/if}
|
||||||
</td>
|
</td>
|
||||||
{/if}
|
{/if}
|
||||||
@ -190,7 +169,7 @@
|
|||||||
{:catch error}
|
{:catch error}
|
||||||
<div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
|
<div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
|
||||||
<span class="inline-block align-middle mr-8">
|
<span class="inline-block align-middle mr-8">
|
||||||
<b class="capitalize">{$_("general_promise_error")}</b>
|
<b class="capitalize">{$_('general_promise_error')}</b>
|
||||||
{error}
|
{error}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -5,7 +5,7 @@
|
|||||||
import { router } from "tinro";
|
import { router } from "tinro";
|
||||||
import NoComponentLoaded from "../base/NoComponentLoaded.svelte";
|
import NoComponentLoaded from "../base/NoComponentLoaded.svelte";
|
||||||
import { AuthService } from "@odit/lfk-client-js";
|
import { AuthService } from "@odit/lfk-client-js";
|
||||||
import { Toaster } from "svelte-french-toast";
|
import { Toaster } from 'svelte-french-toast';
|
||||||
$: navOpen = false;
|
$: navOpen = false;
|
||||||
function logout() {
|
function logout() {
|
||||||
localForage.clear();
|
localForage.clear();
|
||||||
@ -13,412 +13,6 @@
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<section class="min-h-screen bg-gray-50">
|
|
||||||
<div
|
|
||||||
class:collapsed_navigation={!navOpen}
|
|
||||||
class="select-none fixed top-0 left-0 z-20 h-full pb-10 overflow-x-hidden overflow-y-auto transition origin-left transform border-r w-60 bg-gray-50"
|
|
||||||
>
|
|
||||||
<a href="/" class="flex items-center px-4 py-5">
|
|
||||||
<img src="/lfk-logo.png" alt="Logo" class="h-10" />
|
|
||||||
<h3 class="text-lg font-bold">LfK!Admin</h3>
|
|
||||||
</a>
|
|
||||||
<nav class="text-sm font-medium text-gray-600" aria-label="Main Navigation">
|
|
||||||
<a
|
|
||||||
class:bg-gray-100={$router.path === "/"}
|
|
||||||
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
|
|
||||||
href="/"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 20 20"
|
|
||||||
fill="currentColor"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
<span>{$_("dashboard-title")}</span>
|
|
||||||
</a>
|
|
||||||
{#if store.state.jwtinfo.userdetails.permissions.includes("ORGANIZATION:GET")}
|
|
||||||
<a
|
|
||||||
class:bg-gray-100={$router.path.includes("/orgs/")}
|
|
||||||
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
|
|
||||||
href="/orgs/"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
|
|
||||||
fill="currentColor"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
width="24"
|
|
||||||
height="24"
|
|
||||||
><path fill="none" d="M0 0h24v24H0z" />
|
|
||||||
<path
|
|
||||||
d="M17 19h2v-8h-6v8h2v-6h2v6zM3 19V4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v5h2v10h1v2H2v-2h1zm4-8v2h2v-2H7zm0 4v2h2v-2H7zm0-8v2h2V7H7z"
|
|
||||||
/></svg
|
|
||||||
>
|
|
||||||
<span>{$_("orgs")}</span>
|
|
||||||
</a>
|
|
||||||
{/if}
|
|
||||||
{#if store.state.jwtinfo.userdetails.permissions.includes("USER:GET")}
|
|
||||||
<a
|
|
||||||
class:bg-gray-100={$router.path === "/users/"}
|
|
||||||
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
|
|
||||||
href="/users/"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="24"
|
|
||||||
height="24"
|
|
||||||
class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
|
|
||||||
fill="currentColor"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
><path fill="none" d="M0 0h24v24H0z" />
|
|
||||||
<path
|
|
||||||
d="M12 14v8H4a8 8 0 018-8zm0-1a6 6 0 110-12 6 6 0 010 12zm2.6 5.81a3.51 3.51 0 010-1.62l-1-.57 1-1.74 1 .58a3.5 3.5 0 011.4-.82V13.5h2v1.15a3.5 3.5 0 011.4.8l1-.57 1 1.74-1 .57a3.51 3.51 0 010 1.62l1 .57-1 1.74-1-.58a3.5 3.5 0 01-1.4.82v1.14h-2v-1.15a3.5 3.5 0 01-1.4-.8l-1 .57-1-1.74 1-.57zM18 17a1 1 0 100 2 1 1 0 000-2z"
|
|
||||||
/></svg
|
|
||||||
>
|
|
||||||
<span>{$_("users")}</span>
|
|
||||||
</a>
|
|
||||||
{/if}
|
|
||||||
{#if store.state.jwtinfo.userdetails.permissions.includes("USERGROUP:GET")}
|
|
||||||
<a
|
|
||||||
class:bg-gray-100={$router.path === "/groups/"}
|
|
||||||
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
|
|
||||||
href="/groups/"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
|
|
||||||
fill="currentColor"
|
|
||||||
width="24"
|
|
||||||
height="24"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 640 512"
|
|
||||||
><path
|
|
||||||
fill="currentColor"
|
|
||||||
d="M610.5 341.3c2.6-14.1 2.6-28.5 0-42.6l25.8-14.9c3-1.7 4.3-5.2 3.3-8.5-6.7-21.6-18.2-41.2-33.2-57.4-2.3-2.5-6-3.1-9-1.4l-25.8 14.9c-10.9-9.3-23.4-16.5-36.9-21.3v-29.8c0-3.4-2.4-6.4-5.7-7.1-22.3-5-45-4.8-66.2 0-3.3.7-5.7 3.7-5.7 7.1v29.8c-13.5 4.8-26 12-36.9 21.3l-25.8-14.9c-2.9-1.7-6.7-1.1-9 1.4-15 16.2-26.5 35.8-33.2 57.4-1 3.3.4 6.8 3.3 8.5l25.8 14.9c-2.6 14.1-2.6 28.5 0 42.6l-25.8 14.9c-3 1.7-4.3 5.2-3.3 8.5 6.7 21.6 18.2 41.1 33.2 57.4 2.3 2.5 6 3.1 9 1.4l25.8-14.9c10.9 9.3 23.4 16.5 36.9 21.3v29.8c0 3.4 2.4 6.4 5.7 7.1 22.3 5 45 4.8 66.2 0 3.3-.7 5.7-3.7 5.7-7.1v-29.8c13.5-4.8 26-12 36.9-21.3l25.8 14.9c2.9 1.7 6.7 1.1 9-1.4 15-16.2 26.5-35.8 33.2-57.4 1-3.3-.4-6.8-3.3-8.5l-25.8-14.9zM496 368.5c-26.8 0-48.5-21.8-48.5-48.5s21.8-48.5 48.5-48.5 48.5 21.8 48.5 48.5-21.7 48.5-48.5 48.5zM96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm224 32c1.9 0 3.7-.5 5.6-.6 8.3-21.7 20.5-42.1 36.3-59.2 7.4-8 17.9-12.6 28.9-12.6 6.9 0 13.7 1.8 19.6 5.3l7.9 4.6c.8-.5 1.6-.9 2.4-1.4 7-14.6 11.2-30.8 11.2-48 0-61.9-50.1-112-112-112S208 82.1 208 144c0 61.9 50.1 112 112 112zm105.2 194.5c-2.3-1.2-4.6-2.6-6.8-3.9-8.2 4.8-15.3 9.8-27.5 9.8-10.9 0-21.4-4.6-28.9-12.6-18.3-19.8-32.3-43.9-40.2-69.6-10.7-34.5 24.9-49.7 25.8-50.3-.1-2.6-.1-5.2 0-7.8l-7.9-4.6c-3.8-2.2-7-5-9.8-8.1-3.3.2-6.5.6-9.8.6-24.6 0-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h255.4c-3.7-6-6.2-12.8-6.2-20.3v-9.2zM173.1 274.6C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z"
|
|
||||||
/></svg
|
|
||||||
>
|
|
||||||
<span>{$_("user-groups")}</span>
|
|
||||||
</a>
|
|
||||||
{/if}
|
|
||||||
{#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:GET")}
|
|
||||||
<a
|
|
||||||
class:bg-gray-100={$router.path === "/runners/"}
|
|
||||||
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
|
|
||||||
href="/runners/"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
|
|
||||||
fill="currentColor"
|
|
||||||
width="24"
|
|
||||||
height="24"
|
|
||||||
><path fill="none" d="M0 0h24v24H0z" />
|
|
||||||
<path
|
|
||||||
d="M9.83 8.79L8 9.456V13H6V8.05h.015l5.268-1.918c.244-.093.51-.14.782-.131a2.616 2.616 0 0 1 2.427 1.82c.186.583.356.977.51 1.182A4.992 4.992 0 0 0 19 11v2a6.986 6.986 0 0 1-5.402-2.547l-.581 3.297L15 15.67V23h-2v-5.986l-2.05-1.987-.947 4.298-6.894-1.215.348-1.97 4.924.868L9.83 8.79zM13.5 5.5a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"
|
|
||||||
/></svg
|
|
||||||
>
|
|
||||||
<span>{$_("runners")}</span>
|
|
||||||
</a>
|
|
||||||
{/if}
|
|
||||||
{#if store.state.jwtinfo.userdetails.permissions.includes("TEAM:GET")}
|
|
||||||
<a
|
|
||||||
class:bg-gray-100={$router.path === "/teams/"}
|
|
||||||
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
|
|
||||||
href="/teams/"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
|
|
||||||
fill="currentColor"
|
|
||||||
width="24"
|
|
||||||
height="24"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 640 512"
|
|
||||||
><path
|
|
||||||
fill="currentColor"
|
|
||||||
d="M96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm448 0c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm32 32h-64c-17.6 0-33.5 7.1-45.1 18.6 40.3 22.1 68.9 62 75.1 109.4h66c17.7 0 32-14.3 32-32v-32c0-35.3-28.7-64-64-64zm-256 0c61.9 0 112-50.1 112-112S381.9 32 320 32 208 82.1 208 144s50.1 112 112 112zm76.8 32h-8.3c-20.8 10-43.9 16-68.5 16s-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48v-28.8c0-63.6-51.6-115.2-115.2-115.2zm-223.7-13.4C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z"
|
|
||||||
/></svg
|
|
||||||
>
|
|
||||||
<span>{$_("teams")}</span>
|
|
||||||
</a>
|
|
||||||
{/if}
|
|
||||||
{#if store.state.jwtinfo.userdetails.permissions.includes("DONOR:GET")}
|
|
||||||
<a
|
|
||||||
class:bg-gray-100={$router.path.includes("/donors/")}
|
|
||||||
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
|
|
||||||
href="/donors/"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
|
|
||||||
fill="currentColor"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
width="24"
|
|
||||||
height="24"
|
|
||||||
><path fill="none" d="M0 0h24v24H0z" />
|
|
||||||
<path
|
|
||||||
d="M9.33 11.5h2.17A4.5 4.5 0 0 1 16 16H8.999L9 17h8v-1a5.578 5.578 0 0 0-.886-3H19a5 5 0 0 1 4.516 2.851C21.151 18.972 17.322 21 13 21c-2.761 0-5.1-.59-7-1.625L6 10.071A6.967 6.967 0 0 1 9.33 11.5zM5 19a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v9zM18 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6zm-7-3a3 3 0 1 1 0 6 3 3 0 0 1 0-6z"
|
|
||||||
/></svg
|
|
||||||
>
|
|
||||||
<span>{$_("donors")}</span>
|
|
||||||
</a>
|
|
||||||
{/if}
|
|
||||||
{#if store.state.jwtinfo.userdetails.permissions.includes("DONATION:GET")}
|
|
||||||
<a
|
|
||||||
class:bg-gray-100={$router.path.includes("/donations/")}
|
|
||||||
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
|
|
||||||
href="/donations/"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
|
|
||||||
fill="currentColor"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
width="24"
|
|
||||||
height="24"
|
|
||||||
><path fill="none" d="M0 0h24v24H0z" />
|
|
||||||
<path
|
|
||||||
d="M14 2a8 8 0 013.3 15.3A8 8 0 116.7 6.7 8 8 0 0114 2zm-3 7H9v1a2.5 2.5 0 00-.16 5h2.25a.5.5 0 010 1H7v2h2v1h2v-1a2.5 2.5 0 00.16-5H8.91a.5.5 0 010-1H13v-2h-2V9zm3-5a5.99 5.99 0 00-4.48 2.01 8 8 0 018.47 8.47A6 6 0 0014 4z"
|
|
||||||
/></svg
|
|
||||||
>
|
|
||||||
<span>{$_("donations")}</span>
|
|
||||||
</a>
|
|
||||||
{/if}
|
|
||||||
{#if store.state.jwtinfo.userdetails.permissions.includes("TRACK:GET")}
|
|
||||||
<a
|
|
||||||
class:bg-gray-100={$router.path === "/tracks/"}
|
|
||||||
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
|
|
||||||
href="/tracks/"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
|
|
||||||
fill="currentColor"
|
|
||||||
width="24"
|
|
||||||
height="24"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 640 512"
|
|
||||||
><path
|
|
||||||
fill="currentColor"
|
|
||||||
d="M635.7 167.2L556.1 31.7c-8.8-15-28.3-20.1-43.5-11.5l-69 39.1L503.3 161c2.2 3.8.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9L416 75l-55.2 31.3 27.9 47.4c2.2 3.8.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9L333.2 122 278 153.3 337.8 255c2.2 3.7.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9l-59.7-101.7-55.2 31.3 27.9 47.4c2.2 3.8.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9l-27.9-47.5-55.2 31.3 59.7 101.7c2.2 3.7.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9L84.9 262.9l-69 39.1C.7 310.7-4.6 329.8 4.2 344.8l79.6 135.6c8.8 15 28.3 20.1 43.5 11.5L624.1 210c15.2-8.6 20.4-27.8 11.6-42.8z"
|
|
||||||
/></svg
|
|
||||||
>
|
|
||||||
<span>{$_("tracks")}</span>
|
|
||||||
</a>
|
|
||||||
{/if}
|
|
||||||
{#if store.state.jwtinfo.userdetails.permissions.includes("CARD:GET")}
|
|
||||||
<a
|
|
||||||
class:bg-gray-100={$router.path === "/cards/"}
|
|
||||||
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
|
|
||||||
href="/cards/"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
|
|
||||||
fill="currentColor"
|
|
||||||
width="24"
|
|
||||||
height="24"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<path fill="none" d="M0 0h24v24H0z" />
|
|
||||||
<path
|
|
||||||
fill="currentColor"
|
|
||||||
d="M22 10v10a1 1 0 01-1 1H3a1 1 0 01-1-1V10h20zm0-2H2V4a1 1 0 011-1h18a1 1 0 011 1v4zm-7 8v2h4v-2h-4z"
|
|
||||||
/></svg
|
|
||||||
>
|
|
||||||
<span>{$_("cards")}</span>
|
|
||||||
</a>
|
|
||||||
{/if}
|
|
||||||
{#if store.state.jwtinfo.userdetails.permissions.includes("SCAN:GET")}
|
|
||||||
<a
|
|
||||||
class:bg-gray-100={$router.path === "/scans/"}
|
|
||||||
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
|
|
||||||
href="/scans/"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
|
|
||||||
fill="currentColor"
|
|
||||||
width="24"
|
|
||||||
height="24"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
><path fill="none" d="M0 0h24v24H0z" />
|
|
||||||
<path
|
|
||||||
fill="currentColor"
|
|
||||||
d="M2 4h2v16H2V4zm4 0h1v16H6V4zm2 0h2v16H8V4zm3 0h2v16h-2V4zm3 0h2v16h-2V4zm3 0h1v16h-1V4zm2 0h3v16h-3V4z"
|
|
||||||
/></svg
|
|
||||||
>
|
|
||||||
<span>Scans</span>
|
|
||||||
</a>
|
|
||||||
{/if}
|
|
||||||
{#if store.state.jwtinfo.userdetails.permissions.includes("CONTACT:GET")}
|
|
||||||
<a
|
|
||||||
class:bg-gray-100={$router.path === "/contacts/"}
|
|
||||||
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
|
|
||||||
href="/contacts/"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
fill="currentColor"
|
|
||||||
class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
width="24"
|
|
||||||
height="24"
|
|
||||||
><path fill="none" d="M0 0h24v24H0z" />
|
|
||||||
<path
|
|
||||||
d="M2 22a8 8 0 1 1 16 0H2zm8-9c-3.315 0-6-2.685-6-6s2.685-6 6-6 6 2.685 6 6-2.685 6-6 6zm10 4h4v2h-4v-2zm-3-5h7v2h-7v-2zm2-5h5v2h-5V7z"
|
|
||||||
/></svg
|
|
||||||
>
|
|
||||||
<span>{$_("contacts")}</span>
|
|
||||||
</a>
|
|
||||||
{/if}
|
|
||||||
{#if store.state.jwtinfo.userdetails.permissions.includes("STATION:GET")}
|
|
||||||
<a
|
|
||||||
class:bg-gray-100={$router.path === "/scanstations/"}
|
|
||||||
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
|
|
||||||
href="/scanstations/"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
|
|
||||||
fill="currentColor"
|
|
||||||
width="24"
|
|
||||||
height="24"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
><path fill="none" d="M0 0h24v24H0z" />
|
|
||||||
<path
|
|
||||||
fill="currentColor"
|
|
||||||
d="M4 5v11h16V5H4zM2 4a1 1 0 011-1h18a1 1 0 011 1v14H2V4zM1 19h22v2H1v-2z"
|
|
||||||
/></svg
|
|
||||||
>
|
|
||||||
<span>{$_("scanstations")}</span>
|
|
||||||
</a>
|
|
||||||
{/if}
|
|
||||||
{#if store.state.jwtinfo.userdetails.permissions.includes("STATSCLIENT:GET")}
|
|
||||||
<a
|
|
||||||
class:bg-gray-100={$router.path === "/statsclients/"}
|
|
||||||
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
|
|
||||||
href="/statsclients/"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
|
|
||||||
fill="currentColor"
|
|
||||||
width="24"
|
|
||||||
height="24"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
><path fill="none" d="M0 0h24v24H0z" />
|
|
||||||
<path
|
|
||||||
fill="currentColor"
|
|
||||||
d="M4 5v11h16V5H4zM2 4a1 1 0 011-1h18a1 1 0 011 1v14H2V4zM1 19h22v2H1v-2z"
|
|
||||||
/></svg
|
|
||||||
>
|
|
||||||
<span>{$_("statsclients")}</span>
|
|
||||||
</a>
|
|
||||||
{/if}
|
|
||||||
<a
|
|
||||||
class:bg-gray-100={$router.path === "/settings/"}
|
|
||||||
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
|
|
||||||
href="/settings/"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 20 20"
|
|
||||||
fill="currentColor"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
fill-rule="evenodd"
|
|
||||||
d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z"
|
|
||||||
clip-rule="evenodd"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
<span>{$_("settings")}</span>
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
class:bg-gray-100={$router.path === "/about/"}
|
|
||||||
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
|
|
||||||
href="/about/"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
stroke-width="2"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
><circle cx="12" cy="12" r="10" />
|
|
||||||
<path d="M12 16v-4M12 8h.01" /></svg
|
|
||||||
>
|
|
||||||
<span>{$_("about")}</span>
|
|
||||||
</a>
|
|
||||||
<button
|
|
||||||
tabindex="0"
|
|
||||||
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
|
|
||||||
on:click={() => {
|
|
||||||
AuthService.authControllerLogout();
|
|
||||||
logout();
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
|
|
||||||
fill="currentColor"
|
|
||||||
width="24"
|
|
||||||
height="24"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
><path fill="none" d="M0 0h24v24H0z" />
|
|
||||||
<path
|
|
||||||
d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2a9.985 9.985 0 0 1 8 4h-2.71a8 8 0 1 0 .001 12h2.71A9.985 9.985 0 0 1 12 22zm7-6v-3h-8v-2h8V8l5 4-5 4z"
|
|
||||||
/></svg
|
|
||||||
>
|
|
||||||
<span>{$_("logout")}</span>
|
|
||||||
</button>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
<div class="ml-0 transition md:ml-60">
|
|
||||||
<header
|
|
||||||
class="flex items-center justify-between w-full px-4 bg-white border-b h-14 md:hidden"
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
on:click={() => {
|
|
||||||
navOpen = true;
|
|
||||||
}}
|
|
||||||
class="block btn btn-light md:hidden"
|
|
||||||
>
|
|
||||||
<span class="sr-only">Menu</span><svg
|
|
||||||
class="w-4 h-4"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 20 20"
|
|
||||||
fill="currentcolor"
|
|
||||||
><path
|
|
||||||
fill-rule="evenodd"
|
|
||||||
d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4A1 1 0 013 5zm0 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
|
|
||||||
clip-rule="evenodd"
|
|
||||||
/></svg
|
|
||||||
></button
|
|
||||||
>
|
|
||||||
</header>
|
|
||||||
<Toaster position="top-right" />
|
|
||||||
<slot>
|
|
||||||
<NoComponentLoaded />
|
|
||||||
</slot>
|
|
||||||
</div>
|
|
||||||
{#if navOpen === true}
|
|
||||||
<button
|
|
||||||
on:click={() => {
|
|
||||||
navOpen = false;
|
|
||||||
}}
|
|
||||||
class:hidden={!navOpen}
|
|
||||||
class="fixed inset-0 z-10 w-screen h-screen bg-black bg-opacity-25 md:hidden"
|
|
||||||
/>
|
|
||||||
{/if}
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.collapsed_navigation {
|
.collapsed_navigation {
|
||||||
transform: translateX(-100%);
|
transform: translateX(-100%);
|
||||||
@ -429,3 +23,341 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
<section class="min-h-screen bg-gray-50">
|
||||||
|
<div
|
||||||
|
class:collapsed_navigation={!navOpen}
|
||||||
|
class="select-none fixed top-0 left-0 z-20 h-full pb-10 overflow-x-hidden overflow-y-auto transition origin-left transform border-r w-60 bg-gray-50">
|
||||||
|
<a href="/" class="flex items-center px-4 py-5">
|
||||||
|
<img src="/lfk-logo.png" alt="Logo" class="h-10" />
|
||||||
|
<h3 class="text-lg">Lauf für Kaya! Admin</h3>
|
||||||
|
</a>
|
||||||
|
<nav class="text-sm font-medium text-gray-600" aria-label="Main Navigation">
|
||||||
|
<a
|
||||||
|
class:bg-gray-100={$router.path === '/'}
|
||||||
|
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
|
||||||
|
href="/">
|
||||||
|
<svg
|
||||||
|
class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
fill="currentColor">
|
||||||
|
<path
|
||||||
|
d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
|
||||||
|
</svg>
|
||||||
|
<span>{$_('dashboard-title')}</span>
|
||||||
|
</a>
|
||||||
|
{#if store.state.jwtinfo.userdetails.permissions.includes('ORGANIZATION:GET')}
|
||||||
|
<a
|
||||||
|
class:bg-gray-100={$router.path.includes('/orgs/')}
|
||||||
|
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
|
||||||
|
href="/orgs/">
|
||||||
|
<svg
|
||||||
|
class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
|
||||||
|
fill="currentColor"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
width="24"
|
||||||
|
height="24"><path fill="none" d="M0 0h24v24H0z" />
|
||||||
|
<path
|
||||||
|
d="M17 19h2v-8h-6v8h2v-6h2v6zM3 19V4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v5h2v10h1v2H2v-2h1zm4-8v2h2v-2H7zm0 4v2h2v-2H7zm0-8v2h2V7H7z" /></svg>
|
||||||
|
<span>{$_('orgs')}</span>
|
||||||
|
</a>
|
||||||
|
{/if}
|
||||||
|
{#if store.state.jwtinfo.userdetails.permissions.includes('USER:GET')}
|
||||||
|
<a
|
||||||
|
class:bg-gray-100={$router.path === '/users/'}
|
||||||
|
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
|
||||||
|
href="/users/">
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z" />
|
||||||
|
<path
|
||||||
|
d="M12 14v8H4a8 8 0 018-8zm0-1a6 6 0 110-12 6 6 0 010 12zm2.6 5.81a3.51 3.51 0 010-1.62l-1-.57 1-1.74 1 .58a3.5 3.5 0 011.4-.82V13.5h2v1.15a3.5 3.5 0 011.4.8l1-.57 1 1.74-1 .57a3.51 3.51 0 010 1.62l1 .57-1 1.74-1-.58a3.5 3.5 0 01-1.4.82v1.14h-2v-1.15a3.5 3.5 0 01-1.4-.8l-1 .57-1-1.74 1-.57zM18 17a1 1 0 100 2 1 1 0 000-2z" /></svg>
|
||||||
|
<span>{$_('users')}</span>
|
||||||
|
</a>
|
||||||
|
{/if}
|
||||||
|
{#if store.state.jwtinfo.userdetails.permissions.includes('USERGROUP:GET')}
|
||||||
|
<a
|
||||||
|
class:bg-gray-100={$router.path === '/groups/'}
|
||||||
|
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
|
||||||
|
href="/groups/">
|
||||||
|
<svg
|
||||||
|
class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
|
||||||
|
fill="currentColor"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 640 512"><path
|
||||||
|
fill="currentColor"
|
||||||
|
d="M610.5 341.3c2.6-14.1 2.6-28.5 0-42.6l25.8-14.9c3-1.7 4.3-5.2 3.3-8.5-6.7-21.6-18.2-41.2-33.2-57.4-2.3-2.5-6-3.1-9-1.4l-25.8 14.9c-10.9-9.3-23.4-16.5-36.9-21.3v-29.8c0-3.4-2.4-6.4-5.7-7.1-22.3-5-45-4.8-66.2 0-3.3.7-5.7 3.7-5.7 7.1v29.8c-13.5 4.8-26 12-36.9 21.3l-25.8-14.9c-2.9-1.7-6.7-1.1-9 1.4-15 16.2-26.5 35.8-33.2 57.4-1 3.3.4 6.8 3.3 8.5l25.8 14.9c-2.6 14.1-2.6 28.5 0 42.6l-25.8 14.9c-3 1.7-4.3 5.2-3.3 8.5 6.7 21.6 18.2 41.1 33.2 57.4 2.3 2.5 6 3.1 9 1.4l25.8-14.9c10.9 9.3 23.4 16.5 36.9 21.3v29.8c0 3.4 2.4 6.4 5.7 7.1 22.3 5 45 4.8 66.2 0 3.3-.7 5.7-3.7 5.7-7.1v-29.8c13.5-4.8 26-12 36.9-21.3l25.8 14.9c2.9 1.7 6.7 1.1 9-1.4 15-16.2 26.5-35.8 33.2-57.4 1-3.3-.4-6.8-3.3-8.5l-25.8-14.9zM496 368.5c-26.8 0-48.5-21.8-48.5-48.5s21.8-48.5 48.5-48.5 48.5 21.8 48.5 48.5-21.7 48.5-48.5 48.5zM96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm224 32c1.9 0 3.7-.5 5.6-.6 8.3-21.7 20.5-42.1 36.3-59.2 7.4-8 17.9-12.6 28.9-12.6 6.9 0 13.7 1.8 19.6 5.3l7.9 4.6c.8-.5 1.6-.9 2.4-1.4 7-14.6 11.2-30.8 11.2-48 0-61.9-50.1-112-112-112S208 82.1 208 144c0 61.9 50.1 112 112 112zm105.2 194.5c-2.3-1.2-4.6-2.6-6.8-3.9-8.2 4.8-15.3 9.8-27.5 9.8-10.9 0-21.4-4.6-28.9-12.6-18.3-19.8-32.3-43.9-40.2-69.6-10.7-34.5 24.9-49.7 25.8-50.3-.1-2.6-.1-5.2 0-7.8l-7.9-4.6c-3.8-2.2-7-5-9.8-8.1-3.3.2-6.5.6-9.8.6-24.6 0-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h255.4c-3.7-6-6.2-12.8-6.2-20.3v-9.2zM173.1 274.6C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z" /></svg>
|
||||||
|
<span>{$_('user-groups')}</span>
|
||||||
|
</a>
|
||||||
|
{/if}
|
||||||
|
{#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:GET')}
|
||||||
|
<a
|
||||||
|
class:bg-gray-100={$router.path === '/runners/'}
|
||||||
|
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
|
||||||
|
href="/runners/">
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
|
||||||
|
fill="currentColor"
|
||||||
|
width="24"
|
||||||
|
height="24"><path fill="none" d="M0 0h24v24H0z" />
|
||||||
|
<path
|
||||||
|
d="M9.83 8.79L8 9.456V13H6V8.05h.015l5.268-1.918c.244-.093.51-.14.782-.131a2.616 2.616 0 0 1 2.427 1.82c.186.583.356.977.51 1.182A4.992 4.992 0 0 0 19 11v2a6.986 6.986 0 0 1-5.402-2.547l-.581 3.297L15 15.67V23h-2v-5.986l-2.05-1.987-.947 4.298-6.894-1.215.348-1.97 4.924.868L9.83 8.79zM13.5 5.5a2 2 0 1 1 0-4 2 2 0 0 1 0 4z" /></svg>
|
||||||
|
<span>{$_('runners')}</span>
|
||||||
|
</a>
|
||||||
|
{/if}
|
||||||
|
{#if store.state.jwtinfo.userdetails.permissions.includes('TEAM:GET')}
|
||||||
|
<a
|
||||||
|
class:bg-gray-100={$router.path === '/teams/'}
|
||||||
|
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
|
||||||
|
href="/teams/">
|
||||||
|
<svg
|
||||||
|
class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
|
||||||
|
fill="currentColor"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 640 512"><path
|
||||||
|
fill="currentColor"
|
||||||
|
d="M96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm448 0c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm32 32h-64c-17.6 0-33.5 7.1-45.1 18.6 40.3 22.1 68.9 62 75.1 109.4h66c17.7 0 32-14.3 32-32v-32c0-35.3-28.7-64-64-64zm-256 0c61.9 0 112-50.1 112-112S381.9 32 320 32 208 82.1 208 144s50.1 112 112 112zm76.8 32h-8.3c-20.8 10-43.9 16-68.5 16s-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48v-28.8c0-63.6-51.6-115.2-115.2-115.2zm-223.7-13.4C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z" /></svg>
|
||||||
|
<span>{$_('teams')}</span>
|
||||||
|
</a>
|
||||||
|
{/if}
|
||||||
|
{#if store.state.jwtinfo.userdetails.permissions.includes('DONOR:GET')}
|
||||||
|
<a
|
||||||
|
class:bg-gray-100={$router.path.includes('/donors/')}
|
||||||
|
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
|
||||||
|
href="/donors/">
|
||||||
|
<svg
|
||||||
|
class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
|
||||||
|
fill="currentColor"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
width="24"
|
||||||
|
height="24"><path fill="none" d="M0 0h24v24H0z" />
|
||||||
|
<path
|
||||||
|
d="M9.33 11.5h2.17A4.5 4.5 0 0 1 16 16H8.999L9 17h8v-1a5.578 5.578 0 0 0-.886-3H19a5 5 0 0 1 4.516 2.851C21.151 18.972 17.322 21 13 21c-2.761 0-5.1-.59-7-1.625L6 10.071A6.967 6.967 0 0 1 9.33 11.5zM5 19a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v9zM18 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6zm-7-3a3 3 0 1 1 0 6 3 3 0 0 1 0-6z" /></svg>
|
||||||
|
<span>{$_('donors')}</span>
|
||||||
|
</a>
|
||||||
|
{/if}
|
||||||
|
{#if store.state.jwtinfo.userdetails.permissions.includes('DONATION:GET')}
|
||||||
|
<a
|
||||||
|
class:bg-gray-100={$router.path.includes('/donations/')}
|
||||||
|
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
|
||||||
|
href="/donations/">
|
||||||
|
<svg
|
||||||
|
class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
|
||||||
|
fill="currentColor"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
width="24"
|
||||||
|
height="24"><path fill="none" d="M0 0h24v24H0z" />
|
||||||
|
<path
|
||||||
|
d="M14 2a8 8 0 013.3 15.3A8 8 0 116.7 6.7 8 8 0 0114 2zm-3 7H9v1a2.5 2.5 0 00-.16 5h2.25a.5.5 0 010 1H7v2h2v1h2v-1a2.5 2.5 0 00.16-5H8.91a.5.5 0 010-1H13v-2h-2V9zm3-5a5.99 5.99 0 00-4.48 2.01 8 8 0 018.47 8.47A6 6 0 0014 4z" /></svg>
|
||||||
|
<span>{$_('donations')}</span>
|
||||||
|
</a>
|
||||||
|
{/if}
|
||||||
|
{#if store.state.jwtinfo.userdetails.permissions.includes('TRACK:GET')}
|
||||||
|
<a
|
||||||
|
class:bg-gray-100={$router.path === '/tracks/'}
|
||||||
|
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
|
||||||
|
href="/tracks/">
|
||||||
|
<svg
|
||||||
|
class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
|
||||||
|
fill="currentColor"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 640 512"><path
|
||||||
|
fill="currentColor"
|
||||||
|
d="M635.7 167.2L556.1 31.7c-8.8-15-28.3-20.1-43.5-11.5l-69 39.1L503.3 161c2.2 3.8.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9L416 75l-55.2 31.3 27.9 47.4c2.2 3.8.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9L333.2 122 278 153.3 337.8 255c2.2 3.7.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9l-59.7-101.7-55.2 31.3 27.9 47.4c2.2 3.8.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9l-27.9-47.5-55.2 31.3 59.7 101.7c2.2 3.7.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9L84.9 262.9l-69 39.1C.7 310.7-4.6 329.8 4.2 344.8l79.6 135.6c8.8 15 28.3 20.1 43.5 11.5L624.1 210c15.2-8.6 20.4-27.8 11.6-42.8z" /></svg>
|
||||||
|
<span>{$_('tracks')}</span>
|
||||||
|
</a>
|
||||||
|
{/if}
|
||||||
|
{#if store.state.jwtinfo.userdetails.permissions.includes('CARD:GET')}
|
||||||
|
<a
|
||||||
|
class:bg-gray-100={$router.path === '/cards/'}
|
||||||
|
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
|
||||||
|
href="/cards/">
|
||||||
|
<svg
|
||||||
|
class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
|
||||||
|
fill="currentColor"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 24 24">
|
||||||
|
<path fill="none" d="M0 0h24v24H0z" />
|
||||||
|
<path
|
||||||
|
fill="currentColor"
|
||||||
|
d="M22 10v10a1 1 0 01-1 1H3a1 1 0 01-1-1V10h20zm0-2H2V4a1 1 0 011-1h18a1 1 0 011 1v4zm-7 8v2h4v-2h-4z" /></svg>
|
||||||
|
<span>{$_('cards')}</span>
|
||||||
|
</a>
|
||||||
|
{/if}
|
||||||
|
{#if store.state.jwtinfo.userdetails.permissions.includes('SCAN:GET')}
|
||||||
|
<a
|
||||||
|
class:bg-gray-100={$router.path === '/scans/'}
|
||||||
|
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
|
||||||
|
href="/scans/">
|
||||||
|
<svg
|
||||||
|
class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
|
||||||
|
fill="currentColor"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z" />
|
||||||
|
<path
|
||||||
|
fill="currentColor"
|
||||||
|
d="M2 4h2v16H2V4zm4 0h1v16H6V4zm2 0h2v16H8V4zm3 0h2v16h-2V4zm3 0h2v16h-2V4zm3 0h1v16h-1V4zm2 0h3v16h-3V4z" /></svg>
|
||||||
|
<span>Scans</span>
|
||||||
|
</a>
|
||||||
|
{/if}
|
||||||
|
{#if store.state.jwtinfo.userdetails.permissions.includes('CONTACT:GET')}
|
||||||
|
<a
|
||||||
|
class:bg-gray-100={$router.path === '/contacts/'}
|
||||||
|
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
|
||||||
|
href="/contacts/">
|
||||||
|
<svg
|
||||||
|
fill="currentColor"
|
||||||
|
class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
width="24"
|
||||||
|
height="24"><path fill="none" d="M0 0h24v24H0z" />
|
||||||
|
<path
|
||||||
|
d="M2 22a8 8 0 1 1 16 0H2zm8-9c-3.315 0-6-2.685-6-6s2.685-6 6-6 6 2.685 6 6-2.685 6-6 6zm10 4h4v2h-4v-2zm-3-5h7v2h-7v-2zm2-5h5v2h-5V7z" /></svg>
|
||||||
|
<span>{$_('contacts')}</span>
|
||||||
|
</a>
|
||||||
|
{/if}
|
||||||
|
{#if store.state.jwtinfo.userdetails.permissions.includes('STATION:GET')}
|
||||||
|
<a
|
||||||
|
class:bg-gray-100={$router.path === '/scanstations/'}
|
||||||
|
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
|
||||||
|
href="/scanstations/">
|
||||||
|
<svg
|
||||||
|
class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
|
||||||
|
fill="currentColor"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"><path
|
||||||
|
fill="none"
|
||||||
|
d="M0 0h24v24H0z" />
|
||||||
|
<path
|
||||||
|
fill="currentColor"
|
||||||
|
d="M4 5v11h16V5H4zM2 4a1 1 0 011-1h18a1 1 0 011 1v14H2V4zM1 19h22v2H1v-2z" /></svg>
|
||||||
|
<span>{$_('scanstations')}</span>
|
||||||
|
</a>
|
||||||
|
{/if}
|
||||||
|
{#if store.state.jwtinfo.userdetails.permissions.includes('STATSCLIENT:GET')}
|
||||||
|
<a
|
||||||
|
class:bg-gray-100={$router.path === '/statsclients/'}
|
||||||
|
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
|
||||||
|
href="/statsclients/">
|
||||||
|
<svg
|
||||||
|
class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
|
||||||
|
fill="currentColor"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"><path
|
||||||
|
fill="none"
|
||||||
|
d="M0 0h24v24H0z" />
|
||||||
|
<path
|
||||||
|
fill="currentColor"
|
||||||
|
d="M4 5v11h16V5H4zM2 4a1 1 0 011-1h18a1 1 0 011 1v14H2V4zM1 19h22v2H1v-2z" /></svg>
|
||||||
|
<span>{$_('statsclients')}</span>
|
||||||
|
</a>
|
||||||
|
{/if}
|
||||||
|
<a
|
||||||
|
class:bg-gray-100={$router.path === '/settings/'}
|
||||||
|
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
|
||||||
|
href="/settings/">
|
||||||
|
<svg
|
||||||
|
class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
fill="currentColor">
|
||||||
|
<path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z"
|
||||||
|
clip-rule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
<span>{$_('settings')}</span>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
class:bg-gray-100={$router.path === '/about/'}
|
||||||
|
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
|
||||||
|
href="/about/">
|
||||||
|
<svg
|
||||||
|
class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" />
|
||||||
|
<path d="M12 16v-4M12 8h.01" /></svg>
|
||||||
|
<span>{$_('about')}</span>
|
||||||
|
</a>
|
||||||
|
<span
|
||||||
|
tabindex="0"
|
||||||
|
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
|
||||||
|
on:click={() => {
|
||||||
|
AuthService.authControllerLogout();
|
||||||
|
logout();
|
||||||
|
}}>
|
||||||
|
<svg
|
||||||
|
class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
|
||||||
|
fill="currentColor"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z" />
|
||||||
|
<path
|
||||||
|
d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2a9.985 9.985 0 0 1 8 4h-2.71a8 8 0 1 0 .001 12h2.71A9.985 9.985 0 0 1 12 22zm7-6v-3h-8v-2h8V8l5 4-5 4z" /></svg>
|
||||||
|
<span>{$_('logout')}</span>
|
||||||
|
</span>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<div class="ml-0 transition md:ml-60">
|
||||||
|
<header
|
||||||
|
class="flex items-center justify-between w-full px-4 bg-white border-b h-14 md:hidden">
|
||||||
|
<button
|
||||||
|
on:click={() => {
|
||||||
|
navOpen = true;
|
||||||
|
}}
|
||||||
|
class="block btn btn-light md:hidden">
|
||||||
|
<span class="sr-only">Menu</span><svg
|
||||||
|
class="w-4 h-4"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
fill="currentcolor"><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4A1 1 0 013 5zm0 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
|
||||||
|
clip-rule="evenodd" /></svg></button>
|
||||||
|
</header>
|
||||||
|
<Toaster position="top-right" />
|
||||||
|
<slot>
|
||||||
|
<NoComponentLoaded />
|
||||||
|
</slot>
|
||||||
|
</div>
|
||||||
|
{#if navOpen === true}
|
||||||
|
<div
|
||||||
|
on:click={() => {
|
||||||
|
navOpen = false;
|
||||||
|
console.log({ navOpen });
|
||||||
|
}}
|
||||||
|
class:hidden={!navOpen}
|
||||||
|
class="fixed inset-0 z-10 w-screen h-screen bg-black bg-opacity-25 md:hidden" />
|
||||||
|
{/if}
|
||||||
|
</section>
|
||||||
|
|||||||
@ -1,20 +1,31 @@
|
|||||||
<script>
|
<script>
|
||||||
import { _ } from "svelte-i18n";
|
import { _ } from "svelte-i18n";
|
||||||
import { StatsService } from "@odit/lfk-client-js";
|
import { StatsService } from "@odit/lfk-client-js";
|
||||||
|
import StatCards from "./StatCard.svelte";
|
||||||
import store from "../../store";
|
import store from "../../store";
|
||||||
import StatCard from "./StatCard.svelte";
|
import StatCard from "./StatCard.svelte";
|
||||||
let navOpen = false;
|
let navOpen = false;
|
||||||
const stats_promise = StatsService.statsControllerGet();
|
const stats_promise = StatsService.statsControllerGet();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="p-2 md:p-5 overflow-x-hidden">
|
<div
|
||||||
<h1 class="text-3xl leading-tight mb-4">
|
class="p-5 overflow-x-hidden"
|
||||||
{$_("dashboard-greeting")},
|
on:click={() => {
|
||||||
<span class="text-blue-500"
|
navOpen = false;
|
||||||
>{store.state.jwtinfo.userdetails.firstname}
|
}}
|
||||||
{store.state.jwtinfo.userdetails.lastname}</span
|
>
|
||||||
|
<h1 class="text-3xl leading-tight">
|
||||||
|
<span class="font-extrabold">{$_("dashboard-title")}</span>
|
||||||
|
<span>
|
||||||
|
-
|
||||||
|
{$_("dashboard-greeting")},
|
||||||
|
<span class="text-blue-500"
|
||||||
|
>{store.state.jwtinfo.userdetails.firstname}
|
||||||
|
{store.state.jwtinfo.userdetails.lastname}</span
|
||||||
|
></span
|
||||||
>
|
>
|
||||||
</h1>
|
</h1>
|
||||||
|
<h1>{$_("general-stats")}</h1>
|
||||||
{#await stats_promise}
|
{#await stats_promise}
|
||||||
<div
|
<div
|
||||||
class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
|
class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
|
||||||
@ -25,7 +36,7 @@
|
|||||||
</div>
|
</div>
|
||||||
{:then stats}
|
{:then stats}
|
||||||
<div
|
<div
|
||||||
class="grid gap-2 grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 2xl:grid-cols-6 sm:gap-4"
|
class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 2xl:grid-cols-6 gap-4"
|
||||||
>
|
>
|
||||||
<StatCard
|
<StatCard
|
||||||
title={$_("runners")}
|
title={$_("runners")}
|
||||||
@ -98,35 +109,24 @@
|
|||||||
</StatCard>
|
</StatCard>
|
||||||
<StatCard
|
<StatCard
|
||||||
title={$_("average-donation")}
|
title={$_("average-donation")}
|
||||||
value={`${parseFloat(stats.average_donation / 100).toLocaleString(
|
value={`${(stats.average_donation / 100).toFixed(2)} €`}
|
||||||
undefined,
|
|
||||||
{
|
|
||||||
minimumFractionDigits: 2,
|
|
||||||
maximumFractionDigits: 2,
|
|
||||||
}
|
|
||||||
)}`}
|
|
||||||
href="/donations/"
|
href="/donations/"
|
||||||
>
|
>
|
||||||
<svg
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
height="24"
|
|
||||||
fill="currentColor"
|
fill="currentColor"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
width="24"
|
width="24"
|
||||||
><path d="M0 0h24v24H0z" fill="none" />
|
height="24"
|
||||||
|
><path fill="none" d="M0 0h24v24H0z" />
|
||||||
<path
|
<path
|
||||||
d="M15 18.5A6.48 6.48 0 019.24 15H15v-2H8.58c-.05-.33-.08-.66-.08-1s.03-.67.08-1H15V9H9.24A6.491 6.491 0 0115 5.5c1.61 0 3.09.59 4.23 1.57L21 5.3A8.955 8.955 0 0015 3c-3.92 0-7.24 2.51-8.48 6H3v2h3.06a8.262 8.262 0 000 2H3v2h3.52c1.24 3.49 4.56 6 8.48 6 2.31 0 4.41-.87 6-2.3l-1.78-1.77c-1.13.98-2.6 1.57-4.22 1.57z"
|
d="M14 2a8 8 0 013.3 15.3A8 8 0 116.7 6.7 8 8 0 0114 2zm-3 7H9v1a2.5 2.5 0 00-.16 5h2.25a.5.5 0 010 1H7v2h2v1h2v-1a2.5 2.5 0 00.16-5H8.91a.5.5 0 010-1H13v-2h-2V9zm3-5a5.99 5.99 0 00-4.48 2.01 8 8 0 018.47 8.47A6 6 0 0014 4z"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
</StatCard>
|
</StatCard>
|
||||||
<StatCard
|
<StatCard
|
||||||
title={$_("total-donations")}
|
title={$_("total-donations")}
|
||||||
value={`${parseFloat(stats.total_donation / 100).toLocaleString(
|
value={`${(stats.total_donation / 100).toFixed(2)} €`}
|
||||||
undefined,
|
|
||||||
{
|
|
||||||
minimumFractionDigits: 2,
|
|
||||||
maximumFractionDigits: 2,
|
|
||||||
}
|
|
||||||
)}`}
|
|
||||||
href="/donations/"
|
href="/donations/"
|
||||||
>
|
>
|
||||||
<svg
|
<svg
|
||||||
@ -142,7 +142,7 @@
|
|||||||
</StatCard>
|
</StatCard>
|
||||||
<StatCard
|
<StatCard
|
||||||
title={$_("total-distance")}
|
title={$_("total-distance")}
|
||||||
value={`${stats.total_distance / 1000}km`}
|
value={`${stats.total_distance / 1000} km`}
|
||||||
href="/scans/"
|
href="/scans/"
|
||||||
>
|
>
|
||||||
<svg
|
<svg
|
||||||
@ -158,13 +158,7 @@
|
|||||||
</StatCard>
|
</StatCard>
|
||||||
<StatCard
|
<StatCard
|
||||||
title={$_("average-distance")}
|
title={$_("average-distance")}
|
||||||
value={`${parseFloat(stats.average_distance / 1000).toLocaleString(
|
value={`${(stats.average_distance / 1000).toFixed(2)} km`}
|
||||||
undefined,
|
|
||||||
{
|
|
||||||
minimumFractionDigits: 2,
|
|
||||||
maximumFractionDigits: 2,
|
|
||||||
}
|
|
||||||
)}km`}
|
|
||||||
href="/scans/"
|
href="/scans/"
|
||||||
>
|
>
|
||||||
<svg
|
<svg
|
||||||
|
|||||||
@ -1,21 +1,22 @@
|
|||||||
<script>
|
<script>
|
||||||
import { _ } from "svelte-i18n";
|
import { _ } from "svelte-i18n";
|
||||||
|
|
||||||
export let href = "#";
|
export let href = "#"
|
||||||
export let title = "";
|
export let title = "";
|
||||||
export let value = "";
|
export let value = "";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<a {href}>
|
<a href={href}>
|
||||||
<div class="p-4 rounded-lg bg-white border border-grey-100">
|
<div
|
||||||
|
class="p-4 rounded-lg bg-white border border-grey-100">
|
||||||
<div class="flex flex-row items-center justify-between">
|
<div class="flex flex-row items-center justify-between">
|
||||||
<div class="flex flex-col">
|
<div class="flex flex-col">
|
||||||
<div class="text-xs uppercase font-normal text-grey-500">
|
<div class="text-xs uppercase font-light text-grey-500">
|
||||||
{title}
|
{title}
|
||||||
</div>
|
</div>
|
||||||
<div class="text-xl font-bold font-mono">{value}</div>
|
<div class="text-xl font-bold">{value}</div>
|
||||||
</div>
|
</div>
|
||||||
<slot />
|
<slot></slot>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
|
|||||||
@ -8,8 +8,9 @@
|
|||||||
RunnerService,
|
RunnerService,
|
||||||
} from "@odit/lfk-client-js";
|
} from "@odit/lfk-client-js";
|
||||||
import Select from "svelte-select";
|
import Select from "svelte-select";
|
||||||
|
import Toastify from "toastify-js";
|
||||||
|
import { is_promise } from "svelte/internal";
|
||||||
import { createEventDispatcher } from "svelte";
|
import { createEventDispatcher } from "svelte";
|
||||||
import toast from "svelte-french-toast";
|
|
||||||
export let modal_open;
|
export let modal_open;
|
||||||
const dispatch = createEventDispatcher();
|
const dispatch = createEventDispatcher();
|
||||||
const getDonorLabel = (option) =>
|
const getDonorLabel = (option) =>
|
||||||
@ -17,6 +18,9 @@
|
|||||||
const filterDonors = (label, filterText, option) =>
|
const filterDonors = (label, filterText, option) =>
|
||||||
label.toLowerCase().includes(filterText.toLowerCase()) ||
|
label.toLowerCase().includes(filterText.toLowerCase()) ||
|
||||||
option.value.id.toString().startsWith(filterText.toLowerCase());
|
option.value.id.toString().startsWith(filterText.toLowerCase());
|
||||||
|
function focus(el) {
|
||||||
|
el.focus();
|
||||||
|
}
|
||||||
$: donor = 0;
|
$: donor = 0;
|
||||||
$: runner = 0;
|
$: runner = 0;
|
||||||
$: donors = [];
|
$: donors = [];
|
||||||
@ -55,7 +59,10 @@
|
|||||||
if (processed_last_submit === true) {
|
if (processed_last_submit === true) {
|
||||||
let amount_cent = Math.floor(amount_input * 100);
|
let amount_cent = Math.floor(amount_input * 100);
|
||||||
processed_last_submit = false;
|
processed_last_submit = false;
|
||||||
toast.loading($_("adding-donation"));
|
const toast = Toastify({
|
||||||
|
text: $_("adding-donation"),
|
||||||
|
duration: -1,
|
||||||
|
}).showToast();
|
||||||
if (is_fixed) {
|
if (is_fixed) {
|
||||||
let postdata = {
|
let postdata = {
|
||||||
donor,
|
donor,
|
||||||
@ -72,8 +79,11 @@
|
|||||||
amount_input = 0;
|
amount_input = 0;
|
||||||
modal_open = false;
|
modal_open = false;
|
||||||
//
|
//
|
||||||
toast.dismiss();
|
Toastify({
|
||||||
toast.success($_("donation_added"));
|
text: $_("donation_added"),
|
||||||
|
duration: 500,
|
||||||
|
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||||
|
}).showToast();
|
||||||
dispatch("created", { donations: [result] });
|
dispatch("created", { donations: [result] });
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
@ -81,6 +91,8 @@
|
|||||||
})
|
})
|
||||||
.finally(() => {
|
.finally(() => {
|
||||||
processed_last_submit = true;
|
processed_last_submit = true;
|
||||||
|
//
|
||||||
|
toast.hideToast();
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
let postdata = {
|
let postdata = {
|
||||||
@ -95,7 +107,11 @@
|
|||||||
amount_input = 0;
|
amount_input = 0;
|
||||||
modal_open = false;
|
modal_open = false;
|
||||||
//
|
//
|
||||||
toast.success($_("donation_added"));
|
Toastify({
|
||||||
|
text: $_("donation_added"),
|
||||||
|
duration: 500,
|
||||||
|
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||||
|
}).showToast();
|
||||||
dispatch("created", { donations: [result] });
|
dispatch("created", { donations: [result] });
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
@ -103,6 +119,8 @@
|
|||||||
})
|
})
|
||||||
.finally(() => {
|
.finally(() => {
|
||||||
processed_last_submit = true;
|
processed_last_submit = true;
|
||||||
|
//
|
||||||
|
toast.hideToast();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,14 +1,18 @@
|
|||||||
<script>
|
<script>
|
||||||
import { _ } from "svelte-i18n";
|
import { _ } from "svelte-i18n";
|
||||||
import { clickOutside } from "../base/outsideclick";
|
import { clickOutside } from "../base/outsideclick";
|
||||||
|
|
||||||
import { DonationService } from "@odit/lfk-client-js";
|
import { DonationService } from "@odit/lfk-client-js";
|
||||||
|
import Toastify from "toastify-js";
|
||||||
import { createEventDispatcher } from "svelte";
|
import { createEventDispatcher } from "svelte";
|
||||||
import toast from "svelte-french-toast";
|
|
||||||
export let payment_modal_open = false;
|
export let payment_modal_open = false;
|
||||||
export let original_data = {};
|
export let original_data = {};
|
||||||
export let paid_amount_input = 0;
|
export let paid_amount_input = 0;
|
||||||
const dispatch = createEventDispatcher();
|
const dispatch = createEventDispatcher();
|
||||||
$: processed_last_submit = true;
|
$: processed_last_submit = true;
|
||||||
|
function focus(el) {
|
||||||
|
el.focus();
|
||||||
|
}
|
||||||
$: createbtnenabled =
|
$: createbtnenabled =
|
||||||
is_paid_amount_valid &&
|
is_paid_amount_valid &&
|
||||||
!(paid_amount_input * 100 == original_data.paidAmount);
|
!(paid_amount_input * 100 == original_data.paidAmount);
|
||||||
@ -30,7 +34,10 @@
|
|||||||
function submit() {
|
function submit() {
|
||||||
if (processed_last_submit === true) {
|
if (processed_last_submit === true) {
|
||||||
processed_last_submit = false;
|
processed_last_submit = false;
|
||||||
toast.loading($_("updating-donation"));
|
const toast = Toastify({
|
||||||
|
text: $_("updating-donation"),
|
||||||
|
duration: -1,
|
||||||
|
}).showToast();
|
||||||
const editable = Object.assign({}, original_data);
|
const editable = Object.assign({}, original_data);
|
||||||
editable.donor = editable.donor.id;
|
editable.donor = editable.donor.id;
|
||||||
editable.paidAmount = paid_amount_input * 100;
|
editable.paidAmount = paid_amount_input * 100;
|
||||||
@ -43,9 +50,11 @@
|
|||||||
.then((result) => {
|
.then((result) => {
|
||||||
payment_modal_open = false;
|
payment_modal_open = false;
|
||||||
//
|
//
|
||||||
toast.dismiss();
|
Toastify({
|
||||||
|
text: $_("donation-updated"),
|
||||||
toast.success($_("donation-updated"));
|
duration: 500,
|
||||||
|
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||||
|
}).showToast();
|
||||||
dispatch("created", { donation: response });
|
dispatch("created", { donation: response });
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
@ -53,14 +62,19 @@
|
|||||||
})
|
})
|
||||||
.finally(() => {
|
.finally(() => {
|
||||||
processed_last_submit = true;
|
processed_last_submit = true;
|
||||||
|
//
|
||||||
|
toast.hideToast();
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
DonationService.donationControllerPutFixed(original_data.id, editable)
|
DonationService.donationControllerPutFixed(original_data.id, editable)
|
||||||
.then((result) => {
|
.then((result) => {
|
||||||
payment_modal_open = false;
|
payment_modal_open = false;
|
||||||
//
|
//
|
||||||
toast.dismiss();
|
Toastify({
|
||||||
toast.success($_("donation-updated"));
|
text: $_("donation-updated"),
|
||||||
|
duration: 500,
|
||||||
|
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||||
|
}).showToast();
|
||||||
dispatch("created", { donation: response });
|
dispatch("created", { donation: response });
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
@ -68,6 +82,8 @@
|
|||||||
})
|
})
|
||||||
.finally(() => {
|
.finally(() => {
|
||||||
processed_last_submit = true;
|
processed_last_submit = true;
|
||||||
|
//
|
||||||
|
toast.hideToast();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -6,7 +6,7 @@
|
|||||||
DonorService,
|
DonorService,
|
||||||
RunnerService,
|
RunnerService,
|
||||||
} from "@odit/lfk-client-js";
|
} from "@odit/lfk-client-js";
|
||||||
|
import Toastify from "toastify-js";
|
||||||
import PromiseError from "../base/PromiseError.svelte";
|
import PromiseError from "../base/PromiseError.svelte";
|
||||||
import Select from "svelte-select";
|
import Select from "svelte-select";
|
||||||
let data_loaded = false;
|
let data_loaded = false;
|
||||||
@ -33,7 +33,7 @@
|
|||||||
!(Math.floor(amount_input * 100) === original_data.amountPerDistance)) ||
|
!(Math.floor(amount_input * 100) === original_data.amountPerDistance)) ||
|
||||||
(original_data.responseType !== "DISTANCEDONATION" &&
|
(original_data.responseType !== "DISTANCEDONATION" &&
|
||||||
!(Math.floor(amount_input * 100) === original_data.amount)) ||
|
!(Math.floor(amount_input * 100) === original_data.amount)) ||
|
||||||
!(Math.floor(paid_amount_input * 100) === original_data.paidAmount);
|
!(Math.floor(paid_amount_input * 100) === original_data.paidAmount);
|
||||||
$: save_enabled = changes_performed && is_amount_valid && is_everything_set;
|
$: save_enabled = changes_performed && is_amount_valid && is_everything_set;
|
||||||
|
|
||||||
const promise = DonationService.donationControllerGetOne(
|
const promise = DonationService.donationControllerGetOne(
|
||||||
@ -69,9 +69,12 @@
|
|||||||
|
|
||||||
function submit() {
|
function submit() {
|
||||||
if (data_loaded === true && save_enabled) {
|
if (data_loaded === true && save_enabled) {
|
||||||
toast($_("updating-donation"));
|
Toastify({
|
||||||
|
text: $_('updating-donation'),
|
||||||
|
duration: 2500,
|
||||||
|
}).showToast();
|
||||||
let postdata = {};
|
let postdata = {};
|
||||||
editable.paidAmount = paid_amount_input * 100;
|
editable.paidAmount = paid_amount_input*100;
|
||||||
if (original_data.responseType === "DISTANCEDONATION") {
|
if (original_data.responseType === "DISTANCEDONATION") {
|
||||||
editable.amountPerDistance = Math.floor(amount_input * 100);
|
editable.amountPerDistance = Math.floor(amount_input * 100);
|
||||||
postdata = Object.assign(postdata, editable);
|
postdata = Object.assign(postdata, editable);
|
||||||
@ -84,7 +87,11 @@
|
|||||||
.then((resp) => {
|
.then((resp) => {
|
||||||
Object.assign(original_data, editable);
|
Object.assign(original_data, editable);
|
||||||
original_data = original_data;
|
original_data = original_data;
|
||||||
toast.success($_("donation-updated"));
|
Toastify({
|
||||||
|
text: $_('donation-updated'),
|
||||||
|
duration: 2500,
|
||||||
|
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||||
|
}).showToast();
|
||||||
})
|
})
|
||||||
.catch((err) => {});
|
.catch((err) => {});
|
||||||
} else {
|
} else {
|
||||||
@ -95,7 +102,11 @@
|
|||||||
.then((resp) => {
|
.then((resp) => {
|
||||||
Object.assign(original_data, editable);
|
Object.assign(original_data, editable);
|
||||||
original_data = original_data;
|
original_data = original_data;
|
||||||
toast.success($_("donation-updated"));
|
Toastify({
|
||||||
|
text: $_('donation-updated'),
|
||||||
|
duration: 2500,
|
||||||
|
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||||
|
}).showToast();
|
||||||
})
|
})
|
||||||
.catch((err) => {});
|
.catch((err) => {});
|
||||||
}
|
}
|
||||||
@ -105,7 +116,11 @@
|
|||||||
function deleteDonation() {
|
function deleteDonation() {
|
||||||
DonationService.donationControllerRemove(original_data.id, false)
|
DonationService.donationControllerRemove(original_data.id, false)
|
||||||
.then((resp) => {
|
.then((resp) => {
|
||||||
toast($_("donation-deleted"));
|
Toastify({
|
||||||
|
text: $_('donation-deleted'),
|
||||||
|
duration: 500,
|
||||||
|
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||||
|
}).showToast();
|
||||||
location.replace("./");
|
location.replace("./");
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
@ -116,7 +131,7 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#await promise}
|
{#await promise}
|
||||||
{$_("loading-donation-details")}
|
{$_('loading-donation-details')}
|
||||||
{:then}
|
{:then}
|
||||||
<section class="container p-5 select-none">
|
<section class="container p-5 select-none">
|
||||||
<div class="flex flex-row mb-4">
|
<div class="flex flex-row mb-4">
|
||||||
@ -129,15 +144,12 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
width="24"
|
width="24"
|
||||||
height="24"
|
height="24"><path fill="none" d="M0 0h24v24H0z" />
|
||||||
><path fill="none" d="M0 0h24v24H0z" />
|
|
||||||
<path
|
<path
|
||||||
d="M14 2a8 8 0 013.3 15.3A8 8 0 116.7 6.7 8 8 0 0114 2zm-3 7H9v1a2.5 2.5 0 00-.16 5h2.25a.5.5 0 010 1H7v2h2v1h2v-1a2.5 2.5 0 00.16-5H8.91a.5.5 0 010-1H13v-2h-2V9zm3-5a5.99 5.99 0 00-4.48 2.01 8 8 0 018.47 8.47A6 6 0 0014 4z"
|
d="M14 2a8 8 0 013.3 15.3A8 8 0 116.7 6.7 8 8 0 0114 2zm-3 7H9v1a2.5 2.5 0 00-.16 5h2.25a.5.5 0 010 1H7v2h2v1h2v-1a2.5 2.5 0 00.16-5H8.91a.5.5 0 010-1H13v-2h-2V9zm3-5a5.99 5.99 0 00-4.48 2.01 8 8 0 018.47 8.47A6 6 0 0014 4z" /></svg>
|
||||||
/></svg
|
|
||||||
>
|
|
||||||
</li>
|
</li>
|
||||||
<li class="flex items-center ml-2">
|
<li class="flex items-center ml-2">
|
||||||
<a class="mr-2" href="./">{$_("donations")}</a><svg
|
<a class="mr-2" href="./">{$_('donations')}</a><svg
|
||||||
stroke="currentColor"
|
stroke="currentColor"
|
||||||
fill="none"
|
fill="none"
|
||||||
stroke-width="2"
|
stroke-width="2"
|
||||||
@ -147,10 +159,12 @@
|
|||||||
class="h-3 w-3 mr-2 stroke-current"
|
class="h-3 w-3 mr-2 stroke-current"
|
||||||
height="1em"
|
height="1em"
|
||||||
width="1em"
|
width="1em"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"><line
|
||||||
><line x1="5" y1="12" x2="19" y2="12" />
|
x1="5"
|
||||||
<polyline points="12 5 19 12 12 19" /></svg
|
y1="12"
|
||||||
>
|
x2="19"
|
||||||
|
y2="12" />
|
||||||
|
<polyline points="12 5 19 12 12 19" /></svg>
|
||||||
</li>
|
</li>
|
||||||
<li class="flex items-center">
|
<li class="flex items-center">
|
||||||
<span class="mr-2">{original_data.id}</span>
|
<span class="mr-2">{original_data.id}</span>
|
||||||
@ -161,32 +175,28 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="mb-8 text-3xl font-extrabold leading-tight">
|
<div class="mb-8 text-3xl font-extrabold leading-tight">
|
||||||
{original_data.donor.firstname}
|
{original_data.donor.firstname}
|
||||||
{original_data.donor.middlename || ""}
|
{original_data.donor.middlename || ''}
|
||||||
{original_data.donor.lastname}
|
{original_data.donor.lastname}
|
||||||
>
|
>
|
||||||
{#if original_data.responseType == "DISTANCEDONATION"}
|
{#if original_data.responseType == 'DISTANCEDONATION'}
|
||||||
{original_data.runner.firstname}
|
{original_data.runner.firstname}
|
||||||
{original_data.runner.middlename || ""}
|
{original_data.runner.middlename || ''}
|
||||||
{original_data.runner.lastname}
|
{original_data.runner.lastname}
|
||||||
{:else}
|
{:else}
|
||||||
{$_("fixed-donation")}:
|
{$_('fixed-donation')}:
|
||||||
{amount_input.toFixed(2).toLocaleString("de-DE", { valute: "EUR" })}€
|
{amount_input.toFixed(2).toLocaleString('de-DE', { valute: 'EUR' })}€
|
||||||
{/if}
|
{/if}
|
||||||
<span data-id="donation_actions_${original_data.id}">
|
<span data-id="donation_actions_${original_data.id}">
|
||||||
{#if store.state.jwtinfo.userdetails.permissions.includes("DONATION:DELETE")}
|
{#if store.state.jwtinfo.userdetails.permissions.includes('DONATION:DELETE')}
|
||||||
{#if delete_triggered}
|
{#if delete_triggered}
|
||||||
<button
|
<button
|
||||||
on:click={deleteDonation}
|
on:click={deleteDonation}
|
||||||
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:"
|
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:">{$_('confirm-deletion')}</button>
|
||||||
>{$_("confirm-deletion")}</button
|
|
||||||
>
|
|
||||||
<button
|
<button
|
||||||
on:click={() => {
|
on:click={() => {
|
||||||
delete_triggered = !delete_triggered;
|
delete_triggered = !delete_triggered;
|
||||||
}}
|
}}
|
||||||
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:"
|
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:">{$_('cancel')}</button>
|
||||||
>{$_("cancel")}</button
|
|
||||||
>
|
|
||||||
{/if}
|
{/if}
|
||||||
{#if !delete_triggered}
|
{#if !delete_triggered}
|
||||||
<button
|
<button
|
||||||
@ -194,9 +204,7 @@
|
|||||||
delete_triggered = true;
|
delete_triggered = true;
|
||||||
}}
|
}}
|
||||||
type="button"
|
type="button"
|
||||||
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:"
|
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:">{$_('delete-donation')}</button>
|
||||||
>{$_("delete-donation")}</button
|
|
||||||
>
|
|
||||||
{/if}
|
{/if}
|
||||||
{/if}
|
{/if}
|
||||||
{#if !delete_triggered}
|
{#if !delete_triggered}
|
||||||
@ -205,91 +213,72 @@
|
|||||||
class:opacity-50={!save_enabled}
|
class:opacity-50={!save_enabled}
|
||||||
type="button"
|
type="button"
|
||||||
on:click={submit}
|
on:click={submit}
|
||||||
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:"
|
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:">{$_('save-changes')}</button>
|
||||||
>{$_("save-changes")}</button
|
|
||||||
>
|
|
||||||
{/if}
|
{/if}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<!-- -->
|
<!-- -->
|
||||||
<div>
|
<div>
|
||||||
<span class="font-medium text-gray-700"
|
|
||||||
>{$_("total-donation-amount")}:</span
|
|
||||||
>
|
|
||||||
<span
|
<span
|
||||||
>{(editable.amount / 100)
|
class="font-medium text-gray-700">{$_('total-donation-amount')}:</span>
|
||||||
|
<span>{(editable.amount / 100)
|
||||||
.toFixed(2)
|
.toFixed(2)
|
||||||
.toLocaleString("de-DE", { valute: "EUR" })}€</span
|
.toLocaleString('de-DE', { valute: 'EUR' })}€</span>
|
||||||
>
|
|
||||||
|
|
|
|
||||||
<span class="font-medium text-gray-700">{$_("paid-amount")}:</span>
|
|
||||||
<span
|
<span
|
||||||
>{(editable.paidAmount / 100)
|
class="font-medium text-gray-700">{$_('paid-amount')}:</span>
|
||||||
|
<span>{(editable.paidAmount / 100)
|
||||||
.toFixed(2)
|
.toFixed(2)
|
||||||
.toLocaleString("de-DE", { valute: "EUR" })}€</span
|
.toLocaleString('de-DE', { valute: 'EUR' })}€</span>
|
||||||
>
|
|
||||||
|
|
|
|
||||||
<span class="font-medium text-gray-700">{$_("status")}:</span>
|
<span
|
||||||
{#if editable.status == "PAID"}
|
class="font-medium text-gray-700">{$_('status')}:</span>
|
||||||
<span
|
{#if editable.status =="PAID"}
|
||||||
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"
|
<span
|
||||||
>{$_("paid")}</span
|
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">{$_('paid')}</span>
|
||||||
>
|
{:else}
|
||||||
{:else}
|
<span
|
||||||
<span
|
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">{$_('open')}</span>
|
||||||
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800"
|
{/if}
|
||||||
>{$_("open")}</span
|
|
||||||
>
|
|
||||||
{/if}
|
|
||||||
</div>
|
</div>
|
||||||
<br />
|
<br>
|
||||||
<div class=" w-full">
|
<div class=" w-full">
|
||||||
<label for="donor" class="block font-medium text-gray-700"
|
<label
|
||||||
>{$_("donor")}</label
|
for="donor"
|
||||||
>
|
class="block font-medium text-gray-700">{$_('donor')}</label>
|
||||||
<Select
|
<Select
|
||||||
containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
||||||
itemFilter={(label, filterText, option) =>
|
itemFilter={(label, filterText, option) => filterDonors(label, filterText, option)}
|
||||||
filterDonors(label, filterText, option)}
|
|
||||||
items={current_donors}
|
items={current_donors}
|
||||||
showChevron={true}
|
showChevron={true}
|
||||||
placeholder={$_("search-for-donor-name-or-id")}
|
placeholder={$_('search-for-donor-name-or-id')}
|
||||||
noOptionsMessage={$_("no-donors-found")}
|
noOptionsMessage={$_('no-donors-found')}
|
||||||
bind:selectedValue={donor}
|
bind:selectedValue={donor}
|
||||||
on:select={(selectedValue) => {
|
on:select={(selectedValue) => {editable.donor = selectedValue.detail.value; editable.donor.donationAmount=original_data.donor.donationAmount; editable.donor.paidDonationAmount =original_data.donor.paidDonationAmount}}
|
||||||
editable.donor = selectedValue.detail.value;
|
on:clear={() => (editable.donor = null)} />
|
||||||
editable.donor.donationAmount = original_data.donor.donationAmount;
|
|
||||||
editable.donor.paidDonationAmount =
|
|
||||||
original_data.donor.paidDonationAmount;
|
|
||||||
}}
|
|
||||||
on:clear={() => (editable.donor = null)}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
{#if original_data.responseType == "DISTANCEDONATION"}
|
{#if original_data.responseType == 'DISTANCEDONATION'}
|
||||||
<div class=" w-full">
|
<div class=" w-full">
|
||||||
<label for="donor" class="block font-medium text-gray-700"
|
<label
|
||||||
>{$_("runner")}</label
|
for="donor"
|
||||||
>
|
class="block font-medium text-gray-700">{$_('runner')}</label>
|
||||||
<Select
|
<Select
|
||||||
containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
||||||
itemFilter={(label, filterText, option) =>
|
itemFilter={(label, filterText, option) => filterDonors(label, filterText, option)}
|
||||||
filterDonors(label, filterText, option)}
|
|
||||||
items={current_runners}
|
items={current_runners}
|
||||||
showChevron={true}
|
showChevron={true}
|
||||||
placeholder={$_("search-for-runner-by-name-or-id")}
|
placeholder={$_('search-for-runner-by-name-or-id')}
|
||||||
noOptionsMessage={$_("no-runners-found")}
|
noOptionsMessage={$_('no-runners-found')}
|
||||||
bind:selectedValue={runner}
|
bind:selectedValue={runner}
|
||||||
on:select={(selectedValue) =>
|
on:select={(selectedValue) => (editable.runner = selectedValue.detail.value)}
|
||||||
(editable.runner = selectedValue.detail.value)}
|
on:clear={() => (editable.runner = null)} />
|
||||||
on:clear={() => (editable.runner = null)}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
<div class=" w-full">
|
<div class=" w-full">
|
||||||
<label for="lastname" class="font-medium text-gray-700">
|
<label for="lastname" class="font-medium text-gray-700">
|
||||||
{#if original_data.responseType == "DISTANCEDONATION"}
|
{#if original_data.responseType == 'DISTANCEDONATION'}
|
||||||
{$_("amount-per-kilometer")}
|
{$_('amount-per-kilometer')}
|
||||||
{:else}{$_("donation-amount")}{/if}
|
{:else}{$_('donation-amount')}{/if}
|
||||||
</label>
|
</label>
|
||||||
<div class="mt-1 flex rounded-md shadow-sm">
|
<div class="mt-1 flex rounded-md shadow-sm">
|
||||||
<input
|
<input
|
||||||
@ -302,61 +291,49 @@
|
|||||||
step="0.01"
|
step="0.01"
|
||||||
name="donation_amount_eur"
|
name="donation_amount_eur"
|
||||||
class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 p-2"
|
class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 p-2"
|
||||||
placeholder="2.00"
|
placeholder="2.00" />
|
||||||
/>
|
|
||||||
<span
|
<span
|
||||||
class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500"
|
class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500 ">€</span>
|
||||||
>€</span
|
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
{#if !is_amount_valid}
|
{#if !is_amount_valid}
|
||||||
<span
|
<span
|
||||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
|
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||||
>
|
{$_('donation-amount-must-be-greater-that-0-00eur')}
|
||||||
{$_("donation-amount-must-be-greater-that-0-00eur")}
|
|
||||||
</span>
|
</span>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
<div class="w-full">
|
<div class="w-full">
|
||||||
<label for="token" class="block text-sm font-medium text-gray-700"
|
<label
|
||||||
>{$_("paid-amount")}</label
|
for="token"
|
||||||
>
|
class="block text-sm font-medium text-gray-700">{$_('paid-amount')}</label>
|
||||||
<div
|
<div class="inline-flex border-gray-300 border rounded-l-md rounded-r-md bg-gray-50 text-gray-500 w-full">
|
||||||
class="inline-flex border-gray-300 border rounded-l-md rounded-r-md bg-gray-50 text-gray-500 w-full"
|
|
||||||
>
|
|
||||||
<input
|
<input
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
class:border-red-500={!is_amount_valid}
|
class:border-red-500={!is_amount_valid}
|
||||||
class:focus:border-red-500={!is_amount_valid}
|
class:focus:border-red-500={!is_amount_valid}
|
||||||
class:focus:ring-red-500={!is_amount_valid}
|
class:focus:ring-red-500={!is_amount_valid}
|
||||||
bind:value={paid_amount_input}
|
bind:value={paid_amount_input}
|
||||||
type="number"
|
type="number"
|
||||||
step="0.01"
|
step="0.01"
|
||||||
name="donation_amount_eur"
|
name="donation_amount_eur"
|
||||||
class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm p-2"
|
class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm p-2"
|
||||||
placeholder="2.00"
|
placeholder="2.00" />
|
||||||
/>
|
<button
|
||||||
<button
|
on:click={
|
||||||
on:click={() => {
|
()=>{
|
||||||
paid_amount_input = paid_amount_input = (
|
paid_amount_input=paid_amount_input = (original_data.amount/100).toFixed(2);
|
||||||
original_data.amount / 100
|
}
|
||||||
).toFixed(2);
|
}
|
||||||
}}
|
class="inline-flex items-center p-r-2 text-indigo-300 hover:text-indigo-700 text-sm">MAX</button>
|
||||||
class="inline-flex items-center p-r-2 text-indigo-300 hover:text-indigo-700 text-sm"
|
<span
|
||||||
>MAX</button
|
class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500 text-sm">€</span>
|
||||||
>
|
</div>
|
||||||
<span
|
{#if !is_paid_amount_valid}
|
||||||
class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500 text-sm"
|
<span
|
||||||
>€</span
|
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||||
>
|
{$_('payment-amount-must-be-greater-than-0-00eur')}
|
||||||
</div>
|
</span>
|
||||||
{#if !is_paid_amount_valid}
|
{/if}
|
||||||
<span
|
|
||||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
|
|
||||||
>
|
|
||||||
{$_("payment-amount-must-be-greater-than-0-00eur")}
|
|
||||||
</span>
|
|
||||||
{/if}
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
{:catch error}
|
{:catch error}
|
||||||
|
|||||||
@ -29,6 +29,7 @@
|
|||||||
{#if store.state.jwtinfo.userdetails.permissions.includes("DONATION:CREATE")}
|
{#if store.state.jwtinfo.userdetails.permissions.includes("DONATION:CREATE")}
|
||||||
<AddDonationModal
|
<AddDonationModal
|
||||||
on:created={(event) => {
|
on:created={(event) => {
|
||||||
|
console.log(event)
|
||||||
addDonations(event.detail.donations);
|
addDonations(event.detail.donations);
|
||||||
}}
|
}}
|
||||||
bind:modal_open
|
bind:modal_open
|
||||||
|
|||||||
@ -6,7 +6,7 @@
|
|||||||
<div class="text-center items-center justify-center">
|
<div class="text-center items-center justify-center">
|
||||||
<p class="mb-16 text-lg text-gray-500">
|
<p class="mb-16 text-lg text-gray-500">
|
||||||
<img class="m-auto" style="height:15rem" src={donations_empty} alt="" />
|
<img class="m-auto" style="height:15rem" src={donations_empty} alt="" />
|
||||||
<span class="font-bold">{$_("there-are-no-donations-yet")}</span><br />
|
<span class="font-bold">{$_('there-are-no-donations-yet')}</span><br />
|
||||||
<span>{$_("add-your-fist-donation")}</span>
|
<span>{$_('add-your-fist-donation')}</span>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -27,10 +27,11 @@
|
|||||||
donationDonorFilter,
|
donationDonorFilter,
|
||||||
donationRunnerFilter,
|
donationRunnerFilter,
|
||||||
} from "../shared/tablefilters";
|
} from "../shared/tablefilters";
|
||||||
import toast from "svelte-french-toast";
|
|
||||||
$: searchvalue = "";
|
$: searchvalue = "";
|
||||||
$: active_deletes = [];
|
$: active_deletes = [];
|
||||||
$: active_edits = [];
|
$: active_edits = [];
|
||||||
|
$: selectedDonations =
|
||||||
|
$table?.getSelectedRowModel().rows.map((row) => row.original) || [];
|
||||||
$: selected =
|
$: selected =
|
||||||
$table?.getSelectedRowModel().rows.map((row) => row.index) || [];
|
$table?.getSelectedRowModel().rows.map((row) => row.index) || [];
|
||||||
$: dataLoaded = false;
|
$: dataLoaded = false;
|
||||||
@ -163,16 +164,19 @@
|
|||||||
...options,
|
...options,
|
||||||
data: current_donations,
|
data: current_donations,
|
||||||
}));
|
}));
|
||||||
toast($_("donation-deleted"));
|
Toastify({
|
||||||
|
text: $_("donation-deleted"),
|
||||||
|
duration: 3500,
|
||||||
|
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||||
|
}).showToast();
|
||||||
}
|
}
|
||||||
|
|
||||||
onMount(async () => {
|
onMount(async () => {
|
||||||
let page = 0;
|
let page = 0;
|
||||||
let pagesize = 100;
|
|
||||||
while (page >= 0) {
|
while (page >= 0) {
|
||||||
const donations = await DonationService.donationControllerGetAll(
|
const donations = await DonationService.donationControllerGetAll(
|
||||||
page,
|
page,
|
||||||
pagesize
|
100
|
||||||
);
|
);
|
||||||
if (donations.length == 0) {
|
if (donations.length == 0) {
|
||||||
page = -2;
|
page = -2;
|
||||||
@ -186,8 +190,8 @@
|
|||||||
|
|
||||||
dataLoaded = true;
|
dataLoaded = true;
|
||||||
page++;
|
page++;
|
||||||
pagesize += 100;
|
|
||||||
}
|
}
|
||||||
|
console.log("All donations loaded");
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@ -235,7 +239,7 @@
|
|||||||
class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll"
|
class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll"
|
||||||
>
|
>
|
||||||
<table class="w-full">
|
<table class="w-full">
|
||||||
<thead class="border-b border-gray-400">
|
<thead>
|
||||||
{#each $table.getHeaderGroups() as headerGroup}
|
{#each $table.getHeaderGroups() as headerGroup}
|
||||||
<tr class="select-none">
|
<tr class="select-none">
|
||||||
<th class="inset-y-0 left-0 px-4 py-2 text-left w-px">
|
<th class="inset-y-0 left-0 px-4 py-2 text-left w-px">
|
||||||
@ -254,7 +258,7 @@
|
|||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
{#each $table.getRowModel().rows as row}
|
{#each $table.getRowModel().rows as row}
|
||||||
<tr class="odd:bg-white even:bg-gray-100">
|
<tr>
|
||||||
<td class="inset-y-0 left-0 px-4 py-2 text-center w-px">
|
<td class="inset-y-0 left-0 px-4 py-2 text-center w-px">
|
||||||
<InputElement
|
<InputElement
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
@ -281,9 +285,3 @@
|
|||||||
<TableBottom {table} {selected} />
|
<TableBottom {table} {selected} />
|
||||||
{/if}
|
{/if}
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<style>
|
|
||||||
table tbody tr td:nth-child(2) {
|
|
||||||
font-family: monospace;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@ -5,9 +5,8 @@
|
|||||||
import { DonorService } from "@odit/lfk-client-js";
|
import { DonorService } from "@odit/lfk-client-js";
|
||||||
import isEmail from "validator/es/lib/isEmail";
|
import isEmail from "validator/es/lib/isEmail";
|
||||||
import isMobilePhone from "validator/es/lib/isMobilePhone";
|
import isMobilePhone from "validator/es/lib/isMobilePhone";
|
||||||
|
import Toastify from "toastify-js";
|
||||||
import { createEventDispatcher } from "svelte";
|
import { createEventDispatcher } from "svelte";
|
||||||
import toast from "svelte-french-toast";
|
|
||||||
export let modal_open;
|
export let modal_open;
|
||||||
let firstname_input;
|
let firstname_input;
|
||||||
let lastname_input;
|
let lastname_input;
|
||||||
@ -74,7 +73,10 @@
|
|||||||
function submit() {
|
function submit() {
|
||||||
if (processed_last_submit === true) {
|
if (processed_last_submit === true) {
|
||||||
processed_last_submit = false;
|
processed_last_submit = false;
|
||||||
toast.loading($_("donor-is-being-added"));
|
const toast = Toastify({
|
||||||
|
text: $_("donor-is-being-added"),
|
||||||
|
duration: -1,
|
||||||
|
}).showToast();
|
||||||
let address = {};
|
let address = {};
|
||||||
if (address_checked === true) {
|
if (address_checked === true) {
|
||||||
address = {
|
address = {
|
||||||
@ -108,8 +110,11 @@
|
|||||||
email_input_value = "";
|
email_input_value = "";
|
||||||
modal_open = false;
|
modal_open = false;
|
||||||
//
|
//
|
||||||
toast.dismiss();
|
Toastify({
|
||||||
toast.success($_("donor-added"));
|
text: $_("donor-added"),
|
||||||
|
duration: 500,
|
||||||
|
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||||
|
}).showToast();
|
||||||
dispatch("created", { donors: [result] });
|
dispatch("created", { donors: [result] });
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
@ -117,6 +122,8 @@
|
|||||||
})
|
})
|
||||||
.finally(() => {
|
.finally(() => {
|
||||||
processed_last_submit = true;
|
processed_last_submit = true;
|
||||||
|
//
|
||||||
|
toast.hideToast();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -3,7 +3,7 @@
|
|||||||
import { clickOutside } from "../base/outsideclick";
|
import { clickOutside } from "../base/outsideclick";
|
||||||
|
|
||||||
import { DonorService } from "@odit/lfk-client-js";
|
import { DonorService } from "@odit/lfk-client-js";
|
||||||
|
import Toastify from "toastify-js";
|
||||||
import { createEventDispatcher } from "svelte";
|
import { createEventDispatcher } from "svelte";
|
||||||
export let modal_open;
|
export let modal_open;
|
||||||
export let delete_donor;
|
export let delete_donor;
|
||||||
|
|||||||
@ -2,7 +2,7 @@
|
|||||||
import { _ } from "svelte-i18n";
|
import { _ } from "svelte-i18n";
|
||||||
import store from "../../store";
|
import store from "../../store";
|
||||||
import { DonorService, DonationService } from "@odit/lfk-client-js";
|
import { DonorService, DonationService } from "@odit/lfk-client-js";
|
||||||
|
import Toastify from "toastify-js";
|
||||||
import PromiseError from "../base/PromiseError.svelte";
|
import PromiseError from "../base/PromiseError.svelte";
|
||||||
import isEmail from "validator/es/lib/isEmail";
|
import isEmail from "validator/es/lib/isEmail";
|
||||||
import ConfirmDonorDeletion from "./ConfirmDonorDeletion.svelte";
|
import ConfirmDonorDeletion from "./ConfirmDonorDeletion.svelte";
|
||||||
@ -62,7 +62,10 @@
|
|||||||
let delete_donor = {};
|
let delete_donor = {};
|
||||||
function submit() {
|
function submit() {
|
||||||
if (data_loaded === true && save_enabled) {
|
if (data_loaded === true && save_enabled) {
|
||||||
toast($_("donor-is-being-updated"));
|
Toastify({
|
||||||
|
text: $_("donor-is-being-updated"),
|
||||||
|
duration: 2500,
|
||||||
|
}).showToast();
|
||||||
editable.address.country = "DE";
|
editable.address.country = "DE";
|
||||||
if (editable.address_checked === false) {
|
if (editable.address_checked === false) {
|
||||||
editable.address = null;
|
editable.address = null;
|
||||||
@ -75,7 +78,11 @@
|
|||||||
.then((resp) => {
|
.then((resp) => {
|
||||||
Object.assign(original_data, editable);
|
Object.assign(original_data, editable);
|
||||||
original_data = original_data;
|
original_data = original_data;
|
||||||
toast.success($_("updated-donor"));
|
Toastify({
|
||||||
|
text: $_("updated-donor"),
|
||||||
|
duration: 2500,
|
||||||
|
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||||
|
}).showToast();
|
||||||
})
|
})
|
||||||
.catch((err) => {});
|
.catch((err) => {});
|
||||||
} else {
|
} else {
|
||||||
@ -84,7 +91,11 @@
|
|||||||
function deleteDonor() {
|
function deleteDonor() {
|
||||||
DonorService.donorControllerRemove(original_data.id, false)
|
DonorService.donorControllerRemove(original_data.id, false)
|
||||||
.then((resp) => {
|
.then((resp) => {
|
||||||
toast($_("donor-deleted"));
|
Toastify({
|
||||||
|
text: $_("donor-deleted"),
|
||||||
|
duration: 500,
|
||||||
|
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||||
|
}).showToast();
|
||||||
location.replace("./");
|
location.replace("./");
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
@ -96,7 +107,7 @@
|
|||||||
|
|
||||||
<ConfirmDonorDeletion bind:modal_open bind:delete_donor />
|
<ConfirmDonorDeletion bind:modal_open bind:delete_donor />
|
||||||
{#await promise && donation_promise}
|
{#await promise && donation_promise}
|
||||||
{$_("loading-donor-details")}
|
{$_('loading-donor-details')}
|
||||||
{:then}
|
{:then}
|
||||||
<section class="container p-5 select-none">
|
<section class="container p-5 select-none">
|
||||||
<div class="flex flex-row mb-4">
|
<div class="flex flex-row mb-4">
|
||||||
@ -109,15 +120,12 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
width="24"
|
width="24"
|
||||||
height="24"
|
height="24"><path fill="none" d="M0 0h24v24H0z" />
|
||||||
><path fill="none" d="M0 0h24v24H0z" />
|
|
||||||
<path
|
<path
|
||||||
d="M9.33 11.5h2.17A4.5 4.5 0 0 1 16 16H8.999L9 17h8v-1a5.578 5.578 0 0 0-.886-3H19a5 5 0 0 1 4.516 2.851C21.151 18.972 17.322 21 13 21c-2.761 0-5.1-.59-7-1.625L6 10.071A6.967 6.967 0 0 1 9.33 11.5zM5 19a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v9zM18 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6zm-7-3a3 3 0 1 1 0 6 3 3 0 0 1 0-6z"
|
d="M9.33 11.5h2.17A4.5 4.5 0 0 1 16 16H8.999L9 17h8v-1a5.578 5.578 0 0 0-.886-3H19a5 5 0 0 1 4.516 2.851C21.151 18.972 17.322 21 13 21c-2.761 0-5.1-.59-7-1.625L6 10.071A6.967 6.967 0 0 1 9.33 11.5zM5 19a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v9zM18 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6zm-7-3a3 3 0 1 1 0 6 3 3 0 0 1 0-6z" /></svg>
|
||||||
/></svg
|
|
||||||
>
|
|
||||||
</li>
|
</li>
|
||||||
<li class="flex items-center ml-2">
|
<li class="flex items-center ml-2">
|
||||||
<a class="mr-2" href="./">{$_("donors")}</a><svg
|
<a class="mr-2" href="./">{$_('donors')}</a><svg
|
||||||
stroke="currentColor"
|
stroke="currentColor"
|
||||||
fill="none"
|
fill="none"
|
||||||
stroke-width="2"
|
stroke-width="2"
|
||||||
@ -127,17 +135,17 @@
|
|||||||
class="h-3 w-3 mr-2 stroke-current"
|
class="h-3 w-3 mr-2 stroke-current"
|
||||||
height="1em"
|
height="1em"
|
||||||
width="1em"
|
width="1em"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"><line
|
||||||
><line x1="5" y1="12" x2="19" y2="12" />
|
x1="5"
|
||||||
<polyline points="12 5 19 12 12 19" /></svg
|
y1="12"
|
||||||
>
|
x2="19"
|
||||||
|
y2="12" />
|
||||||
|
<polyline points="12 5 19 12 12 19" /></svg>
|
||||||
</li>
|
</li>
|
||||||
<li class="flex items-center">
|
<li class="flex items-center">
|
||||||
<span class="mr-2"
|
<span class="mr-2">{original_data.firstname}
|
||||||
>{original_data.firstname}
|
{original_data.middlename || ''}
|
||||||
{original_data.middlename || ""}
|
{original_data.lastname}</span>
|
||||||
{original_data.lastname}</span
|
|
||||||
>
|
|
||||||
</li>
|
</li>
|
||||||
</ol>
|
</ol>
|
||||||
</nav>
|
</nav>
|
||||||
@ -145,23 +153,19 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="mb-8 text-3xl font-extrabold leading-tight">
|
<div class="mb-8 text-3xl font-extrabold leading-tight">
|
||||||
{original_data.firstname}
|
{original_data.firstname}
|
||||||
{original_data.middlename || ""}
|
{original_data.middlename || ''}
|
||||||
{original_data.lastname}
|
{original_data.lastname}
|
||||||
<span data-id="donor_actions_${editable.id}">
|
<span data-id="donor_actions_${editable.id}">
|
||||||
{#if store.state.jwtinfo.userdetails.permissions.includes("DONOR:DELETE")}
|
{#if store.state.jwtinfo.userdetails.permissions.includes('DONOR:DELETE')}
|
||||||
{#if delete_triggered}
|
{#if delete_triggered}
|
||||||
<button
|
<button
|
||||||
on:click={deleteDonor}
|
on:click={deleteDonor}
|
||||||
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:"
|
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:">{$_('confirm-deletion')}</button>
|
||||||
>{$_("confirm-deletion")}</button
|
|
||||||
>
|
|
||||||
<button
|
<button
|
||||||
on:click={() => {
|
on:click={() => {
|
||||||
delete_triggered = !delete_triggered;
|
delete_triggered = !delete_triggered;
|
||||||
}}
|
}}
|
||||||
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:"
|
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:">{$_('cancel')}</button>
|
||||||
>{$_("cancel")}</button
|
|
||||||
>
|
|
||||||
{/if}
|
{/if}
|
||||||
{#if !delete_triggered}
|
{#if !delete_triggered}
|
||||||
<button
|
<button
|
||||||
@ -169,9 +173,7 @@
|
|||||||
delete_triggered = true;
|
delete_triggered = true;
|
||||||
}}
|
}}
|
||||||
type="button"
|
type="button"
|
||||||
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:"
|
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:">{$_('delete-donor')}</button>
|
||||||
>{$_("delete-donor")}</button
|
|
||||||
>
|
|
||||||
{/if}
|
{/if}
|
||||||
{/if}
|
{/if}
|
||||||
{#if !delete_triggered}
|
{#if !delete_triggered}
|
||||||
@ -180,154 +182,135 @@
|
|||||||
class:opacity-50={!save_enabled}
|
class:opacity-50={!save_enabled}
|
||||||
type="button"
|
type="button"
|
||||||
on:click={submit}
|
on:click={submit}
|
||||||
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:"
|
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:">{$_('save-changes')}</button>
|
||||||
>{$_("save-changes")}</button
|
|
||||||
>
|
|
||||||
{/if}
|
{/if}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<!-- -->
|
<!-- -->
|
||||||
<div>
|
<div>
|
||||||
<span class="font-medium text-gray-700"
|
|
||||||
>{$_("total-donation-amount")}:</span
|
|
||||||
>
|
|
||||||
<span
|
<span
|
||||||
>{(editable.donationAmount / 100)
|
class="font-medium text-gray-700">{$_('total-donation-amount')}:</span>
|
||||||
|
<span>{(editable.donationAmount / 100)
|
||||||
.toFixed(2)
|
.toFixed(2)
|
||||||
.toLocaleString("de-DE", { valute: "EUR" })}€</span
|
.toLocaleString('de-DE', { valute: 'EUR' })}€</span>
|
||||||
>
|
|
||||||
|
|
|
|
||||||
<span class="font-medium text-gray-700">{$_("total-paid-amount")}:</span>
|
|
||||||
<span
|
<span
|
||||||
>{(editable.paidDonationAmount / 100)
|
class="font-medium text-gray-700">{$_('total-paid-amount')}:</span>
|
||||||
|
<span>{(editable.paidDonationAmount / 100)
|
||||||
.toFixed(2)
|
.toFixed(2)
|
||||||
.toLocaleString("de-DE", { valute: "EUR" })}€</span
|
.toLocaleString('de-DE', { valute: 'EUR' })}€</span>
|
||||||
>
|
|
||||||
<br />
|
<br />
|
||||||
<span class="font-medium text-gray-700">{$_("donations")}:</span>
|
<span class="font-medium text-gray-700">{$_('donations')}:</span>
|
||||||
{#if current_donations.filter((d) => d.donor.id == editable.id).length > 0}
|
{#if current_donations.filter((d) => d.donor.id == editable.id).length > 0}
|
||||||
{#each current_donations.filter((o) => o.donor.id == editable.id) as d}
|
{#each current_donations.filter((o) => o.donor.id == editable.id) as d}
|
||||||
{#if d.responseType === "DISTANCEDONATION"}
|
{#if d.responseType === 'DISTANCEDONATION'}
|
||||||
<a
|
<a
|
||||||
href="../donations/{d.id}"
|
href="../donations/{d.id}"
|
||||||
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-600 text-white mr-1"
|
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-600 text-white mr-1">{d.runner.firstname}
|
||||||
>{d.runner.firstname}
|
|
||||||
{d.runner.middlename || ""}
|
{d.runner.middlename || ""}
|
||||||
{d.runner.lastname}</a
|
{d.runner.lastname}</a>
|
||||||
>
|
|
||||||
{:else}
|
{:else}
|
||||||
<a
|
<a
|
||||||
href="../donations/{d.id}"
|
href="../donations/{d.id}"
|
||||||
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-700 text-white mr-1"
|
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-700 text-white mr-1">{$_('fixed-donation')}:
|
||||||
>{$_("fixed-donation")}:
|
|
||||||
{(d.amount / 100)
|
{(d.amount / 100)
|
||||||
.toFixed(2)
|
.toFixed(2)
|
||||||
.toLocaleString("de-DE", { valute: "EUR" })}€</a
|
.toLocaleString('de-DE', { valute: 'EUR' })}€</a>
|
||||||
>
|
|
||||||
{/if}
|
{/if}
|
||||||
{/each}
|
{/each}
|
||||||
{:else}{$_("donor-has-no-associated-donations")}{/if}
|
{:else}{$_('donor-has-no-associated-donations')}{/if}
|
||||||
</div>
|
</div>
|
||||||
<div class=" w-full">
|
<div class=" w-full">
|
||||||
<label for="firstname" class="font-medium text-gray-700"
|
<label
|
||||||
>{$_("first-name")}</label
|
for="firstname"
|
||||||
>
|
class="font-medium text-gray-700">{$_('first-name')}</label>
|
||||||
<input
|
<input
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
placeholder={$_("first-name")}
|
placeholder={$_('first-name')}
|
||||||
type="text"
|
type="text"
|
||||||
class:border-red-500={!isFirstnameValid}
|
class:border-red-500={!isFirstnameValid}
|
||||||
class:focus:border-red-500={!isFirstnameValid}
|
class:focus:border-red-500={!isFirstnameValid}
|
||||||
class:focus:ring-red-500={!isFirstnameValid}
|
class:focus:ring-red-500={!isFirstnameValid}
|
||||||
bind:value={editable.firstname}
|
bind:value={editable.firstname}
|
||||||
name="firstname"
|
name="firstname"
|
||||||
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
|
||||||
/>
|
|
||||||
{#if !isFirstnameValid}
|
{#if !isFirstnameValid}
|
||||||
<span
|
<span
|
||||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
|
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||||
>
|
{$_('first-name-is-required')}
|
||||||
{$_("first-name-is-required")}
|
|
||||||
</span>
|
</span>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
<div class=" w-full">
|
<div class=" w-full">
|
||||||
<label for="middlename" class="font-medium text-gray-700"
|
<label
|
||||||
>{$_("middle-name")}</label
|
for="middlename"
|
||||||
>
|
class="font-medium text-gray-700">{$_('middle-name')}</label>
|
||||||
<input
|
<input
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
placeholder={$_("middle-name")}
|
placeholder={$_('middle-name')}
|
||||||
type="text"
|
type="text"
|
||||||
bind:value={editable.middlename}
|
bind:value={editable.middlename}
|
||||||
name="middlename"
|
name="middlename"
|
||||||
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class=" w-full">
|
<div class=" w-full">
|
||||||
<label for="lastname" class="font-medium text-gray-700"
|
<label
|
||||||
>{$_("last-name")}</label
|
for="lastname"
|
||||||
>
|
class="font-medium text-gray-700">{$_('last-name')}</label>
|
||||||
<input
|
<input
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
placeholder={$_("last-name")}
|
placeholder={$_('last-name')}
|
||||||
type="text"
|
type="text"
|
||||||
bind:value={editable.lastname}
|
bind:value={editable.lastname}
|
||||||
class:border-red-500={!isLastnameValid}
|
class:border-red-500={!isLastnameValid}
|
||||||
class:focus:border-red-500={!isLastnameValid}
|
class:focus:border-red-500={!isLastnameValid}
|
||||||
class:focus:ring-red-500={!isLastnameValid}
|
class:focus:ring-red-500={!isLastnameValid}
|
||||||
name="lastname"
|
name="lastname"
|
||||||
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
|
||||||
/>
|
|
||||||
{#if !isLastnameValid}
|
{#if !isLastnameValid}
|
||||||
<span
|
<span
|
||||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
|
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||||
>
|
{$_('last-name-is-required')}
|
||||||
{$_("last-name-is-required")}
|
|
||||||
</span>
|
</span>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
<div class=" w-full">
|
<div class=" w-full">
|
||||||
<label for="email" class="font-medium text-gray-700"
|
<label
|
||||||
>{$_("e-mail-adress")}</label
|
for="email"
|
||||||
>
|
class="font-medium text-gray-700">{$_('e-mail-adress')}</label>
|
||||||
<input
|
<input
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
placeholder={$_("e-mail-adress")}
|
placeholder={$_('e-mail-adress')}
|
||||||
type="email"
|
type="email"
|
||||||
bind:value={editable.email}
|
bind:value={editable.email}
|
||||||
class:border-red-500={!isEmailValid}
|
class:border-red-500={!isEmailValid}
|
||||||
class:focus:border-red-500={!isEmailValid}
|
class:focus:border-red-500={!isEmailValid}
|
||||||
class:focus:ring-red-500={!isEmailValid}
|
class:focus:ring-red-500={!isEmailValid}
|
||||||
name="email"
|
name="email"
|
||||||
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
|
||||||
/>
|
|
||||||
{#if !isEmailValid}
|
{#if !isEmailValid}
|
||||||
<span
|
<span
|
||||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
|
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||||
>
|
{$_('valid-email-is-required')}
|
||||||
{$_("valid-email-is-required")}
|
|
||||||
</span>
|
</span>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
<div class=" w-full">
|
<div class=" w-full">
|
||||||
<label for="phone" class="font-medium text-gray-700">{$_("phone")}</label>
|
<label for="phone" class="font-medium text-gray-700">{$_('phone')}</label>
|
||||||
<input
|
<input
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
placeholder={$_("phone")}
|
placeholder={$_('phone')}
|
||||||
type="tel"
|
type="tel"
|
||||||
class:border-red-500={!isPhoneValidOrEmpty}
|
class:border-red-500={!isPhoneValidOrEmpty}
|
||||||
class:focus:border-red-500={!isPhoneValidOrEmpty}
|
class:focus:border-red-500={!isPhoneValidOrEmpty}
|
||||||
class:focus:ring-red-500={!isPhoneValidOrEmpty}
|
class:focus:ring-red-500={!isPhoneValidOrEmpty}
|
||||||
bind:value={editable.phone}
|
bind:value={editable.phone}
|
||||||
name="phone"
|
name="phone"
|
||||||
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
|
||||||
/>
|
|
||||||
{#if !isPhoneValidOrEmpty}
|
{#if !isPhoneValidOrEmpty}
|
||||||
<span
|
<span
|
||||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
|
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||||
>
|
{$_('valid-international-phone-number-is-required')}
|
||||||
{$_("valid-international-phone-number-is-required")}
|
|
||||||
</span>
|
</span>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
@ -338,20 +321,19 @@
|
|||||||
id="comments"
|
id="comments"
|
||||||
name="comments"
|
name="comments"
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
|
class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="ml-3">
|
<div class="ml-3 ">
|
||||||
<label for="comments" class="font-medium text-gray-700"
|
<label
|
||||||
>{$_("receipt-needed")}</label
|
for="comments"
|
||||||
>
|
class="font-medium text-gray-700">{$_('receipt-needed')}</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{#if editable.address_checked === true}
|
{#if editable.address_checked === true}
|
||||||
<div class="col-span-6">
|
<div class="col-span-6">
|
||||||
<label for="address1" class="block font-medium text-gray-700"
|
<label
|
||||||
>{$_("address")}</label
|
for="address1"
|
||||||
>
|
class="block font-medium text-gray-700">{$_('address')}</label>
|
||||||
<input
|
<input
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
placeholder="Address"
|
placeholder="Address"
|
||||||
@ -361,72 +343,65 @@
|
|||||||
bind:value={editable.address.address1}
|
bind:value={editable.address.address1}
|
||||||
type="text"
|
type="text"
|
||||||
name="address1"
|
name="address1"
|
||||||
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
|
||||||
/>
|
|
||||||
{#if !isAddress1Valid}
|
{#if !isAddress1Valid}
|
||||||
<span
|
<span
|
||||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
|
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||||
>
|
{$_('address-is-required')}
|
||||||
{$_("address-is-required")}
|
|
||||||
</span>
|
</span>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
<div class="col-span-6">
|
<div class="col-span-6">
|
||||||
<label for="address2" class="block font-medium text-gray-700"
|
<label
|
||||||
>{$_("apartment-suite-etc")}</label
|
for="address2"
|
||||||
>
|
class="block font-medium text-gray-700">{$_('apartment-suite-etc')}</label>
|
||||||
<input
|
<input
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
placeholder={$_("apartment-suite-etc")}
|
placeholder={$_('apartment-suite-etc')}
|
||||||
bind:value={editable.address.address2}
|
bind:value={editable.address.address2}
|
||||||
type="text"
|
type="text"
|
||||||
name="address2"
|
name="address2"
|
||||||
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="col-span-6">
|
<div class="col-span-6">
|
||||||
<label for="zipcode" class="block font-medium text-gray-700"
|
<label
|
||||||
>{$_("zip-postal-code")}</label
|
for="zipcode"
|
||||||
>
|
class="block font-medium text-gray-700">{$_('zip-postal-code')}</label>
|
||||||
<input
|
<input
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
placeholder={$_("zip-postal-code")}
|
placeholder={$_('zip-postal-code')}
|
||||||
class:border-red-500={!iszipcodevalid}
|
class:border-red-500={!iszipcodevalid}
|
||||||
class:focus:border-red-500={!iszipcodevalid}
|
class:focus:border-red-500={!iszipcodevalid}
|
||||||
class:focus:ring-red-500={!iszipcodevalid}
|
class:focus:ring-red-500={!iszipcodevalid}
|
||||||
bind:value={editable.address.postalcode}
|
bind:value={editable.address.postalcode}
|
||||||
type="text"
|
type="text"
|
||||||
name="zipcode"
|
name="zipcode"
|
||||||
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
|
||||||
/>
|
|
||||||
{#if !iszipcodevalid}
|
{#if !iszipcodevalid}
|
||||||
<span
|
<span
|
||||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
|
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||||
>
|
{$_('valid-zipcode-postal-code-is-required')}
|
||||||
{$_("valid-zipcode-postal-code-is-required")}
|
|
||||||
</span>
|
</span>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
<div class="col-span-6">
|
<div class="col-span-6">
|
||||||
<label for="city" class="block font-medium text-gray-700"
|
<label
|
||||||
>{$_("city")}</label
|
for="city"
|
||||||
>
|
class="block font-medium text-gray-700">{$_('city')}</label>
|
||||||
<input
|
<input
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
placeholder={$_("city")}
|
placeholder={$_('city')}
|
||||||
class:border-red-500={!iscityvalid}
|
class:border-red-500={!iscityvalid}
|
||||||
class:focus:border-red-500={!iscityvalid}
|
class:focus:border-red-500={!iscityvalid}
|
||||||
class:focus:ring-red-500={!iscityvalid}
|
class:focus:ring-red-500={!iscityvalid}
|
||||||
bind:value={editable.address.city}
|
bind:value={editable.address.city}
|
||||||
type="text"
|
type="text"
|
||||||
name="city"
|
name="city"
|
||||||
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
|
||||||
/>
|
|
||||||
{#if !iscityvalid}
|
{#if !iscityvalid}
|
||||||
<span
|
<span
|
||||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
|
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||||
>
|
{$_('valid-city-is-required')}
|
||||||
{$_("valid-city-is-required")}
|
|
||||||
</span>
|
</span>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -4,7 +4,7 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if !donations || donations.length == 0}
|
{#if !donations || donations.length == 0}
|
||||||
{$_("donor-has-no-associated-donations")}
|
{$_('donor-has-no-associated-donations')}
|
||||||
{:else}
|
{:else}
|
||||||
{#each donations as donation}
|
{#each donations as donation}
|
||||||
{#if donation.responseType === "DISTANCEDONATION"}
|
{#if donation.responseType === "DISTANCEDONATION"}
|
||||||
|
|||||||
@ -6,7 +6,7 @@
|
|||||||
<div class="text-center items-center justify-center">
|
<div class="text-center items-center justify-center">
|
||||||
<p class="mb-16 text-lg text-gray-500">
|
<p class="mb-16 text-lg text-gray-500">
|
||||||
<img class="w-full" style="height:15rem" src={donors_empty} alt="" />
|
<img class="w-full" style="height:15rem" src={donors_empty} alt="" />
|
||||||
<span class="font-bold">{$_("there-are-no-donors-yet")}</span><br />
|
<span class="font-bold">{$_('there-are-no-donors-yet')}</span><br />
|
||||||
<span>{$_("add-your-first-donor")}</span>
|
<span>{$_('add-your-first-donor')}</span>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,9 +1,10 @@
|
|||||||
<script>
|
<script>
|
||||||
import { _ } from "svelte-i18n";
|
import { _ } from "svelte-i18n";
|
||||||
import { DonorService } from "@odit/lfk-client-js";
|
import { DonationService, DonorService } from "@odit/lfk-client-js";
|
||||||
import store from "../../store";
|
import store from "../../store";
|
||||||
import DonorsEmptyState from "./DonorsEmptyState.svelte";
|
import DonorsEmptyState from "./DonorsEmptyState.svelte";
|
||||||
import ConfirmDonorDeletion from "./ConfirmDonorDeletion.svelte";
|
import ConfirmDonorDeletion from "./ConfirmDonorDeletion.svelte";
|
||||||
|
import Toastify from "toastify-js";
|
||||||
import TableBottom from "../shared/TableBottom.svelte";
|
import TableBottom from "../shared/TableBottom.svelte";
|
||||||
import {
|
import {
|
||||||
createSvelteTable,
|
createSvelteTable,
|
||||||
@ -22,7 +23,6 @@
|
|||||||
import DonorAddress from "./DonorAddress.svelte";
|
import DonorAddress from "./DonorAddress.svelte";
|
||||||
import DonorDonations from "./DonorDonations.svelte";
|
import DonorDonations from "./DonorDonations.svelte";
|
||||||
import { filterAddress, filterName } from "../shared/tablefilters";
|
import { filterAddress, filterName } from "../shared/tablefilters";
|
||||||
import toast from "svelte-french-toast";
|
|
||||||
$: searchvalue = "";
|
$: searchvalue = "";
|
||||||
$: active_deletes = [];
|
$: active_deletes = [];
|
||||||
$: selectedDonors =
|
$: selectedDonors =
|
||||||
@ -147,9 +147,8 @@
|
|||||||
|
|
||||||
onMount(async () => {
|
onMount(async () => {
|
||||||
let page = 0;
|
let page = 0;
|
||||||
let pagesize = 100;
|
|
||||||
while (page >= 0) {
|
while (page >= 0) {
|
||||||
const donors = await DonorService.donorControllerGetAll(page, pagesize);
|
const donors = await DonorService.donorControllerGetAll(page, 500);
|
||||||
if (donors.length == 0) {
|
if (donors.length == 0) {
|
||||||
page = -2;
|
page = -2;
|
||||||
}
|
}
|
||||||
@ -162,8 +161,9 @@
|
|||||||
|
|
||||||
dataLoaded = true;
|
dataLoaded = true;
|
||||||
page++;
|
page++;
|
||||||
pagesize += 100;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
console.log("All donors loaded");
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@ -172,10 +172,12 @@
|
|||||||
active_deletes = active_deletes.filter((a) => a.id !== event.detail.id);
|
active_deletes = active_deletes.filter((a) => a.id !== event.detail.id);
|
||||||
}}
|
}}
|
||||||
on:delete={async (event) => {
|
on:delete={async (event) => {
|
||||||
toast.loading($_("deleting-donor"));
|
|
||||||
await DonorService.donorControllerRemove(event.detail.id, true);
|
await DonorService.donorControllerRemove(event.detail.id, true);
|
||||||
toast.dismiss();
|
Toastify({
|
||||||
toast($_("donor-deleted"));
|
text: $_("donor-deleted"),
|
||||||
|
duration: 500,
|
||||||
|
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||||
|
}).showToast();
|
||||||
current_donors = current_donors.filter((d) => d.id !== event.detail.id);
|
current_donors = current_donors.filter((d) => d.id !== event.detail.id);
|
||||||
active_deletes = active_deletes.filter((a) => a.id !== event.detail.id);
|
active_deletes = active_deletes.filter((a) => a.id !== event.detail.id);
|
||||||
options.update((options) => ({
|
options.update((options) => ({
|
||||||
@ -209,7 +211,7 @@
|
|||||||
class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll"
|
class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll"
|
||||||
>
|
>
|
||||||
<table class="w-full">
|
<table class="w-full">
|
||||||
<thead class="border-b border-gray-400">
|
<thead>
|
||||||
{#each $table.getHeaderGroups() as headerGroup}
|
{#each $table.getHeaderGroups() as headerGroup}
|
||||||
<tr class="select-none">
|
<tr class="select-none">
|
||||||
<th class="inset-y-0 left-0 px-4 py-2 text-left w-px">
|
<th class="inset-y-0 left-0 px-4 py-2 text-left w-px">
|
||||||
@ -228,7 +230,7 @@
|
|||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
{#each $table.getRowModel().rows as row}
|
{#each $table.getRowModel().rows as row}
|
||||||
<tr class="odd:bg-white even:bg-gray-100">
|
<tr>
|
||||||
<td class="inset-y-0 left-0 px-4 py-2 text-center w-px">
|
<td class="inset-y-0 left-0 px-4 py-2 text-center w-px">
|
||||||
<InputElement
|
<InputElement
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
@ -255,9 +257,3 @@
|
|||||||
<TableBottom {table} {selected} />
|
<TableBottom {table} {selected} />
|
||||||
{/if}
|
{/if}
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<style>
|
|
||||||
table tbody tr td:nth-child(2) {
|
|
||||||
font-family: monospace;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@ -25,51 +25,43 @@
|
|||||||
{#if modal_open}
|
{#if modal_open}
|
||||||
<div
|
<div
|
||||||
class="fixed z-10 inset-0 overflow-y-auto"
|
class="fixed z-10 inset-0 overflow-y-auto"
|
||||||
|
|
||||||
use:clickOutside
|
use:clickOutside
|
||||||
on:click_outside={() => {
|
on:click_outside={() => {
|
||||||
modal_open = false;
|
modal_open = false;
|
||||||
}}
|
}}>
|
||||||
>
|
|
||||||
<div
|
<div
|
||||||
class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
|
class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
|
||||||
>
|
|
||||||
<div class="fixed inset-0 transition-opacity" aria-hidden="true">
|
<div class="fixed inset-0 transition-opacity" aria-hidden="true">
|
||||||
<div
|
<div
|
||||||
class="absolute inset-0 bg-gray-500 opacity-75"
|
class="absolute inset-0 bg-gray-500 opacity-75"
|
||||||
data-id="modal_backdrop"
|
data-id="modal_backdrop" />
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<span
|
<span
|
||||||
class="hidden sm:inline-block sm:align-middle sm:h-screen"
|
class="hidden sm:inline-block sm:align-middle sm:h-screen"
|
||||||
aria-hidden="true">​</span
|
aria-hidden="true">​</span>
|
||||||
>
|
|
||||||
<div
|
<div
|
||||||
class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
|
class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
|
||||||
role="dialog"
|
role="dialog"
|
||||||
aria-modal="true"
|
aria-modal="true"
|
||||||
aria-labelledby="modal-headline"
|
aria-labelledby="modal-headline">
|
||||||
>
|
|
||||||
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
||||||
<div class="sm:flex sm:items-start">
|
<div class="sm:flex sm:items-start">
|
||||||
<div
|
<div
|
||||||
class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
|
class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
|
||||||
>
|
|
||||||
<svg
|
<svg
|
||||||
fill="currentColor"
|
fill="currentColor"
|
||||||
class="h-6 w-6 text-blue-600"
|
class="h-6 w-6 text-blue-600"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
width="24"
|
width="24"
|
||||||
height="24"
|
height="24"><path fill="none" d="M0 0h24v24H0z" />
|
||||||
><path fill="none" d="M0 0h24v24H0z" />
|
|
||||||
<path
|
<path
|
||||||
d="M14 20v2H2v-2h12zM14.586.686l7.778 7.778L20.95 9.88l-1.06-.354L17.413 12l5.657 5.657-1.414 1.414L16 13.414l-2.404 2.404.283 1.132-1.415 1.414-7.778-7.778 1.415-1.414 1.13.282 6.294-6.293-.353-1.06L14.586.686z"
|
d="M14 20v2H2v-2h12zM14.586.686l7.778 7.778L20.95 9.88l-1.06-.354L17.413 12l5.657 5.657-1.414 1.414L16 13.414l-2.404 2.404.283 1.132-1.415 1.414-7.778-7.778 1.415-1.414 1.13.282 6.294-6.293-.353-1.06L14.586.686z" /></svg>
|
||||||
/></svg
|
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
|
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
|
||||||
<h3 class="text-lg leading-6 font-medium">
|
<h3 class="text-lg leading-6 font-medium">
|
||||||
{$_("read-license")}
|
{$_('read-license')}
|
||||||
</h3>
|
</h3>
|
||||||
<div class="mt-2 mb-6">
|
<div class="mt-2 mb-6">
|
||||||
<p class="text-sm text-gray-500">{currentlicense}</p>
|
<p class="text-sm text-gray-500">{currentlicense}</p>
|
||||||
@ -86,9 +78,8 @@
|
|||||||
modal_open = false;
|
modal_open = false;
|
||||||
}}
|
}}
|
||||||
type="button"
|
type="button"
|
||||||
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
|
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
|
||||||
>
|
{$_('close')}
|
||||||
{$_("close")}
|
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -99,21 +90,19 @@
|
|||||||
<div class="pt-12 px-4 sm:px-6 lg:px-8 lg:pt-20 bg-gray-900 pb-12">
|
<div class="pt-12 px-4 sm:px-6 lg:px-8 lg:pt-20 bg-gray-900 pb-12">
|
||||||
<div class="text-center mb-8">
|
<div class="text-center mb-8">
|
||||||
<h1
|
<h1
|
||||||
class="mt-9 font-display text-4xl leading-none font-semibold text-white sm:text-5xl lg:text-6xl"
|
class="mt-9 font-display text-4xl leading-none font-semibold text-white sm:text-5xl lg:text-6xl">
|
||||||
>
|
{$_('about')}
|
||||||
{$_("about")}
|
|
||||||
🧾
|
🧾
|
||||||
</h1>
|
</h1>
|
||||||
<p
|
<p
|
||||||
class="mt-2 max-w-xl mx-auto text-xl lg:max-w-3xl lg:text-2xl text-gray-300"
|
class="mt-2 max-w-xl mx-auto text-xl lg:max-w-3xl lg:text-2xl text-gray-300">
|
||||||
>
|
|
||||||
Lauf für Kaya!
|
Lauf für Kaya!
|
||||||
<strong class="text-white font-medium">
|
<strong class="text-white font-medium">
|
||||||
{$_("by")}
|
{$_('by')}
|
||||||
<a href="https://odit.services" class="underline">ODIT.Services</a>
|
<a href="https://odit.services" class="underline">ODIT.Services</a>
|
||||||
</strong>
|
</strong>
|
||||||
<br />
|
<br />
|
||||||
<span class="text-lg">{$_("lfk-is-os")}</span>
|
<span class="text-lg">{$_('lfk-is-os')}</span>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -121,88 +110,82 @@
|
|||||||
<div class="pt-0 pb-16 overflow-hidden lg:pt-12 lg:py-24">
|
<div class="pt-0 pb-16 overflow-hidden lg:pt-12 lg:py-24">
|
||||||
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
|
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
|
||||||
<h2 class="text-4xl font-display font-semibold md:text-5xl">
|
<h2 class="text-4xl font-display font-semibold md:text-5xl">
|
||||||
{$_("credits")}
|
{$_('credits')}
|
||||||
</h2>
|
</h2>
|
||||||
<div class="max-w-3xl mx-auto text-xl leading-8 font-medium mt-8">
|
<div class="max-w-3xl mx-auto text-xl leading-8 font-medium mt-8">
|
||||||
<p class="text-center">{$_("oss_credit_description")}</p>
|
<p class="text-center">{$_('oss_credit_description')}</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="w-screen leading-8 pl-5 mt-5">
|
<div class="w-screen leading-8 pl-5 mt-5">
|
||||||
{#await license_promise}
|
{#await license_promise}
|
||||||
<p class="text-center w-full">{$_("licenses-are-being-loaded")}</p>
|
<p class="text-center w-full">{$_('licenses-are-being-loaded')}</p>
|
||||||
{:then}
|
{:then}
|
||||||
<table>
|
<table>
|
||||||
<thead class="border-b border-gray-400">
|
<thead>
|
||||||
<tr class="odd:bg-white even:bg-gray-100">
|
<tr>
|
||||||
<th>{$_("dependency_name")}</th>
|
<th>{$_('dependency_name')}</th>
|
||||||
<th>{$_("license")}</th>
|
<th>{$_('license')}</th>
|
||||||
<th>{$_("repo_link")}</th>
|
<th>{$_('repo_link')}</th>
|
||||||
<th>{$_("installed-version")}</th>
|
<th>{$_('installed-version')}</th>
|
||||||
<th>{$_("author")}</th>
|
<th>{$_('author')}</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
{#each licenses as l}
|
{#each licenses as l}
|
||||||
<tr class="odd:bg-white even:bg-gray-100">
|
<tr>
|
||||||
<td>{l.name}</td>
|
<td>{l.name}</td>
|
||||||
<td>
|
<td>
|
||||||
{l.license || "?"}<br /><button
|
{l.license || '?'}<br /><span
|
||||||
class="underline cursor-pointer"
|
class="underline cursor-pointer"
|
||||||
on:click={() => {
|
on:click={() => {
|
||||||
modal_open = true;
|
modal_open = true;
|
||||||
currentlicense = l.name + "@" + l.version;
|
currentlicense = l.name + '@' + l.version;
|
||||||
licensetext =
|
licensetext = l.licensetext || $_('no-license-text-could-be-found');
|
||||||
l.licensetext || $_("no-license-text-could-be-found");
|
}}>{$_('read-license')}</span>
|
||||||
}}>{$_("read-license")}</button
|
|
||||||
>
|
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
{(l.repo?.url || l.repo)
|
{(l.repo?.url || l.repo)
|
||||||
.replace("git+", "")
|
.replace('git+', '')
|
||||||
.replace("git://", "")}
|
.replace('git://', '')}
|
||||||
</td>
|
</td>
|
||||||
<td>{l.version || "?"}</td>
|
<td>{l.version || '?'}</td>
|
||||||
<td>{l.author?.name || l.author || "?"}</td>
|
<td>{l.author?.name || l.author || '?'}</td>
|
||||||
</tr>
|
</tr>
|
||||||
{/each}
|
{/each}
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
{:catch error}
|
{:catch error}
|
||||||
<div
|
<div
|
||||||
class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500"
|
class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
|
||||||
>
|
|
||||||
<span class="inline-block align-middle mr-8">
|
<span class="inline-block align-middle mr-8">
|
||||||
<b class="capitalize">{$_("general_promise_error")}</b>
|
<b class="capitalize">{$_('general_promise_error')}</b>
|
||||||
{error}
|
{error}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
{/await}
|
{/await}
|
||||||
</div>
|
</div>
|
||||||
<div class="w-full leading-8 mt-8">
|
<div class="w-full leading-8 mt-8">
|
||||||
<p class="text-xl font-medium">{$_("icon-image-credits")}</p>
|
<p class="text-xl font-medium">{$_('icon-image-credits')}</p>
|
||||||
<ul class="list-disc">
|
<ul class="list-disc">
|
||||||
<li>
|
<li>
|
||||||
<a
|
<a
|
||||||
class="underline"
|
class="underline"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
href="https://storyset.com">https://storyset.com</a
|
href="https://storyset.com">https://storyset.com</a>
|
||||||
>
|
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a
|
<a
|
||||||
class="underline"
|
class="underline"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
href="https://undraw.co">https://undraw.co</a
|
href="https://undraw.co">https://undraw.co</a>
|
||||||
>
|
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a
|
<a
|
||||||
class="underline"
|
class="underline"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
href="https://remixicon.com">https://remixicon.com</a
|
href="https://remixicon.com">https://remixicon.com</a>
|
||||||
>
|
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -20,32 +20,27 @@
|
|||||||
class="underline"
|
class="underline"
|
||||||
href="https://odit.services"
|
href="https://odit.services"
|
||||||
rel="noopener,noreferrer"
|
rel="noopener,noreferrer"
|
||||||
target="_blank">ODIT.Services</a
|
target="_blank">ODIT.Services</a>
|
||||||
>
|
|
||||||
</p>
|
</p>
|
||||||
<p class="text-sm text-gray-500 mt-4">
|
<p class="text-sm text-gray-500 mt-4">
|
||||||
<a
|
<a
|
||||||
class="underline"
|
class="underline"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener, noreferrer"
|
rel="noopener, noreferrer"
|
||||||
href="https://git.odit.services/lfk/frontend/">LfK!Frontend</a
|
href="https://git.odit.services/lfk/frontend/">LfK!Frontend</a>@<a
|
||||||
>@<a
|
|
||||||
class="underline"
|
class="underline"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener, noreferrer"
|
rel="noopener, noreferrer"
|
||||||
href="https://git.odit.services/lfk/frontend/src/tag/{releaseinfo}"
|
href="https://git.odit.services/lfk/frontend/src/tag/{releaseinfo}">{releaseinfo}</a>
|
||||||
>{releaseinfo}</a
|
|
||||||
>
|
|
||||||
-
|
-
|
||||||
<a
|
<a
|
||||||
rel="noopener, noreferrer"
|
rel="noopener, noreferrer"
|
||||||
class="underline"
|
class="underline"
|
||||||
href="https://docs.lauf-fuer-kaya.de"
|
href="https://docs.lauf-fuer-kaya.de"
|
||||||
target="_blank">{$_("documentation")}</a
|
target="_blank">{$_('documentation')}</a>
|
||||||
>
|
|
||||||
-
|
-
|
||||||
<a class="underline" href="/privacy">{$_("privacy")}</a>
|
<a class="underline" href="/privacy">{$_('privacy')}</a>
|
||||||
-
|
-
|
||||||
<a class="underline" href="/imprint">{$_("imprint")}</a>
|
<a class="underline" href="/imprint">{$_('imprint')}</a>
|
||||||
</p>
|
</p>
|
||||||
</footer>
|
</footer>
|
||||||
|
|||||||
@ -1,20 +1,20 @@
|
|||||||
<script>
|
<script>
|
||||||
import { _, getLocaleFromNavigator } from "svelte-i18n";
|
import { _, getLocaleFromNavigator } from "svelte-i18n";
|
||||||
import { parse } from "marked";
|
import marked from "marked";
|
||||||
import Footer from "./Footer.svelte";
|
import Footer from "./Footer.svelte";
|
||||||
// import * as css from "../base/simple.css";
|
import * as css from "../base/simple.css";
|
||||||
let html = "";
|
let html = "";
|
||||||
async function load() {
|
async function load() {
|
||||||
let md = await fetch("/imprint_" + getLocaleFromNavigator() + ".md");
|
let md = await fetch("/imprint_" + getLocaleFromNavigator() + ".md");
|
||||||
let text = (await md.text()).toString();
|
let text = (await md.text()).toString();
|
||||||
if (text.includes("<meta")) {
|
if(text.includes("<meta")){
|
||||||
md.ok = false;
|
md.ok=false
|
||||||
}
|
}
|
||||||
if (!md.ok) {
|
if (!md.ok) {
|
||||||
md = await fetch("/imprint_en.md");
|
md = await fetch("/imprint_en.md");
|
||||||
text = await md.text();
|
text = await md.text();
|
||||||
}
|
}
|
||||||
html = parse(text);
|
html = marked(text);
|
||||||
}
|
}
|
||||||
const promise = load();
|
const promise = load();
|
||||||
</script>
|
</script>
|
||||||
@ -22,9 +22,8 @@
|
|||||||
<div class="pt-12 px-4 sm:px-6 lg:px-8 lg:pt-20 bg-gray-900 pb-12">
|
<div class="pt-12 px-4 sm:px-6 lg:px-8 lg:pt-20 bg-gray-900 pb-12">
|
||||||
<div class="text-center mb-8">
|
<div class="text-center mb-8">
|
||||||
<h1
|
<h1
|
||||||
class="mt-9 font-display text-4xl leading-none font-semibold text-white sm:text-5xl lg:text-6xl"
|
class="mt-9 font-display text-4xl leading-none font-semibold text-white sm:text-5xl lg:text-6xl">
|
||||||
>
|
{$_('imprint')}
|
||||||
{$_("imprint")}
|
|
||||||
</h1>
|
</h1>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -32,17 +31,16 @@
|
|||||||
<div class="pt-0 pb-16 overflow-hidden lg:pt-12 lg:py-24">
|
<div class="pt-0 pb-16 overflow-hidden lg:pt-12 lg:py-24">
|
||||||
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
|
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
|
||||||
{#await promise}
|
{#await promise}
|
||||||
<p class="text-center w-full">{$_("imprint-loading")}</p>
|
<p class="text-center w-full">{$_('imprint-loading')}</p>
|
||||||
{:then}
|
{:then}
|
||||||
<div class="simplecontent">
|
<div class="simplecontent">
|
||||||
{@html html}
|
{@html html}
|
||||||
</div>
|
</div>
|
||||||
{:catch error}
|
{:catch error}
|
||||||
<div
|
<div
|
||||||
class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500"
|
class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
|
||||||
>
|
|
||||||
<span class="inline-block align-middle mr-8">
|
<span class="inline-block align-middle mr-8">
|
||||||
<b class="capitalize">{$_("general_promise_error")}</b>
|
<b class="capitalize">{$_('general_promise_error')}</b>
|
||||||
{error}
|
{error}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -4,22 +4,19 @@
|
|||||||
|
|
||||||
<body class="antialiased font-sans">
|
<body class="antialiased font-sans">
|
||||||
<div class="flex min-h-screen">
|
<div class="flex min-h-screen">
|
||||||
<div class="w-full bg-white flex items-center justify-center">
|
<div class="w-full bg-white flex items-center justify-center ">
|
||||||
<div class="max-w-sm m-8">
|
<div class="max-w-sm m-8">
|
||||||
<div class="text-black text-5xl md:text-15xl font-black">
|
<div class="text-black text-5xl md:text-15xl font-black">
|
||||||
{$_("404title")}
|
{$_('404title')}
|
||||||
</div>
|
</div>
|
||||||
<div class="w-16 h-1 bg-purple-light my-3 md:my-6" />
|
<div class="w-16 h-1 bg-purple-light my-3 md:my-6" />
|
||||||
<p
|
<p
|
||||||
class="text-grey-darker text-2xl md:text-3xl font-light mb-8 leading-normal"
|
class="text-grey-darker text-2xl md:text-3xl font-light mb-8 leading-normal">
|
||||||
>
|
{$_('404message')}
|
||||||
{$_("404message")}
|
|
||||||
</p>
|
</p>
|
||||||
<a
|
<a
|
||||||
href="/"
|
href="/"
|
||||||
class="bg-transparent text-grey-darkest font-bold uppercase tracking-wide py-3 px-6 border-2 border-grey-light hover:border-grey rounded-lg"
|
class="bg-transparent text-grey-darkest font-bold uppercase tracking-wide py-3 px-6 border-2 border-grey-light hover:border-grey rounded-lg">{$_('goback')}</a>
|
||||||
>{$_("goback")}</a
|
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,20 +1,20 @@
|
|||||||
<script>
|
<script>
|
||||||
import { _, getLocaleFromNavigator } from "svelte-i18n";
|
import { _, getLocaleFromNavigator } from "svelte-i18n";
|
||||||
import { parse } from "marked";
|
import marked from "marked";
|
||||||
import Footer from "./Footer.svelte";
|
import Footer from "./Footer.svelte";
|
||||||
// import * as css from "../base/simple.css?inline";
|
// import * as css from "../base/simple.css?inline";
|
||||||
let html = "";
|
let html = "";
|
||||||
async function load() {
|
async function load() {
|
||||||
let md = await fetch("/privacy_" + getLocaleFromNavigator() + ".md");
|
let md = await fetch("/privacy_" + getLocaleFromNavigator() + ".md");
|
||||||
let text = (await md.text()).toString();
|
let text = (await md.text()).toString();
|
||||||
if (text.includes("<meta")) {
|
if(text.includes("<meta")){
|
||||||
md.ok = false;
|
md.ok=false
|
||||||
}
|
}
|
||||||
if (!md.ok) {
|
if (!md.ok) {
|
||||||
md = await fetch("/privacy_en.md");
|
md = await fetch("/privacy_en.md");
|
||||||
text = await md.text();
|
text = await md.text();
|
||||||
}
|
}
|
||||||
html = parse(text);
|
html = marked(text);
|
||||||
}
|
}
|
||||||
const promise = load();
|
const promise = load();
|
||||||
</script>
|
</script>
|
||||||
@ -22,9 +22,8 @@
|
|||||||
<div class="pt-12 px-4 sm:px-6 lg:px-8 lg:pt-20 bg-gray-900 pb-12">
|
<div class="pt-12 px-4 sm:px-6 lg:px-8 lg:pt-20 bg-gray-900 pb-12">
|
||||||
<div class="text-center mb-8">
|
<div class="text-center mb-8">
|
||||||
<h1
|
<h1
|
||||||
class="mt-9 font-display text-4xl leading-none font-semibold text-white sm:text-5xl lg:text-6xl"
|
class="mt-9 font-display text-4xl leading-none font-semibold text-white sm:text-5xl lg:text-6xl">
|
||||||
>
|
{$_('privacy')}
|
||||||
{$_("privacy")}
|
|
||||||
</h1>
|
</h1>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -32,17 +31,16 @@
|
|||||||
<div class="pt-0 pb-16 overflow-hidden lg:pt-12 lg:py-24">
|
<div class="pt-0 pb-16 overflow-hidden lg:pt-12 lg:py-24">
|
||||||
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
|
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
|
||||||
{#await promise}
|
{#await promise}
|
||||||
<p class="text-center w-full">{$_("privacy-loading")}</p>
|
<p class="text-center w-full">{$_('privacy-loading')}</p>
|
||||||
{:then}
|
{:then}
|
||||||
<div class="simplecontent">
|
<div class="simplecontent">
|
||||||
{@html html}
|
{@html html}
|
||||||
</div>
|
</div>
|
||||||
{:catch error}
|
{:catch error}
|
||||||
<div
|
<div
|
||||||
class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500"
|
class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
|
||||||
>
|
|
||||||
<span class="inline-block align-middle mr-8">
|
<span class="inline-block align-middle mr-8">
|
||||||
<b class="capitalize">{$_("general_promise_error")}</b>
|
<b class="capitalize">{$_('general_promise_error')}</b>
|
||||||
{error}
|
{error}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -4,33 +4,26 @@
|
|||||||
|
|
||||||
<div class="md:flex flex-col md:flex-row h-screen w-full">
|
<div class="md:flex flex-col md:flex-row h-screen w-full">
|
||||||
<div
|
<div
|
||||||
class="flex flex-col w-full md:w-64 text-gray-700 bg-white dark-mode:text-gray-200 dark-mode:bg-gray-800 flex-shrink-0"
|
class="flex flex-col w-full md:w-64 text-gray-700 bg-white dark-mode:text-gray-200 dark-mode:bg-gray-800 flex-shrink-0">
|
||||||
>
|
|
||||||
<div
|
<div
|
||||||
class="flex-shrink-0 px-8 py-4 flex flex-row items-center justify-between"
|
class="flex-shrink-0 px-8 py-4 flex flex-row items-center justify-between">
|
||||||
>
|
|
||||||
<a
|
<a
|
||||||
href="/#/test"
|
href="/#/test"
|
||||||
class="text-lg font-semibold tracking-widest text-gray-900 uppercase rounded-lg dark-mode:text-white focus:outline-none focus:shadow-outline"
|
class="text-lg font-semibold tracking-widest text-gray-900 uppercase rounded-lg dark-mode:text-white focus:outline-none focus:shadow-outline">Sidebar</a>
|
||||||
>Sidebar</a
|
|
||||||
>
|
|
||||||
<button
|
<button
|
||||||
class="rounded-lg md:hidden focus:outline-none focus:shadow-outline"
|
class="rounded-lg md:hidden focus:outline-none focus:shadow-outline">
|
||||||
>
|
|
||||||
<svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
|
<svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
|
||||||
{#if open}
|
{#if open}
|
||||||
<path
|
<path
|
||||||
fill-rule="evenodd"
|
fill-rule="evenodd"
|
||||||
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
|
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
|
||||||
clip-rule="evenodd"
|
clip-rule="evenodd" />
|
||||||
/>
|
|
||||||
{/if}
|
{/if}
|
||||||
{#if !open}
|
{#if !open}
|
||||||
<path
|
<path
|
||||||
fill-rule="evenodd"
|
fill-rule="evenodd"
|
||||||
d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z"
|
d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z"
|
||||||
clip-rule="evenodd"
|
clip-rule="evenodd" />
|
||||||
/>
|
|
||||||
{/if}
|
{/if}
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
@ -38,63 +31,49 @@
|
|||||||
<nav
|
<nav
|
||||||
:class:block={open}
|
:class:block={open}
|
||||||
:class:hidden={!open}
|
:class:hidden={!open}
|
||||||
class="flex-grow md:block px-4 pb-4 md:pb-0 md:overflow-y-auto"
|
class="flex-grow md:block px-4 pb-4 md:pb-0 md:overflow-y-auto">
|
||||||
>
|
|
||||||
<a
|
<a
|
||||||
class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-900 bg-gray-200 rounded-lg dark-mode:bg-gray-700 dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
|
class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-900 bg-gray-200 rounded-lg dark-mode:bg-gray-700 dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
|
||||||
href="#">Blog</a
|
href="#">Blog</a>
|
||||||
>
|
|
||||||
<a
|
<a
|
||||||
class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-900 bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
|
class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-900 bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
|
||||||
href="#">Portfolio</a
|
href="#">Portfolio</a>
|
||||||
>
|
|
||||||
<a
|
<a
|
||||||
class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-900 bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
|
class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-900 bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
|
||||||
href="#">About</a
|
href="#">About</a>
|
||||||
>
|
|
||||||
<a
|
<a
|
||||||
class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-900 bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
|
class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-900 bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
|
||||||
href="#">Contact</a
|
href="#">Contact</a>
|
||||||
>
|
|
||||||
<div class="relative">
|
<div class="relative">
|
||||||
<button
|
<button
|
||||||
on:click={() => {
|
on:click={() => {
|
||||||
open = !open;
|
open = !open;
|
||||||
}}
|
}}
|
||||||
class="flex flex-row items-center w-full px-4 py-2 mt-2 text-sm font-semibold text-left bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:focus:bg-gray-600 dark-mode:hover:bg-gray-600 md:block hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
|
class="flex flex-row items-center w-full px-4 py-2 mt-2 text-sm font-semibold text-left bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:focus:bg-gray-600 dark-mode:hover:bg-gray-600 md:block hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline">
|
||||||
>
|
|
||||||
<span>Dropdown</span>
|
<span>Dropdown</span>
|
||||||
<svg
|
<svg
|
||||||
fill="currentColor"
|
fill="currentColor"
|
||||||
viewBox="0 0 20 20"
|
viewBox="0 0 20 20"
|
||||||
class="inline w-4 h-4 mt-1 ml-1 transition-transform duration-200 transform md:-mt-1"
|
class="inline w-4 h-4 mt-1 ml-1 transition-transform duration-200 transform md:-mt-1"><path
|
||||||
><path
|
|
||||||
fill-rule="evenodd"
|
fill-rule="evenodd"
|
||||||
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
||||||
clip-rule="evenodd"
|
clip-rule="evenodd" /></svg>
|
||||||
/></svg
|
|
||||||
>
|
|
||||||
</button>
|
</button>
|
||||||
<div
|
<div
|
||||||
class:block={open}
|
class:block={open}
|
||||||
class:hidden={!open}
|
class:hidden={!open}
|
||||||
class="absolute right-0 w-full mt-2 origin-top-right rounded-md shadow-lg"
|
class="absolute right-0 w-full mt-2 origin-top-right rounded-md shadow-lg">
|
||||||
>
|
|
||||||
<div
|
<div
|
||||||
class="px-2 py-2 bg-white rounded-md shadow dark-mode:bg-gray-800"
|
class="px-2 py-2 bg-white rounded-md shadow dark-mode:bg-gray-800">
|
||||||
>
|
|
||||||
<a
|
<a
|
||||||
class="block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
|
class="block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
|
||||||
href="#">Link #1</a
|
href="#">Link #1</a>
|
||||||
>
|
|
||||||
<a
|
<a
|
||||||
class="block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
|
class="block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
|
||||||
href="#">Link #2</a
|
href="#">Link #2</a>
|
||||||
>
|
|
||||||
<a
|
<a
|
||||||
class="block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
|
class="block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
|
||||||
href="#">Link #3</a
|
href="#">Link #3</a>
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,8 +1,9 @@
|
|||||||
<script>
|
<script>
|
||||||
import { _ } from "svelte-i18n";
|
import { _ } from "svelte-i18n";
|
||||||
import { clickOutside } from "../base/outsideclick";
|
import { clickOutside } from "../base/outsideclick";
|
||||||
|
|
||||||
|
import Toastify from "toastify-js";
|
||||||
import { UserGroupService } from "@odit/lfk-client-js";
|
import { UserGroupService } from "@odit/lfk-client-js";
|
||||||
import toast from "svelte-french-toast";
|
|
||||||
export let modal_open;
|
export let modal_open;
|
||||||
export let current_groups;
|
export let current_groups;
|
||||||
let description_input_value;
|
let description_input_value;
|
||||||
@ -31,7 +32,10 @@
|
|||||||
function submit() {
|
function submit() {
|
||||||
if (processed_last_submit === true) {
|
if (processed_last_submit === true) {
|
||||||
processed_last_submit = false;
|
processed_last_submit = false;
|
||||||
toast.loading($_("group-is-being-added"));
|
const toast = Toastify({
|
||||||
|
text: $_('group-is-being-added'),
|
||||||
|
duration: -1,
|
||||||
|
}).showToast();
|
||||||
let postdata = {
|
let postdata = {
|
||||||
name: name_input_value,
|
name: name_input_value,
|
||||||
description: description_input_value,
|
description: description_input_value,
|
||||||
@ -42,8 +46,11 @@
|
|||||||
description_input_value = "";
|
description_input_value = "";
|
||||||
modal_open = false;
|
modal_open = false;
|
||||||
//
|
//
|
||||||
toast.dismiss();
|
Toastify({
|
||||||
toast.success($_("group-added"));
|
text: $_('group-added'),
|
||||||
|
duration: 500,
|
||||||
|
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||||
|
}).showToast();
|
||||||
current_groups.push(result);
|
current_groups.push(result);
|
||||||
current_groups = current_groups;
|
current_groups = current_groups;
|
||||||
})
|
})
|
||||||
@ -52,6 +59,8 @@
|
|||||||
})
|
})
|
||||||
.finally(() => {
|
.finally(() => {
|
||||||
processed_last_submit = true;
|
processed_last_submit = true;
|
||||||
|
//
|
||||||
|
toast.hideToast();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -60,100 +69,83 @@
|
|||||||
{#if modal_open}
|
{#if modal_open}
|
||||||
<div
|
<div
|
||||||
class="fixed z-10 inset-0 overflow-y-auto"
|
class="fixed z-10 inset-0 overflow-y-auto"
|
||||||
|
|
||||||
use:clickOutside
|
use:clickOutside
|
||||||
on:click_outside={() => {
|
on:click_outside={() => {
|
||||||
modal_open = false;
|
modal_open = false;
|
||||||
}}
|
}}>
|
||||||
>
|
|
||||||
<div
|
<div
|
||||||
class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
|
class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
|
||||||
>
|
|
||||||
<div class="fixed inset-0 transition-opacity" aria-hidden="true">
|
<div class="fixed inset-0 transition-opacity" aria-hidden="true">
|
||||||
<div
|
<div
|
||||||
class="absolute inset-0 bg-gray-500 opacity-75"
|
class="absolute inset-0 bg-gray-500 opacity-75"
|
||||||
data-id="modal_backdrop"
|
data-id="modal_backdrop" />
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<span
|
<span
|
||||||
class="hidden sm:inline-block sm:align-middle sm:h-screen"
|
class="hidden sm:inline-block sm:align-middle sm:h-screen"
|
||||||
aria-hidden="true">​</span
|
aria-hidden="true">​</span>
|
||||||
>
|
|
||||||
<div
|
<div
|
||||||
class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
|
class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
|
||||||
role="dialog"
|
role="dialog"
|
||||||
aria-modal="true"
|
aria-modal="true"
|
||||||
aria-labelledby="modal-headline"
|
aria-labelledby="modal-headline">
|
||||||
>
|
|
||||||
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
||||||
<div class="sm:flex sm:items-start">
|
<div class="sm:flex sm:items-start">
|
||||||
<div
|
<div
|
||||||
class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
|
class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
|
||||||
>
|
|
||||||
<svg
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 640 512"
|
viewBox="0 0 640 512"
|
||||||
class="h-6 w-6 text-blue-600"
|
class="h-6 w-6 text-blue-600"
|
||||||
fill="currentColor"
|
fill="currentColor"
|
||||||
width="24"
|
width="24"
|
||||||
height="24"
|
height="24"><path fill="none" d="M0 0h24v24H0z" />
|
||||||
><path fill="none" d="M0 0h24v24H0z" />
|
|
||||||
<path
|
<path
|
||||||
d="M610.5 341.3c2.6-14.1 2.6-28.5 0-42.6l25.8-14.9c3-1.7 4.3-5.2 3.3-8.5-6.7-21.6-18.2-41.2-33.2-57.4-2.3-2.5-6-3.1-9-1.4l-25.8 14.9c-10.9-9.3-23.4-16.5-36.9-21.3v-29.8c0-3.4-2.4-6.4-5.7-7.1-22.3-5-45-4.8-66.2 0-3.3.7-5.7 3.7-5.7 7.1v29.8c-13.5 4.8-26 12-36.9 21.3l-25.8-14.9c-2.9-1.7-6.7-1.1-9 1.4-15 16.2-26.5 35.8-33.2 57.4-1 3.3.4 6.8 3.3 8.5l25.8 14.9c-2.6 14.1-2.6 28.5 0 42.6l-25.8 14.9c-3 1.7-4.3 5.2-3.3 8.5 6.7 21.6 18.2 41.1 33.2 57.4 2.3 2.5 6 3.1 9 1.4l25.8-14.9c10.9 9.3 23.4 16.5 36.9 21.3v29.8c0 3.4 2.4 6.4 5.7 7.1 22.3 5 45 4.8 66.2 0 3.3-.7 5.7-3.7 5.7-7.1v-29.8c13.5-4.8 26-12 36.9-21.3l25.8 14.9c2.9 1.7 6.7 1.1 9-1.4 15-16.2 26.5-35.8 33.2-57.4 1-3.3-.4-6.8-3.3-8.5l-25.8-14.9zM496 368.5c-26.8 0-48.5-21.8-48.5-48.5s21.8-48.5 48.5-48.5 48.5 21.8 48.5 48.5-21.7 48.5-48.5 48.5zM96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm224 32c1.9 0 3.7-.5 5.6-.6 8.3-21.7 20.5-42.1 36.3-59.2 7.4-8 17.9-12.6 28.9-12.6 6.9 0 13.7 1.8 19.6 5.3l7.9 4.6c.8-.5 1.6-.9 2.4-1.4 7-14.6 11.2-30.8 11.2-48 0-61.9-50.1-112-112-112S208 82.1 208 144c0 61.9 50.1 112 112 112zm105.2 194.5c-2.3-1.2-4.6-2.6-6.8-3.9-8.2 4.8-15.3 9.8-27.5 9.8-10.9 0-21.4-4.6-28.9-12.6-18.3-19.8-32.3-43.9-40.2-69.6-10.7-34.5 24.9-49.7 25.8-50.3-.1-2.6-.1-5.2 0-7.8l-7.9-4.6c-3.8-2.2-7-5-9.8-8.1-3.3.2-6.5.6-9.8.6-24.6 0-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h255.4c-3.7-6-6.2-12.8-6.2-20.3v-9.2zM173.1 274.6C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z"
|
d="M610.5 341.3c2.6-14.1 2.6-28.5 0-42.6l25.8-14.9c3-1.7 4.3-5.2 3.3-8.5-6.7-21.6-18.2-41.2-33.2-57.4-2.3-2.5-6-3.1-9-1.4l-25.8 14.9c-10.9-9.3-23.4-16.5-36.9-21.3v-29.8c0-3.4-2.4-6.4-5.7-7.1-22.3-5-45-4.8-66.2 0-3.3.7-5.7 3.7-5.7 7.1v29.8c-13.5 4.8-26 12-36.9 21.3l-25.8-14.9c-2.9-1.7-6.7-1.1-9 1.4-15 16.2-26.5 35.8-33.2 57.4-1 3.3.4 6.8 3.3 8.5l25.8 14.9c-2.6 14.1-2.6 28.5 0 42.6l-25.8 14.9c-3 1.7-4.3 5.2-3.3 8.5 6.7 21.6 18.2 41.1 33.2 57.4 2.3 2.5 6 3.1 9 1.4l25.8-14.9c10.9 9.3 23.4 16.5 36.9 21.3v29.8c0 3.4 2.4 6.4 5.7 7.1 22.3 5 45 4.8 66.2 0 3.3-.7 5.7-3.7 5.7-7.1v-29.8c13.5-4.8 26-12 36.9-21.3l25.8 14.9c2.9 1.7 6.7 1.1 9-1.4 15-16.2 26.5-35.8 33.2-57.4 1-3.3-.4-6.8-3.3-8.5l-25.8-14.9zM496 368.5c-26.8 0-48.5-21.8-48.5-48.5s21.8-48.5 48.5-48.5 48.5 21.8 48.5 48.5-21.7 48.5-48.5 48.5zM96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm224 32c1.9 0 3.7-.5 5.6-.6 8.3-21.7 20.5-42.1 36.3-59.2 7.4-8 17.9-12.6 28.9-12.6 6.9 0 13.7 1.8 19.6 5.3l7.9 4.6c.8-.5 1.6-.9 2.4-1.4 7-14.6 11.2-30.8 11.2-48 0-61.9-50.1-112-112-112S208 82.1 208 144c0 61.9 50.1 112 112 112zm105.2 194.5c-2.3-1.2-4.6-2.6-6.8-3.9-8.2 4.8-15.3 9.8-27.5 9.8-10.9 0-21.4-4.6-28.9-12.6-18.3-19.8-32.3-43.9-40.2-69.6-10.7-34.5 24.9-49.7 25.8-50.3-.1-2.6-.1-5.2 0-7.8l-7.9-4.6c-3.8-2.2-7-5-9.8-8.1-3.3.2-6.5.6-9.8.6-24.6 0-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h255.4c-3.7-6-6.2-12.8-6.2-20.3v-9.2zM173.1 274.6C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z" /></svg>
|
||||||
/></svg
|
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
|
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
|
||||||
<h3 class="text-lg leading-6 font-medium text-gray-900">
|
<h3 class="text-lg leading-6 font-medium text-gray-900">
|
||||||
{$_("create-a-new-user-group")}
|
{$_('create-a-new-user-group')}
|
||||||
</h3>
|
</h3>
|
||||||
<div class="mt-2 mb-6">
|
<div class="mt-2 mb-6">
|
||||||
<p class="text-sm text-gray-500">
|
<p class="text-sm text-gray-500">
|
||||||
{$_(
|
{$_('please-provide-the-required-information-for-creating-a-new-user-group')}
|
||||||
"please-provide-the-required-information-for-creating-a-new-user-group"
|
|
||||||
)}
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="grid grid-cols-6 gap-6">
|
<div class="grid grid-cols-6 gap-6">
|
||||||
<div class="col-span-6">
|
<div class="col-span-6">
|
||||||
<label
|
<label
|
||||||
for="firstname"
|
for="firstname"
|
||||||
class="block text-sm font-medium text-gray-700"
|
class="block text-sm font-medium text-gray-700">{$_('name')}</label>
|
||||||
>{$_("name")}</label
|
|
||||||
>
|
|
||||||
<input
|
<input
|
||||||
use:focus
|
use:focus
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
placeholder={$_("name")}
|
placeholder="{$_('name')}"
|
||||||
class:border-red-500={!isNameValid}
|
class:border-red-500={!isNameValid}
|
||||||
class:focus:border-red-500={!isNameValid}
|
class:focus:border-red-500={!isNameValid}
|
||||||
class:focus:ring-red-500={!isNameValid}
|
class:focus:ring-red-500={!isNameValid}
|
||||||
bind:value={name_input_value}
|
bind:value={name_input_value}
|
||||||
type="text"
|
type="text"
|
||||||
name="firstname"
|
name="firstname"
|
||||||
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
|
||||||
/>
|
|
||||||
{#if !isNameValid}
|
{#if !isNameValid}
|
||||||
<span
|
<span
|
||||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
|
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||||
>
|
{$_('name-is-required')}
|
||||||
{$_("name-is-required")}
|
|
||||||
</span>
|
</span>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
<div class="col-span-6">
|
<div class="col-span-6">
|
||||||
<label
|
<label
|
||||||
for="trackname"
|
for="trackname"
|
||||||
class="block text-sm font-medium text-gray-700"
|
class="block text-sm font-medium text-gray-700">{$_('description-optional')}</label>
|
||||||
>{$_("description-optional")}</label
|
|
||||||
>
|
|
||||||
<input
|
<input
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
placeholder={$_("something-about-the-group")}
|
placeholder="{$_('something-about-the-group')}"
|
||||||
bind:value={description_input_value}
|
bind:value={description_input_value}
|
||||||
type="text"
|
type="text"
|
||||||
name="trackname"
|
name="trackname"
|
||||||
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -165,18 +157,16 @@
|
|||||||
class:opacity-50={!createbtnenabled}
|
class:opacity-50={!createbtnenabled}
|
||||||
on:click={submit}
|
on:click={submit}
|
||||||
type="button"
|
type="button"
|
||||||
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
|
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
|
||||||
>
|
{$_('create')}
|
||||||
{$_("create")}
|
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
on:click={() => {
|
on:click={() => {
|
||||||
modal_open = false;
|
modal_open = false;
|
||||||
}}
|
}}
|
||||||
type="button"
|
type="button"
|
||||||
class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
|
class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
|
||||||
>
|
{$_('cancel')}
|
||||||
{$_("cancel")}
|
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,8 +1,10 @@
|
|||||||
<script>
|
<script>
|
||||||
import { _ } from "svelte-i18n";
|
import { _ } from "svelte-i18n";
|
||||||
import store from "../../store";
|
import store from "../../store";
|
||||||
import { UserGroupService } from "@odit/lfk-client-js";
|
import {
|
||||||
|
UserGroupService
|
||||||
|
} from "@odit/lfk-client-js";
|
||||||
|
import Toastify from "toastify-js";
|
||||||
import PromiseError from "../base/PromiseError.svelte";
|
import PromiseError from "../base/PromiseError.svelte";
|
||||||
let data_loaded = false;
|
let data_loaded = false;
|
||||||
export let params;
|
export let params;
|
||||||
@ -29,11 +31,10 @@
|
|||||||
$: search_permission = "";
|
$: search_permission = "";
|
||||||
$: original_data = {};
|
$: original_data = {};
|
||||||
$: editable = {};
|
$: editable = {};
|
||||||
$: changes_performed = !(
|
$: changes_performed = !(JSON.stringify(original_data) == JSON.stringify(editable));
|
||||||
JSON.stringify(original_data) == JSON.stringify(editable)
|
|
||||||
);
|
|
||||||
$: isGroupnameValid = editable.name !== "";
|
$: isGroupnameValid = editable.name !== "";
|
||||||
$: save_enabled = changes_performed && isGroupnameValid;
|
$: save_enabled =
|
||||||
|
changes_performed && isGroupnameValid
|
||||||
promise.then((data) => {
|
promise.then((data) => {
|
||||||
let current_target = "";
|
let current_target = "";
|
||||||
let colorindex = -1;
|
let colorindex = -1;
|
||||||
@ -58,13 +59,20 @@
|
|||||||
});
|
});
|
||||||
function submit() {
|
function submit() {
|
||||||
if (data_loaded === true && save_enabled) {
|
if (data_loaded === true && save_enabled) {
|
||||||
toast($_("updating-group"));
|
Toastify({
|
||||||
|
text: $_('updateing-group'),
|
||||||
|
duration: 2500,
|
||||||
|
}).showToast();
|
||||||
UserGroupService.userGroupControllerPut(original_data.id, editable)
|
UserGroupService.userGroupControllerPut(original_data.id, editable)
|
||||||
.then((resp) => {
|
.then((resp) => {
|
||||||
Object.assign(original_data, editable);
|
Object.assign(original_data, editable);
|
||||||
original_data = editable;
|
original_data = editable;
|
||||||
Object.assign(original_data, editable);
|
Object.assign(original_data, editable);
|
||||||
toast.success($_("group-updated"));
|
Toastify({
|
||||||
|
text: $_('group-updated'),
|
||||||
|
duration: 2500,
|
||||||
|
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||||
|
}).showToast();
|
||||||
})
|
})
|
||||||
.catch((err) => {});
|
.catch((err) => {});
|
||||||
} else {
|
} else {
|
||||||
@ -80,7 +88,7 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#await promise}
|
{#await promise}
|
||||||
{$_("loading-group-detail")}
|
{$_('loading-group-detail')}
|
||||||
{:then}
|
{:then}
|
||||||
<section class="container p-5 select-none">
|
<section class="container p-5 select-none">
|
||||||
<div class="flex flex-row mb-4">
|
<div class="flex flex-row mb-4">
|
||||||
@ -88,21 +96,10 @@
|
|||||||
<nav class="w-full flex">
|
<nav class="w-full flex">
|
||||||
<ol class="list-none flex flex-row items-center justify-start">
|
<ol class="list-none flex flex-row items-center justify-start">
|
||||||
<li class="flex items-center">
|
<li class="flex items-center">
|
||||||
<svg
|
<svg class="flex-shrink-0 w-5 h-5 mr-2" fill="currentColor" width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M610.5 341.3c2.6-14.1 2.6-28.5 0-42.6l25.8-14.9c3-1.7 4.3-5.2 3.3-8.5-6.7-21.6-18.2-41.2-33.2-57.4-2.3-2.5-6-3.1-9-1.4l-25.8 14.9c-10.9-9.3-23.4-16.5-36.9-21.3v-29.8c0-3.4-2.4-6.4-5.7-7.1-22.3-5-45-4.8-66.2 0-3.3.7-5.7 3.7-5.7 7.1v29.8c-13.5 4.8-26 12-36.9 21.3l-25.8-14.9c-2.9-1.7-6.7-1.1-9 1.4-15 16.2-26.5 35.8-33.2 57.4-1 3.3.4 6.8 3.3 8.5l25.8 14.9c-2.6 14.1-2.6 28.5 0 42.6l-25.8 14.9c-3 1.7-4.3 5.2-3.3 8.5 6.7 21.6 18.2 41.1 33.2 57.4 2.3 2.5 6 3.1 9 1.4l25.8-14.9c10.9 9.3 23.4 16.5 36.9 21.3v29.8c0 3.4 2.4 6.4 5.7 7.1 22.3 5 45 4.8 66.2 0 3.3-.7 5.7-3.7 5.7-7.1v-29.8c13.5-4.8 26-12 36.9-21.3l25.8 14.9c2.9 1.7 6.7 1.1 9-1.4 15-16.2 26.5-35.8 33.2-57.4 1-3.3-.4-6.8-3.3-8.5l-25.8-14.9zM496 368.5c-26.8 0-48.5-21.8-48.5-48.5s21.8-48.5 48.5-48.5 48.5 21.8 48.5 48.5-21.7 48.5-48.5 48.5zM96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm224 32c1.9 0 3.7-.5 5.6-.6 8.3-21.7 20.5-42.1 36.3-59.2 7.4-8 17.9-12.6 28.9-12.6 6.9 0 13.7 1.8 19.6 5.3l7.9 4.6c.8-.5 1.6-.9 2.4-1.4 7-14.6 11.2-30.8 11.2-48 0-61.9-50.1-112-112-112S208 82.1 208 144c0 61.9 50.1 112 112 112zm105.2 194.5c-2.3-1.2-4.6-2.6-6.8-3.9-8.2 4.8-15.3 9.8-27.5 9.8-10.9 0-21.4-4.6-28.9-12.6-18.3-19.8-32.3-43.9-40.2-69.6-10.7-34.5 24.9-49.7 25.8-50.3-.1-2.6-.1-5.2 0-7.8l-7.9-4.6c-3.8-2.2-7-5-9.8-8.1-3.3.2-6.5.6-9.8.6-24.6 0-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h255.4c-3.7-6-6.2-12.8-6.2-20.3v-9.2zM173.1 274.6C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z"></path></svg>
|
||||||
class="flex-shrink-0 w-5 h-5 mr-2"
|
|
||||||
fill="currentColor"
|
|
||||||
width="24"
|
|
||||||
height="24"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 640 512"
|
|
||||||
><path
|
|
||||||
fill="currentColor"
|
|
||||||
d="M610.5 341.3c2.6-14.1 2.6-28.5 0-42.6l25.8-14.9c3-1.7 4.3-5.2 3.3-8.5-6.7-21.6-18.2-41.2-33.2-57.4-2.3-2.5-6-3.1-9-1.4l-25.8 14.9c-10.9-9.3-23.4-16.5-36.9-21.3v-29.8c0-3.4-2.4-6.4-5.7-7.1-22.3-5-45-4.8-66.2 0-3.3.7-5.7 3.7-5.7 7.1v29.8c-13.5 4.8-26 12-36.9 21.3l-25.8-14.9c-2.9-1.7-6.7-1.1-9 1.4-15 16.2-26.5 35.8-33.2 57.4-1 3.3.4 6.8 3.3 8.5l25.8 14.9c-2.6 14.1-2.6 28.5 0 42.6l-25.8 14.9c-3 1.7-4.3 5.2-3.3 8.5 6.7 21.6 18.2 41.1 33.2 57.4 2.3 2.5 6 3.1 9 1.4l25.8-14.9c10.9 9.3 23.4 16.5 36.9 21.3v29.8c0 3.4 2.4 6.4 5.7 7.1 22.3 5 45 4.8 66.2 0 3.3-.7 5.7-3.7 5.7-7.1v-29.8c13.5-4.8 26-12 36.9-21.3l25.8 14.9c2.9 1.7 6.7 1.1 9-1.4 15-16.2 26.5-35.8 33.2-57.4 1-3.3-.4-6.8-3.3-8.5l-25.8-14.9zM496 368.5c-26.8 0-48.5-21.8-48.5-48.5s21.8-48.5 48.5-48.5 48.5 21.8 48.5 48.5-21.7 48.5-48.5 48.5zM96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm224 32c1.9 0 3.7-.5 5.6-.6 8.3-21.7 20.5-42.1 36.3-59.2 7.4-8 17.9-12.6 28.9-12.6 6.9 0 13.7 1.8 19.6 5.3l7.9 4.6c.8-.5 1.6-.9 2.4-1.4 7-14.6 11.2-30.8 11.2-48 0-61.9-50.1-112-112-112S208 82.1 208 144c0 61.9 50.1 112 112 112zm105.2 194.5c-2.3-1.2-4.6-2.6-6.8-3.9-8.2 4.8-15.3 9.8-27.5 9.8-10.9 0-21.4-4.6-28.9-12.6-18.3-19.8-32.3-43.9-40.2-69.6-10.7-34.5 24.9-49.7 25.8-50.3-.1-2.6-.1-5.2 0-7.8l-7.9-4.6c-3.8-2.2-7-5-9.8-8.1-3.3.2-6.5.6-9.8.6-24.6 0-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h255.4c-3.7-6-6.2-12.8-6.2-20.3v-9.2zM173.1 274.6C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z"
|
|
||||||
/></svg
|
|
||||||
>
|
|
||||||
</li>
|
</li>
|
||||||
<li class="flex items-center">
|
<li class="flex items-center">
|
||||||
<a class="mr-2" href="../">{$_("groups")}</a><svg
|
<a class="mr-2" href="../">{$_('groups')}</a><svg
|
||||||
stroke="currentColor"
|
stroke="currentColor"
|
||||||
fill="none"
|
fill="none"
|
||||||
stroke-width="2"
|
stroke-width="2"
|
||||||
@ -112,10 +109,12 @@
|
|||||||
class="h-3 w-3 mr-2 stroke-current"
|
class="h-3 w-3 mr-2 stroke-current"
|
||||||
height="1em"
|
height="1em"
|
||||||
width="1em"
|
width="1em"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"><line
|
||||||
><line x1="5" y1="12" x2="19" y2="12" />
|
x1="5"
|
||||||
<polyline points="12 5 19 12 12 19" /></svg
|
y1="12"
|
||||||
>
|
x2="19"
|
||||||
|
y2="12" />
|
||||||
|
<polyline points="12 5 19 12 12 19" /></svg>
|
||||||
</li>
|
</li>
|
||||||
<li class="flex items-center">
|
<li class="flex items-center">
|
||||||
<span class="mr-2">{editable.name}</span>
|
<span class="mr-2">{editable.name}</span>
|
||||||
@ -127,20 +126,16 @@
|
|||||||
<div class="mb-8 text-3xl font-extrabold leading-tight">
|
<div class="mb-8 text-3xl font-extrabold leading-tight">
|
||||||
{original_data.name}
|
{original_data.name}
|
||||||
<span data-id="group_actions_${editable.id}">
|
<span data-id="group_actions_${editable.id}">
|
||||||
{#if store.state.jwtinfo.userdetails.permissions.includes("USERGROUP:DELETE")}
|
{#if store.state.jwtinfo.userdetails.permissions.includes('USERGROUP:DELETE')}
|
||||||
{#if delete_triggered}
|
{#if delete_triggered}
|
||||||
<button
|
<button
|
||||||
on:click={deleteGroup}
|
on:click={deleteGroup}
|
||||||
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
|
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('confirm-deletion')}</button>
|
||||||
>{$_("confirm-deletion")}</button
|
|
||||||
>
|
|
||||||
<button
|
<button
|
||||||
on:click={() => {
|
on:click={() => {
|
||||||
delete_triggered = !delete_triggered;
|
delete_triggered = !delete_triggered;
|
||||||
}}
|
}}
|
||||||
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:text-sm"
|
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:text-sm">{$_('cancel')}</button>
|
||||||
>{$_("cancel")}</button
|
|
||||||
>
|
|
||||||
{/if}
|
{/if}
|
||||||
{#if !delete_triggered}
|
{#if !delete_triggered}
|
||||||
<button
|
<button
|
||||||
@ -148,9 +143,7 @@
|
|||||||
delete_triggered = true;
|
delete_triggered = true;
|
||||||
}}
|
}}
|
||||||
type="button"
|
type="button"
|
||||||
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
|
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('delete-group')}</button>
|
||||||
>{$_("delete-group")}</button
|
|
||||||
>
|
|
||||||
{/if}
|
{/if}
|
||||||
{/if}
|
{/if}
|
||||||
{#if !delete_triggered}
|
{#if !delete_triggered}
|
||||||
@ -159,74 +152,64 @@
|
|||||||
class:opacity-50={!save_enabled}
|
class:opacity-50={!save_enabled}
|
||||||
type="button"
|
type="button"
|
||||||
on:click={submit}
|
on:click={submit}
|
||||||
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
|
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('save-changes')}</button>
|
||||||
>{$_("save-changes")}</button
|
|
||||||
>
|
|
||||||
{/if}
|
{/if}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<!-- -->
|
<!-- -->
|
||||||
<div class="text-sm w-full">
|
<div class="text-sm w-full">
|
||||||
<label for="title" class="font-medium text-gray-700">{$_("name")}</label>
|
<label
|
||||||
|
for="title"
|
||||||
|
class="font-medium text-gray-700">{$_('name')}</label>
|
||||||
<input
|
<input
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
placeholder={$_("name")}
|
placeholder={$_('name')}
|
||||||
type="text"
|
type="text"
|
||||||
bind:value={editable.name}
|
bind:value={editable.name}
|
||||||
class:border-red-500={!isGroupnameValid}
|
class:border-red-500={!isGroupnameValid}
|
||||||
class:focus:border-red-500={!isGroupnameValid}
|
class:focus:border-red-500={!isGroupnameValid}
|
||||||
class:focus:ring-red-500={!isGroupnameValid}
|
class:focus:ring-red-500={!isGroupnameValid}
|
||||||
name="title"
|
name="title"
|
||||||
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
|
||||||
/>
|
|
||||||
{#if !isGroupnameValid}
|
{#if !isGroupnameValid}
|
||||||
<span
|
<span
|
||||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
|
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||||
>
|
{$_('group-name-is-required')}
|
||||||
{$_("group-name-is-required")}
|
|
||||||
</span>
|
</span>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
<div class="text-sm w-full">
|
<div class="text-sm w-full">
|
||||||
<label for="firstname" class="font-medium text-gray-700"
|
<label
|
||||||
>{$_("description")}</label
|
for="firstname"
|
||||||
>
|
class="font-medium text-gray-700">{$_('description')}</label>
|
||||||
<input
|
<input
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
placeholder={$_("description")}
|
placeholder={$_('description')}
|
||||||
type="text"
|
type="text"
|
||||||
bind:value={editable.description}
|
bind:value={editable.description}
|
||||||
name="firstname"
|
name="firstname"
|
||||||
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="text-sm w-full mt-8">
|
<div class="text-sm w-full mt-8">
|
||||||
<p class="font-medium mb-4">
|
<p class="font-medium mb-4">
|
||||||
{$_("permissions")}
|
{$_('permissions')}
|
||||||
<a
|
<a
|
||||||
class="px-4 py-2 bg-gray-500 rounded-md text-white"
|
class="px-4 py-2 bg-gray-500 rounded-md text-white"
|
||||||
href="/groups/{params.groupid}/permissions/"
|
href="/groups/{params.groupid}/permissions/">{$_('edit-permissions')}</a>
|
||||||
>{$_("edit-permissions")}</a
|
|
||||||
>
|
|
||||||
</p>
|
</p>
|
||||||
<div class="w-full sm:my-px sm:px-px sm:w-1/2">
|
<div class="w-full sm:my-px sm:px-px sm:w-1/2">
|
||||||
<input
|
<input
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
placeholder={$_("search-for-permission")}
|
placeholder="{$_('search-for-permission')}"
|
||||||
type="text"
|
type="text"
|
||||||
bind:value={search_permission}
|
bind:value={search_permission}
|
||||||
class="mt-4 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
class="mt-4 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2" />
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
{#each original_data.permissions as p}
|
{#each original_data.permissions as p}
|
||||||
{#if p.toLowerCase().includes(search_permission.toLowerCase())}
|
{#if p.toLowerCase().includes(search_permission.toLowerCase())}
|
||||||
<span
|
<span
|
||||||
style="background:{matched_colors[
|
style="background:{matched_colors[p.split(':')[0]][0]};color:{matched_colors[p.split(':')[0]][1]};"
|
||||||
p.split(':')[0]
|
class="mt-1 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-indigo-100 rounded">{p}</span>
|
||||||
][0]};color:{matched_colors[p.split(':')[0]][1]};"
|
|
||||||
class="mt-1 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-indigo-100 rounded"
|
|
||||||
>{p}</span
|
|
||||||
>
|
|
||||||
<!-- -->
|
<!-- -->
|
||||||
{/if}
|
{/if}
|
||||||
{/each}
|
{/each}
|
||||||
|
|||||||
@ -3,9 +3,9 @@
|
|||||||
import {
|
import {
|
||||||
PermissionService,
|
PermissionService,
|
||||||
CreatePermission,
|
CreatePermission,
|
||||||
UserGroupService,
|
UserGroupService,
|
||||||
} from "@odit/lfk-client-js";
|
} from "@odit/lfk-client-js";
|
||||||
|
import Toastify from "toastify-js";
|
||||||
import PromiseError from "../base/PromiseError.svelte";
|
import PromiseError from "../base/PromiseError.svelte";
|
||||||
export let params;
|
export let params;
|
||||||
let [
|
let [
|
||||||
@ -20,14 +20,15 @@
|
|||||||
$: save_enabled =
|
$: save_enabled =
|
||||||
JSON.stringify(grantedPermissions) ===
|
JSON.stringify(grantedPermissions) ===
|
||||||
JSON.stringify(grantedPermissions_initial);
|
JSON.stringify(grantedPermissions_initial);
|
||||||
const group_promise = UserGroupService.userGroupControllerGetOne(
|
const group_promise = UserGroupService.userGroupControllerGetOne(params.groupid);
|
||||||
params.groupid
|
|
||||||
);
|
|
||||||
group_promise.then((data) => {
|
group_promise.then((data) => {
|
||||||
original_data = Object.assign(original_data, data);
|
original_data = Object.assign(original_data, data);
|
||||||
});
|
});
|
||||||
function submit() {
|
function submit() {
|
||||||
toast.loading($_("updating-permissions"));
|
Toastify({
|
||||||
|
text: $_('updating-permissions'),
|
||||||
|
duration: 2500,
|
||||||
|
}).showToast();
|
||||||
to_delete.forEach((d) => {
|
to_delete.forEach((d) => {
|
||||||
promises = promises.concat([
|
promises = promises.concat([
|
||||||
PermissionService.permissionControllerRemove(d, true),
|
PermissionService.permissionControllerRemove(d, true),
|
||||||
@ -49,7 +50,11 @@
|
|||||||
);
|
);
|
||||||
});
|
});
|
||||||
grantedPermissions_initial = grantedPermissions;
|
grantedPermissions_initial = grantedPermissions;
|
||||||
toast($_("permissions-updated"));
|
Toastify({
|
||||||
|
text: $_("permissions-updated"),
|
||||||
|
duration: 2500,
|
||||||
|
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||||
|
}).showToast();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
Object.values(CreatePermission.target).forEach((t) => {
|
Object.values(CreatePermission.target).forEach((t) => {
|
||||||
@ -57,15 +62,13 @@
|
|||||||
allpermissions = allpermissions.concat([{ target: t, action: a }]);
|
allpermissions = allpermissions.concat([{ target: t, action: a }]);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
UserGroupService.userGroupControllerGetPermissions(params.groupid).then(
|
UserGroupService.userGroupControllerGetPermissions(params.groupid).then((val) => {
|
||||||
(val) => {
|
val.directlyGranted.forEach((p) => {
|
||||||
val.directlyGranted.forEach((p) => {
|
delete p.responseType;
|
||||||
delete p.responseType;
|
grantedPermissions = grantedPermissions.concat([p]);
|
||||||
grantedPermissions = grantedPermissions.concat([p]);
|
});
|
||||||
});
|
grantedPermissions_initial = grantedPermissions;
|
||||||
grantedPermissions_initial = grantedPermissions;
|
});
|
||||||
}
|
|
||||||
);
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#await group_promise}
|
{#await group_promise}
|
||||||
@ -83,15 +86,12 @@
|
|||||||
width="24"
|
width="24"
|
||||||
height="24"
|
height="24"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 640 512"
|
viewBox="0 0 640 512"><path
|
||||||
><path
|
|
||||||
fill="currentColor"
|
fill="currentColor"
|
||||||
d="M610.5 341.3c2.6-14.1 2.6-28.5 0-42.6l25.8-14.9c3-1.7 4.3-5.2 3.3-8.5-6.7-21.6-18.2-41.2-33.2-57.4-2.3-2.5-6-3.1-9-1.4l-25.8 14.9c-10.9-9.3-23.4-16.5-36.9-21.3v-29.8c0-3.4-2.4-6.4-5.7-7.1-22.3-5-45-4.8-66.2 0-3.3.7-5.7 3.7-5.7 7.1v29.8c-13.5 4.8-26 12-36.9 21.3l-25.8-14.9c-2.9-1.7-6.7-1.1-9 1.4-15 16.2-26.5 35.8-33.2 57.4-1 3.3.4 6.8 3.3 8.5l25.8 14.9c-2.6 14.1-2.6 28.5 0 42.6l-25.8 14.9c-3 1.7-4.3 5.2-3.3 8.5 6.7 21.6 18.2 41.1 33.2 57.4 2.3 2.5 6 3.1 9 1.4l25.8-14.9c10.9 9.3 23.4 16.5 36.9 21.3v29.8c0 3.4 2.4 6.4 5.7 7.1 22.3 5 45 4.8 66.2 0 3.3-.7 5.7-3.7 5.7-7.1v-29.8c13.5-4.8 26-12 36.9-21.3l25.8 14.9c2.9 1.7 6.7 1.1 9-1.4 15-16.2 26.5-35.8 33.2-57.4 1-3.3-.4-6.8-3.3-8.5l-25.8-14.9zM496 368.5c-26.8 0-48.5-21.8-48.5-48.5s21.8-48.5 48.5-48.5 48.5 21.8 48.5 48.5-21.7 48.5-48.5 48.5zM96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm224 32c1.9 0 3.7-.5 5.6-.6 8.3-21.7 20.5-42.1 36.3-59.2 7.4-8 17.9-12.6 28.9-12.6 6.9 0 13.7 1.8 19.6 5.3l7.9 4.6c.8-.5 1.6-.9 2.4-1.4 7-14.6 11.2-30.8 11.2-48 0-61.9-50.1-112-112-112S208 82.1 208 144c0 61.9 50.1 112 112 112zm105.2 194.5c-2.3-1.2-4.6-2.6-6.8-3.9-8.2 4.8-15.3 9.8-27.5 9.8-10.9 0-21.4-4.6-28.9-12.6-18.3-19.8-32.3-43.9-40.2-69.6-10.7-34.5 24.9-49.7 25.8-50.3-.1-2.6-.1-5.2 0-7.8l-7.9-4.6c-3.8-2.2-7-5-9.8-8.1-3.3.2-6.5.6-9.8.6-24.6 0-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h255.4c-3.7-6-6.2-12.8-6.2-20.3v-9.2zM173.1 274.6C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z"
|
d="M610.5 341.3c2.6-14.1 2.6-28.5 0-42.6l25.8-14.9c3-1.7 4.3-5.2 3.3-8.5-6.7-21.6-18.2-41.2-33.2-57.4-2.3-2.5-6-3.1-9-1.4l-25.8 14.9c-10.9-9.3-23.4-16.5-36.9-21.3v-29.8c0-3.4-2.4-6.4-5.7-7.1-22.3-5-45-4.8-66.2 0-3.3.7-5.7 3.7-5.7 7.1v29.8c-13.5 4.8-26 12-36.9 21.3l-25.8-14.9c-2.9-1.7-6.7-1.1-9 1.4-15 16.2-26.5 35.8-33.2 57.4-1 3.3.4 6.8 3.3 8.5l25.8 14.9c-2.6 14.1-2.6 28.5 0 42.6l-25.8 14.9c-3 1.7-4.3 5.2-3.3 8.5 6.7 21.6 18.2 41.1 33.2 57.4 2.3 2.5 6 3.1 9 1.4l25.8-14.9c10.9 9.3 23.4 16.5 36.9 21.3v29.8c0 3.4 2.4 6.4 5.7 7.1 22.3 5 45 4.8 66.2 0 3.3-.7 5.7-3.7 5.7-7.1v-29.8c13.5-4.8 26-12 36.9-21.3l25.8 14.9c2.9 1.7 6.7 1.1 9-1.4 15-16.2 26.5-35.8 33.2-57.4 1-3.3-.4-6.8-3.3-8.5l-25.8-14.9zM496 368.5c-26.8 0-48.5-21.8-48.5-48.5s21.8-48.5 48.5-48.5 48.5 21.8 48.5 48.5-21.7 48.5-48.5 48.5zM96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm224 32c1.9 0 3.7-.5 5.6-.6 8.3-21.7 20.5-42.1 36.3-59.2 7.4-8 17.9-12.6 28.9-12.6 6.9 0 13.7 1.8 19.6 5.3l7.9 4.6c.8-.5 1.6-.9 2.4-1.4 7-14.6 11.2-30.8 11.2-48 0-61.9-50.1-112-112-112S208 82.1 208 144c0 61.9 50.1 112 112 112zm105.2 194.5c-2.3-1.2-4.6-2.6-6.8-3.9-8.2 4.8-15.3 9.8-27.5 9.8-10.9 0-21.4-4.6-28.9-12.6-18.3-19.8-32.3-43.9-40.2-69.6-10.7-34.5 24.9-49.7 25.8-50.3-.1-2.6-.1-5.2 0-7.8l-7.9-4.6c-3.8-2.2-7-5-9.8-8.1-3.3.2-6.5.6-9.8.6-24.6 0-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h255.4c-3.7-6-6.2-12.8-6.2-20.3v-9.2zM173.1 274.6C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z" /></svg>
|
||||||
/></svg
|
|
||||||
>
|
|
||||||
</li>
|
</li>
|
||||||
<li class="flex items-center">
|
<li class="flex items-center">
|
||||||
<a class="mr-2" href="../../">{$_("user-groups")}</a><svg
|
<a class="mr-2" href="../../">{$_('user-groups')}</a><svg
|
||||||
stroke="currentColor"
|
stroke="currentColor"
|
||||||
fill="none"
|
fill="none"
|
||||||
stroke-width="2"
|
stroke-width="2"
|
||||||
@ -101,10 +101,12 @@
|
|||||||
class="h-3 w-3 mr-2 stroke-current"
|
class="h-3 w-3 mr-2 stroke-current"
|
||||||
height="1em"
|
height="1em"
|
||||||
width="1em"
|
width="1em"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"><line
|
||||||
><line x1="5" y1="12" x2="19" y2="12" />
|
x1="5"
|
||||||
<polyline points="12 5 19 12 12 19" /></svg
|
y1="12"
|
||||||
>
|
x2="19"
|
||||||
|
y2="12" />
|
||||||
|
<polyline points="12 5 19 12 12 19" /></svg>
|
||||||
</li>
|
</li>
|
||||||
<li class="flex items-center">
|
<li class="flex items-center">
|
||||||
<span class="mr-2"><a href="../">{original_data.name}</a></span>
|
<span class="mr-2"><a href="../">{original_data.name}</a></span>
|
||||||
@ -120,20 +122,22 @@
|
|||||||
class="h-3 w-3 mr-2 stroke-current"
|
class="h-3 w-3 mr-2 stroke-current"
|
||||||
height="1em"
|
height="1em"
|
||||||
width="1em"
|
width="1em"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"><line
|
||||||
><line x1="5" y1="12" x2="19" y2="12" />
|
x1="5"
|
||||||
<polyline points="12 5 19 12 12 19" /></svg
|
y1="12"
|
||||||
>
|
x2="19"
|
||||||
|
y2="12" />
|
||||||
|
<polyline points="12 5 19 12 12 19" /></svg>
|
||||||
</li>
|
</li>
|
||||||
<li class="flex items-center">
|
<li class="flex items-center">
|
||||||
<span class="mr-2">{$_("permissions")}</span>
|
<span class="mr-2">{$_('permissions')}</span>
|
||||||
</li>
|
</li>
|
||||||
</ol>
|
</ol>
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mb-8 text-3xl font-extrabold">
|
<div class="mb-8 text-3xl font-extrabold">
|
||||||
{$_("permissions")}:
|
{$_('permissions')}:
|
||||||
{original_data.name}
|
{original_data.name}
|
||||||
<span>
|
<span>
|
||||||
{#if promises.length === 0}
|
{#if promises.length === 0}
|
||||||
@ -142,25 +146,21 @@
|
|||||||
class:opacity-50={save_enabled}
|
class:opacity-50={save_enabled}
|
||||||
type="button"
|
type="button"
|
||||||
on:click={submit}
|
on:click={submit}
|
||||||
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
|
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('save-changes')}</button>
|
||||||
>{$_("save-changes")}</button
|
|
||||||
>
|
|
||||||
{:else}
|
{:else}
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-yellow-600 text-base font-medium text-white hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500 sm:ml-3 sm:w-auto sm:text-sm"
|
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-yellow-600 text-base font-medium text-white hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('applying-changes')}</button>
|
||||||
>{$_("applying-changes")}</button
|
|
||||||
>
|
|
||||||
{/if}
|
{/if}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<!-- -->
|
<!-- -->
|
||||||
<div class="flex flex-wrap -mx-1 overflow-hidden">
|
<div class="flex flex-wrap -mx-1 overflow-hidden">
|
||||||
<div class="my-1 px-1 w-full overflow-hidden sm:w-1/2">
|
<div class="my-1 px-1 w-full overflow-hidden sm:w-1/2">
|
||||||
{$_("available-permissions")}
|
{$_('verfuegbare')}
|
||||||
</div>
|
</div>
|
||||||
<div class="my-1 px-1 w-full overflow-hidden sm:w-1/2">
|
<div class="my-1 px-1 w-full overflow-hidden sm:w-1/2">
|
||||||
{$_("granted")}
|
{$_('granted')}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- -->
|
<!-- -->
|
||||||
@ -168,14 +168,12 @@
|
|||||||
{#if allpermissions.length > 0}
|
{#if allpermissions.length > 0}
|
||||||
<div class="my-1 px-1 w-full overflow-hidden sm:w-1/2">
|
<div class="my-1 px-1 w-full overflow-hidden sm:w-1/2">
|
||||||
<div
|
<div
|
||||||
class="border-4 border-dashed rounded mb-4 p-5 text-lg text-center"
|
class="border-4 border-dashed rounded mb-4 p-5 text-lg text-center">
|
||||||
>
|
|
||||||
{#each allpermissions as p}
|
{#each allpermissions as p}
|
||||||
{#if !(grantedPermissions.filter((o) => p.target == o.target && p.action == o.action).length > 0)}
|
{#if !(grantedPermissions.filter((o)=>p.target == o.target && p.action == o.action).length > 0)}
|
||||||
<p
|
<p
|
||||||
class="block w-full mt-1 text-sm bg-gray-200 p-2 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple form-input"
|
class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 bg-gray-200 p-2 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input">
|
||||||
>
|
{p.target + ':' + p.action}
|
||||||
{p.target + ":" + p.action}
|
|
||||||
<button
|
<button
|
||||||
on:click={() => {
|
on:click={() => {
|
||||||
grantedPermissions = grantedPermissions.concat([p]);
|
grantedPermissions = grantedPermissions.concat([p]);
|
||||||
@ -192,9 +190,7 @@
|
|||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
type="button"
|
type="button"
|
||||||
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-green-200 text-base font-medium text-black hover:bg-green-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 sm:ml-3 sm:w-auto sm:text-sm"
|
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-green-200 text-base font-medium text-black hover:bg-green-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 sm:ml-3 sm:w-auto sm:text-sm">+</button>
|
||||||
>+</button
|
|
||||||
>
|
|
||||||
</p>
|
</p>
|
||||||
{/if}
|
{/if}
|
||||||
{/each}
|
{/each}
|
||||||
@ -202,39 +198,22 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="my-1 px-1 w-full overflow-hidden sm:w-1/2">
|
<div class="my-1 px-1 w-full overflow-hidden sm:w-1/2">
|
||||||
<div
|
<div
|
||||||
class="border-4 border-dashed rounded mb-4 p-5 text-lg text-center"
|
class="border-4 border-dashed rounded mb-4 p-5 text-lg text-center">
|
||||||
>
|
|
||||||
{#each grantedPermissions as p}
|
{#each grantedPermissions as p}
|
||||||
<p
|
<p
|
||||||
class="block w-full mt-1 text-sm bg-gray-200 p-2 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple form-input"
|
class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 bg-gray-200 p-2 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input">
|
||||||
>
|
{p.target + ':' + p.action}
|
||||||
{p.target + ":" + p.action}
|
|
||||||
<button
|
<button
|
||||||
on:click={() => {
|
on:click={() => {
|
||||||
grantedPermissions = grantedPermissions.filter(
|
grantedPermissions = grantedPermissions.filter((o) => o.target + ':' + o.action !== p.target + ':' + p.action);
|
||||||
(o) =>
|
if (to_add.some((o) => o.target + ':' + o.action === p.target + ':' + p.action)) {
|
||||||
o.target + ":" + o.action !== p.target + ":" + p.action
|
to_add = to_add.filter((o) => o.target + ':' + o.action !== p.target + ':' + p.action);
|
||||||
);
|
|
||||||
if (
|
|
||||||
to_add.some(
|
|
||||||
(o) =>
|
|
||||||
o.target + ":" + o.action ===
|
|
||||||
p.target + ":" + p.action
|
|
||||||
)
|
|
||||||
) {
|
|
||||||
to_add = to_add.filter(
|
|
||||||
(o) =>
|
|
||||||
o.target + ":" + o.action !==
|
|
||||||
p.target + ":" + p.action
|
|
||||||
);
|
|
||||||
} else {
|
} else {
|
||||||
to_delete = to_delete.concat([p.id]);
|
to_delete = to_delete.concat([p.id]);
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
type="button"
|
type="button"
|
||||||
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-300 text-base font-medium text-black hover:bg-red-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm"
|
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-300 text-base font-medium text-black hover:bg-red-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm">-</button>
|
||||||
>-</button
|
|
||||||
>
|
|
||||||
</p>
|
</p>
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -9,22 +9,21 @@
|
|||||||
|
|
||||||
<section class="container p-5">
|
<section class="container p-5">
|
||||||
<span class="mb-1 text-3xl font-extrabold leading-tight">
|
<span class="mb-1 text-3xl font-extrabold leading-tight">
|
||||||
{$_("user-groups")}
|
{$_('user-groups')}
|
||||||
{#if store.state.jwtinfo.userdetails.permissions.includes("USERGROUP:CREATE")}
|
{#if store.state.jwtinfo.userdetails.permissions.includes('USERGROUP:CREATE')}
|
||||||
<button
|
<button
|
||||||
on:click={() => {
|
on:click={() => {
|
||||||
modal_open = true;
|
modal_open = true;
|
||||||
}}
|
}}
|
||||||
type="button"
|
type="button"
|
||||||
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
|
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
|
||||||
>
|
{$_('add-user-group')}
|
||||||
{$_("add-user-group")}
|
|
||||||
</button>
|
</button>
|
||||||
{/if}
|
{/if}
|
||||||
</span>
|
</span>
|
||||||
<UserGroupsOverview bind:current_groups />
|
<UserGroupsOverview bind:current_groups />
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{#if store.state.jwtinfo.userdetails.permissions.includes("USERGROUP:CREATE")}
|
{#if store.state.jwtinfo.userdetails.permissions.includes('USERGROUP:CREATE')}
|
||||||
<AddGroupModal bind:current_groups bind:modal_open />
|
<AddGroupModal bind:current_groups bind:modal_open />
|
||||||
{/if}
|
{/if}
|
||||||
|
|||||||
@ -6,7 +6,7 @@
|
|||||||
<div class="text-center items-center justify-center">
|
<div class="text-center items-center justify-center">
|
||||||
<p class="mb-16 text-lg text-gray-500">
|
<p class="mb-16 text-lg text-gray-500">
|
||||||
<img class="w-full h-44" src={groups_empty} alt="" />
|
<img class="w-full h-44" src={groups_empty} alt="" />
|
||||||
<span class="font-bold">{$_("there-are-no-groups-yet")}.</span><br />
|
<span class="font-bold">{$_('there-are-no-groups-yet')}.</span><br />
|
||||||
<span>{$_("add-your-first-group")}</span>
|
<span>{$_('add-your-first-group')}</span>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@ -13,14 +13,13 @@
|
|||||||
);
|
);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if store.state.jwtinfo.userdetails.permissions.includes("USERGROUP:GET")}
|
{#if store.state.jwtinfo.userdetails.permissions.includes('USERGROUP:GET')}
|
||||||
{#await groups_promise}
|
{#await groups_promise}
|
||||||
<div
|
<div
|
||||||
class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
|
class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
|
||||||
role="alert"
|
role="alert">
|
||||||
>
|
<p class="font-bold">{$_('groups-are-being-loaded')}</p>
|
||||||
<p class="font-bold">{$_("groups-are-being-loaded")}</p>
|
<p class="text-sm">{$_('this-might-take-a-moment')}</p>
|
||||||
<p class="text-sm">{$_("this-might-take-a-moment")}</p>
|
|
||||||
</div>
|
</div>
|
||||||
{:then}
|
{:then}
|
||||||
{#if current_groups.length === 0}
|
{#if current_groups.length === 0}
|
||||||
@ -29,30 +28,26 @@
|
|||||||
<input
|
<input
|
||||||
type="search"
|
type="search"
|
||||||
bind:value={searchvalue}
|
bind:value={searchvalue}
|
||||||
placeholder={$_("datatable.search")}
|
placeholder={$_('datatable.search')}
|
||||||
aria-label={$_("datatable.search")}
|
aria-label={$_('datatable.search')}
|
||||||
class="mb-4"
|
class="mb-4" />
|
||||||
/>
|
|
||||||
<div
|
<div
|
||||||
class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll"
|
class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
|
||||||
>
|
|
||||||
<table class="divide-y divide-gray-200 w-full">
|
<table class="divide-y divide-gray-200 w-full">
|
||||||
<thead class="bg-gray-50">
|
<thead class="bg-gray-50">
|
||||||
<tr class="odd:bg-white even:bg-gray-100">
|
<tr>
|
||||||
<th
|
<th
|
||||||
scope="col"
|
scope="col"
|
||||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
>
|
{$_('name')}
|
||||||
{$_("name")}
|
|
||||||
</th>
|
</th>
|
||||||
<th
|
<th
|
||||||
scope="col"
|
scope="col"
|
||||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
>
|
{$_('description')}
|
||||||
{$_("description")}
|
|
||||||
</th>
|
</th>
|
||||||
<th scope="col" class="relative px-6 py-3">
|
<th scope="col" class="relative px-6 py-3">
|
||||||
<span class="sr-only">{$_("action")}</span>
|
<span class="sr-only">{$_('action')}</span>
|
||||||
</th>
|
</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
@ -62,10 +57,7 @@
|
|||||||
.toString()
|
.toString()
|
||||||
.toLowerCase()
|
.toLowerCase()
|
||||||
.includes(searchvalue)}
|
.includes(searchvalue)}
|
||||||
<tr
|
<tr data-rowid="user_{group.id}">
|
||||||
class="odd:bg-white even:bg-gray-100"
|
|
||||||
data-rowid="user_{group.id}"
|
|
||||||
>
|
|
||||||
<td class="px-6 py-4 whitespace-nowrap">
|
<td class="px-6 py-4 whitespace-nowrap">
|
||||||
<div class="flex items-center">
|
<div class="flex items-center">
|
||||||
<div class="ml-4">
|
<div class="ml-4">
|
||||||
@ -80,53 +72,39 @@
|
|||||||
</td>
|
</td>
|
||||||
{#if active_deletes[group.id] === true}
|
{#if active_deletes[group.id] === true}
|
||||||
<td
|
<td
|
||||||
class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
|
class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
||||||
>
|
|
||||||
<button
|
<button
|
||||||
on:click={() => {
|
on:click={() => {
|
||||||
active_deletes[group.id] = false;
|
active_deletes[group.id] = false;
|
||||||
}}
|
}}
|
||||||
tabindex="0"
|
tabindex="0"
|
||||||
class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer"
|
class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">{$_('cancel-delete')}</button>
|
||||||
>{$_("cancel-delete")}</button
|
|
||||||
>
|
|
||||||
<button
|
<button
|
||||||
on:click={() => {
|
on:click={() => {
|
||||||
UserGroupService.userGroupControllerRemove(
|
UserGroupService.userGroupControllerRemove(group.id, true)
|
||||||
group.id,
|
|
||||||
true
|
|
||||||
)
|
|
||||||
.then((resp) => {
|
.then((resp) => {
|
||||||
current_groups = current_groups.filter(
|
current_groups = current_groups.filter((obj) => obj.id !== group.id);
|
||||||
(obj) => obj.id !== group.id
|
|
||||||
);
|
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
// error deleting user
|
// error deleting user
|
||||||
});
|
});
|
||||||
}}
|
}}
|
||||||
tabindex="0"
|
tabindex="0"
|
||||||
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
|
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('confirm-delete')}</button>
|
||||||
>{$_("confirm-delete")}</button
|
|
||||||
>
|
|
||||||
</td>
|
</td>
|
||||||
{:else}
|
{:else}
|
||||||
<td
|
<td
|
||||||
class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
|
class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
||||||
>
|
|
||||||
<a
|
<a
|
||||||
href="./{group.id}"
|
href="./{group.id}"
|
||||||
class="text-indigo-600 hover:text-indigo-900">Details</a
|
class="text-indigo-600 hover:text-indigo-900">Details</a>
|
||||||
>
|
{#if store.state.jwtinfo.userdetails.permissions.includes('USERGROUP:DELETE')}
|
||||||
{#if store.state.jwtinfo.userdetails.permissions.includes("USERGROUP:DELETE")}
|
|
||||||
<button
|
<button
|
||||||
on:click={() => {
|
on:click={() => {
|
||||||
active_deletes[group.id] = true;
|
active_deletes[group.id] = true;
|
||||||
}}
|
}}
|
||||||
tabindex="0"
|
tabindex="0"
|
||||||
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
|
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('delete')}</button>
|
||||||
>{$_("delete")}</button
|
|
||||||
>
|
|
||||||
{/if}
|
{/if}
|
||||||
</td>
|
</td>
|
||||||
{/if}
|
{/if}
|
||||||
@ -140,7 +118,7 @@
|
|||||||
{:catch error}
|
{:catch error}
|
||||||
<div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
|
<div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
|
||||||
<span class="inline-block align-middle mr-8">
|
<span class="inline-block align-middle mr-8">
|
||||||
<b class="capitalize">{$_("general_promise_error")}</b>
|
<b class="capitalize">{$_('general_promise_error')}</b>
|
||||||
{error}
|
{error}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -3,8 +3,7 @@
|
|||||||
import { clickOutside } from "../base/outsideclick";
|
import { clickOutside } from "../base/outsideclick";
|
||||||
|
|
||||||
import { RunnerOrganizationService } from "@odit/lfk-client-js";
|
import { RunnerOrganizationService } from "@odit/lfk-client-js";
|
||||||
|
import Toastify from "toastify-js";
|
||||||
import toast from "svelte-french-toast";
|
|
||||||
export let modal_open;
|
export let modal_open;
|
||||||
export let current_organizations;
|
export let current_organizations;
|
||||||
let name_input_dom;
|
let name_input_dom;
|
||||||
@ -49,7 +48,10 @@
|
|||||||
function submit() {
|
function submit() {
|
||||||
if (processed_last_submit === true) {
|
if (processed_last_submit === true) {
|
||||||
processed_last_submit = false;
|
processed_last_submit = false;
|
||||||
toast.loading($_("organization-is-being-added"));
|
const toast = Toastify({
|
||||||
|
text: $_("organization-is-being-added"),
|
||||||
|
duration: -1,
|
||||||
|
}).showToast();
|
||||||
let address = {};
|
let address = {};
|
||||||
if (address_checked === true) {
|
if (address_checked === true) {
|
||||||
address = {
|
address = {
|
||||||
@ -68,13 +70,17 @@
|
|||||||
.then((result) => {
|
.then((result) => {
|
||||||
name = "";
|
name = "";
|
||||||
modal_open = false;
|
modal_open = false;
|
||||||
toast.dismiss();
|
Toastify({
|
||||||
toast.success($_("organization-added"));
|
text: $_("organization-added"),
|
||||||
|
duration: 500,
|
||||||
|
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||||
|
}).showToast();
|
||||||
current_organizations = current_organizations.concat([result]);
|
current_organizations = current_organizations.concat([result]);
|
||||||
})
|
})
|
||||||
.catch((err) => {})
|
.catch((err) => {})
|
||||||
.finally(() => {
|
.finally(() => {
|
||||||
processed_last_submit = true;
|
processed_last_submit = true;
|
||||||
|
toast.hideToast();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -83,69 +89,57 @@
|
|||||||
{#if modal_open}
|
{#if modal_open}
|
||||||
<div
|
<div
|
||||||
class="fixed z-10 inset-0 overflow-y-auto"
|
class="fixed z-10 inset-0 overflow-y-auto"
|
||||||
|
|
||||||
use:clickOutside
|
use:clickOutside
|
||||||
on:click_outside={() => {
|
on:click_outside={() => {
|
||||||
modal_open = false;
|
modal_open = false;
|
||||||
}}
|
}}>
|
||||||
>
|
|
||||||
<div
|
<div
|
||||||
class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
|
class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
|
||||||
>
|
|
||||||
<div class="fixed inset-0 transition-opacity" aria-hidden="true">
|
<div class="fixed inset-0 transition-opacity" aria-hidden="true">
|
||||||
<div
|
<div
|
||||||
class="absolute inset-0 bg-gray-500 opacity-75"
|
class="absolute inset-0 bg-gray-500 opacity-75"
|
||||||
data-id="modal_backdrop"
|
data-id="modal_backdrop" />
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<span
|
<span
|
||||||
class="hidden sm:inline-block sm:align-middle sm:h-screen"
|
class="hidden sm:inline-block sm:align-middle sm:h-screen"
|
||||||
aria-hidden="true">​</span
|
aria-hidden="true">​</span>
|
||||||
>
|
|
||||||
<div
|
<div
|
||||||
class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
|
class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
|
||||||
role="dialog"
|
role="dialog"
|
||||||
aria-modal="true"
|
aria-modal="true"
|
||||||
aria-labelledby="modal-headline"
|
aria-labelledby="modal-headline">
|
||||||
>
|
|
||||||
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
||||||
<div class="sm:flex sm:items-start">
|
<div class="sm:flex sm:items-start">
|
||||||
<div
|
<div
|
||||||
class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
|
class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
|
||||||
>
|
|
||||||
<svg
|
<svg
|
||||||
class="h-6 w-6 text-blue-600"
|
class="h-6 w-6 text-blue-600"
|
||||||
fill="currentColor"
|
fill="currentColor"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
width="24"
|
width="24"
|
||||||
height="24"
|
height="24"><path
|
||||||
><path
|
d="M17 19h2v-8h-6v8h2v-6h2v6zM3 19V4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v5h2v10h1v2H2v-2h1zm4-8v2h2v-2H7zm0 4v2h2v-2H7zm0-8v2h2V7H7z" /></svg>
|
||||||
d="M17 19h2v-8h-6v8h2v-6h2v6zM3 19V4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v5h2v10h1v2H2v-2h1zm4-8v2h2v-2H7zm0 4v2h2v-2H7zm0-8v2h2V7H7z"
|
|
||||||
/></svg
|
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
|
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
|
||||||
<h3 class="text-lg leading-6 font-medium text-gray-900">
|
<h3 class="text-lg leading-6 font-medium text-gray-900">
|
||||||
{$_("create-a-new-organization")}
|
{$_('create-a-new-organization')}
|
||||||
</h3>
|
</h3>
|
||||||
<div class="mt-2 mb-6">
|
<div class="mt-2 mb-6">
|
||||||
<p class="text-sm text-gray-500">
|
<p class="text-sm text-gray-500">
|
||||||
{$_(
|
{$_('please-provide-the-required-information-to-add-a-new-organization')}
|
||||||
"please-provide-the-required-information-to-add-a-new-organization"
|
|
||||||
)}
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="grid grid-cols-6 gap-6">
|
<div class="grid grid-cols-6 gap-6">
|
||||||
<div class="col-span-6">
|
<div class="col-span-6">
|
||||||
<label
|
<label
|
||||||
for="firstname"
|
for="firstname"
|
||||||
class="block text-sm font-medium text-gray-700"
|
class="block text-sm font-medium text-gray-700">{$_('name')}</label>
|
||||||
>{$_("name")}</label
|
|
||||||
>
|
|
||||||
<input
|
<input
|
||||||
use:focus
|
use:focus
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
placeholder={$_("name")}
|
placeholder={$_('name')}
|
||||||
class:border-red-500={!isOrgnameValid}
|
class:border-red-500={!isOrgnameValid}
|
||||||
class:focus:border-red-500={!isOrgnameValid}
|
class:focus:border-red-500={!isOrgnameValid}
|
||||||
class:focus:ring-red-500={!isOrgnameValid}
|
class:focus:ring-red-500={!isOrgnameValid}
|
||||||
@ -153,13 +147,11 @@
|
|||||||
bind:this={name_input_dom}
|
bind:this={name_input_dom}
|
||||||
type="text"
|
type="text"
|
||||||
name="firstname"
|
name="firstname"
|
||||||
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
|
||||||
/>
|
|
||||||
{#if !isOrgnameValid}
|
{#if !isOrgnameValid}
|
||||||
<span
|
<span
|
||||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
|
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||||
>
|
{$_('organization-name-is-required')}
|
||||||
{$_("organization-name-is-required")}
|
|
||||||
</span>
|
</span>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
@ -170,112 +162,96 @@
|
|||||||
id="comments"
|
id="comments"
|
||||||
name="comments"
|
name="comments"
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
|
class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="ml-3 text-sm">
|
<div class="ml-3 text-sm">
|
||||||
<label for="comments" class="font-medium text-gray-700"
|
<label
|
||||||
>{$_("address")}</label
|
for="comments"
|
||||||
>
|
class="font-medium text-gray-700">{$_('address')}</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{#if address_checked === true}
|
{#if address_checked === true}
|
||||||
<div class="col-span-6">
|
<div class="col-span-6">
|
||||||
<label
|
<label
|
||||||
for="address1"
|
for="address1"
|
||||||
class="block text-sm font-medium text-gray-700"
|
class="block text-sm font-medium text-gray-700">{$_('address')}</label>
|
||||||
>{$_("address")}</label
|
<input
|
||||||
>
|
autocomplete="off"
|
||||||
<input
|
placeholder="{$_('address')}"
|
||||||
autocomplete="off"
|
class:border-red-500={!isAddress1Valid}
|
||||||
placeholder={$_("address")}
|
class:focus:border-red-500={!isAddress1Valid}
|
||||||
class:border-red-500={!isAddress1Valid}
|
class:focus:ring-red-500={!isAddress1Valid}
|
||||||
class:focus:border-red-500={!isAddress1Valid}
|
bind:value={address_input1_value}
|
||||||
class:focus:ring-red-500={!isAddress1Valid}
|
bind:this={address_input1}
|
||||||
bind:value={address_input1_value}
|
type="text"
|
||||||
bind:this={address_input1}
|
name="address1"
|
||||||
type="text"
|
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
|
||||||
name="address1"
|
{#if !isAddress1Valid}
|
||||||
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
<span
|
||||||
/>
|
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||||
{#if !isAddress1Valid}
|
{$_('address-is-required')}
|
||||||
<span
|
</span>
|
||||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
|
{/if}
|
||||||
>
|
</div>
|
||||||
{$_("address-is-required")}
|
<div class="col-span-6">
|
||||||
</span>
|
<label
|
||||||
{/if}
|
for="address2"
|
||||||
</div>
|
class="block text-sm font-medium text-gray-700">{$_('apartment-suite-etc')}</label>
|
||||||
<div class="col-span-6">
|
<input
|
||||||
<label
|
autocomplete="off"
|
||||||
for="address2"
|
placeholder="{$_('apartment-suite-etc')}"
|
||||||
class="block text-sm font-medium text-gray-700"
|
bind:value={address_input2_value}
|
||||||
>{$_("apartment-suite-etc")}</label
|
bind:this={address_input2}
|
||||||
>
|
type="text"
|
||||||
<input
|
name="address2"
|
||||||
autocomplete="off"
|
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
|
||||||
placeholder={$_("apartment-suite-etc")}
|
</div>
|
||||||
bind:value={address_input2_value}
|
<div class="col-span-6">
|
||||||
bind:this={address_input2}
|
<label
|
||||||
type="text"
|
for="zipcode"
|
||||||
name="address2"
|
class="block text-sm font-medium text-gray-700">{$_('zip-postal-code')}</label>
|
||||||
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
<input
|
||||||
/>
|
autocomplete="off"
|
||||||
</div>
|
placeholder="{$_('zip-postal-code')}"
|
||||||
<div class="col-span-6">
|
class:border-red-500={!iszipcodevalid}
|
||||||
<label
|
class:focus:border-red-500={!iszipcodevalid}
|
||||||
for="zipcode"
|
class:focus:ring-red-500={!iszipcodevalid}
|
||||||
class="block text-sm font-medium text-gray-700"
|
bind:value={address_zipcode_value}
|
||||||
>{$_("zip-postal-code")}</label
|
bind:this={address_zipcode}
|
||||||
>
|
type="text"
|
||||||
<input
|
name="zipcode"
|
||||||
autocomplete="off"
|
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
|
||||||
placeholder={$_("zip-postal-code")}
|
{#if !iszipcodevalid}
|
||||||
class:border-red-500={!iszipcodevalid}
|
<span
|
||||||
class:focus:border-red-500={!iszipcodevalid}
|
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||||
class:focus:ring-red-500={!iszipcodevalid}
|
{$_('valid-zipcode-postal-code-is-required')}
|
||||||
bind:value={address_zipcode_value}
|
</span>
|
||||||
bind:this={address_zipcode}
|
{/if}
|
||||||
type="text"
|
</div>
|
||||||
name="zipcode"
|
<div class="col-span-6">
|
||||||
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
<label
|
||||||
/>
|
for="city"
|
||||||
{#if !iszipcodevalid}
|
class="block text-sm font-medium text-gray-700">{$_('city')}</label>
|
||||||
<span
|
<input
|
||||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
|
autocomplete="off"
|
||||||
>
|
placeholder="{$_('city')}"
|
||||||
{$_("valid-zipcode-postal-code-is-required")}
|
class:border-red-500={!iscityvalid}
|
||||||
</span>
|
class:focus:border-red-500={!iscityvalid}
|
||||||
{/if}
|
class:focus:ring-red-500={!iscityvalid}
|
||||||
</div>
|
bind:value={address_city_value}
|
||||||
<div class="col-span-6">
|
bind:this={address_city}
|
||||||
<label
|
type="text"
|
||||||
for="city"
|
name="city"
|
||||||
class="block text-sm font-medium text-gray-700"
|
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
|
||||||
>{$_("city")}</label
|
{#if !iscityvalid}
|
||||||
>
|
<span
|
||||||
<input
|
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||||
autocomplete="off"
|
{$_('valid-city-is-required')}
|
||||||
placeholder={$_("city")}
|
</span>
|
||||||
class:border-red-500={!iscityvalid}
|
{/if}
|
||||||
class:focus:border-red-500={!iscityvalid}
|
</div>
|
||||||
class:focus:ring-red-500={!iscityvalid}
|
{/if}
|
||||||
bind:value={address_city_value}
|
</div>
|
||||||
bind:this={address_city}
|
|
||||||
type="text"
|
|
||||||
name="city"
|
|
||||||
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
|
||||||
/>
|
|
||||||
{#if !iscityvalid}
|
|
||||||
<span
|
|
||||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
|
|
||||||
>
|
|
||||||
{$_("valid-city-is-required")}
|
|
||||||
</span>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -285,18 +261,16 @@
|
|||||||
class:opacity-50={!createbtnenabled}
|
class:opacity-50={!createbtnenabled}
|
||||||
on:click={submit}
|
on:click={submit}
|
||||||
type="button"
|
type="button"
|
||||||
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
|
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
|
||||||
>
|
{$_('create')}
|
||||||
{$_("create")}
|
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
on:click={() => {
|
on:click={() => {
|
||||||
modal_open = false;
|
modal_open = false;
|
||||||
}}
|
}}
|
||||||
type="button"
|
type="button"
|
||||||
class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
|
class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
|
||||||
>
|
{$_('cancel')}
|
||||||
{$_("cancel")}
|
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -3,7 +3,7 @@
|
|||||||
import { clickOutside } from "../base/outsideclick";
|
import { clickOutside } from "../base/outsideclick";
|
||||||
|
|
||||||
import { RunnerOrganizationService } from "@odit/lfk-client-js";
|
import { RunnerOrganizationService } from "@odit/lfk-client-js";
|
||||||
|
import Toastify from "toastify-js";
|
||||||
import { createEventDispatcher } from "svelte";
|
import { createEventDispatcher } from "svelte";
|
||||||
export let modal_open;
|
export let modal_open;
|
||||||
export let delete_org;
|
export let delete_org;
|
||||||
@ -18,7 +18,11 @@
|
|||||||
true
|
true
|
||||||
)
|
)
|
||||||
.then((resp) => {
|
.then((resp) => {
|
||||||
toast($_("organization-deleted"));
|
Toastify({
|
||||||
|
text: $_('organization-deleted'),
|
||||||
|
duration: 500,
|
||||||
|
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||||
|
}).showToast();
|
||||||
location.replace("./");
|
location.replace("./");
|
||||||
})
|
})
|
||||||
.catch((err) => {});
|
.catch((err) => {});
|
||||||
@ -28,59 +32,51 @@
|
|||||||
{#if modal_open}
|
{#if modal_open}
|
||||||
<div
|
<div
|
||||||
class="fixed z-10 inset-0 overflow-y-auto"
|
class="fixed z-10 inset-0 overflow-y-auto"
|
||||||
|
|
||||||
use:clickOutside
|
use:clickOutside
|
||||||
on:click_outside={cancelDelete}
|
on:click_outside={cancelDelete}>
|
||||||
>
|
|
||||||
<div
|
<div
|
||||||
class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
|
class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
|
||||||
>
|
|
||||||
<div class="fixed inset-0 transition-opacity" aria-hidden="true">
|
<div class="fixed inset-0 transition-opacity" aria-hidden="true">
|
||||||
<div
|
<div
|
||||||
class="absolute inset-0 bg-gray-500 opacity-75"
|
class="absolute inset-0 bg-gray-500 opacity-75"
|
||||||
data-id="modal_backdrop"
|
data-id="modal_backdrop" />
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<span
|
<span
|
||||||
class="hidden sm:inline-block sm:align-middle sm:h-screen"
|
class="hidden sm:inline-block sm:align-middle sm:h-screen"
|
||||||
aria-hidden="true">​</span
|
aria-hidden="true">​</span>
|
||||||
>
|
|
||||||
<div
|
<div
|
||||||
class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
|
class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
|
||||||
role="dialog"
|
role="dialog"
|
||||||
aria-modal="true"
|
aria-modal="true"
|
||||||
aria-labelledby="modal-headline"
|
aria-labelledby="modal-headline">
|
||||||
>
|
|
||||||
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
||||||
<div class="sm:flex sm:items-start">
|
<div class="sm:flex sm:items-start">
|
||||||
<div
|
<div
|
||||||
class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
|
class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
|
||||||
>
|
|
||||||
<svg
|
<svg
|
||||||
class="h-6 w-6 text-blue-600"
|
class="h-6 w-6 text-blue-600"
|
||||||
fill="currentColor"
|
fill="currentColor"
|
||||||
width="24"
|
width="24"
|
||||||
height="24"
|
height="24"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 640 512"
|
viewBox="0 0 640 512"><path
|
||||||
><path
|
|
||||||
fill="currentColor"
|
fill="currentColor"
|
||||||
d="M96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm448 0c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm32 32h-64c-17.6 0-33.5 7.1-45.1 18.6 40.3 22.1 68.9 62 75.1 109.4h66c17.7 0 32-14.3 32-32v-32c0-35.3-28.7-64-64-64zm-256 0c61.9 0 112-50.1 112-112S381.9 32 320 32 208 82.1 208 144s50.1 112 112 112zm76.8 32h-8.3c-20.8 10-43.9 16-68.5 16s-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48v-28.8c0-63.6-51.6-115.2-115.2-115.2zm-223.7-13.4C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z"
|
d="M96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm448 0c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm32 32h-64c-17.6 0-33.5 7.1-45.1 18.6 40.3 22.1 68.9 62 75.1 109.4h66c17.7 0 32-14.3 32-32v-32c0-35.3-28.7-64-64-64zm-256 0c61.9 0 112-50.1 112-112S381.9 32 320 32 208 82.1 208 144s50.1 112 112 112zm76.8 32h-8.3c-20.8 10-43.9 16-68.5 16s-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48v-28.8c0-63.6-51.6-115.2-115.2-115.2zm-223.7-13.4C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z" /></svg>
|
||||||
/></svg
|
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
|
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
|
||||||
<h3 class="text-lg leading-6 font-medium text-gray-900">
|
<h3 class="text-lg leading-6 font-medium text-gray-900">
|
||||||
{$_("attention")}
|
{$_('attention')}
|
||||||
</h3>
|
</h3>
|
||||||
<div class="mt-2 mb-6">
|
<div class="mt-2 mb-6">
|
||||||
<p class="text-sm text-gray-500">
|
<p class="text-sm text-gray-500">
|
||||||
{$_(
|
{$_(
|
||||||
"do-you-want-to-delete-the-organization-delete_org-name",
|
'do-you-want-to-delete-the-organization-delete_org-name',
|
||||||
{
|
{
|
||||||
values: { orgname: delete_org.name },
|
values: { orgname: delete_org.name },
|
||||||
}
|
}
|
||||||
)}<br />
|
)}<br />
|
||||||
{$_("all-associated-teams-and-runners-will-be-deleted-too")}
|
{$_('all-associated-teams-and-runners-will-be-deleted-too')}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -90,16 +86,14 @@
|
|||||||
<button
|
<button
|
||||||
on:click={deleteOrg}
|
on:click={deleteOrg}
|
||||||
type="button"
|
type="button"
|
||||||
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
|
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">
|
||||||
>
|
{$_('confirm-delete-organization-and-associated-teams-runners')}
|
||||||
{$_("confirm-delete-organization-and-associated-teams-runners")}
|
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
on:click={cancelDelete}
|
on:click={cancelDelete}
|
||||||
type="button"
|
type="button"
|
||||||
class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
|
class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
|
||||||
>
|
{$_('cancel-keep-organization')}
|
||||||
{$_("cancel-keep-organization")}
|
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -4,7 +4,7 @@
|
|||||||
RunnerOrganizationService,
|
RunnerOrganizationService,
|
||||||
} from "@odit/lfk-client-js";
|
} from "@odit/lfk-client-js";
|
||||||
import { getLocaleFromNavigator, _ } from "svelte-i18n";
|
import { getLocaleFromNavigator, _ } from "svelte-i18n";
|
||||||
|
import Toastify from "toastify-js";
|
||||||
import store from "../../store";
|
import store from "../../store";
|
||||||
import ConfirmOrgDeletion from "./ConfirmOrgDeletion.svelte";
|
import ConfirmOrgDeletion from "./ConfirmOrgDeletion.svelte";
|
||||||
import ImportRunnerModal from "../runners/ImportRunnerModal.svelte";
|
import ImportRunnerModal from "../runners/ImportRunnerModal.svelte";
|
||||||
@ -77,7 +77,11 @@
|
|||||||
false
|
false
|
||||||
)
|
)
|
||||||
.then((resp) => {
|
.then((resp) => {
|
||||||
toast($_("organization-deleted"));
|
Toastify({
|
||||||
|
text: $_("organization-deleted"),
|
||||||
|
duration: 500,
|
||||||
|
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||||
|
}).showToast();
|
||||||
location.replace("./");
|
location.replace("./");
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
@ -87,7 +91,10 @@
|
|||||||
}
|
}
|
||||||
function submit() {
|
function submit() {
|
||||||
if (data_loaded === true && save_enabled) {
|
if (data_loaded === true && save_enabled) {
|
||||||
toast($_("updating-organization"));
|
Toastify({
|
||||||
|
text: $_("updating-organization"),
|
||||||
|
duration: 2500,
|
||||||
|
}).showToast();
|
||||||
let postdata = Object.assign({}, editable);
|
let postdata = Object.assign({}, editable);
|
||||||
if (postdata.address_checked === false) {
|
if (postdata.address_checked === false) {
|
||||||
postdata.address = null;
|
postdata.address = null;
|
||||||
@ -101,7 +108,11 @@
|
|||||||
editable.registrationKey = resp.registrationKey;
|
editable.registrationKey = resp.registrationKey;
|
||||||
original_object = Object.assign({}, editable);
|
original_object = Object.assign({}, editable);
|
||||||
original = JSON.stringify(original_object);
|
original = JSON.stringify(original_object);
|
||||||
toast.success($_("updated-organization"));
|
Toastify({
|
||||||
|
text: $_("updated-organization"),
|
||||||
|
duration: 2500,
|
||||||
|
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||||
|
}).showToast();
|
||||||
})
|
})
|
||||||
.catch((err) => {});
|
.catch((err) => {});
|
||||||
} else {
|
} else {
|
||||||
@ -109,7 +120,12 @@
|
|||||||
}
|
}
|
||||||
async function copy() {
|
async function copy() {
|
||||||
if (!editable.registrationKey) {
|
if (!editable.registrationKey) {
|
||||||
toast.error($_("you-have-to-save-your-changes-to-generate-a-link"));
|
Toastify({
|
||||||
|
text: $_("you-have-to-save-your-changes-to-generate-a-link"),
|
||||||
|
duration: 500,
|
||||||
|
backgroundColor:
|
||||||
|
"linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
|
||||||
|
}).showToast();
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
valueCopy = registrationLink;
|
valueCopy = registrationLink;
|
||||||
@ -121,10 +137,19 @@
|
|||||||
if (!successful) {
|
if (!successful) {
|
||||||
throw new Error();
|
throw new Error();
|
||||||
}
|
}
|
||||||
toast($_("copied-link-to-clipboard"));
|
Toastify({
|
||||||
|
text: $_("copied-link-to-clipboard"),
|
||||||
|
duration: 500,
|
||||||
|
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||||
|
}).showToast();
|
||||||
copied = true;
|
copied = true;
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
toast.error($_("error-whyile-copying-to-clipboard"));
|
Toastify({
|
||||||
|
text: $_("error-whyile-copying-to-clipboard"),
|
||||||
|
duration: 500,
|
||||||
|
backgroundColor:
|
||||||
|
"linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
|
||||||
|
}).showToast();
|
||||||
}
|
}
|
||||||
// we can notifi by event or storage about copy status
|
// we can notifi by event or storage about copy status
|
||||||
valueCopy = null;
|
valueCopy = null;
|
||||||
|
|||||||
@ -1,35 +1,30 @@
|
|||||||
<script>
|
<script>
|
||||||
import { _ } from "svelte-i18n";
|
import { getLocaleFromNavigator, _ } from "svelte-i18n";
|
||||||
import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
|
import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
|
||||||
let modal_open = false;
|
let modal_open = false;
|
||||||
let delete_org = {};
|
let delete_org = {};
|
||||||
import { RunnerOrganizationService } from "@odit/lfk-client-js";
|
import { RunnerOrganizationService } from "@odit/lfk-client-js";
|
||||||
import store from "../../store";
|
import store from "../../store";
|
||||||
import OrgsEmptyState from "./OrgsEmptyState.svelte";
|
import OrgsEmptyState from "./OrgsEmptyState.svelte";
|
||||||
|
import Toastify from "toastify-js";
|
||||||
import ConfirmOrgDeletion from "./ConfirmOrgDeletion.svelte";
|
import ConfirmOrgDeletion from "./ConfirmOrgDeletion.svelte";
|
||||||
import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
|
import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
|
||||||
import GenerateRunnerCertificates from "../pdf_generation/GenerateRunnerCertificates.svelte";
|
import GenerateRunnerCertificates from "../pdf_generation/GenerateRunnerCertificates.svelte";
|
||||||
import toast from "svelte-french-toast";
|
|
||||||
$: searchvalue = "";
|
$: searchvalue = "";
|
||||||
$: active_deletes = [];
|
$: active_deletes = [];
|
||||||
$: sponsoring_contracts_show = current_organizations.some(
|
$: sponsoring_contracts_show = current_organizations.some((r) => r.is_selected === true);
|
||||||
(r) => r.is_selected === true
|
|
||||||
);
|
|
||||||
$: cards_show = current_organizations.some((r) => r.is_selected === true);
|
$: cards_show = current_organizations.some((r) => r.is_selected === true);
|
||||||
$: generate_orgs = current_organizations.filter(
|
$: generate_orgs = current_organizations.filter((r) => r.is_selected === true);
|
||||||
(r) => r.is_selected === true
|
|
||||||
);
|
|
||||||
$: certificates_show = current_organizations.some(
|
$: certificates_show = current_organizations.some(
|
||||||
(r) => r.is_selected === true
|
(r) => r.is_selected === true
|
||||||
);
|
);
|
||||||
export let current_organizations = [];
|
export let current_organizations = [];
|
||||||
|
|
||||||
const promise =
|
const promise = RunnerOrganizationService.runnerOrganizationControllerGetAll().then(
|
||||||
RunnerOrganizationService.runnerOrganizationControllerGetAll().then(
|
(val) => {
|
||||||
(val) => {
|
current_organizations = val;
|
||||||
current_organizations = val;
|
}
|
||||||
}
|
);
|
||||||
);
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<ConfirmOrgDeletion
|
<ConfirmOrgDeletion
|
||||||
@ -38,16 +33,14 @@
|
|||||||
active_deletes[event.detail.id] = false;
|
active_deletes[event.detail.id] = false;
|
||||||
}}
|
}}
|
||||||
bind:modal_open
|
bind:modal_open
|
||||||
bind:delete_org
|
bind:delete_org />
|
||||||
/>
|
{#if store.state.jwtinfo.userdetails.permissions.includes('ORGANIZATION:GET')}
|
||||||
{#if store.state.jwtinfo.userdetails.permissions.includes("ORGANIZATION:GET")}
|
|
||||||
{#await promise}
|
{#await promise}
|
||||||
<div
|
<div
|
||||||
class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
|
class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
|
||||||
role="alert"
|
role="alert">
|
||||||
>
|
<p class="font-bold">{$_('organizations-are-being-loaded')}</p>
|
||||||
<p class="font-bold">{$_("organizations-are-being-loaded")}</p>
|
<p class="text-sm">{$_('this-might-take-a-moment')}</p>
|
||||||
<p class="text-sm">{$_("this-might-take-a-moment")}</p>
|
|
||||||
</div>
|
</div>
|
||||||
{:then}
|
{:then}
|
||||||
{#if current_organizations.length === 0}
|
{#if current_organizations.length === 0}
|
||||||
@ -56,64 +49,58 @@
|
|||||||
<input
|
<input
|
||||||
type="search"
|
type="search"
|
||||||
bind:value={searchvalue}
|
bind:value={searchvalue}
|
||||||
placeholder={$_("datatable.search")}
|
placeholder={$_('datatable.search')}
|
||||||
aria-label={$_("datatable.search")}
|
aria-label={$_('datatable.search')}
|
||||||
class="mb-4"
|
class="mb-4" />
|
||||||
/>
|
|
||||||
<div class="h-12">
|
<div class="h-12">
|
||||||
<GenerateSponsoringContracts
|
<GenerateSponsoringContracts
|
||||||
bind:sponsoring_contracts_show
|
bind:sponsoring_contracts_show
|
||||||
bind:generate_orgs
|
bind:generate_orgs />
|
||||||
/>
|
<GenerateRunnerCards
|
||||||
<GenerateRunnerCards bind:cards_show bind:generate_orgs />
|
bind:cards_show
|
||||||
<GenerateRunnerCertificates bind:certificates_show bind:generate_orgs />
|
bind:generate_orgs />
|
||||||
|
<GenerateRunnerCertificates
|
||||||
|
bind:certificates_show
|
||||||
|
bind:generate_orgs />
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll"
|
class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
|
||||||
>
|
|
||||||
<table class="divide-y divide-gray-200 w-full">
|
<table class="divide-y divide-gray-200 w-full">
|
||||||
<thead class="bg-gray-50">
|
<thead class="bg-gray-50">
|
||||||
<tr class="odd:bg-white even:bg-gray-100">
|
<tr>
|
||||||
<th
|
<th
|
||||||
scope="col"
|
scope="col"
|
||||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
>
|
<span
|
||||||
<button
|
|
||||||
on:click={() => {
|
on:click={() => {
|
||||||
const newstate = !current_organizations.some(
|
const newstate = !current_organizations.some((r) => r.is_selected === true);
|
||||||
(r) => r.is_selected === true
|
|
||||||
);
|
|
||||||
current_organizations = current_organizations.map((r) => {
|
current_organizations = current_organizations.map((r) => {
|
||||||
r.is_selected = newstate;
|
r.is_selected = newstate;
|
||||||
return r;
|
return r;
|
||||||
});
|
});
|
||||||
}}
|
}}
|
||||||
class="underline cursor-pointer select-none"
|
class="underline cursor-pointer select-none">{#if current_organizations.some((r) => r.is_selected === true)}
|
||||||
>{#if current_organizations.some((r) => r.is_selected === true)}
|
{$_('deselect-all')}
|
||||||
{$_("deselect-all")}
|
{:else}{$_('select-all')}{/if}
|
||||||
{:else}{$_("select-all")}{/if}
|
</span>
|
||||||
</button>
|
|
||||||
</th>
|
</th>
|
||||||
<th
|
<th
|
||||||
scope="col"
|
scope="col"
|
||||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
>
|
{$_('name')}
|
||||||
{$_("name")}
|
|
||||||
</th>
|
</th>
|
||||||
<th
|
<th
|
||||||
scope="col"
|
scope="col"
|
||||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
>
|
{$_('address')}
|
||||||
{$_("address")}
|
|
||||||
</th>
|
</th>
|
||||||
<th
|
<th
|
||||||
scope="col"
|
scope="col"
|
||||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
>
|
{$_('contact')}
|
||||||
{$_("contact")}
|
|
||||||
</th>
|
</th>
|
||||||
<th scope="col" class="relative px-6 py-3">
|
<th scope="col" class="relative px-6 py-3">
|
||||||
<span class="sr-only">{$_("action")}</span>
|
<span class="sr-only">{$_('action')}</span>
|
||||||
</th>
|
</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
@ -123,16 +110,12 @@
|
|||||||
.toString()
|
.toString()
|
||||||
.toLowerCase()
|
.toLowerCase()
|
||||||
.includes(searchvalue)}
|
.includes(searchvalue)}
|
||||||
<tr
|
<tr data-rowid="org_{o.id}">
|
||||||
class="odd:bg-white even:bg-gray-100"
|
|
||||||
data-rowid="org_{o.id}"
|
|
||||||
>
|
|
||||||
<td class="px-6 py-4 whitespace-nowrap">
|
<td class="px-6 py-4 whitespace-nowrap">
|
||||||
<input
|
<input
|
||||||
bind:checked={o.is_selected}
|
bind:checked={o.is_selected}
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
|
class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
|
||||||
/>
|
|
||||||
</td>
|
</td>
|
||||||
<td class="px-6 py-4 whitespace-nowrap">
|
<td class="px-6 py-4 whitespace-nowrap">
|
||||||
<div class="flex items-center">
|
<div class="flex items-center">
|
||||||
@ -165,41 +148,34 @@
|
|||||||
{#if o.contact}
|
{#if o.contact}
|
||||||
<a
|
<a
|
||||||
href="../contacts/{o.contact.id}"
|
href="../contacts/{o.contact.id}"
|
||||||
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
|
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{o.contact.firstname}
|
||||||
>{o.contact.firstname}
|
{o.contact.middlename || ''}
|
||||||
{o.contact.middlename || ""}
|
{o.contact.lastname}</a>
|
||||||
{o.contact.lastname}</a
|
{:else}{$_('no-contact-specified')}{/if}
|
||||||
>
|
|
||||||
{:else}{$_("no-contact-specified")}{/if}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
{#if active_deletes[o.id] === true}
|
{#if active_deletes[o.id] === true}
|
||||||
<td
|
<td
|
||||||
class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
|
class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
||||||
>
|
|
||||||
<button
|
<button
|
||||||
on:click={() => {
|
on:click={() => {
|
||||||
active_deletes[o.id] = false;
|
active_deletes[o.id] = false;
|
||||||
}}
|
}}
|
||||||
tabindex="0"
|
tabindex="0"
|
||||||
class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer"
|
class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">{$_('cancel-delete')}</button>
|
||||||
>{$_("cancel-delete")}</button
|
|
||||||
>
|
|
||||||
<button
|
<button
|
||||||
on:click={() => {
|
on:click={() => {
|
||||||
toast.loading($_("deleting-organization"));
|
RunnerOrganizationService.runnerOrganizationControllerRemove(o.id, false)
|
||||||
RunnerOrganizationService.runnerOrganizationControllerRemove(
|
|
||||||
o.id,
|
|
||||||
false
|
|
||||||
)
|
|
||||||
.then((resp) => {
|
.then((resp) => {
|
||||||
current_organizations =
|
current_organizations = current_organizations.filter((obj) => obj.id !== o.id);
|
||||||
current_organizations.filter(
|
Toastify({
|
||||||
(obj) => obj.id !== o.id
|
text: 'Organization deleted',
|
||||||
);
|
duration: 500,
|
||||||
toast($_("organization-deleted"));
|
backgroundColor:
|
||||||
|
'linear-gradient(to right, #00b09b, #96c93d)',
|
||||||
|
}).showToast();
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
modal_open = true;
|
modal_open = true;
|
||||||
@ -207,28 +183,21 @@
|
|||||||
});
|
});
|
||||||
}}
|
}}
|
||||||
tabindex="0"
|
tabindex="0"
|
||||||
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
|
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('confirm-delete')}</button>
|
||||||
>{$_("confirm-delete")}</button
|
|
||||||
>
|
|
||||||
</td>
|
</td>
|
||||||
{:else}
|
{:else}
|
||||||
<td
|
<td
|
||||||
class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
|
class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
||||||
>
|
|
||||||
<a
|
<a
|
||||||
href="./{o.id}"
|
href="./{o.id}"
|
||||||
class="text-indigo-600 hover:text-indigo-900"
|
class="text-indigo-600 hover:text-indigo-900">{$_('details')}</a>
|
||||||
>{$_("details")}</a
|
{#if store.state.jwtinfo.userdetails.permissions.includes('ORGANIZATION:DELETE')}
|
||||||
>
|
|
||||||
{#if store.state.jwtinfo.userdetails.permissions.includes("ORGANIZATION:DELETE")}
|
|
||||||
<button
|
<button
|
||||||
on:click={() => {
|
on:click={() => {
|
||||||
active_deletes[o.id] = true;
|
active_deletes[o.id] = true;
|
||||||
}}
|
}}
|
||||||
tabindex="0"
|
tabindex="0"
|
||||||
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
|
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('delete')}</button>
|
||||||
>{$_("delete")}</button
|
|
||||||
>
|
|
||||||
{/if}
|
{/if}
|
||||||
</td>
|
</td>
|
||||||
{/if}
|
{/if}
|
||||||
@ -242,7 +211,7 @@
|
|||||||
{:catch error}
|
{:catch error}
|
||||||
<div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
|
<div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
|
||||||
<span class="inline-block align-middle mr-8">
|
<span class="inline-block align-middle mr-8">
|
||||||
<b class="capitalize">{$_("general_promise_error")}</b>
|
<b class="capitalize">{$_('general_promise_error')}</b>
|
||||||
{error}
|
{error}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -11,34 +11,32 @@
|
|||||||
|
|
||||||
<section class="container p-5">
|
<section class="container p-5">
|
||||||
<span class="mb-1 text-3xl font-extrabold leading-tight">
|
<span class="mb-1 text-3xl font-extrabold leading-tight">
|
||||||
{$_("organizations")}
|
{$_('organizations')}
|
||||||
{#if store.state.jwtinfo.userdetails.permissions.includes("ORGANIZATION:CREATE")}
|
{#if store.state.jwtinfo.userdetails.permissions.includes('ORGANIZATION:CREATE')}
|
||||||
<button
|
<button
|
||||||
on:click={() => {
|
on:click={() => {
|
||||||
modal_open = true;
|
modal_open = true;
|
||||||
}}
|
}}
|
||||||
type="button"
|
type="button"
|
||||||
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
|
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
|
||||||
>
|
{$_('create-organization')}
|
||||||
{$_("create-organization")}
|
|
||||||
</button>
|
</button>
|
||||||
{/if}
|
{/if}
|
||||||
{#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:IMPORT")}
|
{#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:IMPORT')}
|
||||||
<button
|
<button
|
||||||
on:click={() => {
|
on:click={() => {
|
||||||
import_modal_open = true;
|
import_modal_open = true;
|
||||||
}}
|
}}
|
||||||
type="button"
|
type="button"
|
||||||
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
|
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
|
||||||
>
|
{$_('import-runners')}
|
||||||
{$_("import-runners")}
|
|
||||||
</button>
|
</button>
|
||||||
{/if}
|
{/if}
|
||||||
</span>
|
</span>
|
||||||
<OrgOverview bind:current_organizations />
|
<OrgOverview bind:current_organizations />
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{#if store.state.jwtinfo.userdetails.permissions.includes("ORGANIZATION:CREATE")}
|
{#if store.state.jwtinfo.userdetails.permissions.includes('ORGANIZATION:CREATE')}
|
||||||
<AddOrgModal bind:current_organizations bind:modal_open />
|
<AddOrgModal bind:current_organizations bind:modal_open />
|
||||||
<ImportRunnerModal
|
<ImportRunnerModal
|
||||||
on:cancelDelete={(event) => {
|
on:cancelDelete={(event) => {
|
||||||
@ -49,6 +47,5 @@
|
|||||||
passed_orgs={current_organizations}
|
passed_orgs={current_organizations}
|
||||||
opened_from="OrgOverview"
|
opened_from="OrgOverview"
|
||||||
current_runners={[]}
|
current_runners={[]}
|
||||||
bind:import_modal_open
|
bind:import_modal_open />
|
||||||
/>
|
|
||||||
{/if}
|
{/if}
|
||||||
|
|||||||
@ -9,9 +9,9 @@
|
|||||||
<div class="text-center items-center justify-center">
|
<div class="text-center items-center justify-center">
|
||||||
<p class="mb-16 text-lg text-gray-500">
|
<p class="mb-16 text-lg text-gray-500">
|
||||||
<img class="w-full h-44" src={org_empty} alt="" />
|
<img class="w-full h-44" src={org_empty} alt="" />
|
||||||
<span class="font-bold">{$_("there-are-no-organizations-added-yet")}</span
|
<span
|
||||||
><br />
|
class="font-bold">{$_('there-are-no-organizations-added-yet')}</span><br />
|
||||||
<span>{$_("add-your-first-organization")}</span>
|
<span>{$_('add-your-first-organization')}</span>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@ -5,7 +5,7 @@
|
|||||||
RunnerOrganizationService,
|
RunnerOrganizationService,
|
||||||
RunnerTeamService,
|
RunnerTeamService,
|
||||||
} from "@odit/lfk-client-js";
|
} from "@odit/lfk-client-js";
|
||||||
|
import Toastify from "toastify-js";
|
||||||
import { init } from "@paralleldrive/cuid2";
|
import { init } from "@paralleldrive/cuid2";
|
||||||
const createId = init({ length: 10, fingerprint: "lfk-frontend" });
|
const createId = init({ length: 10, fingerprint: "lfk-frontend" });
|
||||||
|
|
||||||
@ -39,7 +39,10 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
function generateCards(locale) {
|
function generateCards(locale) {
|
||||||
toast.loading($_("generating-pdf"));
|
const toast = Toastify({
|
||||||
|
text: $_("generating-pdf"),
|
||||||
|
duration: -1,
|
||||||
|
}).showToast();
|
||||||
fetch(
|
fetch(
|
||||||
`${config.baseurl_documentserver}/cards?locale=${locale}&download=true&key=${config.documentserver_key}`,
|
`${config.baseurl_documentserver}/cards?locale=${locale}&download=true&key=${config.documentserver_key}`,
|
||||||
{
|
{
|
||||||
@ -52,8 +55,13 @@
|
|||||||
)
|
)
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
if (response.status != "200") {
|
if (response.status != "200") {
|
||||||
toast.dismiss();
|
toast.hideToast();
|
||||||
toast.error($_("pdf-generation-failed"));
|
Toastify({
|
||||||
|
text: $_("pdf-generation-failed"),
|
||||||
|
duration: 3500,
|
||||||
|
backgroundColor:
|
||||||
|
"linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
|
||||||
|
}).showToast();
|
||||||
} else {
|
} else {
|
||||||
return response.blob();
|
return response.blob();
|
||||||
}
|
}
|
||||||
@ -66,8 +74,12 @@
|
|||||||
document.body.appendChild(a);
|
document.body.appendChild(a);
|
||||||
a.click();
|
a.click();
|
||||||
a.remove();
|
a.remove();
|
||||||
toast.dismiss();
|
toast.hideToast();
|
||||||
toast($_("pdf-successfully-generated"));
|
Toastify({
|
||||||
|
text: $_("pdf-successfully-generated"),
|
||||||
|
duration: 3500,
|
||||||
|
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||||
|
}).showToast();
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
console.error(err);
|
console.error(err);
|
||||||
@ -75,7 +87,10 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
async function generateRunnersCards(locale) {
|
async function generateRunnersCards(locale) {
|
||||||
toast.loading($_("generating-pdf"));
|
const toast = Toastify({
|
||||||
|
text: $_("generating-pdf"),
|
||||||
|
duration: -1,
|
||||||
|
}).showToast();
|
||||||
const current_cards = await RunnerCardService.runnerCardControllerGetAll();
|
const current_cards = await RunnerCardService.runnerCardControllerGetAll();
|
||||||
let cards = [];
|
let cards = [];
|
||||||
for (let runner of generate_runners) {
|
for (let runner of generate_runners) {
|
||||||
@ -99,8 +114,13 @@
|
|||||||
)
|
)
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
if (response.status != "200") {
|
if (response.status != "200") {
|
||||||
toast.dismiss();
|
toast.hideToast();
|
||||||
toast.error($_("pdf-generation-failed"));
|
Toastify({
|
||||||
|
text: $_("pdf-generation-failed"),
|
||||||
|
duration: 3500,
|
||||||
|
backgroundColor:
|
||||||
|
"linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
|
||||||
|
}).showToast();
|
||||||
} else {
|
} else {
|
||||||
return response.blob();
|
return response.blob();
|
||||||
}
|
}
|
||||||
@ -119,14 +139,21 @@
|
|||||||
document.body.appendChild(a);
|
document.body.appendChild(a);
|
||||||
a.click();
|
a.click();
|
||||||
a.remove();
|
a.remove();
|
||||||
toast.dismiss();
|
toast.hideToast();
|
||||||
toast($_("pdf-successfully-generated"));
|
Toastify({
|
||||||
|
text: $_("pdf-successfully-generated"),
|
||||||
|
duration: 3500,
|
||||||
|
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||||
|
}).showToast();
|
||||||
})
|
})
|
||||||
.catch((err) => {});
|
.catch((err) => {});
|
||||||
}
|
}
|
||||||
|
|
||||||
async function generateTeamCards(locale) {
|
async function generateTeamCards(locale) {
|
||||||
toast.loading($_("generating-pdfs"));
|
const toast = Toastify({
|
||||||
|
text: $_("generating-pdfs"),
|
||||||
|
duration: -1,
|
||||||
|
}).showToast();
|
||||||
let count = 0;
|
let count = 0;
|
||||||
const current_cards = await RunnerCardService.runnerCardControllerGetAll();
|
const current_cards = await RunnerCardService.runnerCardControllerGetAll();
|
||||||
for (const t of generate_teams) {
|
for (const t of generate_teams) {
|
||||||
@ -155,8 +182,13 @@
|
|||||||
)
|
)
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
if (response.status != "200") {
|
if (response.status != "200") {
|
||||||
toast.dismiss();
|
toast.hideToast();
|
||||||
toast.error($_("pdf-generation-failed"));
|
Toastify({
|
||||||
|
text: $_("pdf-generation-failed"),
|
||||||
|
duration: 3500,
|
||||||
|
backgroundColor:
|
||||||
|
"linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
|
||||||
|
}).showToast();
|
||||||
} else {
|
} else {
|
||||||
return response.blob();
|
return response.blob();
|
||||||
}
|
}
|
||||||
@ -166,15 +198,17 @@
|
|||||||
const url = window.URL.createObjectURL(blob);
|
const url = window.URL.createObjectURL(blob);
|
||||||
let a = document.createElement("a");
|
let a = document.createElement("a");
|
||||||
a.href = url;
|
a.href = url;
|
||||||
a.download = `${$_("runnercards")}_${
|
a.download = `${$_("runnercards")}_${t.name}-${locale}-${createId()}.pdf`;
|
||||||
t.name
|
|
||||||
}-${locale}-${createId()}.pdf`;
|
|
||||||
document.body.appendChild(a);
|
document.body.appendChild(a);
|
||||||
a.click();
|
a.click();
|
||||||
a.remove();
|
a.remove();
|
||||||
if (count === generate_teams.length) {
|
if (count === generate_teams.length) {
|
||||||
toast.dismiss();
|
toast.hideToast();
|
||||||
toast.success($_("pdfs-successfully-generated"));
|
Toastify({
|
||||||
|
text: $_("pdfs-successfully-generated"),
|
||||||
|
duration: 3500,
|
||||||
|
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||||
|
}).showToast();
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.catch((err) => {});
|
.catch((err) => {});
|
||||||
@ -182,7 +216,10 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
async function generateOrgCards(locale) {
|
async function generateOrgCards(locale) {
|
||||||
toast.loading($_("generating-pdfs"));
|
const toast = Toastify({
|
||||||
|
text: $_("generating-pdfs"),
|
||||||
|
duration: -1,
|
||||||
|
}).showToast();
|
||||||
const current_cards = await RunnerCardService.runnerCardControllerGetAll();
|
const current_cards = await RunnerCardService.runnerCardControllerGetAll();
|
||||||
let count = 0;
|
let count = 0;
|
||||||
let count_orgs = 0;
|
let count_orgs = 0;
|
||||||
@ -216,8 +253,13 @@
|
|||||||
)
|
)
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
if (response.status != "200") {
|
if (response.status != "200") {
|
||||||
toast.dismiss();
|
toast.hideToast();
|
||||||
toast.error($_("pdf-generation-failed"));
|
Toastify({
|
||||||
|
text: $_("pdf-generation-failed"),
|
||||||
|
duration: 3500,
|
||||||
|
backgroundColor:
|
||||||
|
"linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
|
||||||
|
}).showToast();
|
||||||
} else {
|
} else {
|
||||||
return response.blob();
|
return response.blob();
|
||||||
}
|
}
|
||||||
@ -226,15 +268,18 @@
|
|||||||
const url = window.URL.createObjectURL(blob);
|
const url = window.URL.createObjectURL(blob);
|
||||||
let a = document.createElement("a");
|
let a = document.createElement("a");
|
||||||
a.href = url;
|
a.href = url;
|
||||||
a.download = `${$_("runnercards")}_${
|
a.download = `${$_("runnercards")}_${o.name}_direct-${locale}-${createId()}.pdf`;
|
||||||
o.name
|
|
||||||
}_direct-${locale}-${createId()}.pdf`;
|
|
||||||
document.body.appendChild(a);
|
document.body.appendChild(a);
|
||||||
a.click();
|
a.click();
|
||||||
a.remove();
|
a.remove();
|
||||||
if (count === o.teams.length && count_orgs === generate_orgs.length) {
|
if (count === o.teams.length && count_orgs === generate_orgs.length) {
|
||||||
toast.dismiss();
|
toast.hideToast();
|
||||||
toast.success($_("pdfs-successfully-generated"));
|
console.log("here");
|
||||||
|
Toastify({
|
||||||
|
text: $_("pdfs-successfully-generated"),
|
||||||
|
duration: 3500,
|
||||||
|
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||||
|
}).showToast();
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.catch((err) => {});
|
.catch((err) => {});
|
||||||
@ -265,8 +310,13 @@
|
|||||||
)
|
)
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
if (response.status != "200") {
|
if (response.status != "200") {
|
||||||
toast.dismiss();
|
toast.hideToast();
|
||||||
toast.error($_("pdf-generation-failed"));
|
Toastify({
|
||||||
|
text: $_("pdf-generation-failed"),
|
||||||
|
duration: 3500,
|
||||||
|
backgroundColor:
|
||||||
|
"linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
|
||||||
|
}).showToast();
|
||||||
} else {
|
} else {
|
||||||
return response.blob();
|
return response.blob();
|
||||||
}
|
}
|
||||||
@ -285,8 +335,12 @@
|
|||||||
count === o.teams.length &&
|
count === o.teams.length &&
|
||||||
count_orgs === generate_orgs.length
|
count_orgs === generate_orgs.length
|
||||||
) {
|
) {
|
||||||
toast.dismiss();
|
toast.hideToast();
|
||||||
toast($_("pdfs-successfully-generated"));
|
Toastify({
|
||||||
|
text: $_("pdfs-successfully-generated"),
|
||||||
|
duration: 3500,
|
||||||
|
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||||
|
}).showToast();
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.catch((err) => {});
|
.catch((err) => {});
|
||||||
|
|||||||
@ -5,7 +5,7 @@
|
|||||||
RunnerTeamService,
|
RunnerTeamService,
|
||||||
RunnerOrganizationService,
|
RunnerOrganizationService,
|
||||||
} from "@odit/lfk-client-js";
|
} from "@odit/lfk-client-js";
|
||||||
|
import Toastify from "toastify-js";
|
||||||
import { init } from "@paralleldrive/cuid2";
|
import { init } from "@paralleldrive/cuid2";
|
||||||
const createId = init({ length: 10, fingerprint: "lfk-frontend" });
|
const createId = init({ length: 10, fingerprint: "lfk-frontend" });
|
||||||
|
|
||||||
@ -36,13 +36,17 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
async function generateRunnerCertificates(locale) {
|
async function generateRunnerCertificates(locale) {
|
||||||
toast.loading($_("generating-pdf"));
|
const toast = Toastify({
|
||||||
|
text: $_("generating-pdf"),
|
||||||
|
duration: -1,
|
||||||
|
}).showToast();
|
||||||
const current_donations =
|
const current_donations =
|
||||||
(await DonationService.donationControllerGetAll()) || [];
|
(await DonationService.donationControllerGetAll()) || [];
|
||||||
let certificateRunners = [];
|
let certificateRunners = [];
|
||||||
for (let runner of generate_runners) {
|
for (let runner of generate_runners) {
|
||||||
runner.distanceDonations =
|
runner.distanceDonations =
|
||||||
current_donations.filter((d) => d.runner?.id == runner.id) || [];
|
current_donations.filter((d) => d.runner?.id == runner.id) || [];
|
||||||
|
console.log(runner.distanceDonations);
|
||||||
certificateRunners.push(runner);
|
certificateRunners.push(runner);
|
||||||
}
|
}
|
||||||
fetch(
|
fetch(
|
||||||
@ -57,8 +61,13 @@
|
|||||||
)
|
)
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
if (response.status != "200") {
|
if (response.status != "200") {
|
||||||
toast.dismiss();
|
toast.hideToast();
|
||||||
toast.error($_("pdf-generation-failed"));
|
Toastify({
|
||||||
|
text: $_("pdf-generation-failed"),
|
||||||
|
duration: 3500,
|
||||||
|
backgroundColor:
|
||||||
|
"linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
|
||||||
|
}).showToast();
|
||||||
} else {
|
} else {
|
||||||
return response.blob();
|
return response.blob();
|
||||||
}
|
}
|
||||||
@ -77,14 +86,21 @@
|
|||||||
document.body.appendChild(a);
|
document.body.appendChild(a);
|
||||||
a.click();
|
a.click();
|
||||||
a.remove();
|
a.remove();
|
||||||
toast.dismiss();
|
toast.hideToast();
|
||||||
toast($_("pdf-successfully-generated"));
|
Toastify({
|
||||||
|
text: $_("pdf-successfully-generated"),
|
||||||
|
duration: 3500,
|
||||||
|
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||||
|
}).showToast();
|
||||||
})
|
})
|
||||||
.catch((err) => {});
|
.catch((err) => {});
|
||||||
}
|
}
|
||||||
|
|
||||||
async function generateTeamCertificates(locale) {
|
async function generateTeamCertificates(locale) {
|
||||||
toast.loading($_("generating-pdfs"));
|
const toast = Toastify({
|
||||||
|
text: $_("generating-pdfs"),
|
||||||
|
duration: -1,
|
||||||
|
}).showToast();
|
||||||
let count = 0;
|
let count = 0;
|
||||||
const current_donations =
|
const current_donations =
|
||||||
(await DonationService.donationControllerGetAll()) || [];
|
(await DonationService.donationControllerGetAll()) || [];
|
||||||
@ -110,8 +126,13 @@
|
|||||||
)
|
)
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
if (response.status != "200") {
|
if (response.status != "200") {
|
||||||
toast.dismiss();
|
toast.hideToast();
|
||||||
toast.error($_("pdf-generation-failed"));
|
Toastify({
|
||||||
|
text: $_("pdf-generation-failed"),
|
||||||
|
duration: 3500,
|
||||||
|
backgroundColor:
|
||||||
|
"linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
|
||||||
|
}).showToast();
|
||||||
} else {
|
} else {
|
||||||
return response.blob();
|
return response.blob();
|
||||||
}
|
}
|
||||||
@ -121,15 +142,17 @@
|
|||||||
const url = window.URL.createObjectURL(blob);
|
const url = window.URL.createObjectURL(blob);
|
||||||
let a = document.createElement("a");
|
let a = document.createElement("a");
|
||||||
a.href = url;
|
a.href = url;
|
||||||
a.download = `${$_("certificates")}_${
|
a.download = `${$_("certificates")}_${t.name}-${locale}-${createId()}.pdf`;
|
||||||
t.name
|
|
||||||
}-${locale}-${createId()}.pdf`;
|
|
||||||
document.body.appendChild(a);
|
document.body.appendChild(a);
|
||||||
a.click();
|
a.click();
|
||||||
a.remove();
|
a.remove();
|
||||||
if (count === generate_teams.length) {
|
if (count === generate_teams.length) {
|
||||||
toast.dismiss();
|
toast.hideToast();
|
||||||
toast.success($_("pdfs-successfully-generated"));
|
Toastify({
|
||||||
|
text: $_("pdfs-successfully-generated"),
|
||||||
|
duration: 3500,
|
||||||
|
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||||
|
}).showToast();
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.catch((err) => {});
|
.catch((err) => {});
|
||||||
@ -137,7 +160,10 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
async function generateOrgCertificates(locale) {
|
async function generateOrgCertificates(locale) {
|
||||||
toast.loading($_("generating-pdfs"));
|
const toast = Toastify({
|
||||||
|
text: $_("generating-pdfs"),
|
||||||
|
duration: -1,
|
||||||
|
}).showToast();
|
||||||
const current_donations =
|
const current_donations =
|
||||||
(await DonationService.donationControllerGetAll()) || [];
|
(await DonationService.donationControllerGetAll()) || [];
|
||||||
let count = 0;
|
let count = 0;
|
||||||
@ -168,8 +194,13 @@
|
|||||||
)
|
)
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
if (response.status != "200") {
|
if (response.status != "200") {
|
||||||
toast.dismiss();
|
toast.hideToast();
|
||||||
toast.error($_("pdf-generation-failed"));
|
Toastify({
|
||||||
|
text: $_("pdf-generation-failed"),
|
||||||
|
duration: 3500,
|
||||||
|
backgroundColor:
|
||||||
|
"linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
|
||||||
|
}).showToast();
|
||||||
} else {
|
} else {
|
||||||
return response.blob();
|
return response.blob();
|
||||||
}
|
}
|
||||||
@ -178,15 +209,18 @@
|
|||||||
const url = window.URL.createObjectURL(blob);
|
const url = window.URL.createObjectURL(blob);
|
||||||
let a = document.createElement("a");
|
let a = document.createElement("a");
|
||||||
a.href = url;
|
a.href = url;
|
||||||
a.download = `${$_("certificates")}_${
|
a.download = `${$_("certificates")}_${o.name}-${locale}-${createId()}.pdf`;
|
||||||
o.name
|
|
||||||
}-${locale}-${createId()}.pdf`;
|
|
||||||
document.body.appendChild(a);
|
document.body.appendChild(a);
|
||||||
a.click();
|
a.click();
|
||||||
a.remove();
|
a.remove();
|
||||||
if (count === o.teams.length && count_orgs === generate_orgs.length) {
|
if (count === o.teams.length && count_orgs === generate_orgs.length) {
|
||||||
toast.dismiss();
|
toast.hideToast();
|
||||||
toast.success($_("pdfs-successfully-generated"));
|
console.log("here");
|
||||||
|
Toastify({
|
||||||
|
text: $_("pdfs-successfully-generated"),
|
||||||
|
duration: 3500,
|
||||||
|
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||||
|
}).showToast();
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.catch((err) => {});
|
.catch((err) => {});
|
||||||
@ -213,8 +247,13 @@
|
|||||||
)
|
)
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
if (response.status != "200") {
|
if (response.status != "200") {
|
||||||
toast.dismiss();
|
toast.hideToast();
|
||||||
toast.error($_("pdf-generation-failed"));
|
Toastify({
|
||||||
|
text: $_("pdf-generation-failed"),
|
||||||
|
duration: 3500,
|
||||||
|
backgroundColor:
|
||||||
|
"linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
|
||||||
|
}).showToast();
|
||||||
} else {
|
} else {
|
||||||
return response.blob();
|
return response.blob();
|
||||||
}
|
}
|
||||||
@ -233,8 +272,12 @@
|
|||||||
count === o.teams.length &&
|
count === o.teams.length &&
|
||||||
count_orgs === generate_orgs.length
|
count_orgs === generate_orgs.length
|
||||||
) {
|
) {
|
||||||
toast.dismiss();
|
toast.hideToast();
|
||||||
toast($_("pdfs-successfully-generated"));
|
Toastify({
|
||||||
|
text: $_("pdfs-successfully-generated"),
|
||||||
|
duration: 3500,
|
||||||
|
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||||
|
}).showToast();
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.catch((err) => {});
|
.catch((err) => {});
|
||||||
|
|||||||
@ -4,9 +4,8 @@
|
|||||||
RunnerOrganizationService,
|
RunnerOrganizationService,
|
||||||
RunnerTeamService,
|
RunnerTeamService,
|
||||||
} from "@odit/lfk-client-js";
|
} from "@odit/lfk-client-js";
|
||||||
|
import Toastify from "toastify-js";
|
||||||
import { init } from "@paralleldrive/cuid2";
|
import { init } from "@paralleldrive/cuid2";
|
||||||
import toast from "svelte-french-toast";
|
|
||||||
const createId = init({ length: 10, fingerprint: "lfk-frontend" });
|
const createId = init({ length: 10, fingerprint: "lfk-frontend" });
|
||||||
|
|
||||||
export let sponsoring_contracts_show = false;
|
export let sponsoring_contracts_show = false;
|
||||||
@ -36,7 +35,10 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
async function generateTeamContracts(locale) {
|
async function generateTeamContracts(locale) {
|
||||||
toast.loading($_("generating-pdfs"));
|
const toast = Toastify({
|
||||||
|
text: $_("generating-pdfs"),
|
||||||
|
duration: -1,
|
||||||
|
}).showToast();
|
||||||
let count = 0;
|
let count = 0;
|
||||||
for (const t of generate_teams) {
|
for (const t of generate_teams) {
|
||||||
count++;
|
count++;
|
||||||
@ -55,8 +57,13 @@
|
|||||||
)
|
)
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
if (response.status != "200") {
|
if (response.status != "200") {
|
||||||
toast.dismiss();
|
toast.hideToast();
|
||||||
toast.error($_("pdf-generation-failed"));
|
Toastify({
|
||||||
|
text: $_("pdf-generation-failed"),
|
||||||
|
duration: 3500,
|
||||||
|
backgroundColor:
|
||||||
|
"linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
|
||||||
|
}).showToast();
|
||||||
} else {
|
} else {
|
||||||
return response.blob();
|
return response.blob();
|
||||||
}
|
}
|
||||||
@ -65,15 +72,17 @@
|
|||||||
const url = window.URL.createObjectURL(blob);
|
const url = window.URL.createObjectURL(blob);
|
||||||
let a = document.createElement("a");
|
let a = document.createElement("a");
|
||||||
a.href = url;
|
a.href = url;
|
||||||
a.download = `${$_("sponsorings")}_${
|
a.download = `${$_("sponsorings")}_${t.name}-${locale}-${createId()}.pdf`;
|
||||||
t.name
|
|
||||||
}-${locale}-${createId()}.pdf`;
|
|
||||||
document.body.appendChild(a);
|
document.body.appendChild(a);
|
||||||
a.click();
|
a.click();
|
||||||
a.remove();
|
a.remove();
|
||||||
if (count === generate_teams.length) {
|
if (count === generate_teams.length) {
|
||||||
toast.dismiss();
|
toast.hideToast();
|
||||||
toast.success($_("pdfs-successfully-generated"));
|
Toastify({
|
||||||
|
text: $_("pdfs-successfully-generated"),
|
||||||
|
duration: 3500,
|
||||||
|
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||||
|
}).showToast();
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.catch((err) => {});
|
.catch((err) => {});
|
||||||
@ -81,7 +90,10 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
async function generateOrgContracts(locale) {
|
async function generateOrgContracts(locale) {
|
||||||
toast.loading($_("generating-pdf"));
|
const toast = Toastify({
|
||||||
|
text: $_("generating-pdf"),
|
||||||
|
duration: -1,
|
||||||
|
}).showToast();
|
||||||
let count_orgs = 0;
|
let count_orgs = 0;
|
||||||
for (const o of generate_orgs) {
|
for (const o of generate_orgs) {
|
||||||
count_orgs++;
|
count_orgs++;
|
||||||
@ -103,8 +115,13 @@
|
|||||||
)
|
)
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
if (response.status != "200") {
|
if (response.status != "200") {
|
||||||
toast.dismiss();
|
toast.hideToast();
|
||||||
toast.error($_("pdf-generation-failed"));
|
Toastify({
|
||||||
|
text: $_("pdf-generation-failed"),
|
||||||
|
duration: 3500,
|
||||||
|
backgroundColor:
|
||||||
|
"linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
|
||||||
|
}).showToast();
|
||||||
} else {
|
} else {
|
||||||
return response.blob();
|
return response.blob();
|
||||||
}
|
}
|
||||||
@ -113,15 +130,18 @@
|
|||||||
const url = window.URL.createObjectURL(blob);
|
const url = window.URL.createObjectURL(blob);
|
||||||
let a = document.createElement("a");
|
let a = document.createElement("a");
|
||||||
a.href = url;
|
a.href = url;
|
||||||
a.download = `${$_("sponsorings")}_${
|
a.download = `${$_("sponsorings")}_${o.name}_direct-${locale}-${createId()}.pdf`;
|
||||||
o.name
|
|
||||||
}_direct-${locale}-${createId()}.pdf`;
|
|
||||||
document.body.appendChild(a);
|
document.body.appendChild(a);
|
||||||
a.click();
|
a.click();
|
||||||
a.remove();
|
a.remove();
|
||||||
if (count === o.teams.length && count_orgs === generate_orgs.length) {
|
if (count === o.teams.length && count_orgs === generate_orgs.length) {
|
||||||
toast.dismiss();
|
toast.hideToast();
|
||||||
toast.success($_("pdfs-successfully-generated"));
|
console.log("here");
|
||||||
|
Toastify({
|
||||||
|
text: $_("pdfs-successfully-generated"),
|
||||||
|
duration: 3500,
|
||||||
|
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||||
|
}).showToast();
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.catch((err) => {});
|
.catch((err) => {});
|
||||||
@ -142,8 +162,13 @@
|
|||||||
)
|
)
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
if (response.status != "200") {
|
if (response.status != "200") {
|
||||||
toast.dismiss();
|
toast.hideToast();
|
||||||
toast.error($_("pdf-generation-failed"));
|
Toastify({
|
||||||
|
text: $_("pdf-generation-failed"),
|
||||||
|
duration: 3500,
|
||||||
|
backgroundColor:
|
||||||
|
"linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
|
||||||
|
}).showToast();
|
||||||
} else {
|
} else {
|
||||||
return response.blob();
|
return response.blob();
|
||||||
}
|
}
|
||||||
@ -162,8 +187,12 @@
|
|||||||
count === o.teams.length &&
|
count === o.teams.length &&
|
||||||
count_orgs === generate_orgs.length
|
count_orgs === generate_orgs.length
|
||||||
) {
|
) {
|
||||||
toast.dismiss();
|
toast.hideToast();
|
||||||
toast($_("pdfs-successfully-generated"));
|
Toastify({
|
||||||
|
text: $_("pdfs-successfully-generated"),
|
||||||
|
duration: 3500,
|
||||||
|
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||||
|
}).showToast();
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.catch((err) => {});
|
.catch((err) => {});
|
||||||
@ -172,7 +201,10 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
function generateRunnerContracts(locale) {
|
function generateRunnerContracts(locale) {
|
||||||
toast.loading($_("generating-pdf"));
|
const toast = Toastify({
|
||||||
|
text: $_("generating-pdf"),
|
||||||
|
duration: -1,
|
||||||
|
}).showToast();
|
||||||
fetch(
|
fetch(
|
||||||
`${config.baseurl_documentserver}/contracts?locale=${locale}&download=true&key=${config.documentserver_key}`,
|
`${config.baseurl_documentserver}/contracts?locale=${locale}&download=true&key=${config.documentserver_key}`,
|
||||||
{
|
{
|
||||||
@ -185,8 +217,13 @@
|
|||||||
)
|
)
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
if (response.status != "200") {
|
if (response.status != "200") {
|
||||||
toast.dismiss();
|
toast.hideToast();
|
||||||
toast.error($_("pdf-generation-failed"));
|
Toastify({
|
||||||
|
text: $_("pdf-generation-failed"),
|
||||||
|
duration: 3500,
|
||||||
|
backgroundColor:
|
||||||
|
"linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
|
||||||
|
}).showToast();
|
||||||
} else {
|
} else {
|
||||||
return response.blob();
|
return response.blob();
|
||||||
}
|
}
|
||||||
@ -204,8 +241,12 @@
|
|||||||
document.body.appendChild(a);
|
document.body.appendChild(a);
|
||||||
a.click();
|
a.click();
|
||||||
a.remove();
|
a.remove();
|
||||||
toast.dismiss();
|
toast.hideToast();
|
||||||
toast($_("pdf-successfully-generated"));
|
Toastify({
|
||||||
|
text: $_("pdf-successfully-generated"),
|
||||||
|
duration: 3500,
|
||||||
|
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||||
|
}).showToast();
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
console.error(err);
|
console.error(err);
|
||||||
|
|||||||
@ -3,90 +3,78 @@
|
|||||||
<img
|
<img
|
||||||
alt=""
|
alt=""
|
||||||
src="https://gustui.s3.amazonaws.com/avatar.png"
|
src="https://gustui.s3.amazonaws.com/avatar.png"
|
||||||
class="absolute left-0 top-0 w-full h-full rounded-full object-cover"
|
class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="relative rounded-full w-8 h-8">
|
<div class="relative rounded-full w-8 h-8">
|
||||||
<img
|
<img
|
||||||
alt=""
|
alt=""
|
||||||
src="https://gustui.s3.amazonaws.com/avatar.png"
|
src="https://gustui.s3.amazonaws.com/avatar.png"
|
||||||
class="absolute left-0 top-0 w-full h-full rounded-full object-cover"
|
class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="relative rounded-full w-12 h-12">
|
<div class="relative rounded-full w-12 h-12">
|
||||||
<img
|
<img
|
||||||
alt=""
|
alt=""
|
||||||
src="https://gustui.s3.amazonaws.com/avatar.png"
|
src="https://gustui.s3.amazonaws.com/avatar.png"
|
||||||
class="absolute left-0 top-0 w-full h-full rounded-full object-cover"
|
class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="relative rounded-full w-16 h-16">
|
<div class="relative rounded-full w-16 h-16">
|
||||||
<img
|
<img
|
||||||
alt=""
|
alt=""
|
||||||
src="https://gustui.s3.amazonaws.com/avatar.png"
|
src="https://gustui.s3.amazonaws.com/avatar.png"
|
||||||
class="absolute left-0 top-0 w-full h-full rounded-full object-cover"
|
class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="relative rounded-full w-20 h-20">
|
<div class="relative rounded-full w-20 h-20">
|
||||||
<img
|
<img
|
||||||
alt=""
|
alt=""
|
||||||
src="https://gustui.s3.amazonaws.com/avatar.png"
|
src="https://gustui.s3.amazonaws.com/avatar.png"
|
||||||
class="absolute left-0 top-0 w-full h-full rounded-full object-cover"
|
class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="relative rounded-full w-24 h-24">
|
<div class="relative rounded-full w-24 h-24">
|
||||||
<img
|
<img
|
||||||
alt=""
|
alt=""
|
||||||
src="https://gustui.s3.amazonaws.com/avatar.png"
|
src="https://gustui.s3.amazonaws.com/avatar.png"
|
||||||
class="absolute left-0 top-0 w-full h-full rounded-full object-cover"
|
class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<h3 class="text-lg">Status Avatars</h3>
|
<h3 class="text-lg">Status Avatars</h3>
|
||||||
<div class="relative rounded-full w-4 h-4">
|
<div class="relative rounded-full w-4 h-4">
|
||||||
<img
|
<img
|
||||||
alt=""
|
alt=""
|
||||||
src="https://gustui.s3.amazonaws.com/avatar.png"
|
src="https://gustui.s3.amazonaws.com/avatar.png"
|
||||||
class="absolute left-0 top-0 w-full h-full rounded-full object-cover"
|
class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
|
||||||
/>
|
|
||||||
<div class="absolute rounded-full right-0 bottom-0 w-1 h-1 bg-gray-200" />
|
<div class="absolute rounded-full right-0 bottom-0 w-1 h-1 bg-gray-200" />
|
||||||
</div>
|
</div>
|
||||||
<div class="relative rounded-full w-8 h-8">
|
<div class="relative rounded-full w-8 h-8">
|
||||||
<img
|
<img
|
||||||
alt=""
|
alt=""
|
||||||
src="https://gustui.s3.amazonaws.com/avatar.png"
|
src="https://gustui.s3.amazonaws.com/avatar.png"
|
||||||
class="absolute left-0 top-0 w-full h-full rounded-full object-cover"
|
class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
|
||||||
/>
|
|
||||||
<div class="absolute rounded-full right-0 bottom-0 w-2 h-2 bg-green-400" />
|
<div class="absolute rounded-full right-0 bottom-0 w-2 h-2 bg-green-400" />
|
||||||
</div>
|
</div>
|
||||||
<div class="relative rounded-full w-12 h-12">
|
<div class="relative rounded-full w-12 h-12">
|
||||||
<img
|
<img
|
||||||
alt=""
|
alt=""
|
||||||
src="https://gustui.s3.amazonaws.com/avatar.png"
|
src="https://gustui.s3.amazonaws.com/avatar.png"
|
||||||
class="absolute left-0 top-0 w-full h-full rounded-full object-cover"
|
class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
|
||||||
/>
|
|
||||||
<div class="absolute rounded-full right-0 bottom-0 w-4 h-4 bg-red-600" />
|
<div class="absolute rounded-full right-0 bottom-0 w-4 h-4 bg-red-600" />
|
||||||
</div>
|
</div>
|
||||||
<div class="relative rounded-full w-16 h-16">
|
<div class="relative rounded-full w-16 h-16">
|
||||||
<img
|
<img
|
||||||
alt=""
|
alt=""
|
||||||
src="https://gustui.s3.amazonaws.com/avatar.png"
|
src="https://gustui.s3.amazonaws.com/avatar.png"
|
||||||
class="absolute left-0 top-0 w-full h-full rounded-full object-cover"
|
class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
|
||||||
/>
|
|
||||||
<div class="absolute rounded-full right-0 bottom-0 w-5 h-5 bg-gray-200" />
|
<div class="absolute rounded-full right-0 bottom-0 w-5 h-5 bg-gray-200" />
|
||||||
</div>
|
</div>
|
||||||
<div class="relative rounded-full w-20 h-20">
|
<div class="relative rounded-full w-20 h-20">
|
||||||
<img
|
<img
|
||||||
alt=""
|
alt=""
|
||||||
src="https://gustui.s3.amazonaws.com/avatar.png"
|
src="https://gustui.s3.amazonaws.com/avatar.png"
|
||||||
class="absolute left-0 top-0 w-full h-full rounded-full object-cover"
|
class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
|
||||||
/>
|
|
||||||
<div class="absolute rounded-full right-0 bottom-0 w-6 h-6 bg-green-400" />
|
<div class="absolute rounded-full right-0 bottom-0 w-6 h-6 bg-green-400" />
|
||||||
</div>
|
</div>
|
||||||
<div class="relative rounded-full w-24 h-24">
|
<div class="relative rounded-full w-24 h-24">
|
||||||
<img
|
<img
|
||||||
alt=""
|
alt=""
|
||||||
src="https://gustui.s3.amazonaws.com/avatar.png"
|
src="https://gustui.s3.amazonaws.com/avatar.png"
|
||||||
class="absolute left-0 top-0 w-full h-full rounded-full object-cover"
|
class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
|
||||||
/>
|
|
||||||
<div class="absolute rounded-full right-0 bottom-0 w-6 h-6 bg-red-600" />
|
<div class="absolute rounded-full right-0 bottom-0 w-6 h-6 bg-red-600" />
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,36 +1,24 @@
|
|||||||
<h3 class="text-lg">badges</h3>
|
<h3 class="text-lg">badges</h3>
|
||||||
<span
|
<span
|
||||||
class="text-sm font-medium bg-green-100 py-1 px-2 rounded text-green-500 align-middle"
|
class="text-sm font-medium bg-green-100 py-1 px-2 rounded text-green-500 align-middle">Paid</span>
|
||||||
>Paid</span
|
|
||||||
>
|
|
||||||
<span
|
<span
|
||||||
class="text-sm font-medium bg-red-100 py-1 px-2 rounded text-red-500 align-middle"
|
class="text-sm font-medium bg-red-100 py-1 px-2 rounded text-red-500 align-middle">Overdue</span>
|
||||||
>Overdue</span
|
<span
|
||||||
>
|
class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-blue-600">Primary</span>
|
||||||
<span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-blue-600"
|
<span
|
||||||
>Primary</span
|
class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-gray-600">Secondary</span>
|
||||||
>
|
<span
|
||||||
<span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-gray-600"
|
class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-green-600">Success</span>
|
||||||
>Secondary</span
|
<span
|
||||||
>
|
class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-red-600">Danger</span>
|
||||||
<span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-green-600"
|
<span
|
||||||
>Success</span
|
class="rounded-sm py-1 px-2 text-xs font-medium text-black bg-yellow-400">Warning</span>
|
||||||
>
|
<span
|
||||||
<span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-red-600"
|
class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-indigo-300">Info</span>
|
||||||
>Danger</span
|
<span
|
||||||
>
|
class="rounded-sm py-1 px-2 text-xs font-medium text-black bg-gray-200">Light</span>
|
||||||
<span class="rounded-sm py-1 px-2 text-xs font-medium text-black bg-yellow-400"
|
<span
|
||||||
>Warning</span
|
class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-gray-900">Dark</span>
|
||||||
>
|
|
||||||
<span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-indigo-300"
|
|
||||||
>Info</span
|
|
||||||
>
|
|
||||||
<span class="rounded-sm py-1 px-2 text-xs font-medium text-black bg-gray-200"
|
|
||||||
>Light</span
|
|
||||||
>
|
|
||||||
<span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-gray-900"
|
|
||||||
>Dark</span
|
|
||||||
>
|
|
||||||
<h3 class="text-lg">closable badges</h3>
|
<h3 class="text-lg">closable badges</h3>
|
||||||
<span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-blue-600">
|
<span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-blue-600">
|
||||||
Primary
|
Primary
|
||||||
|
|||||||
@ -13,10 +13,9 @@
|
|||||||
class="h-3 w-3 stroke-current"
|
class="h-3 w-3 stroke-current"
|
||||||
height="1em"
|
height="1em"
|
||||||
width="1em"
|
width="1em"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"><path
|
||||||
><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
|
d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
|
||||||
<polyline points="9 22 9 12 15 12 15 22" /></svg
|
<polyline points="9 22 9 12 15 12 15 22" /></svg>
|
||||||
>
|
|
||||||
</li>
|
</li>
|
||||||
<li class="flex items-center">
|
<li class="flex items-center">
|
||||||
<a class="mr-2" href="/">Home</a><svg
|
<a class="mr-2" href="/">Home</a><svg
|
||||||
@ -29,10 +28,12 @@
|
|||||||
class="h-3 w-3 mr-2 stroke-current"
|
class="h-3 w-3 mr-2 stroke-current"
|
||||||
height="1em"
|
height="1em"
|
||||||
width="1em"
|
width="1em"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"><line
|
||||||
><line x1="5" y1="12" x2="19" y2="12" />
|
x1="5"
|
||||||
<polyline points="12 5 19 12 12 19" /></svg
|
y1="12"
|
||||||
>
|
x2="19"
|
||||||
|
y2="12" />
|
||||||
|
<polyline points="12 5 19 12 12 19" /></svg>
|
||||||
</li>
|
</li>
|
||||||
<li class="flex items-center">
|
<li class="flex items-center">
|
||||||
<a class="mr-2" href="/">Second level</a><svg
|
<a class="mr-2" href="/">Second level</a><svg
|
||||||
@ -45,10 +46,12 @@
|
|||||||
class="h-3 w-3 mr-2 stroke-current"
|
class="h-3 w-3 mr-2 stroke-current"
|
||||||
height="1em"
|
height="1em"
|
||||||
width="1em"
|
width="1em"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"><line
|
||||||
><line x1="5" y1="12" x2="19" y2="12" />
|
x1="5"
|
||||||
<polyline points="12 5 19 12 12 19" /></svg
|
y1="12"
|
||||||
>
|
x2="19"
|
||||||
|
y2="12" />
|
||||||
|
<polyline points="12 5 19 12 12 19" /></svg>
|
||||||
</li>
|
</li>
|
||||||
<li class="flex items-center">
|
<li class="flex items-center">
|
||||||
<a class="mr-2" href="/">Third level</a>
|
<a class="mr-2" href="/">Third level</a>
|
||||||
|
|||||||
@ -29,7 +29,8 @@
|
|||||||
<div class="mb-8">
|
<div class="mb-8">
|
||||||
<Table />
|
<Table />
|
||||||
</div>
|
</div>
|
||||||
<div class="widget w-full p-4 mb-4 rounded-lg bg-white border border-grey-100">
|
<div
|
||||||
|
class="widget w-full p-4 mb-4 rounded-lg bg-white border border-grey-100">
|
||||||
<div class="flex flex-row items-center justify-between mb-6">
|
<div class="flex flex-row items-center justify-between mb-6">
|
||||||
<div class="flex flex-col">
|
<div class="flex flex-col">
|
||||||
<div class="text-sm font-light text-grey-500">Regular</div>
|
<div class="text-sm font-light text-grey-500">Regular</div>
|
||||||
@ -38,38 +39,32 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="flex flex-col lg:flex-row lg:flex-wrap w-full lg:space-x-4">
|
<div class="flex flex-col lg:flex-row lg:flex-wrap w-full lg:space-x-4">
|
||||||
<div class="w-full lg:w-1/4">
|
<div class="w-full lg:w-1/4">
|
||||||
<div class="form-element">
|
<div class="form-element ">
|
||||||
<div class="form-label">Label</div>
|
<div class="form-label">Label</div><input
|
||||||
<input
|
|
||||||
name="name"
|
name="name"
|
||||||
type="text"
|
type="text"
|
||||||
class="form-input"
|
class="form-input"
|
||||||
placeholder="Enter something..."
|
placeholder="Enter something..." />
|
||||||
/>
|
|
||||||
<div class="form-hint">This is a hint</div>
|
<div class="form-hint">This is a hint</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="w-full lg:w-1/4">
|
<div class="w-full lg:w-1/4">
|
||||||
<div class="form-element">
|
<div class="form-element ">
|
||||||
<div class="form-label">First name</div>
|
<div class="form-label">First name</div><input
|
||||||
<input
|
|
||||||
name="name"
|
name="name"
|
||||||
type="text"
|
type="text"
|
||||||
class="form-input form-input-invalid"
|
class="form-input form-input-invalid"
|
||||||
placeholder="john@example.com"
|
placeholder="john@example.com" />
|
||||||
/>
|
|
||||||
<div class="form-error">First name is required</div>
|
<div class="form-error">First name is required</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="w-full lg:w-1/4">
|
<div class="w-full lg:w-1/4">
|
||||||
<div class="form-element">
|
<div class="form-element ">
|
||||||
<div class="form-label">First name</div>
|
<div class="form-label">First name</div><input
|
||||||
<input
|
|
||||||
name="name"
|
name="name"
|
||||||
type="text"
|
type="text"
|
||||||
class="form-input form-input-valid"
|
class="form-input form-input-valid"
|
||||||
placeholder="john@example.com"
|
placeholder="john@example.com" />
|
||||||
/>
|
|
||||||
<div class="form-success">First name is valid</div>
|
<div class="form-success">First name is valid</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -4,55 +4,31 @@
|
|||||||
<div class="text-sm font-light text-grey-500">Conversions</div>
|
<div class="text-sm font-light text-grey-500">Conversions</div>
|
||||||
<div class="text-sm font-bold"><span>This year</span></div>
|
<div class="text-sm font-bold"><span>This year</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="relative">
|
<div class="relative"><button
|
||||||
<button
|
class="btn btn-default btn-circle btn-icon bg-transparent hover:bg-transparent active:bg-transparent relative"><svg
|
||||||
class="btn btn-default btn-circle btn-icon bg-transparent hover:bg-transparent active:bg-transparent relative"
|
stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round"
|
||||||
><svg
|
stroke-linejoin="round" class="stroke-current stroke-1" size="18" height="18" width="18"
|
||||||
stroke="currentColor"
|
xmlns="http://www.w3.org/2000/svg">
|
||||||
fill="none"
|
<circle cx="12" cy="12" r="1"></circle>
|
||||||
stroke-width="2"
|
<circle cx="12" cy="5" r="1"></circle>
|
||||||
viewBox="0 0 24 24"
|
<circle cx="12" cy="19" r="1"></circle>
|
||||||
stroke-linecap="round"
|
</svg></button>
|
||||||
stroke-linejoin="round"
|
<div class="dropdown absolute top-0 right-0 mt-8 ">
|
||||||
class="stroke-current stroke-1"
|
|
||||||
size="18"
|
|
||||||
height="18"
|
|
||||||
width="18"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<circle cx="12" cy="12" r="1" />
|
|
||||||
<circle cx="12" cy="5" r="1" />
|
|
||||||
<circle cx="12" cy="19" r="1" />
|
|
||||||
</svg></button
|
|
||||||
>
|
|
||||||
<div class="dropdown absolute top-0 right-0 mt-8">
|
|
||||||
<div class="dropdown-content w-48 bottom-start">
|
<div class="dropdown-content w-48 bottom-start">
|
||||||
<div class="flex flex-col w-full">
|
<div class="flex flex-col w-full">
|
||||||
<ul class="list-none">
|
<ul class="list-none">
|
||||||
<li>
|
<li><a
|
||||||
<a
|
|
||||||
class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
|
class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
|
||||||
href="/">Today</a
|
href="/">Today</a></li>
|
||||||
>
|
<li><a
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a
|
|
||||||
class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
|
class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
|
||||||
href="/">This week</a
|
href="/">This week</a></li>
|
||||||
>
|
<li><a
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a
|
|
||||||
class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
|
class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
|
||||||
href="/">This month</a
|
href="/">This month</a></li>
|
||||||
>
|
<li><a
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a
|
|
||||||
class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
|
class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
|
||||||
href="/">This year</a
|
href="/">This year</a></li>
|
||||||
>
|
|
||||||
</li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -62,418 +38,167 @@
|
|||||||
<div class="flex flex-row w-full">
|
<div class="flex flex-row w-full">
|
||||||
<div style="width:100%;height:240px">
|
<div style="width:100%;height:240px">
|
||||||
<div class="recharts-responsive-container" style="width:100%;height:100%">
|
<div class="recharts-responsive-container" style="width:100%;height:100%">
|
||||||
<div
|
<div class="recharts-wrapper"
|
||||||
class="recharts-wrapper"
|
style="position: relative; cursor: default; width: 704px; height: 240px;"><svg
|
||||||
style="position: relative; cursor: default; width: 704px; height: 240px;"
|
class="recharts-surface" width="704" height="240" viewBox="0 0 704 240" version="1.1">
|
||||||
>
|
|
||||||
<svg
|
|
||||||
class="recharts-surface"
|
|
||||||
width="704"
|
|
||||||
height="240"
|
|
||||||
viewBox="0 0 704 240"
|
|
||||||
version="1.1"
|
|
||||||
>
|
|
||||||
<defs>
|
<defs>
|
||||||
<clipPath id="recharts3-clip">
|
<clipPath id="recharts3-clip">
|
||||||
<rect x="40" y="10" height="190" width="654" />
|
<rect x="40" y="10" height="190" width="654"></rect>
|
||||||
</clipPath>
|
</clipPath>
|
||||||
</defs>
|
</defs>
|
||||||
<g
|
<g class="recharts-layer recharts-cartesian-axis recharts-xAxis xAxis">
|
||||||
class="recharts-layer recharts-cartesian-axis recharts-xAxis xAxis"
|
|
||||||
>
|
|
||||||
<g class="recharts-cartesian-axis-ticks">
|
<g class="recharts-cartesian-axis-ticks">
|
||||||
<g class="recharts-layer recharts-cartesian-axis-tick"
|
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30" x="67.25"
|
||||||
><text
|
y="208" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value"
|
||||||
width="654"
|
text-anchor="middle">
|
||||||
height="30"
|
|
||||||
x="67.25"
|
|
||||||
y="208"
|
|
||||||
stroke="none"
|
|
||||||
fill="#666"
|
|
||||||
class="recharts-text recharts-cartesian-axis-tick-value"
|
|
||||||
text-anchor="middle"
|
|
||||||
>
|
|
||||||
<tspan x="67.25" dy="0.71em">Jan</tspan>
|
<tspan x="67.25" dy="0.71em">Jan</tspan>
|
||||||
</text></g
|
</text></g>
|
||||||
>
|
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
|
||||||
<g class="recharts-layer recharts-cartesian-axis-tick"
|
x="121.75" y="208" stroke="none" fill="#666"
|
||||||
><text
|
class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
|
||||||
width="654"
|
|
||||||
height="30"
|
|
||||||
x="121.75"
|
|
||||||
y="208"
|
|
||||||
stroke="none"
|
|
||||||
fill="#666"
|
|
||||||
class="recharts-text recharts-cartesian-axis-tick-value"
|
|
||||||
text-anchor="middle"
|
|
||||||
>
|
|
||||||
<tspan x="121.75" dy="0.71em">Feb</tspan>
|
<tspan x="121.75" dy="0.71em">Feb</tspan>
|
||||||
</text></g
|
</text></g>
|
||||||
>
|
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
|
||||||
<g class="recharts-layer recharts-cartesian-axis-tick"
|
x="176.25" y="208" stroke="none" fill="#666"
|
||||||
><text
|
class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
|
||||||
width="654"
|
|
||||||
height="30"
|
|
||||||
x="176.25"
|
|
||||||
y="208"
|
|
||||||
stroke="none"
|
|
||||||
fill="#666"
|
|
||||||
class="recharts-text recharts-cartesian-axis-tick-value"
|
|
||||||
text-anchor="middle"
|
|
||||||
>
|
|
||||||
<tspan x="176.25" dy="0.71em">Mar</tspan>
|
<tspan x="176.25" dy="0.71em">Mar</tspan>
|
||||||
</text></g
|
</text></g>
|
||||||
>
|
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
|
||||||
<g class="recharts-layer recharts-cartesian-axis-tick"
|
x="230.75" y="208" stroke="none" fill="#666"
|
||||||
><text
|
class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
|
||||||
width="654"
|
|
||||||
height="30"
|
|
||||||
x="230.75"
|
|
||||||
y="208"
|
|
||||||
stroke="none"
|
|
||||||
fill="#666"
|
|
||||||
class="recharts-text recharts-cartesian-axis-tick-value"
|
|
||||||
text-anchor="middle"
|
|
||||||
>
|
|
||||||
<tspan x="230.75" dy="0.71em">Apr</tspan>
|
<tspan x="230.75" dy="0.71em">Apr</tspan>
|
||||||
</text></g
|
</text></g>
|
||||||
>
|
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
|
||||||
<g class="recharts-layer recharts-cartesian-axis-tick"
|
x="285.25" y="208" stroke="none" fill="#666"
|
||||||
><text
|
class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
|
||||||
width="654"
|
|
||||||
height="30"
|
|
||||||
x="285.25"
|
|
||||||
y="208"
|
|
||||||
stroke="none"
|
|
||||||
fill="#666"
|
|
||||||
class="recharts-text recharts-cartesian-axis-tick-value"
|
|
||||||
text-anchor="middle"
|
|
||||||
>
|
|
||||||
<tspan x="285.25" dy="0.71em">May</tspan>
|
<tspan x="285.25" dy="0.71em">May</tspan>
|
||||||
</text></g
|
</text></g>
|
||||||
>
|
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
|
||||||
<g class="recharts-layer recharts-cartesian-axis-tick"
|
x="339.75" y="208" stroke="none" fill="#666"
|
||||||
><text
|
class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
|
||||||
width="654"
|
|
||||||
height="30"
|
|
||||||
x="339.75"
|
|
||||||
y="208"
|
|
||||||
stroke="none"
|
|
||||||
fill="#666"
|
|
||||||
class="recharts-text recharts-cartesian-axis-tick-value"
|
|
||||||
text-anchor="middle"
|
|
||||||
>
|
|
||||||
<tspan x="339.75" dy="0.71em">Jun</tspan>
|
<tspan x="339.75" dy="0.71em">Jun</tspan>
|
||||||
</text></g
|
</text></g>
|
||||||
>
|
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
|
||||||
<g class="recharts-layer recharts-cartesian-axis-tick"
|
x="394.25" y="208" stroke="none" fill="#666"
|
||||||
><text
|
class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
|
||||||
width="654"
|
|
||||||
height="30"
|
|
||||||
x="394.25"
|
|
||||||
y="208"
|
|
||||||
stroke="none"
|
|
||||||
fill="#666"
|
|
||||||
class="recharts-text recharts-cartesian-axis-tick-value"
|
|
||||||
text-anchor="middle"
|
|
||||||
>
|
|
||||||
<tspan x="394.25" dy="0.71em">Jul</tspan>
|
<tspan x="394.25" dy="0.71em">Jul</tspan>
|
||||||
</text></g
|
</text></g>
|
||||||
>
|
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
|
||||||
<g class="recharts-layer recharts-cartesian-axis-tick"
|
x="448.75" y="208" stroke="none" fill="#666"
|
||||||
><text
|
class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
|
||||||
width="654"
|
|
||||||
height="30"
|
|
||||||
x="448.75"
|
|
||||||
y="208"
|
|
||||||
stroke="none"
|
|
||||||
fill="#666"
|
|
||||||
class="recharts-text recharts-cartesian-axis-tick-value"
|
|
||||||
text-anchor="middle"
|
|
||||||
>
|
|
||||||
<tspan x="448.75" dy="0.71em">Aug</tspan>
|
<tspan x="448.75" dy="0.71em">Aug</tspan>
|
||||||
</text></g
|
</text></g>
|
||||||
>
|
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
|
||||||
<g class="recharts-layer recharts-cartesian-axis-tick"
|
x="503.25" y="208" stroke="none" fill="#666"
|
||||||
><text
|
class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
|
||||||
width="654"
|
|
||||||
height="30"
|
|
||||||
x="503.25"
|
|
||||||
y="208"
|
|
||||||
stroke="none"
|
|
||||||
fill="#666"
|
|
||||||
class="recharts-text recharts-cartesian-axis-tick-value"
|
|
||||||
text-anchor="middle"
|
|
||||||
>
|
|
||||||
<tspan x="503.25" dy="0.71em">Sep</tspan>
|
<tspan x="503.25" dy="0.71em">Sep</tspan>
|
||||||
</text></g
|
</text></g>
|
||||||
>
|
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
|
||||||
<g class="recharts-layer recharts-cartesian-axis-tick"
|
x="557.75" y="208" stroke="none" fill="#666"
|
||||||
><text
|
class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
|
||||||
width="654"
|
|
||||||
height="30"
|
|
||||||
x="557.75"
|
|
||||||
y="208"
|
|
||||||
stroke="none"
|
|
||||||
fill="#666"
|
|
||||||
class="recharts-text recharts-cartesian-axis-tick-value"
|
|
||||||
text-anchor="middle"
|
|
||||||
>
|
|
||||||
<tspan x="557.75" dy="0.71em">Oct</tspan>
|
<tspan x="557.75" dy="0.71em">Oct</tspan>
|
||||||
</text></g
|
</text></g>
|
||||||
>
|
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
|
||||||
<g class="recharts-layer recharts-cartesian-axis-tick"
|
x="612.25" y="208" stroke="none" fill="#666"
|
||||||
><text
|
class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
|
||||||
width="654"
|
|
||||||
height="30"
|
|
||||||
x="612.25"
|
|
||||||
y="208"
|
|
||||||
stroke="none"
|
|
||||||
fill="#666"
|
|
||||||
class="recharts-text recharts-cartesian-axis-tick-value"
|
|
||||||
text-anchor="middle"
|
|
||||||
>
|
|
||||||
<tspan x="612.25" dy="0.71em">Nov</tspan>
|
<tspan x="612.25" dy="0.71em">Nov</tspan>
|
||||||
</text></g
|
</text></g>
|
||||||
>
|
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
|
||||||
<g class="recharts-layer recharts-cartesian-axis-tick"
|
x="666.75" y="208" stroke="none" fill="#666"
|
||||||
><text
|
class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
|
||||||
width="654"
|
|
||||||
height="30"
|
|
||||||
x="666.75"
|
|
||||||
y="208"
|
|
||||||
stroke="none"
|
|
||||||
fill="#666"
|
|
||||||
class="recharts-text recharts-cartesian-axis-tick-value"
|
|
||||||
text-anchor="middle"
|
|
||||||
>
|
|
||||||
<tspan x="666.75" dy="0.71em">Dec</tspan>
|
<tspan x="666.75" dy="0.71em">Dec</tspan>
|
||||||
</text></g
|
</text></g>
|
||||||
>
|
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
<g
|
<g class="recharts-layer recharts-cartesian-axis recharts-yAxis yAxis">
|
||||||
class="recharts-layer recharts-cartesian-axis recharts-yAxis yAxis"
|
|
||||||
>
|
|
||||||
<g class="recharts-cartesian-axis-ticks">
|
<g class="recharts-cartesian-axis-ticks">
|
||||||
<g class="recharts-layer recharts-cartesian-axis-tick"
|
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="30" height="190" x="32"
|
||||||
><text
|
y="200" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value"
|
||||||
width="30"
|
text-anchor="end">
|
||||||
height="190"
|
|
||||||
x="32"
|
|
||||||
y="200"
|
|
||||||
stroke="none"
|
|
||||||
fill="#666"
|
|
||||||
class="recharts-text recharts-cartesian-axis-tick-value"
|
|
||||||
text-anchor="end"
|
|
||||||
>
|
|
||||||
<tspan x="32" dy="0.355em">0</tspan>
|
<tspan x="32" dy="0.355em">0</tspan>
|
||||||
</text></g
|
</text></g>
|
||||||
>
|
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="30" height="190" x="32"
|
||||||
<g class="recharts-layer recharts-cartesian-axis-tick"
|
y="152.5" stroke="none" fill="#666"
|
||||||
><text
|
class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end">
|
||||||
width="30"
|
|
||||||
height="190"
|
|
||||||
x="32"
|
|
||||||
y="152.5"
|
|
||||||
stroke="none"
|
|
||||||
fill="#666"
|
|
||||||
class="recharts-text recharts-cartesian-axis-tick-value"
|
|
||||||
text-anchor="end"
|
|
||||||
>
|
|
||||||
<tspan x="32" dy="0.355em">65</tspan>
|
<tspan x="32" dy="0.355em">65</tspan>
|
||||||
</text></g
|
</text></g>
|
||||||
>
|
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="30" height="190" x="32"
|
||||||
<g class="recharts-layer recharts-cartesian-axis-tick"
|
y="105" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value"
|
||||||
><text
|
text-anchor="end">
|
||||||
width="30"
|
|
||||||
height="190"
|
|
||||||
x="32"
|
|
||||||
y="105"
|
|
||||||
stroke="none"
|
|
||||||
fill="#666"
|
|
||||||
class="recharts-text recharts-cartesian-axis-tick-value"
|
|
||||||
text-anchor="end"
|
|
||||||
>
|
|
||||||
<tspan x="32" dy="0.355em">130</tspan>
|
<tspan x="32" dy="0.355em">130</tspan>
|
||||||
</text></g
|
</text></g>
|
||||||
>
|
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="30" height="190" x="32"
|
||||||
<g class="recharts-layer recharts-cartesian-axis-tick"
|
y="57.5" stroke="none" fill="#666"
|
||||||
><text
|
class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end">
|
||||||
width="30"
|
|
||||||
height="190"
|
|
||||||
x="32"
|
|
||||||
y="57.5"
|
|
||||||
stroke="none"
|
|
||||||
fill="#666"
|
|
||||||
class="recharts-text recharts-cartesian-axis-tick-value"
|
|
||||||
text-anchor="end"
|
|
||||||
>
|
|
||||||
<tspan x="32" dy="0.355em">195</tspan>
|
<tspan x="32" dy="0.355em">195</tspan>
|
||||||
</text></g
|
</text></g>
|
||||||
>
|
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="30" height="190" x="32"
|
||||||
<g class="recharts-layer recharts-cartesian-axis-tick"
|
y="10" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value"
|
||||||
><text
|
text-anchor="end">
|
||||||
width="30"
|
|
||||||
height="190"
|
|
||||||
x="32"
|
|
||||||
y="10"
|
|
||||||
stroke="none"
|
|
||||||
fill="#666"
|
|
||||||
class="recharts-text recharts-cartesian-axis-tick-value"
|
|
||||||
text-anchor="end"
|
|
||||||
>
|
|
||||||
<tspan x="32" dy="0.355em">260</tspan>
|
<tspan x="32" dy="0.355em">260</tspan>
|
||||||
</text></g
|
</text></g>
|
||||||
>
|
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
<g class="recharts-layer recharts-bar">
|
<g class="recharts-layer recharts-bar">
|
||||||
<g class="recharts-layer recharts-bar-rectangles">
|
<g class="recharts-layer recharts-bar-rectangles">
|
||||||
<g class="recharts-layer">
|
<g class="recharts-layer">
|
||||||
<g class="recharts-layer recharts-bar-rectangle">
|
<g class="recharts-layer recharts-bar-rectangle">
|
||||||
<path
|
<path fill="#90caf9" width="10" height="119.11538461538461" x="55" y="80.88461538461539"
|
||||||
fill="#90caf9"
|
radius="0" class="recharts-rectangle"
|
||||||
width="10"
|
d="M 55,80.88461538461539 h 10 v 119.11538461538461 h -10 Z"></path>
|
||||||
height="119.11538461538461"
|
|
||||||
x="55"
|
|
||||||
y="80.88461538461539"
|
|
||||||
radius="0"
|
|
||||||
class="recharts-rectangle"
|
|
||||||
d="M 55,80.88461538461539 h 10 v 119.11538461538461 h -10 Z"
|
|
||||||
/>
|
|
||||||
</g>
|
</g>
|
||||||
<g class="recharts-layer recharts-bar-rectangle">
|
<g class="recharts-layer recharts-bar-rectangle">
|
||||||
<path
|
<path fill="#90caf9" width="10" height="95" x="109.5" y="105" radius="0"
|
||||||
fill="#90caf9"
|
class="recharts-rectangle" d="M 109.5,105 h 10 v 95 h -10 Z"></path>
|
||||||
width="10"
|
|
||||||
height="95"
|
|
||||||
x="109.5"
|
|
||||||
y="105"
|
|
||||||
radius="0"
|
|
||||||
class="recharts-rectangle"
|
|
||||||
d="M 109.5,105 h 10 v 95 h -10 Z"
|
|
||||||
/>
|
|
||||||
</g>
|
</g>
|
||||||
<g class="recharts-layer recharts-bar-rectangle">
|
<g class="recharts-layer recharts-bar-rectangle">
|
||||||
<path
|
<path fill="#90caf9" width="10" height="122.03846153846155" x="164" y="77.96153846153845"
|
||||||
fill="#90caf9"
|
radius="0" class="recharts-rectangle"
|
||||||
width="10"
|
d="M 164,77.96153846153845 h 10 v 122.03846153846155 h -10 Z"></path>
|
||||||
height="122.03846153846155"
|
|
||||||
x="164"
|
|
||||||
y="77.96153846153845"
|
|
||||||
radius="0"
|
|
||||||
class="recharts-rectangle"
|
|
||||||
d="M 164,77.96153846153845 h 10 v 122.03846153846155 h -10 Z"
|
|
||||||
/>
|
|
||||||
</g>
|
</g>
|
||||||
<g class="recharts-layer recharts-bar-rectangle">
|
<g class="recharts-layer recharts-bar-rectangle">
|
||||||
<path
|
<path fill="#90caf9" width="10" height="81.11538461538461" x="218.5"
|
||||||
fill="#90caf9"
|
y="118.88461538461539" radius="0" class="recharts-rectangle"
|
||||||
width="10"
|
d="M 218.5,118.88461538461539 h 10 v 81.11538461538461 h -10 Z"></path>
|
||||||
height="81.11538461538461"
|
|
||||||
x="218.5"
|
|
||||||
y="118.88461538461539"
|
|
||||||
radius="0"
|
|
||||||
class="recharts-rectangle"
|
|
||||||
d="M 218.5,118.88461538461539 h 10 v 81.11538461538461 h -10 Z"
|
|
||||||
/>
|
|
||||||
</g>
|
</g>
|
||||||
<g class="recharts-layer recharts-bar-rectangle">
|
<g class="recharts-layer recharts-bar-rectangle">
|
||||||
<path
|
<path fill="#90caf9" width="10" height="114" x="273" y="86" radius="0"
|
||||||
fill="#90caf9"
|
class="recharts-rectangle" d="M 273,86 h 10 v 114 h -10 Z"></path>
|
||||||
width="10"
|
|
||||||
height="114"
|
|
||||||
x="273"
|
|
||||||
y="86"
|
|
||||||
radius="0"
|
|
||||||
class="recharts-rectangle"
|
|
||||||
d="M 273,86 h 10 v 114 h -10 Z"
|
|
||||||
/>
|
|
||||||
</g>
|
</g>
|
||||||
<g class="recharts-layer recharts-bar-rectangle">
|
<g class="recharts-layer recharts-bar-rectangle">
|
||||||
<path
|
<path fill="#90caf9" width="10" height="117.65384615384616" x="327.5"
|
||||||
fill="#90caf9"
|
y="82.34615384615384" radius="0" class="recharts-rectangle"
|
||||||
width="10"
|
d="M 327.5,82.34615384615384 h 10 v 117.65384615384616 h -10 Z"></path>
|
||||||
height="117.65384615384616"
|
|
||||||
x="327.5"
|
|
||||||
y="82.34615384615384"
|
|
||||||
radius="0"
|
|
||||||
class="recharts-rectangle"
|
|
||||||
d="M 327.5,82.34615384615384 h 10 v 117.65384615384616 h -10 Z"
|
|
||||||
/>
|
|
||||||
</g>
|
</g>
|
||||||
<g class="recharts-layer recharts-bar-rectangle">
|
<g class="recharts-layer recharts-bar-rectangle">
|
||||||
<path
|
<path fill="#90caf9" width="10" height="103.76923076923076" x="382" y="96.23076923076924"
|
||||||
fill="#90caf9"
|
radius="0" class="recharts-rectangle"
|
||||||
width="10"
|
d="M 382,96.23076923076924 h 10 v 103.76923076923076 h -10 Z"></path>
|
||||||
height="103.76923076923076"
|
|
||||||
x="382"
|
|
||||||
y="96.23076923076924"
|
|
||||||
radius="0"
|
|
||||||
class="recharts-rectangle"
|
|
||||||
d="M 382,96.23076923076924 h 10 v 103.76923076923076 h -10 Z"
|
|
||||||
/>
|
|
||||||
</g>
|
</g>
|
||||||
<g class="recharts-layer recharts-bar-rectangle">
|
<g class="recharts-layer recharts-bar-rectangle">
|
||||||
<path
|
<path fill="#90caf9" width="10" height="92.80769230769232" x="436.5"
|
||||||
fill="#90caf9"
|
y="107.19230769230768" radius="0" class="recharts-rectangle"
|
||||||
width="10"
|
d="M 436.5,107.19230769230768 h 10 v 92.80769230769232 h -10 Z"></path>
|
||||||
height="92.80769230769232"
|
|
||||||
x="436.5"
|
|
||||||
y="107.19230769230768"
|
|
||||||
radius="0"
|
|
||||||
class="recharts-rectangle"
|
|
||||||
d="M 436.5,107.19230769230768 h 10 v 92.80769230769232 h -10 Z"
|
|
||||||
/>
|
|
||||||
</g>
|
</g>
|
||||||
<g class="recharts-layer recharts-bar-rectangle">
|
<g class="recharts-layer recharts-bar-rectangle">
|
||||||
<path
|
<path fill="#90caf9" width="10" height="92.80769230769232" x="491" y="107.19230769230768"
|
||||||
fill="#90caf9"
|
radius="0" class="recharts-rectangle"
|
||||||
width="10"
|
d="M 491,107.19230769230768 h 10 v 92.80769230769232 h -10 Z"></path>
|
||||||
height="92.80769230769232"
|
|
||||||
x="491"
|
|
||||||
y="107.19230769230768"
|
|
||||||
radius="0"
|
|
||||||
class="recharts-rectangle"
|
|
||||||
d="M 491,107.19230769230768 h 10 v 92.80769230769232 h -10 Z"
|
|
||||||
/>
|
|
||||||
</g>
|
</g>
|
||||||
<g class="recharts-layer recharts-bar-rectangle">
|
<g class="recharts-layer recharts-bar-rectangle">
|
||||||
<path
|
<path fill="#90caf9" width="10" height="127.8846153846154" x="545.5" y="72.1153846153846"
|
||||||
fill="#90caf9"
|
radius="0" class="recharts-rectangle"
|
||||||
width="10"
|
d="M 545.5,72.1153846153846 h 10 v 127.8846153846154 h -10 Z"></path>
|
||||||
height="127.8846153846154"
|
|
||||||
x="545.5"
|
|
||||||
y="72.1153846153846"
|
|
||||||
radius="0"
|
|
||||||
class="recharts-rectangle"
|
|
||||||
d="M 545.5,72.1153846153846 h 10 v 127.8846153846154 h -10 Z"
|
|
||||||
/>
|
|
||||||
</g>
|
</g>
|
||||||
<g class="recharts-layer recharts-bar-rectangle">
|
<g class="recharts-layer recharts-bar-rectangle">
|
||||||
<path
|
<path fill="#90caf9" width="10" height="105.23076923076924" x="600" y="94.76923076923076"
|
||||||
fill="#90caf9"
|
radius="0" class="recharts-rectangle"
|
||||||
width="10"
|
d="M 600,94.76923076923076 h 10 v 105.23076923076924 h -10 Z"></path>
|
||||||
height="105.23076923076924"
|
|
||||||
x="600"
|
|
||||||
y="94.76923076923076"
|
|
||||||
radius="0"
|
|
||||||
class="recharts-rectangle"
|
|
||||||
d="M 600,94.76923076923076 h 10 v 105.23076923076924 h -10 Z"
|
|
||||||
/>
|
|
||||||
</g>
|
</g>
|
||||||
<g class="recharts-layer recharts-bar-rectangle">
|
<g class="recharts-layer recharts-bar-rectangle">
|
||||||
<path
|
<path fill="#90caf9" width="10" height="115.46153846153845" x="654.5"
|
||||||
fill="#90caf9"
|
y="84.53846153846155" radius="0" class="recharts-rectangle"
|
||||||
width="10"
|
d="M 654.5,84.53846153846155 h 10 v 115.46153846153845 h -10 Z"></path>
|
||||||
height="115.46153846153845"
|
|
||||||
x="654.5"
|
|
||||||
y="84.53846153846155"
|
|
||||||
radius="0"
|
|
||||||
class="recharts-rectangle"
|
|
||||||
d="M 654.5,84.53846153846155 h 10 v 115.46153846153845 h -10 Z"
|
|
||||||
/>
|
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
@ -482,161 +207,74 @@
|
|||||||
<g class="recharts-layer recharts-bar-rectangles">
|
<g class="recharts-layer recharts-bar-rectangles">
|
||||||
<g class="recharts-layer">
|
<g class="recharts-layer">
|
||||||
<g class="recharts-layer recharts-bar-rectangle">
|
<g class="recharts-layer recharts-bar-rectangle">
|
||||||
<path
|
<path fill="#1e88e5" width="10" height="112.53846153846155" x="69" y="87.46153846153845"
|
||||||
fill="#1e88e5"
|
radius="0" class="recharts-rectangle"
|
||||||
width="10"
|
d="M 69,87.46153846153845 h 10 v 112.53846153846155 h -10 Z"></path>
|
||||||
height="112.53846153846155"
|
|
||||||
x="69"
|
|
||||||
y="87.46153846153845"
|
|
||||||
radius="0"
|
|
||||||
class="recharts-rectangle"
|
|
||||||
d="M 69,87.46153846153845 h 10 v 112.53846153846155 h -10 Z"
|
|
||||||
/>
|
|
||||||
</g>
|
</g>
|
||||||
<g class="recharts-layer recharts-bar-rectangle">
|
<g class="recharts-layer recharts-bar-rectangle">
|
||||||
<path
|
<path fill="#1e88e5" width="10" height="151.26923076923077" x="123.5"
|
||||||
fill="#1e88e5"
|
y="48.730769230769226" radius="0" class="recharts-rectangle"
|
||||||
width="10"
|
d="M 123.5,48.730769230769226 h 10 v 151.26923076923077 h -10 Z"></path>
|
||||||
height="151.26923076923077"
|
|
||||||
x="123.5"
|
|
||||||
y="48.730769230769226"
|
|
||||||
radius="0"
|
|
||||||
class="recharts-rectangle"
|
|
||||||
d="M 123.5,48.730769230769226 h 10 v 151.26923076923077 h -10 Z"
|
|
||||||
/>
|
|
||||||
</g>
|
</g>
|
||||||
<g class="recharts-layer recharts-bar-rectangle">
|
<g class="recharts-layer recharts-bar-rectangle">
|
||||||
<path
|
<path fill="#1e88e5" width="10" height="181.23076923076923" x="178" y="18.769230769230774"
|
||||||
fill="#1e88e5"
|
radius="0" class="recharts-rectangle"
|
||||||
width="10"
|
d="M 178,18.769230769230774 h 10 v 181.23076923076923 h -10 Z"></path>
|
||||||
height="181.23076923076923"
|
|
||||||
x="178"
|
|
||||||
y="18.769230769230774"
|
|
||||||
radius="0"
|
|
||||||
class="recharts-rectangle"
|
|
||||||
d="M 178,18.769230769230774 h 10 v 181.23076923076923 h -10 Z"
|
|
||||||
/>
|
|
||||||
</g>
|
</g>
|
||||||
<g class="recharts-layer recharts-bar-rectangle">
|
<g class="recharts-layer recharts-bar-rectangle">
|
||||||
<path
|
<path fill="#1e88e5" width="10" height="165.8846153846154" x="232.5" y="34.11538461538461"
|
||||||
fill="#1e88e5"
|
radius="0" class="recharts-rectangle"
|
||||||
width="10"
|
d="M 232.5,34.11538461538461 h 10 v 165.8846153846154 h -10 Z"></path>
|
||||||
height="165.8846153846154"
|
|
||||||
x="232.5"
|
|
||||||
y="34.11538461538461"
|
|
||||||
radius="0"
|
|
||||||
class="recharts-rectangle"
|
|
||||||
d="M 232.5,34.11538461538461 h 10 v 165.8846153846154 h -10 Z"
|
|
||||||
/>
|
|
||||||
</g>
|
</g>
|
||||||
<g class="recharts-layer recharts-bar-rectangle">
|
<g class="recharts-layer recharts-bar-rectangle">
|
||||||
<path
|
<path fill="#1e88e5" width="10" height="156.38461538461536" x="287" y="43.61538461538464"
|
||||||
fill="#1e88e5"
|
radius="0" class="recharts-rectangle"
|
||||||
width="10"
|
d="M 287,43.61538461538464 h 10 v 156.38461538461536 h -10 Z"></path>
|
||||||
height="156.38461538461536"
|
|
||||||
x="287"
|
|
||||||
y="43.61538461538464"
|
|
||||||
radius="0"
|
|
||||||
class="recharts-rectangle"
|
|
||||||
d="M 287,43.61538461538464 h 10 v 156.38461538461536 h -10 Z"
|
|
||||||
/>
|
|
||||||
</g>
|
</g>
|
||||||
<g class="recharts-layer recharts-bar-rectangle">
|
<g class="recharts-layer recharts-bar-rectangle">
|
||||||
<path
|
<path fill="#1e88e5" width="10" height="118.38461538461539" x="341.5"
|
||||||
fill="#1e88e5"
|
y="81.61538461538461" radius="0" class="recharts-rectangle"
|
||||||
width="10"
|
d="M 341.5,81.61538461538461 h 10 v 118.38461538461539 h -10 Z"></path>
|
||||||
height="118.38461538461539"
|
|
||||||
x="341.5"
|
|
||||||
y="81.61538461538461"
|
|
||||||
radius="0"
|
|
||||||
class="recharts-rectangle"
|
|
||||||
d="M 341.5,81.61538461538461 h 10 v 118.38461538461539 h -10 Z"
|
|
||||||
/>
|
|
||||||
</g>
|
</g>
|
||||||
<g class="recharts-layer recharts-bar-rectangle">
|
<g class="recharts-layer recharts-bar-rectangle">
|
||||||
<path
|
<path fill="#1e88e5" width="10" height="138.84615384615384" x="396" y="61.15384615384616"
|
||||||
fill="#1e88e5"
|
radius="0" class="recharts-rectangle"
|
||||||
width="10"
|
d="M 396,61.15384615384616 h 10 v 138.84615384615384 h -10 Z"></path>
|
||||||
height="138.84615384615384"
|
|
||||||
x="396"
|
|
||||||
y="61.15384615384616"
|
|
||||||
radius="0"
|
|
||||||
class="recharts-rectangle"
|
|
||||||
d="M 396,61.15384615384616 h 10 v 138.84615384615384 h -10 Z"
|
|
||||||
/>
|
|
||||||
</g>
|
</g>
|
||||||
<g class="recharts-layer recharts-bar-rectangle">
|
<g class="recharts-layer recharts-bar-rectangle">
|
||||||
<path
|
<path fill="#1e88e5" width="10" height="175.3846153846154" x="450.5"
|
||||||
fill="#1e88e5"
|
y="24.615384615384613" radius="0" class="recharts-rectangle"
|
||||||
width="10"
|
d="M 450.5,24.615384615384613 h 10 v 175.3846153846154 h -10 Z"></path>
|
||||||
height="175.3846153846154"
|
|
||||||
x="450.5"
|
|
||||||
y="24.615384615384613"
|
|
||||||
radius="0"
|
|
||||||
class="recharts-rectangle"
|
|
||||||
d="M 450.5,24.615384615384613 h 10 v 175.3846153846154 h -10 Z"
|
|
||||||
/>
|
|
||||||
</g>
|
</g>
|
||||||
<g class="recharts-layer recharts-bar-rectangle">
|
<g class="recharts-layer recharts-bar-rectangle">
|
||||||
<path
|
<path fill="#1e88e5" width="10" height="155.65384615384613" x="505" y="44.34615384615387"
|
||||||
fill="#1e88e5"
|
radius="0" class="recharts-rectangle"
|
||||||
width="10"
|
d="M 505,44.34615384615387 h 10 v 155.65384615384613 h -10 Z"></path>
|
||||||
height="155.65384615384613"
|
|
||||||
x="505"
|
|
||||||
y="44.34615384615387"
|
|
||||||
radius="0"
|
|
||||||
class="recharts-rectangle"
|
|
||||||
d="M 505,44.34615384615387 h 10 v 155.65384615384613 h -10 Z"
|
|
||||||
/>
|
|
||||||
</g>
|
</g>
|
||||||
<g class="recharts-layer recharts-bar-rectangle">
|
<g class="recharts-layer recharts-bar-rectangle">
|
||||||
<path
|
<path fill="#1e88e5" width="10" height="179.76923076923077" x="559.5"
|
||||||
fill="#1e88e5"
|
y="20.230769230769226" radius="0" class="recharts-rectangle"
|
||||||
width="10"
|
d="M 559.5,20.230769230769226 h 10 v 179.76923076923077 h -10 Z"></path>
|
||||||
height="179.76923076923077"
|
|
||||||
x="559.5"
|
|
||||||
y="20.230769230769226"
|
|
||||||
radius="0"
|
|
||||||
class="recharts-rectangle"
|
|
||||||
d="M 559.5,20.230769230769226 h 10 v 179.76923076923077 h -10 Z"
|
|
||||||
/>
|
|
||||||
</g>
|
</g>
|
||||||
<g class="recharts-layer recharts-bar-rectangle">
|
<g class="recharts-layer recharts-bar-rectangle">
|
||||||
<path
|
<path fill="#1e88e5" width="10" height="173.19230769230768" x="614" y="26.80769230769232"
|
||||||
fill="#1e88e5"
|
radius="0" class="recharts-rectangle"
|
||||||
width="10"
|
d="M 614,26.80769230769232 h 10 v 173.19230769230768 h -10 Z"></path>
|
||||||
height="173.19230769230768"
|
|
||||||
x="614"
|
|
||||||
y="26.80769230769232"
|
|
||||||
radius="0"
|
|
||||||
class="recharts-rectangle"
|
|
||||||
d="M 614,26.80769230769232 h 10 v 173.19230769230768 h -10 Z"
|
|
||||||
/>
|
|
||||||
</g>
|
</g>
|
||||||
<g class="recharts-layer recharts-bar-rectangle">
|
<g class="recharts-layer recharts-bar-rectangle">
|
||||||
<path
|
<path fill="#1e88e5" width="10" height="146.15384615384616" x="668.5"
|
||||||
fill="#1e88e5"
|
y="53.84615384615384" radius="0" class="recharts-rectangle"
|
||||||
width="10"
|
d="M 668.5,53.84615384615384 h 10 v 146.15384615384616 h -10 Z"></path>
|
||||||
height="146.15384615384616"
|
|
||||||
x="668.5"
|
|
||||||
y="53.84615384615384"
|
|
||||||
radius="0"
|
|
||||||
class="recharts-rectangle"
|
|
||||||
d="M 668.5,53.84615384615384 h 10 v 146.15384615384616 h -10 Z"
|
|
||||||
/>
|
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
<div
|
<div class="recharts-tooltip-wrapper"
|
||||||
class="recharts-tooltip-wrapper"
|
style="pointer-events: none; visibility: hidden; position: absolute; top: 0px; transform: translate(538.875px, 126px);">
|
||||||
style="pointer-events: none; visibility: hidden; position: absolute; top: 0px; transform: translate(538.875px, 126px);"
|
</div>
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div style="position:absolute;width:0;height:0;visibility:hidden;display:none"></div>
|
||||||
style="position:absolute;width:0;height:0;visibility:hidden;display:none"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,18 +1,15 @@
|
|||||||
<!-- This example requires Tailwind CSS v2.0+ -->
|
<!-- This example requires Tailwind CSS v2.0+ -->
|
||||||
<div
|
<div
|
||||||
class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6"
|
class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
|
||||||
>
|
|
||||||
<div class="flex-1 flex justify-between sm:hidden">
|
<div class="flex-1 flex justify-between sm:hidden">
|
||||||
<a
|
<a
|
||||||
href="#"
|
href="#"
|
||||||
class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:text-gray-500"
|
class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:text-gray-500">
|
||||||
>
|
|
||||||
Previous
|
Previous
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
href="#"
|
href="#"
|
||||||
class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:text-gray-500"
|
class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:text-gray-500">
|
||||||
>
|
|
||||||
Next
|
Next
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
@ -31,12 +28,10 @@
|
|||||||
<div>
|
<div>
|
||||||
<nav
|
<nav
|
||||||
class="relative z-0 inline-flex shadow-sm -space-x-px"
|
class="relative z-0 inline-flex shadow-sm -space-x-px"
|
||||||
aria-label="Pagination"
|
aria-label="Pagination">
|
||||||
>
|
|
||||||
<a
|
<a
|
||||||
href="#"
|
href="#"
|
||||||
class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
|
class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
|
||||||
>
|
|
||||||
<span class="sr-only">Previous</span>
|
<span class="sr-only">Previous</span>
|
||||||
<!-- Heroicon name: chevron-left -->
|
<!-- Heroicon name: chevron-left -->
|
||||||
<svg
|
<svg
|
||||||
@ -44,60 +39,50 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 20 20"
|
viewBox="0 0 20 20"
|
||||||
fill="currentColor"
|
fill="currentColor"
|
||||||
aria-hidden="true"
|
aria-hidden="true">
|
||||||
>
|
|
||||||
<path
|
<path
|
||||||
fill-rule="evenodd"
|
fill-rule="evenodd"
|
||||||
d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
|
d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
|
||||||
clip-rule="evenodd"
|
clip-rule="evenodd" />
|
||||||
/>
|
|
||||||
</svg>
|
</svg>
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
href="#"
|
href="#"
|
||||||
class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50"
|
class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
|
||||||
>
|
|
||||||
1
|
1
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
href="#"
|
href="#"
|
||||||
class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50"
|
class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
|
||||||
>
|
|
||||||
2
|
2
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
href="#"
|
href="#"
|
||||||
class="hidden md:inline-flex relative items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50"
|
class="hidden md:inline-flex relative items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
|
||||||
>
|
|
||||||
3
|
3
|
||||||
</a>
|
</a>
|
||||||
<span
|
<span
|
||||||
class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700"
|
class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">
|
||||||
>
|
|
||||||
...
|
...
|
||||||
</span>
|
</span>
|
||||||
<a
|
<a
|
||||||
href="#"
|
href="#"
|
||||||
class="hidden md:inline-flex relative items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50"
|
class="hidden md:inline-flex relative items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
|
||||||
>
|
|
||||||
8
|
8
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
href="#"
|
href="#"
|
||||||
class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50"
|
class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
|
||||||
>
|
|
||||||
9
|
9
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
href="#"
|
href="#"
|
||||||
class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50"
|
class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
|
||||||
>
|
|
||||||
10
|
10
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
href="#"
|
href="#"
|
||||||
class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
|
class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
|
||||||
>
|
|
||||||
<span class="sr-only">Next</span>
|
<span class="sr-only">Next</span>
|
||||||
<!-- Heroicon name: chevron-right -->
|
<!-- Heroicon name: chevron-right -->
|
||||||
<svg
|
<svg
|
||||||
@ -105,13 +90,11 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 20 20"
|
viewBox="0 0 20 20"
|
||||||
fill="currentColor"
|
fill="currentColor"
|
||||||
aria-hidden="true"
|
aria-hidden="true">
|
||||||
>
|
|
||||||
<path
|
<path
|
||||||
fill-rule="evenodd"
|
fill-rule="evenodd"
|
||||||
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
|
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
|
||||||
clip-rule="evenodd"
|
clip-rule="evenodd" />
|
||||||
/>
|
|
||||||
</svg>
|
</svg>
|
||||||
</a>
|
</a>
|
||||||
</nav>
|
</nav>
|
||||||
|
|||||||
@ -7,14 +7,14 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="w-full p-4 mb-4 rounded-lg bg-white border border-grey-100">
|
<div
|
||||||
|
class="w-full p-4 mb-4 rounded-lg bg-white border border-grey-100">
|
||||||
<div class="flex flex-row items-center justify-start p-4">
|
<div class="flex flex-row items-center justify-start p-4">
|
||||||
<div class="flex-shrink-0 w-24">
|
<div class="flex-shrink-0 w-24">
|
||||||
<img
|
<img
|
||||||
src="/images/faces/m1.png"
|
src="/images/faces/m1.png"
|
||||||
alt="media"
|
alt="media"
|
||||||
class="shadow rounded-full h-20 w-20 shadow-outline mb-2"
|
class="shadow rounded-full h-20 w-20 shadow-outline mb-2" />
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="py-2 px-2">
|
<div class="py-2 px-2">
|
||||||
<p class="text-base font-bold whitespace-no-wrap">Lucas Smith</p>
|
<p class="text-base font-bold whitespace-no-wrap">Lucas Smith</p>
|
||||||
@ -22,8 +22,7 @@
|
|||||||
Vital Database Dude
|
Vital Database Dude
|
||||||
</p>
|
</p>
|
||||||
<div
|
<div
|
||||||
class="flex flex-row items-center justify-start w-full py-1 space-x-2"
|
class="flex flex-row items-center justify-start w-full py-1 space-x-2">
|
||||||
>
|
|
||||||
<svg
|
<svg
|
||||||
stroke="currentColor"
|
stroke="currentColor"
|
||||||
fill="none"
|
fill="none"
|
||||||
@ -34,11 +33,8 @@
|
|||||||
class="stroke-current text-xl text-twitter"
|
class="stroke-current text-xl text-twitter"
|
||||||
height="1em"
|
height="1em"
|
||||||
width="1em"
|
width="1em"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"><path
|
||||||
><path
|
d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z" /></svg><svg
|
||||||
d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"
|
|
||||||
/></svg
|
|
||||||
><svg
|
|
||||||
stroke="currentColor"
|
stroke="currentColor"
|
||||||
fill="none"
|
fill="none"
|
||||||
stroke-width="2"
|
stroke-width="2"
|
||||||
@ -48,11 +44,8 @@
|
|||||||
class="stroke-current text-xl text-facebook"
|
class="stroke-current text-xl text-facebook"
|
||||||
height="1em"
|
height="1em"
|
||||||
width="1em"
|
width="1em"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"><path
|
||||||
><path
|
d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" /></svg><svg
|
||||||
d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"
|
|
||||||
/></svg
|
|
||||||
><svg
|
|
||||||
stroke="currentColor"
|
stroke="currentColor"
|
||||||
fill="none"
|
fill="none"
|
||||||
stroke-width="2"
|
stroke-width="2"
|
||||||
@ -62,21 +55,21 @@
|
|||||||
class="stroke-current text-xl text-instagram"
|
class="stroke-current text-xl text-instagram"
|
||||||
height="1em"
|
height="1em"
|
||||||
width="1em"
|
width="1em"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"><rect
|
||||||
><rect x="2" y="2" width="20" height="20" rx="5" ry="5" />
|
x="2"
|
||||||
|
y="2"
|
||||||
|
width="20"
|
||||||
|
height="20"
|
||||||
|
rx="5"
|
||||||
|
ry="5" />
|
||||||
<path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
|
<path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
|
||||||
<line x1="17.5" y1="6.5" x2="17.5" y2="6.5" /></svg
|
<line x1="17.5" y1="6.5" x2="17.5" y2="6.5" /></svg>
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="ml-auto flex-shrink-0 space-x-2 hidden lg:flex">
|
<div class="ml-auto flex-shrink-0 space-x-2 hidden lg:flex">
|
||||||
<button
|
<button
|
||||||
class="btn btn-default btn-rounded bg-blue-500 hover:bg-blue-600 text-white"
|
class="btn btn-default btn-rounded bg-blue-500 hover:bg-blue-600 text-white">Subscribe</button><button
|
||||||
>Subscribe</button
|
class="btn btn-default btn-rounded bg-blue-500 hover:bg-blue-600 text-white">Follow</button>
|
||||||
><button
|
|
||||||
class="btn btn-default btn-rounded bg-blue-500 hover:bg-blue-600 text-white"
|
|
||||||
>Follow</button
|
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-wrap">
|
<div class="flex flex-wrap">
|
||||||
@ -84,19 +77,14 @@
|
|||||||
<div class="flex flex-wrap flex-col w-full tabs">
|
<div class="flex flex-wrap flex-col w-full tabs">
|
||||||
<div class="flex lg:flex-wrap flex-row lg:space-x-2">
|
<div class="flex lg:flex-wrap flex-row lg:space-x-2">
|
||||||
<div class="flex-none">
|
<div class="flex-none">
|
||||||
<button class="tab tab-underline tab-active" type="button"
|
<button class="tab tab-underline tab-active" type="button">Account
|
||||||
>Account settings</button
|
settings</button>
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="flex-none">
|
<div class="flex-none">
|
||||||
<button class="tab tab-underline" type="button"
|
<button class="tab tab-underline" type="button">Email preferences</button>
|
||||||
>Email preferences</button
|
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="flex-none">
|
<div class="flex-none">
|
||||||
<button class="tab tab-underline" type="button"
|
<button class="tab tab-underline" type="button">Security settings</button>
|
||||||
>Security settings</button
|
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="tab-content block">
|
<div class="tab-content block">
|
||||||
@ -105,64 +93,51 @@
|
|||||||
<form class="form flex flex-wrap w-full">
|
<form class="form flex flex-wrap w-full">
|
||||||
<div class="w-full">
|
<div class="w-full">
|
||||||
<div class="form-element">
|
<div class="form-element">
|
||||||
<div class="form-label">First name</div>
|
<div class="form-label">First name</div><input
|
||||||
<input
|
|
||||||
name="first-name"
|
name="first-name"
|
||||||
type="text"
|
type="text"
|
||||||
class="form-input"
|
class="form-input "
|
||||||
placeholder="Enter you first name"
|
placeholder="Enter you first name" />
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="form-element">
|
<div class="form-element">
|
||||||
<div class="form-label">Last name</div>
|
<div class="form-label">Last name</div><input
|
||||||
<input
|
|
||||||
name="last-name"
|
name="last-name"
|
||||||
type="text"
|
type="text"
|
||||||
class="form-input"
|
class="form-input "
|
||||||
placeholder="Enter you last name"
|
placeholder="Enter you last name" />
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="form-element">
|
<div class="form-element">
|
||||||
<div class="form-label">Email address</div>
|
<div class="form-label">Email address</div><input
|
||||||
<input
|
|
||||||
name="email"
|
name="email"
|
||||||
type="email"
|
type="email"
|
||||||
class="form-input"
|
class="form-input "
|
||||||
placeholder="Enter you email address"
|
placeholder="Enter you email address" />
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="form-element">
|
<div class="form-element">
|
||||||
<div class="form-label">Company</div>
|
<div class="form-label">Company</div><input
|
||||||
<input
|
|
||||||
name="company"
|
name="company"
|
||||||
type="text"
|
type="text"
|
||||||
class="form-input"
|
class="form-input "
|
||||||
placeholder="Enter you company"
|
placeholder="Enter you company" />
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="form-element">
|
<div class="form-element">
|
||||||
<div class="form-label">Position</div>
|
<div class="form-label">Position</div><input
|
||||||
<input
|
|
||||||
name="position"
|
name="position"
|
||||||
type="text"
|
type="text"
|
||||||
class="form-input"
|
class="form-input "
|
||||||
placeholder="Enter you position"
|
placeholder="Enter you position" />
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="form-element">
|
<div class="form-element">
|
||||||
<div class="form-label">Language</div>
|
<div class="form-label">Language</div><select
|
||||||
<select name="language" class="form-select"
|
name="language"
|
||||||
><option>Select language</option>
|
class="form-select "><option>Select language</option>
|
||||||
<option value="english">English</option>
|
<option value="english">English</option>
|
||||||
<option value="spanish">Spanish</option>
|
<option value="spanish">Spanish</option>
|
||||||
<option value="portuguese">Portuguese</option></select
|
<option value="portuguese">Portuguese</option></select>
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div><input
|
||||||
<input
|
|
||||||
type="submit"
|
type="submit"
|
||||||
class="btn btn-default bg-blue-500 hover:bg-blue-600 text-white btn-rounded"
|
class="btn btn-default bg-blue-500 hover:bg-blue-600 text-white btn-rounded" />
|
||||||
/>
|
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -173,70 +148,56 @@
|
|||||||
<form class="form flex flex-wrap w-full">
|
<form class="form flex flex-wrap w-full">
|
||||||
<div class="w-full">
|
<div class="w-full">
|
||||||
<div class="form-element">
|
<div class="form-element">
|
||||||
<div class="form-label">Current email</div>
|
<div class="form-label">Current email</div><input
|
||||||
<input
|
|
||||||
name="email"
|
name="email"
|
||||||
type="email"
|
type="email"
|
||||||
class="form-input"
|
class="form-input "
|
||||||
placeholder="Enter you current email address"
|
placeholder="Enter you current email address" />
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="form-element">
|
<div class="form-element">
|
||||||
<div class="form-label">New email</div>
|
<div class="form-label">New email</div><input
|
||||||
<input
|
|
||||||
name="email"
|
name="email"
|
||||||
type="email"
|
type="email"
|
||||||
class="form-input"
|
class="form-input "
|
||||||
placeholder="Enter you new email address"
|
placeholder="Enter you new email address" />
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="form-element">
|
<div class="form-element">
|
||||||
<div class="form-label">Daily updates</div>
|
<div class="form-label">Daily updates</div>
|
||||||
<div class="flex items-center justify-start space-x-2">
|
<div class="flex items-center justify-start space-x-2">
|
||||||
<label class="flex items-center justify-start space-x-2"
|
<label
|
||||||
><input
|
class="flex items-center justify-start space-x-2"><input
|
||||||
type="radio"
|
type="radio"
|
||||||
name="daily-updates"
|
name="daily-updates"
|
||||||
class="form-radio h-4 w-4"
|
class="form-radio h-4 w-4 "
|
||||||
value="yes"
|
value="yes" /><span
|
||||||
/><span class="">Yes</span></label
|
class="">Yes</span></label><label
|
||||||
><label
|
class="flex items-center justify-start space-x-2"><input
|
||||||
class="flex items-center justify-start space-x-2"
|
|
||||||
><input
|
|
||||||
type="radio"
|
type="radio"
|
||||||
name="daily-updates"
|
name="daily-updates"
|
||||||
class="form-radio h-4 w-4"
|
class="form-radio h-4 w-4 "
|
||||||
value="no"
|
value="no" /><span class="">No</span></label>
|
||||||
/><span class="">No</span></label
|
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-element">
|
<div class="form-element">
|
||||||
<div class="form-label">Weekly updates</div>
|
<div class="form-label">Weekly updates</div>
|
||||||
<div class="flex items-center justify-start space-x-2">
|
<div class="flex items-center justify-start space-x-2">
|
||||||
<label class="flex items-center justify-start space-x-2"
|
<label
|
||||||
><input
|
class="flex items-center justify-start space-x-2"><input
|
||||||
type="radio"
|
type="radio"
|
||||||
name="weekle-updates"
|
name="weekle-updates"
|
||||||
class="form-radio h-4 w-4"
|
class="form-radio h-4 w-4 "
|
||||||
value="yes"
|
value="yes" /><span
|
||||||
/><span class="">Yes</span></label
|
class="">Yes</span></label><label
|
||||||
><label
|
class="flex items-center justify-start space-x-2"><input
|
||||||
class="flex items-center justify-start space-x-2"
|
|
||||||
><input
|
|
||||||
type="radio"
|
type="radio"
|
||||||
name="weekle-updates"
|
name="weekle-updates"
|
||||||
class="form-radio h-4 w-4"
|
class="form-radio h-4 w-4 "
|
||||||
value="no"
|
value="no" /><span class="">No</span></label>
|
||||||
/><span class="">No</span></label
|
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div><input
|
||||||
<input
|
|
||||||
type="submit"
|
type="submit"
|
||||||
class="btn btn-default bg-blue-500 hover:bg-blue-600 text-white btn-rounded"
|
class="btn btn-default bg-blue-500 hover:bg-blue-600 text-white btn-rounded" />
|
||||||
/>
|
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -247,37 +208,29 @@
|
|||||||
<form class="form flex flex-wrap w-full">
|
<form class="form flex flex-wrap w-full">
|
||||||
<div class="w-full">
|
<div class="w-full">
|
||||||
<div class="form-element">
|
<div class="form-element">
|
||||||
<div class="form-label">Current password</div>
|
<div class="form-label">Current password</div><input
|
||||||
<input
|
|
||||||
name="current-password"
|
name="current-password"
|
||||||
type="password"
|
type="password"
|
||||||
class="form-input"
|
class="form-input "
|
||||||
placeholder="Enter your current password"
|
placeholder="Enter your current password" />
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="form-element">
|
<div class="form-element">
|
||||||
<div class="form-label">New password</div>
|
<div class="form-label">New password</div><input
|
||||||
<input
|
|
||||||
name="new-password"
|
name="new-password"
|
||||||
type="password"
|
type="password"
|
||||||
class="form-input"
|
class="form-input "
|
||||||
placeholder="Enter your new password"
|
placeholder="Enter your new password" />
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="form-element">
|
<div class="form-element">
|
||||||
<div class="form-label">Confirm new password</div>
|
<div class="form-label">Confirm new password</div><input
|
||||||
<input
|
|
||||||
name="confirm-new-password"
|
name="confirm-new-password"
|
||||||
type="password"
|
type="password"
|
||||||
class="form-input"
|
class="form-input "
|
||||||
placeholder="Enter your new password confirmation"
|
placeholder="Enter your new password confirmation" />
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div><input
|
||||||
<input
|
|
||||||
type="submit"
|
type="submit"
|
||||||
class="btn btn-default bg-blue-500 hover:bg-blue-600 text-white btn-rounded"
|
class="btn btn-default bg-blue-500 hover:bg-blue-600 text-white btn-rounded" />
|
||||||
/>
|
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -3,50 +3,44 @@
|
|||||||
<div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
|
<div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
|
||||||
<div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
|
<div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
|
||||||
<div
|
<div
|
||||||
class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg"
|
class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
|
||||||
>
|
|
||||||
<table class="min-w-full divide-y divide-gray-200">
|
<table class="min-w-full divide-y divide-gray-200">
|
||||||
<thead class="bg-gray-50">
|
<thead class="bg-gray-50">
|
||||||
<tr class="odd:bg-white even:bg-gray-100">
|
<tr>
|
||||||
<th
|
<th
|
||||||
scope="col"
|
scope="col"
|
||||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
>
|
|
||||||
Name
|
Name
|
||||||
</th>
|
</th>
|
||||||
<th
|
<th
|
||||||
scope="col"
|
scope="col"
|
||||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
>
|
|
||||||
Title
|
Title
|
||||||
</th>
|
</th>
|
||||||
<th
|
<th
|
||||||
scope="col"
|
scope="col"
|
||||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
>
|
|
||||||
Status
|
Status
|
||||||
</th>
|
</th>
|
||||||
<th
|
<th
|
||||||
scope="col"
|
scope="col"
|
||||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
>
|
|
||||||
Role
|
Role
|
||||||
</th>
|
</th>
|
||||||
<th scope="col" class="relative px-6 py-3">
|
<th scope="col" class="relative px-6 py-3">
|
||||||
<span class="sr-only">{$_("edit")}</span>
|
<span class="sr-only">{$_('edit')}</span>
|
||||||
</th>
|
</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody class="divide-y divide-gray-200">
|
<tbody class="divide-y divide-gray-200">
|
||||||
<tr class="odd:bg-white even:bg-gray-100">
|
<tr>
|
||||||
<td class="px-6 py-4 whitespace-nowrap">
|
<td class="px-6 py-4 whitespace-nowrap">
|
||||||
<div class="flex items-center">
|
<div class="flex items-center">
|
||||||
<div class="flex-shrink-0 h-10 w-10">
|
<div class="flex-shrink-0 h-10 w-10">
|
||||||
<img
|
<img
|
||||||
class="h-10 w-10 rounded-full"
|
class="h-10 w-10 rounded-full"
|
||||||
src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=60"
|
src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=60"
|
||||||
alt=""
|
alt="" />
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="ml-4">
|
<div class="ml-4">
|
||||||
<div class="text-sm font-medium text-gray-900">
|
<div class="text-sm font-medium text-gray-900">
|
||||||
@ -66,8 +60,7 @@
|
|||||||
</td>
|
</td>
|
||||||
<td class="px-6 py-4 whitespace-nowrap">
|
<td class="px-6 py-4 whitespace-nowrap">
|
||||||
<span
|
<span
|
||||||
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"
|
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
|
||||||
>
|
|
||||||
Active
|
Active
|
||||||
</span>
|
</span>
|
||||||
</td>
|
</td>
|
||||||
@ -75,11 +68,10 @@
|
|||||||
Admin
|
Admin
|
||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
|
class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
||||||
>
|
<a
|
||||||
<a href="#" class="text-indigo-600 hover:text-indigo-900"
|
href="#"
|
||||||
>{$_("edit")}</a
|
class="text-indigo-600 hover:text-indigo-900">{$_('edit')}</a>
|
||||||
>
|
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
||||||
|
|||||||
@ -1,23 +1,18 @@
|
|||||||
<h3 class="text-lg">Tabs</h3>
|
<h3 class="text-lg">Tabs</h3>
|
||||||
<div
|
<div
|
||||||
class="w-full flex sm:border-b sm:border-gray-300 relative flex-col sm:flex-row"
|
class="w-full flex sm:border-b sm:border-gray-300 relative flex-col sm:flex-row">
|
||||||
>
|
|
||||||
<div
|
<div
|
||||||
class="flex-1 sm:text-center font-medium pb-3 cursor-pointer hover:text-blue-400 false"
|
class="flex-1 sm:text-center font-medium pb-3 cursor-pointer hover:text-blue-400 false">
|
||||||
>
|
|
||||||
1
|
1
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="flex-1 sm:text-center font-medium pb-3 cursor-pointer hover:text-blue-400 false"
|
class="flex-1 sm:text-center font-medium pb-3 cursor-pointer hover:text-blue-400 false">
|
||||||
>
|
|
||||||
2
|
2
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="flex-1 sm:text-center font-medium pb-3 cursor-pointer hover:text-blue-400 false"
|
class="flex-1 sm:text-center font-medium pb-3 cursor-pointer hover:text-blue-400 false">
|
||||||
>
|
|
||||||
3
|
3
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="hidden sm:block absolute bottom-0 left-0 h-1 bg-blue-400 transition-transform duration-300 ease-out w-1/4 transform translate-x-double"
|
class="hidden sm:block absolute bottom-0 left-0 h-1 bg-blue-400 transition-transform duration-300 ease-out w-1/4 transform translate-x-double" />
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,7 +1,6 @@
|
|||||||
<div>
|
<div>
|
||||||
<div
|
<div
|
||||||
class="text-xs inline-flex items-center font-bold leading-sm uppercase px-3 py-1 bg-blue-200 text-blue-700 rounded-full"
|
class="text-xs inline-flex items-center font-bold leading-sm uppercase px-3 py-1 bg-blue-200 text-blue-700 rounded-full">
|
||||||
>
|
|
||||||
<svg
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
width="16"
|
width="16"
|
||||||
@ -12,8 +11,7 @@
|
|||||||
stroke-width="2"
|
stroke-width="2"
|
||||||
stroke-linecap="round"
|
stroke-linecap="round"
|
||||||
stroke-linejoin="round"
|
stroke-linejoin="round"
|
||||||
class="feather feather-bell-off mr-2"
|
class="feather feather-bell-off mr-2">
|
||||||
>
|
|
||||||
<path d="M13.73 21a2 2 0 0 1-3.46 0" />
|
<path d="M13.73 21a2 2 0 0 1-3.46 0" />
|
||||||
<path d="M18.63 13A17.89 17.89 0 0 1 18 8" />
|
<path d="M18.63 13A17.89 17.89 0 0 1 18 8" />
|
||||||
<path d="M6.26 6.26A5.86 5.86 0 0 0 6 8c0 7-3 9-3 9h14" />
|
<path d="M6.26 6.26A5.86 5.86 0 0 0 6 8c0 7-3 9-3 9h14" />
|
||||||
@ -24,8 +22,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="ml-4 text-xs inline-flex items-center font-bold leading-sm uppercase px-3 py-1 bg-green-200 text-green-700 rounded-full"
|
class="ml-4 text-xs inline-flex items-center font-bold leading-sm uppercase px-3 py-1 bg-green-200 text-green-700 rounded-full">
|
||||||
>
|
|
||||||
<svg
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
width="16"
|
width="16"
|
||||||
@ -36,8 +33,7 @@
|
|||||||
stroke-width="2"
|
stroke-width="2"
|
||||||
stroke-linecap="round"
|
stroke-linecap="round"
|
||||||
stroke-linejoin="round"
|
stroke-linejoin="round"
|
||||||
class="feather feather-arrow-right mr-2"
|
class="feather feather-arrow-right mr-2">
|
||||||
>
|
|
||||||
<line x1="5" y1="12" x2="19" y2="12" />
|
<line x1="5" y1="12" x2="19" y2="12" />
|
||||||
<polyline points="12 5 19 12 12 19" />
|
<polyline points="12 5 19 12 12 19" />
|
||||||
</svg>
|
</svg>
|
||||||
@ -45,8 +41,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="ml-4 text-xs inline-flex items-center font-bold leading-sm uppercase px-3 py-1 bg-orange-200 text-orange-700 rounded-full"
|
class="ml-4 text-xs inline-flex items-center font-bold leading-sm uppercase px-3 py-1 bg-orange-200 text-orange-700 rounded-full">
|
||||||
>
|
|
||||||
<svg
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
width="16"
|
width="16"
|
||||||
@ -57,16 +52,14 @@
|
|||||||
stroke-width="2"
|
stroke-width="2"
|
||||||
stroke-linecap="round"
|
stroke-linecap="round"
|
||||||
stroke-linejoin="round"
|
stroke-linejoin="round"
|
||||||
class="feather feather-activity mr-2"
|
class="feather feather-activity mr-2">
|
||||||
>
|
|
||||||
<polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />
|
<polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />
|
||||||
</svg>
|
</svg>
|
||||||
Tag
|
Tag
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="ml-4 text-xs inline-flex items-center font-bold leading-sm uppercase px-3 py-1 bg-red-200 text-red-700 rounded-full"
|
class="ml-4 text-xs inline-flex items-center font-bold leading-sm uppercase px-3 py-1 bg-red-200 text-red-700 rounded-full">
|
||||||
>
|
|
||||||
<svg
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
width="16"
|
width="16"
|
||||||
@ -77,8 +70,7 @@
|
|||||||
stroke-width="2"
|
stroke-width="2"
|
||||||
stroke-linecap="round"
|
stroke-linecap="round"
|
||||||
stroke-linejoin="round"
|
stroke-linejoin="round"
|
||||||
class="feather feather-archive mr-2"
|
class="feather feather-archive mr-2">
|
||||||
>
|
|
||||||
<polyline points="21 8 21 21 3 21 3 8" />
|
<polyline points="21 8 21 21 3 21 3 8" />
|
||||||
<rect x="1" y="3" width="22" height="5" />
|
<rect x="1" y="3" width="22" height="5" />
|
||||||
<line x1="10" y1="12" x2="14" y2="12" />
|
<line x1="10" y1="12" x2="14" y2="12" />
|
||||||
@ -87,8 +79,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="ml-4 text-xs inline-flex items-center font-bold leading-sm uppercase px-3 py-1 rounded-full bg-white text-gray-700 border"
|
class="ml-4 text-xs inline-flex items-center font-bold leading-sm uppercase px-3 py-1 rounded-full bg-white text-gray-700 border">
|
||||||
>
|
|
||||||
<svg
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
width="16"
|
width="16"
|
||||||
@ -99,12 +90,10 @@
|
|||||||
stroke-width="2"
|
stroke-width="2"
|
||||||
stroke-linecap="round"
|
stroke-linecap="round"
|
||||||
stroke-linejoin="round"
|
stroke-linejoin="round"
|
||||||
class="feather feather-hard-drive mr-2"
|
class="feather feather-hard-drive mr-2">
|
||||||
>
|
|
||||||
<line x1="22" y1="12" x2="2" y2="12" />
|
<line x1="22" y1="12" x2="2" y2="12" />
|
||||||
<path
|
<path
|
||||||
d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"
|
d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />
|
||||||
/>
|
|
||||||
<line x1="6" y1="16" x2="6.01" y2="16" />
|
<line x1="6" y1="16" x2="6.01" y2="16" />
|
||||||
<line x1="10" y1="16" x2="10.01" y2="16" />
|
<line x1="10" y1="16" x2="10.01" y2="16" />
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
@ -9,6 +9,7 @@
|
|||||||
} from "@odit/lfk-client-js";
|
} from "@odit/lfk-client-js";
|
||||||
import isEmail from "validator/es/lib/isEmail";
|
import isEmail from "validator/es/lib/isEmail";
|
||||||
import isMobilePhone from "validator/es/lib/isMobilePhone";
|
import isMobilePhone from "validator/es/lib/isMobilePhone";
|
||||||
|
import Toastify from "toastify-js";
|
||||||
import Select from "svelte-select";
|
import Select from "svelte-select";
|
||||||
import { createEventDispatcher } from "svelte";
|
import { createEventDispatcher } from "svelte";
|
||||||
const dispatch = createEventDispatcher();
|
const dispatch = createEventDispatcher();
|
||||||
@ -77,6 +78,10 @@
|
|||||||
function submit() {
|
function submit() {
|
||||||
if (processed_last_submit === true) {
|
if (processed_last_submit === true) {
|
||||||
processed_last_submit = false;
|
processed_last_submit = false;
|
||||||
|
const toast = Toastify({
|
||||||
|
text: $_("runner-is-being-added"),
|
||||||
|
duration: -1,
|
||||||
|
}).showToast();
|
||||||
let postdata = {
|
let postdata = {
|
||||||
group: selected_team,
|
group: selected_team,
|
||||||
firstname: firstname_input_value,
|
firstname: firstname_input_value,
|
||||||
@ -91,7 +96,6 @@
|
|||||||
if (email_input_value) {
|
if (email_input_value) {
|
||||||
postdata.email = email_input_value;
|
postdata.email = email_input_value;
|
||||||
}
|
}
|
||||||
toast.loading($_("runner-is-being-added"));
|
|
||||||
RunnerService.runnerControllerPost(postdata)
|
RunnerService.runnerControllerPost(postdata)
|
||||||
.then((result) => {
|
.then((result) => {
|
||||||
firstname_input_value = "";
|
firstname_input_value = "";
|
||||||
@ -100,8 +104,11 @@
|
|||||||
email_input_value = "";
|
email_input_value = "";
|
||||||
modal_open = false;
|
modal_open = false;
|
||||||
//
|
//
|
||||||
toast.dismiss();
|
Toastify({
|
||||||
toast.success($_("runner-added"));
|
text: $_("runner-added"),
|
||||||
|
duration: 500,
|
||||||
|
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||||
|
}).showToast();
|
||||||
dispatch("created", { runners: [result] });
|
dispatch("created", { runners: [result] });
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
@ -109,6 +116,8 @@
|
|||||||
})
|
})
|
||||||
.finally(() => {
|
.finally(() => {
|
||||||
processed_last_submit = true;
|
processed_last_submit = true;
|
||||||
|
//
|
||||||
|
toast.hideToast();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -117,70 +126,58 @@
|
|||||||
{#if modal_open}
|
{#if modal_open}
|
||||||
<div
|
<div
|
||||||
class="fixed z-10 inset-0 overflow-y-auto"
|
class="fixed z-10 inset-0 overflow-y-auto"
|
||||||
|
|
||||||
use:clickOutside
|
use:clickOutside
|
||||||
on:click_outside={() => {
|
on:click_outside={() => {
|
||||||
modal_open = false;
|
modal_open = false;
|
||||||
}}
|
}}>
|
||||||
>
|
|
||||||
<div
|
<div
|
||||||
class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
|
class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
|
||||||
>
|
|
||||||
<div class="fixed inset-0 transition-opacity" aria-hidden="true">
|
<div class="fixed inset-0 transition-opacity" aria-hidden="true">
|
||||||
<div
|
<div
|
||||||
class="absolute inset-0 bg-gray-500 opacity-75"
|
class="absolute inset-0 bg-gray-500 opacity-75"
|
||||||
data-id="modal_backdrop"
|
data-id="modal_backdrop" />
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<span
|
<span
|
||||||
class="hidden sm:inline-block sm:align-middle sm:h-screen"
|
class="hidden sm:inline-block sm:align-middle sm:h-screen"
|
||||||
aria-hidden="true">​</span
|
aria-hidden="true">​</span>
|
||||||
>
|
|
||||||
<div
|
<div
|
||||||
class="inline-block align-bottom bg-white rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
|
class="inline-block align-bottom bg-white rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
|
||||||
role="dialog"
|
role="dialog"
|
||||||
aria-modal="true"
|
aria-modal="true"
|
||||||
aria-labelledby="modal-headline"
|
aria-labelledby="modal-headline">
|
||||||
>
|
|
||||||
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
||||||
<div class="sm:flex sm:items-start">
|
<div class="sm:flex sm:items-start">
|
||||||
<div
|
<div
|
||||||
class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
|
class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
|
||||||
>
|
|
||||||
<svg
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
class="h-6 w-6 text-blue-600"
|
class="h-6 w-6 text-blue-600"
|
||||||
fill="currentColor"
|
fill="currentColor"
|
||||||
width="24"
|
width="24"
|
||||||
height="24"
|
height="24"><path fill="none" d="M0 0h24v24H0z" />
|
||||||
><path fill="none" d="M0 0h24v24H0z" />
|
|
||||||
<path
|
<path
|
||||||
d="M9.83 8.79L8 9.456V13H6V8.05h.015l5.268-1.918c.244-.093.51-.14.782-.131a2.616 2.616 0 0 1 2.427 1.82c.186.583.356.977.51 1.182A4.992 4.992 0 0 0 19 11v2a6.986 6.986 0 0 1-5.402-2.547l-.581 3.297L15 15.67V23h-2v-5.986l-2.05-1.987-.947 4.298-6.894-1.215.348-1.97 4.924.868L9.83 8.79zM13.5 5.5a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"
|
d="M9.83 8.79L8 9.456V13H6V8.05h.015l5.268-1.918c.244-.093.51-.14.782-.131a2.616 2.616 0 0 1 2.427 1.82c.186.583.356.977.51 1.182A4.992 4.992 0 0 0 19 11v2a6.986 6.986 0 0 1-5.402-2.547l-.581 3.297L15 15.67V23h-2v-5.986l-2.05-1.987-.947 4.298-6.894-1.215.348-1.97 4.924.868L9.83 8.79zM13.5 5.5a2 2 0 1 1 0-4 2 2 0 0 1 0 4z" /></svg>
|
||||||
/></svg
|
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
|
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
|
||||||
<h3 class="text-lg leading-6 font-medium text-gray-900">
|
<h3 class="text-lg leading-6 font-medium text-gray-900">
|
||||||
{$_("create-a-new-runner")}
|
{$_('create-a-new-runner')}
|
||||||
</h3>
|
</h3>
|
||||||
<div class="mt-2 mb-6">
|
<div class="mt-2 mb-6">
|
||||||
<p class="text-sm text-gray-500">
|
<p class="text-sm text-gray-500">
|
||||||
{$_(
|
{$_('please-provide-the-required-information-to-add-a-new-runner')}
|
||||||
"please-provide-the-required-information-to-add-a-new-runner"
|
|
||||||
)}
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="grid grid-cols-6 gap-6">
|
<div class="grid grid-cols-6 gap-6">
|
||||||
<div class="col-span-6">
|
<div class="col-span-6">
|
||||||
<label
|
<label
|
||||||
for="firstname"
|
for="firstname"
|
||||||
class="block text-sm font-medium text-gray-700"
|
class="block text-sm font-medium text-gray-700">{$_('first-name')}</label>
|
||||||
>{$_("first-name")}</label
|
|
||||||
>
|
|
||||||
<input
|
<input
|
||||||
use:focus
|
use:focus
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
placeholder={$_("first-name")}
|
placeholder={$_('first-name')}
|
||||||
class:border-red-500={!isFirstnameValid}
|
class:border-red-500={!isFirstnameValid}
|
||||||
class:focus:border-red-500={!isFirstnameValid}
|
class:focus:border-red-500={!isFirstnameValid}
|
||||||
class:focus:ring-red-500={!isFirstnameValid}
|
class:focus:ring-red-500={!isFirstnameValid}
|
||||||
@ -188,41 +185,34 @@
|
|||||||
bind:this={firstname_input}
|
bind:this={firstname_input}
|
||||||
type="text"
|
type="text"
|
||||||
name="firstname"
|
name="firstname"
|
||||||
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
|
||||||
/>
|
|
||||||
{#if !isFirstnameValid}
|
{#if !isFirstnameValid}
|
||||||
<span
|
<span
|
||||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
|
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||||
>
|
{$_('first-name-is-required')}
|
||||||
{$_("first-name-is-required")}
|
|
||||||
</span>
|
</span>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
<div class="col-span-6">
|
<div class="col-span-6">
|
||||||
<label
|
<label
|
||||||
for="trackname"
|
for="trackname"
|
||||||
class="block text-sm font-medium text-gray-700"
|
class="block text-sm font-medium text-gray-700">{$_('middle-name')}</label>
|
||||||
>{$_("middle-name")}</label
|
|
||||||
>
|
|
||||||
<input
|
<input
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
placeholder={$_("middle-name")}
|
placeholder={$_('middle-name')}
|
||||||
bind:value={middlename_input_value}
|
bind:value={middlename_input_value}
|
||||||
bind:this={middlename_input}
|
bind:this={middlename_input}
|
||||||
type="text"
|
type="text"
|
||||||
name="trackname"
|
name="trackname"
|
||||||
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="col-span-6">
|
<div class="col-span-6">
|
||||||
<label
|
<label
|
||||||
for="lastname"
|
for="lastname"
|
||||||
class="block text-sm font-medium text-gray-700"
|
class="block text-sm font-medium text-gray-700">{$_('last-name')}</label>
|
||||||
>{$_("last-name")}</label
|
|
||||||
>
|
|
||||||
<input
|
<input
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
placeholder={$_("last-name")}
|
placeholder={$_('last-name')}
|
||||||
class:border-red-500={!isLastnameValid}
|
class:border-red-500={!isLastnameValid}
|
||||||
class:focus:border-red-500={!isLastnameValid}
|
class:focus:border-red-500={!isLastnameValid}
|
||||||
class:focus:ring-red-500={!isLastnameValid}
|
class:focus:ring-red-500={!isLastnameValid}
|
||||||
@ -230,49 +220,41 @@
|
|||||||
bind:this={lastname_input}
|
bind:this={lastname_input}
|
||||||
type="text"
|
type="text"
|
||||||
name="lastname"
|
name="lastname"
|
||||||
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
|
||||||
/>
|
|
||||||
{#if !isLastnameValid}
|
{#if !isLastnameValid}
|
||||||
<span
|
<span
|
||||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
|
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||||
>
|
{$_('last-name-is-required')}
|
||||||
{$_("last-name-is-required")}
|
|
||||||
</span>
|
</span>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
<div class="col-span-6">
|
<div class="col-span-6">
|
||||||
<label
|
<label
|
||||||
for="team"
|
for="team"
|
||||||
class="block text-sm font-medium text-gray-700"
|
class="block text-sm font-medium text-gray-700">{$_('team')}</label>
|
||||||
>{$_("team")}</label
|
|
||||||
>
|
|
||||||
<Select
|
<Select
|
||||||
containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
||||||
itemFilter={(label, filterText, option) =>
|
itemFilter={(label, filterText, option) => label
|
||||||
label.toLowerCase().includes(filterText.toLowerCase()) ||
|
.toLowerCase()
|
||||||
option.value.id
|
.includes(
|
||||||
|
filterText.toLowerCase()
|
||||||
|
) || option.value.id
|
||||||
.toString()
|
.toString()
|
||||||
.startsWith(filterText.toLowerCase())}
|
.startsWith(filterText.toLowerCase())}
|
||||||
items={orgs.concat(teams)}
|
items={orgs.concat(teams)}
|
||||||
showChevron={true}
|
showChevron={true}
|
||||||
placeholder={$_(
|
placeholder={$_('search-for-an-organization-or-team-by-name-or-id')}
|
||||||
"search-for-an-organization-or-team-by-name-or-id"
|
noOptionsMessage={$_('no-organization-or-team-found')}
|
||||||
)}
|
on:select={(selectedValue) => (selected_team = selectedValue.detail.value.id)}
|
||||||
noOptionsMessage={$_("no-organization-or-team-found")}
|
on:clear={() => (selected_team = null)} />
|
||||||
on:select={(selectedValue) =>
|
|
||||||
(selected_team = selectedValue.detail.value.id)}
|
|
||||||
on:clear={() => (selected_team = null)}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="col-span-6">
|
<div class="col-span-6">
|
||||||
<label
|
<label
|
||||||
for="phone"
|
for="phone"
|
||||||
class="block text-sm font-medium text-gray-700"
|
class="block text-sm font-medium text-gray-700">{$_('phone')}</label>
|
||||||
>{$_("phone")}</label
|
|
||||||
>
|
|
||||||
<input
|
<input
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
placeholder={$_("phone")}
|
placeholder={$_('phone')}
|
||||||
class:border-red-500={!isPhoneValidOrEmpty}
|
class:border-red-500={!isPhoneValidOrEmpty}
|
||||||
class:focus:border-red-500={!isPhoneValidOrEmpty}
|
class:focus:border-red-500={!isPhoneValidOrEmpty}
|
||||||
class:focus:ring-red-500={!isPhoneValidOrEmpty}
|
class:focus:ring-red-500={!isPhoneValidOrEmpty}
|
||||||
@ -280,27 +262,21 @@
|
|||||||
bind:this={phone_input}
|
bind:this={phone_input}
|
||||||
type="tel"
|
type="tel"
|
||||||
name="phone"
|
name="phone"
|
||||||
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
|
||||||
/>
|
|
||||||
{#if !isPhoneValidOrEmpty}
|
{#if !isPhoneValidOrEmpty}
|
||||||
<span
|
<span
|
||||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
|
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||||
>
|
{@html $_('the-provided-phone-number-is-invalid-less-than-br-greater-than-please-enter-a-valid-international-number')}
|
||||||
{@html $_(
|
|
||||||
"the-provided-phone-number-is-invalid-less-than-br-greater-than-please-enter-a-valid-international-number"
|
|
||||||
)}
|
|
||||||
</span>
|
</span>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
<div class="col-span-6">
|
<div class="col-span-6">
|
||||||
<label
|
<label
|
||||||
for="email"
|
for="email"
|
||||||
class="block text-sm font-medium text-gray-700"
|
class="block text-sm font-medium text-gray-700">{$_('e-mail-adress')}</label>
|
||||||
>{$_("e-mail-adress")}</label
|
|
||||||
>
|
|
||||||
<input
|
<input
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
placeholder={$_("e-mail-adress")}
|
placeholder={$_('e-mail-adress')}
|
||||||
class:border-red-500={!isEmailValidOrEmpty}
|
class:border-red-500={!isEmailValidOrEmpty}
|
||||||
class:focus:border-red-500={!isEmailValidOrEmpty}
|
class:focus:border-red-500={!isEmailValidOrEmpty}
|
||||||
class:focus:ring-red-500={!isEmailValidOrEmpty}
|
class:focus:ring-red-500={!isEmailValidOrEmpty}
|
||||||
@ -308,13 +284,11 @@
|
|||||||
bind:this={email_input}
|
bind:this={email_input}
|
||||||
type="email"
|
type="email"
|
||||||
name="email"
|
name="email"
|
||||||
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
|
||||||
/>
|
|
||||||
{#if !isEmailValidOrEmpty}
|
{#if !isEmailValidOrEmpty}
|
||||||
<span
|
<span
|
||||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
|
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||||
>
|
{$_('valid-email-is-required')}
|
||||||
{$_("valid-email-is-required")}
|
|
||||||
</span>
|
</span>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
@ -328,18 +302,16 @@
|
|||||||
class:opacity-50={!createbtnenabled}
|
class:opacity-50={!createbtnenabled}
|
||||||
on:click={submit}
|
on:click={submit}
|
||||||
type="button"
|
type="button"
|
||||||
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
|
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
|
||||||
>
|
{$_('create')}
|
||||||
{$_("create")}
|
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
on:click={() => {
|
on:click={() => {
|
||||||
modal_open = false;
|
modal_open = false;
|
||||||
}}
|
}}
|
||||||
type="button"
|
type="button"
|
||||||
class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
|
class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
|
||||||
>
|
{$_('cancel')}
|
||||||
{$_("cancel")}
|
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -25,7 +25,7 @@
|
|||||||
});
|
});
|
||||||
async function submit() {
|
async function submit() {
|
||||||
dispatch("delete", { id: delete_runner.id });
|
dispatch("delete", { id: delete_runner.id });
|
||||||
modal_open = false;
|
modal_open=false;
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@ -4,6 +4,7 @@
|
|||||||
import { _ } from "svelte-i18n";
|
import { _ } from "svelte-i18n";
|
||||||
import { clickOutside } from "../base/outsideclick";
|
import { clickOutside } from "../base/outsideclick";
|
||||||
|
|
||||||
|
import Toastify from "toastify-js";
|
||||||
import {
|
import {
|
||||||
ImportService,
|
ImportService,
|
||||||
RunnerTeamService,
|
RunnerTeamService,
|
||||||
@ -11,7 +12,6 @@
|
|||||||
} from "@odit/lfk-client-js";
|
} from "@odit/lfk-client-js";
|
||||||
import { createEventDispatcher } from "svelte";
|
import { createEventDispatcher } from "svelte";
|
||||||
import Select from "svelte-select";
|
import Select from "svelte-select";
|
||||||
import toast from "svelte-french-toast";
|
|
||||||
export let opened_from;
|
export let opened_from;
|
||||||
export let passed_org;
|
export let passed_org;
|
||||||
export let passed_orgs;
|
export let passed_orgs;
|
||||||
@ -90,7 +90,10 @@
|
|||||||
}
|
}
|
||||||
function importAction() {
|
function importAction() {
|
||||||
if (recent_processed === true) {
|
if (recent_processed === true) {
|
||||||
toast.loading($_("runners-are-being-imported"));
|
const toast = Toastify({
|
||||||
|
text: $_("runners-are-being-imported"),
|
||||||
|
duration: -1,
|
||||||
|
}).showToast();
|
||||||
recent_processed = false;
|
recent_processed = false;
|
||||||
const mapped = json_output.map(function (runner) {
|
const mapped = json_output.map(function (runner) {
|
||||||
return {
|
return {
|
||||||
@ -112,30 +115,48 @@
|
|||||||
if (opened_from === "OrgOverview" || opened_from === "OrgDetail") {
|
if (opened_from === "OrgOverview" || opened_from === "OrgDetail") {
|
||||||
ImportService.importControllerPostOrgsJson(org, mapped)
|
ImportService.importControllerPostOrgsJson(org, mapped)
|
||||||
.then((resp) => {
|
.then((resp) => {
|
||||||
toast.dismiss();
|
toast.hideToast();
|
||||||
recent_processed = true;
|
recent_processed = true;
|
||||||
toast.success($_("import-finished"));
|
Toastify({
|
||||||
|
text: $_("import-finished"),
|
||||||
|
duration: 500,
|
||||||
|
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||||
|
}).showToast();
|
||||||
cancelModal();
|
cancelModal();
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
toast.dismiss();
|
toast.hideToast();
|
||||||
recent_processed = true;
|
recent_processed = true;
|
||||||
toast.error($_("error-during-import"));
|
Toastify({
|
||||||
|
text: $_("error-during-import"),
|
||||||
|
duration: 500,
|
||||||
|
backgroundColor:
|
||||||
|
"linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
|
||||||
|
}).showToast();
|
||||||
cancelModal();
|
cancelModal();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
if (opened_from === "TeamDetail") {
|
if (opened_from === "TeamDetail") {
|
||||||
ImportService.importControllerPostTeamsJson(passed_team.id, mapped)
|
ImportService.importControllerPostTeamsJson(passed_team.id, mapped)
|
||||||
.then((resp) => {
|
.then((resp) => {
|
||||||
toast.dismiss();
|
toast.hideToast();
|
||||||
recent_processed = true;
|
recent_processed = true;
|
||||||
toast.success($_("import-finished"));
|
Toastify({
|
||||||
|
text: $_("import-finished"),
|
||||||
|
duration: 500,
|
||||||
|
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||||
|
}).showToast();
|
||||||
cancelModal();
|
cancelModal();
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
toast.dismiss();
|
toast.hideToast();
|
||||||
recent_processed = true;
|
recent_processed = true;
|
||||||
toast.error($_("error-during-import"));
|
Toastify({
|
||||||
|
text: $_("error-during-import"),
|
||||||
|
duration: 500,
|
||||||
|
backgroundColor:
|
||||||
|
"linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
|
||||||
|
}).showToast();
|
||||||
cancelModal();
|
cancelModal();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@ -148,15 +169,24 @@
|
|||||||
)
|
)
|
||||||
.then((resp) => {
|
.then((resp) => {
|
||||||
dispatch("created", { runners: resp });
|
dispatch("created", { runners: resp });
|
||||||
toast.dismiss();
|
toast.hideToast();
|
||||||
recent_processed = true;
|
recent_processed = true;
|
||||||
toast($_("import-finished"));
|
Toastify({
|
||||||
|
text: $_("import-finished"),
|
||||||
|
duration: 500,
|
||||||
|
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||||
|
}).showToast();
|
||||||
cancelModal();
|
cancelModal();
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
toast.dismiss();
|
toast.hideToast();
|
||||||
recent_processed = true;
|
recent_processed = true;
|
||||||
toast.error($_("error-during-import"));
|
Toastify({
|
||||||
|
text: $_("error-during-import"),
|
||||||
|
duration: 500,
|
||||||
|
backgroundColor:
|
||||||
|
"linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
|
||||||
|
}).showToast();
|
||||||
cancelModal();
|
cancelModal();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@ -168,15 +198,24 @@
|
|||||||
)
|
)
|
||||||
.then((resp) => {
|
.then((resp) => {
|
||||||
dispatch("created", { runners: resp });
|
dispatch("created", { runners: resp });
|
||||||
toast.dismiss();
|
toast.hideToast();
|
||||||
recent_processed = true;
|
recent_processed = true;
|
||||||
toast($_("import-finished"));
|
Toastify({
|
||||||
|
text: $_('import-finished'),
|
||||||
|
duration: 500,
|
||||||
|
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||||
|
}).showToast();
|
||||||
cancelModal();
|
cancelModal();
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
toast.dismiss();
|
toast.hideToast();
|
||||||
recent_processed = true;
|
recent_processed = true;
|
||||||
toast.error($_("error-during-import"));
|
Toastify({
|
||||||
|
text: $_("error-during-import"),
|
||||||
|
duration: 500,
|
||||||
|
backgroundColor:
|
||||||
|
"linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
|
||||||
|
}).showToast();
|
||||||
cancelModal();
|
cancelModal();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@ -188,51 +227,43 @@
|
|||||||
{#if import_modal_open}
|
{#if import_modal_open}
|
||||||
<div
|
<div
|
||||||
class="fixed z-10 inset-0 overflow-y-auto"
|
class="fixed z-10 inset-0 overflow-y-auto"
|
||||||
|
|
||||||
use:clickOutside
|
use:clickOutside
|
||||||
on:click_outside={() => {
|
on:click_outside={() => {
|
||||||
cancelModal();
|
cancelModal();
|
||||||
}}
|
}}>
|
||||||
>
|
|
||||||
<div
|
<div
|
||||||
class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
|
class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
|
||||||
>
|
|
||||||
<div class="fixed inset-0 transition-opacity" aria-hidden="true">
|
<div class="fixed inset-0 transition-opacity" aria-hidden="true">
|
||||||
<div
|
<div
|
||||||
class="absolute inset-0 bg-gray-500 opacity-75"
|
class="absolute inset-0 bg-gray-500 opacity-75"
|
||||||
data-id="modal_backdrop"
|
data-id="modal_backdrop" />
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<span
|
<span
|
||||||
class="hidden sm:inline-block sm:align-middle sm:h-screen"
|
class="hidden sm:inline-block sm:align-middle sm:h-screen"
|
||||||
aria-hidden="true">​</span
|
aria-hidden="true">​</span>
|
||||||
>
|
|
||||||
<div
|
<div
|
||||||
class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-max sm:w-full"
|
class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-max sm:w-full"
|
||||||
role="dialog"
|
role="dialog"
|
||||||
aria-modal="true"
|
aria-modal="true"
|
||||||
aria-labelledby="modal-headline"
|
aria-labelledby="modal-headline">
|
||||||
>
|
|
||||||
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
||||||
<div class="sm:flex sm:items-start">
|
<div class="sm:flex sm:items-start">
|
||||||
<div
|
<div
|
||||||
class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
|
class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
|
||||||
>
|
|
||||||
<svg
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
class="h-6 w-6 text-blue-600"
|
class="h-6 w-6 text-blue-600"
|
||||||
fill="currentColor"
|
fill="currentColor"
|
||||||
width="24"
|
width="24"
|
||||||
height="24"
|
height="24"><path fill="none" d="M0 0h24v24H0z" />
|
||||||
><path fill="none" d="M0 0h24v24H0z" />
|
|
||||||
<path
|
<path
|
||||||
d="M9.83 8.79L8 9.456V13H6V8.05h.015l5.268-1.918c.244-.093.51-.14.782-.131a2.616 2.616 0 0 1 2.427 1.82c.186.583.356.977.51 1.182A4.992 4.992 0 0 0 19 11v2a6.986 6.986 0 0 1-5.402-2.547l-.581 3.297L15 15.67V23h-2v-5.986l-2.05-1.987-.947 4.298-6.894-1.215.348-1.97 4.924.868L9.83 8.79zM13.5 5.5a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"
|
d="M9.83 8.79L8 9.456V13H6V8.05h.015l5.268-1.918c.244-.093.51-.14.782-.131a2.616 2.616 0 0 1 2.427 1.82c.186.583.356.977.51 1.182A4.992 4.992 0 0 0 19 11v2a6.986 6.986 0 0 1-5.402-2.547l-.581 3.297L15 15.67V23h-2v-5.986l-2.05-1.987-.947 4.298-6.894-1.215.348-1.97 4.924.868L9.83 8.79zM13.5 5.5a2 2 0 1 1 0-4 2 2 0 0 1 0 4z" /></svg>
|
||||||
/></svg
|
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-3 text-center sm:mt-0 sm:ml-2 sm:text-left w-full">
|
<div class="mt-3 text-center sm:mt-0 sm:ml-2 sm:text-left w-full">
|
||||||
<h3 class="text-lg leading-6 font-bold mt-2 text-gray-900">
|
<h3 class="text-lg leading-6 font-bold mt-2 text-gray-900">
|
||||||
{$_("runner-import")}
|
{$_('runner-import')}
|
||||||
</h3>
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -240,15 +271,14 @@
|
|||||||
{#if json_output.length === 0}
|
{#if json_output.length === 0}
|
||||||
<div class="mt-2 mb-6">
|
<div class="mt-2 mb-6">
|
||||||
<p class="text-sm text-gray-500">
|
<p class="text-sm text-gray-500">
|
||||||
{$_("please-provide-the-required-csv-xlsx-file")}
|
{$_('please-provide-the-required-csv-xlsx-file')}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="overflow-hidden relative mt-4 mb-4">
|
<div class="overflow-hidden relative mt-4 mb-4">
|
||||||
<input
|
<input
|
||||||
accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
|
accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
|
||||||
bind:files
|
bind:files
|
||||||
type="file"
|
type="file" />
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="overflow-hidden relative mt-4 mb-4">
|
<div class="overflow-hidden relative mt-4 mb-4">
|
||||||
<button
|
<button
|
||||||
@ -256,50 +286,47 @@
|
|||||||
cancelModal();
|
cancelModal();
|
||||||
}}
|
}}
|
||||||
type="button"
|
type="button"
|
||||||
class="w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 md:ml-40 mr-0 sm:ml-0 sm:w-auto sm:text-sm"
|
class="w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 md:ml-40 mr-0 sm:ml-0 sm:w-auto sm:text-sm">
|
||||||
>
|
{$_('cancel')}
|
||||||
{$_("cancel")}
|
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
{#if json_output.length > 0}
|
{#if json_output.length > 0}
|
||||||
{#if opened_from === "OrgOverview"}
|
{#if opened_from === 'OrgOverview'}
|
||||||
<p>{$_("import__target-organization")}</p>
|
<p>{$_('import__target-organization')}</p>
|
||||||
<select
|
<select
|
||||||
name="team"
|
name="team"
|
||||||
bind:value={selected_org}
|
bind:value={selected_org}
|
||||||
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2">
|
||||||
>
|
|
||||||
{#each passed_orgs as o}
|
{#each passed_orgs as o}
|
||||||
<option value={o.id}>{o.name}</option>
|
<option value={o.id}>{o.name}</option>
|
||||||
{/each}
|
{/each}
|
||||||
</select>
|
</select>
|
||||||
<p>{$_("confirm-runner-import")}</p>
|
<p>{$_('bitte-bestaetige-diese-laeufer-fuer-den-import')}</p>
|
||||||
{/if}
|
{/if}
|
||||||
{#if opened_from === "RunnerOverview"}
|
{#if opened_from === 'RunnerOverview'}
|
||||||
<p>{$_("group")}</p>
|
<p>{$_('group')}</p>
|
||||||
<Select
|
<Select
|
||||||
containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
||||||
itemFilter={(label, filterText, option) =>
|
itemFilter={(label, filterText, option) => label
|
||||||
label.toLowerCase().includes(filterText.toLowerCase()) ||
|
.toLowerCase()
|
||||||
option.id.value
|
.includes(
|
||||||
|
filterText.toLowerCase()
|
||||||
|
) || option.id.value
|
||||||
.toString()
|
.toString()
|
||||||
.startsWith(filterText.toLowerCase())}
|
.startsWith(filterText.toLowerCase())}
|
||||||
items={groups}
|
items={groups}
|
||||||
showChevron={true}
|
showChevron={true}
|
||||||
placeholder={$_(
|
placeholder={$_('search-for-an-organization-or-team-by-name-or-id')}
|
||||||
"search-for-an-organization-or-team-by-name-or-id"
|
noOptionsMessage={$_('no-organization-or-team-found')}
|
||||||
)}
|
|
||||||
noOptionsMessage={$_("no-organization-or-team-found")}
|
|
||||||
on:select={(selectedValue) => {
|
on:select={(selectedValue) => {
|
||||||
selected_org_or_team = selectedValue.detail.value;
|
selected_org_or_team = selectedValue.detail.value;
|
||||||
}}
|
}}
|
||||||
on:clear={() => (selected_org_or_team = null)}
|
on:clear={() => (selected_org_or_team = null)} />
|
||||||
/>
|
|
||||||
{/if}
|
{/if}
|
||||||
{#if opened_from === "OrgDetail"}
|
{#if opened_from === 'OrgDetail'}
|
||||||
<p>
|
<p>
|
||||||
{$_("runnerimport_verify_runners_org", {
|
{$_('runnerimport_verify_runners_org', {
|
||||||
values: { org_name: passed_org.name },
|
values: { org_name: passed_org.name },
|
||||||
})}
|
})}
|
||||||
</p>
|
</p>
|
||||||
@ -307,39 +334,34 @@
|
|||||||
<input
|
<input
|
||||||
type="search"
|
type="search"
|
||||||
bind:value={searchvalue}
|
bind:value={searchvalue}
|
||||||
placeholder={$_("datatable.search")}
|
placeholder={$_('datatable.search')}
|
||||||
aria-label={$_("datatable.search")}
|
aria-label={$_('datatable.search')}
|
||||||
class="p-2 w-full"
|
class="p-2 w-full" />
|
||||||
/>
|
|
||||||
<div class="relative w-full mt-4 mb-4">
|
<div class="relative w-full mt-4 mb-4">
|
||||||
<div class="w-full overflow-x-auto">
|
<div class="w-full overflow-x-auto">
|
||||||
<table class="divide-y divide-gray-200 w-full">
|
<table class="divide-y divide-gray-200 w-full">
|
||||||
<thead class="bg-gray-50">
|
<thead class="bg-gray-50">
|
||||||
<tr class="odd:bg-white even:bg-gray-100">
|
<tr>
|
||||||
<th
|
<th
|
||||||
scope="col"
|
scope="col"
|
||||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
>
|
{$_('csv_import__firstname')}
|
||||||
{$_("csv_import__firstname")}
|
|
||||||
</th>
|
</th>
|
||||||
<th
|
<th
|
||||||
scope="col"
|
scope="col"
|
||||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
>
|
{$_('csv_import__middlename')}
|
||||||
{$_("csv_import__middlename")}
|
|
||||||
</th>
|
</th>
|
||||||
<th
|
<th
|
||||||
scope="col"
|
scope="col"
|
||||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
>
|
{$_('csv_import__lastname')}
|
||||||
{$_("csv_import__lastname")}
|
|
||||||
</th>
|
</th>
|
||||||
{#if (opened_from !== "TeamDetail" && opened_from !== "RunnerOverview") || (opened_from === "RunnerOverview" && selected_org_or_team.includes("ORG_"))}
|
{#if (opened_from !== 'TeamDetail' && opened_from !== 'RunnerOverview') || (opened_from === 'RunnerOverview' && selected_org_or_team.includes('ORG_'))}
|
||||||
<th
|
<th
|
||||||
scope="col"
|
scope="col"
|
||||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
>
|
{$_('csv_import__team')}
|
||||||
{$_("csv_import__team")}
|
|
||||||
</th>
|
</th>
|
||||||
{/if}
|
{/if}
|
||||||
</tr>
|
</tr>
|
||||||
@ -350,21 +372,19 @@
|
|||||||
.toString()
|
.toString()
|
||||||
.toLowerCase()
|
.toLowerCase()
|
||||||
.includes(searchvalue)}
|
.includes(searchvalue)}
|
||||||
<tr class="odd:bg-white even:bg-gray-100">
|
<tr>
|
||||||
<td class="px-6 py-4 whitespace-nowrap">
|
<td class="px-6 py-4 whitespace-nowrap">
|
||||||
{runner[`${$_("csv_import__firstname")}`]}
|
{runner[`${$_('csv_import__firstname')}`]}
|
||||||
</td>
|
</td>
|
||||||
<td class="px-6 py-4 whitespace-nowrap">
|
<td class="px-6 py-4 whitespace-nowrap">
|
||||||
{runner[`${$_("csv_import__middlename")}`] || ""}
|
{runner[`${$_('csv_import__middlename')}`] || ''}
|
||||||
</td>
|
</td>
|
||||||
<td class="px-6 py-4 whitespace-nowrap">
|
<td class="px-6 py-4 whitespace-nowrap">
|
||||||
{runner[`${$_("csv_import__lastname")}`]}
|
{runner[`${$_('csv_import__lastname')}`]}
|
||||||
</td>
|
</td>
|
||||||
{#if (opened_from !== "TeamDetail" && opened_from !== "RunnerOverview") || (opened_from === "RunnerOverview" && selected_org_or_team.includes("ORG_"))}
|
{#if (opened_from !== 'TeamDetail' && opened_from !== 'RunnerOverview') || (opened_from === 'RunnerOverview' && selected_org_or_team.includes('ORG_'))}
|
||||||
<td class="px-6 py-4 whitespace-nowrap">
|
<td class="px-6 py-4 whitespace-nowrap">
|
||||||
{runner[`${$_("csv_import__team")}`] ||
|
{runner[`${$_('csv_import__team')}`] || runner[`${$_('csv_import__class')}`] || '---'}
|
||||||
runner[`${$_("csv_import__class")}`] ||
|
|
||||||
"---"}
|
|
||||||
</td>
|
</td>
|
||||||
{/if}
|
{/if}
|
||||||
</tr>
|
</tr>
|
||||||
@ -378,18 +398,16 @@
|
|||||||
class:opacity-50={!importButtonEnabled}
|
class:opacity-50={!importButtonEnabled}
|
||||||
on:click={importAction}
|
on:click={importAction}
|
||||||
type="button"
|
type="button"
|
||||||
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
|
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
|
||||||
>
|
{$_('import-runners')}
|
||||||
{$_("import-runners")}
|
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
on:click={() => {
|
on:click={() => {
|
||||||
cancelModal();
|
cancelModal();
|
||||||
}}
|
}}
|
||||||
type="button"
|
type="button"
|
||||||
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
|
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">
|
||||||
>
|
{$_('cancel')}
|
||||||
{$_("cancel")}
|
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
<script>
|
<script>
|
||||||
import { _ } from "svelte-i18n";
|
import { getLocaleFromNavigator, _ } from "svelte-i18n";
|
||||||
import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
|
import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
|
||||||
import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
|
import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
|
||||||
import GenerateRunnerCertificates from "../pdf_generation/GenerateRunnerCertificates.svelte";
|
import GenerateRunnerCertificates from "../pdf_generation/GenerateRunnerCertificates.svelte";
|
||||||
@ -9,10 +9,10 @@
|
|||||||
RunnerTeamService,
|
RunnerTeamService,
|
||||||
RunnerOrganizationService,
|
RunnerOrganizationService,
|
||||||
} from "@odit/lfk-client-js";
|
} from "@odit/lfk-client-js";
|
||||||
|
import Toastify from "toastify-js";
|
||||||
import PromiseError from "../base/PromiseError.svelte";
|
import PromiseError from "../base/PromiseError.svelte";
|
||||||
import isEmail from "validator/es/lib/isEmail";
|
import isEmail from "validator/es/lib/isEmail";
|
||||||
import Select from "svelte-select";
|
import Select from "svelte-select";
|
||||||
import toast from "svelte-french-toast";
|
|
||||||
let data_loaded = false;
|
let data_loaded = false;
|
||||||
export let params;
|
export let params;
|
||||||
const runner_promise = RunnerService.runnerControllerGetOne(params.runnerid);
|
const runner_promise = RunnerService.runnerControllerGetOne(params.runnerid);
|
||||||
@ -65,7 +65,10 @@
|
|||||||
let groups = [];
|
let groups = [];
|
||||||
function submit() {
|
function submit() {
|
||||||
if (data_loaded === true && save_enabled) {
|
if (data_loaded === true && save_enabled) {
|
||||||
toast.loading($_("updating-runner"));
|
Toastify({
|
||||||
|
text: $_("updating-runner"),
|
||||||
|
duration: 2500,
|
||||||
|
}).showToast();
|
||||||
let postdata = {};
|
let postdata = {};
|
||||||
postdata = Object.assign(postdata, editable);
|
postdata = Object.assign(postdata, editable);
|
||||||
if (postdata.phone === "") {
|
if (postdata.phone === "") {
|
||||||
@ -75,8 +78,11 @@
|
|||||||
.then((resp) => {
|
.then((resp) => {
|
||||||
Object.assign(original_data, editable);
|
Object.assign(original_data, editable);
|
||||||
original_data = original_data;
|
original_data = original_data;
|
||||||
toast.dismiss();
|
Toastify({
|
||||||
toast.success($_("runner-updated"));
|
text: $_("runner-updated"),
|
||||||
|
duration: 2500,
|
||||||
|
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||||
|
}).showToast();
|
||||||
})
|
})
|
||||||
.catch((err) => {});
|
.catch((err) => {});
|
||||||
} else {
|
} else {
|
||||||
|
|||||||
@ -6,7 +6,7 @@
|
|||||||
<div class="text-center items-center justify-center">
|
<div class="text-center items-center justify-center">
|
||||||
<p class="mb-16 text-lg text-gray-500">
|
<p class="mb-16 text-lg text-gray-500">
|
||||||
<img class="w-full h-44" src={runners_empty} alt="" />
|
<img class="w-full h-44" src={runners_empty} alt="" />
|
||||||
<span class="font-bold">{$_("there-are-no-runners-added-yet")}</span><br />
|
<span class="font-bold">{$_('there-are-no-runners-added-yet')}</span><br />
|
||||||
<span>{$_("add-your-first-runner")}</span>
|
<span>{$_('add-your-first-runner')}</span>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -24,6 +24,7 @@
|
|||||||
import TableActions from "../shared/TableActions.svelte";
|
import TableActions from "../shared/TableActions.svelte";
|
||||||
import { groupFilter } from "../shared/tablefilters";
|
import { groupFilter } from "../shared/tablefilters";
|
||||||
import DeleteRunnerModal from "./DeleteRunnerModal.svelte";
|
import DeleteRunnerModal from "./DeleteRunnerModal.svelte";
|
||||||
|
import Toastify from "toastify-js";
|
||||||
import TableBottom from "../shared/TableBottom.svelte";
|
import TableBottom from "../shared/TableBottom.svelte";
|
||||||
import TableHeader from "../shared/TableHeader.svelte";
|
import TableHeader from "../shared/TableHeader.svelte";
|
||||||
|
|
||||||
@ -148,7 +149,11 @@
|
|||||||
...options,
|
...options,
|
||||||
data: current_runners,
|
data: current_runners,
|
||||||
}));
|
}));
|
||||||
toast($_("runner-deleted"));
|
Toastify({
|
||||||
|
text: $_("runner-deleted"),
|
||||||
|
duration: 3500,
|
||||||
|
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||||
|
}).showToast();
|
||||||
}
|
}
|
||||||
|
|
||||||
onMount(async () => {
|
onMount(async () => {
|
||||||
@ -163,7 +168,7 @@
|
|||||||
|
|
||||||
let page = 0;
|
let page = 0;
|
||||||
while (page >= 0) {
|
while (page >= 0) {
|
||||||
const runners = await RunnerService.runnerControllerGetAll(page, 500);
|
const runners = await RunnerService.runnerControllerGetAll(page, 1000);
|
||||||
if (runners.length == 0) {
|
if (runners.length == 0) {
|
||||||
page = -2;
|
page = -2;
|
||||||
}
|
}
|
||||||
@ -177,6 +182,7 @@
|
|||||||
dataLoaded = true;
|
dataLoaded = true;
|
||||||
page++;
|
page++;
|
||||||
}
|
}
|
||||||
|
console.log("All runners loaded");
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@ -213,7 +219,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="overflow-x-auto">
|
<div class="overflow-x-auto">
|
||||||
<table class="w-full">
|
<table class="w-full">
|
||||||
<thead class="border-b border-gray-400">
|
<thead>
|
||||||
{#each $table.getHeaderGroups() as headerGroup}
|
{#each $table.getHeaderGroups() as headerGroup}
|
||||||
<tr class="select-none">
|
<tr class="select-none">
|
||||||
<th class="inset-y-0 left-0 px-4 py-2 text-left w-px">
|
<th class="inset-y-0 left-0 px-4 py-2 text-left w-px">
|
||||||
@ -232,7 +238,7 @@
|
|||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
{#each $table.getRowModel().rows as row}
|
{#each $table.getRowModel().rows as row}
|
||||||
<tr class="odd:bg-white even:bg-gray-100">
|
<tr>
|
||||||
<td class="inset-y-0 left-0 px-4 py-2 text-center w-px">
|
<td class="inset-y-0 left-0 px-4 py-2 text-center w-px">
|
||||||
<InputElement
|
<InputElement
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
@ -259,9 +265,3 @@
|
|||||||
{/if}
|
{/if}
|
||||||
{/if}
|
{/if}
|
||||||
<TableBottom {table} {selected} />
|
<TableBottom {table} {selected} />
|
||||||
|
|
||||||
<style>
|
|
||||||
table tbody tr td:nth-child(2) {
|
|
||||||
font-family: monospace;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@ -2,23 +2,27 @@
|
|||||||
import { _ } from "svelte-i18n";
|
import { _ } from "svelte-i18n";
|
||||||
import { clickOutside } from "../base/outsideclick";
|
import { clickOutside } from "../base/outsideclick";
|
||||||
|
|
||||||
import { RunnerService, ScanService } from "@odit/lfk-client-js";
|
import {
|
||||||
|
RunnerService,
|
||||||
|
ScanService,
|
||||||
|
} from "@odit/lfk-client-js";
|
||||||
import Select from "svelte-select";
|
import Select from "svelte-select";
|
||||||
|
import Toastify from "toastify-js";
|
||||||
import { createEventDispatcher } from "svelte";
|
import { createEventDispatcher } from "svelte";
|
||||||
import toast from "svelte-french-toast";
|
|
||||||
export let modal_open;
|
export let modal_open;
|
||||||
const getRunnerLabel = (option) =>
|
const getRunnerLabel = (option) =>
|
||||||
option.firstname + " " + (option.middlename || "") + " " + option.lastname;
|
option.firstname + " " + (option.middlename || "") + " " + option.lastname;
|
||||||
const filterRunners = (label, filterText, option) =>
|
const filterRunners = (label, filterText, option) =>
|
||||||
label.toLowerCase().includes(filterText.toLowerCase()) ||
|
label.toLowerCase().includes(filterText.toLowerCase()) ||
|
||||||
option.value.id.toString().startsWith(filterText.toLowerCase());
|
option.value.id.toString().startsWith(filterText.toLowerCase());
|
||||||
|
function focus(el) {
|
||||||
|
el.focus();
|
||||||
|
}
|
||||||
const dispatch = createEventDispatcher();
|
const dispatch = createEventDispatcher();
|
||||||
$: runner = 0;
|
$: runner = 0;
|
||||||
$: runners = [];
|
$: runners = [];
|
||||||
RunnerService.runnerControllerGetAll().then((val) => {
|
RunnerService.runnerControllerGetAll().then((val) => {
|
||||||
runners = val.map((r) => {
|
runners = val.map(r => {return {label: getRunnerLabel(r), value: r}});
|
||||||
return { label: getRunnerLabel(r), value: r };
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
$: distance_input = 0;
|
$: distance_input = 0;
|
||||||
$: processed_last_submit = true;
|
$: processed_last_submit = true;
|
||||||
@ -41,7 +45,10 @@
|
|||||||
function submit() {
|
function submit() {
|
||||||
if (processed_last_submit === true) {
|
if (processed_last_submit === true) {
|
||||||
processed_last_submit = false;
|
processed_last_submit = false;
|
||||||
toast.loading($_("adding-scan"));
|
const toast = Toastify({
|
||||||
|
text: $_('adding-scan'),
|
||||||
|
duration: -1,
|
||||||
|
}).showToast();
|
||||||
let postdata = {
|
let postdata = {
|
||||||
runner,
|
runner,
|
||||||
distance: distance_input,
|
distance: distance_input,
|
||||||
@ -52,8 +59,11 @@
|
|||||||
distance_input = 0;
|
distance_input = 0;
|
||||||
modal_open = false;
|
modal_open = false;
|
||||||
//
|
//
|
||||||
toast.dismiss();
|
Toastify({
|
||||||
toast.success($_("scan-added"));
|
text: $_('scan-added'),
|
||||||
|
duration: 500,
|
||||||
|
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||||
|
}).showToast();
|
||||||
dispatch("created", { scans: [result] });
|
dispatch("created", { scans: [result] });
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
@ -61,6 +71,8 @@
|
|||||||
})
|
})
|
||||||
.finally(() => {
|
.finally(() => {
|
||||||
processed_last_submit = true;
|
processed_last_submit = true;
|
||||||
|
//
|
||||||
|
toast.hideToast();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -69,87 +81,70 @@
|
|||||||
{#if modal_open}
|
{#if modal_open}
|
||||||
<div
|
<div
|
||||||
class="fixed z-10 inset-0 overflow-y-auto"
|
class="fixed z-10 inset-0 overflow-y-auto"
|
||||||
|
|
||||||
use:clickOutside
|
use:clickOutside
|
||||||
on:click_outside={() => {
|
on:click_outside={() => {
|
||||||
modal_open = false;
|
modal_open = false;
|
||||||
}}
|
}}>
|
||||||
>
|
|
||||||
<div
|
<div
|
||||||
class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
|
class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
|
||||||
>
|
|
||||||
<div class="fixed inset-0 transition-opacity" aria-hidden="true">
|
<div class="fixed inset-0 transition-opacity" aria-hidden="true">
|
||||||
<div
|
<div
|
||||||
class="absolute inset-0 bg-gray-500 opacity-75"
|
class="absolute inset-0 bg-gray-500 opacity-75"
|
||||||
data-id="modal_backdrop"
|
data-id="modal_backdrop" />
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<span
|
<span
|
||||||
class="hidden sm:inline-block sm:align-middle sm:h-screen"
|
class="hidden sm:inline-block sm:align-middle sm:h-screen"
|
||||||
aria-hidden="true">​</span
|
aria-hidden="true">​</span>
|
||||||
>
|
|
||||||
<div
|
<div
|
||||||
class="inline-block align-bottom bg-white rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
|
class="inline-block align-bottom bg-white rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
|
||||||
role="dialog"
|
role="dialog"
|
||||||
aria-modal="true"
|
aria-modal="true"
|
||||||
aria-labelledby="modal-headline"
|
aria-labelledby="modal-headline">
|
||||||
>
|
|
||||||
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
||||||
<div class="sm:flex sm:items-start">
|
<div class="sm:flex sm:items-start">
|
||||||
<div
|
<div
|
||||||
class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
|
class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
|
||||||
>
|
|
||||||
<svg
|
<svg
|
||||||
class="h-6 w-6 text-blue-600"
|
class="h-6 w-6 text-blue-600"
|
||||||
fill="currentColor"
|
fill="currentColor"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
width="24"
|
width="24"
|
||||||
height="24"
|
height="24"><path fill="none" d="M0 0h24v24H0z" />
|
||||||
><path fill="none" d="M0 0h24v24H0z" />
|
|
||||||
<path
|
<path
|
||||||
fill="currentColor"
|
fill="currentColor"
|
||||||
d="M2 4h2v16H2V4zm4 0h1v16H6V4zm2 0h2v16H8V4zm3 0h2v16h-2V4zm3 0h2v16h-2V4zm3 0h1v16h-1V4zm2 0h3v16h-3V4z"
|
d="M2 4h2v16H2V4zm4 0h1v16H6V4zm2 0h2v16H8V4zm3 0h2v16h-2V4zm3 0h2v16h-2V4zm3 0h1v16h-1V4zm2 0h3v16h-3V4z" /></svg>
|
||||||
/></svg
|
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
|
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
|
||||||
<h3 class="text-lg leading-6 font-medium text-gray-900">
|
<h3 class="text-lg leading-6 font-medium text-gray-900">
|
||||||
{$_("create-a-new-scan-fixed-only")}
|
{$_('create-a-new-scan-fixed-only')}
|
||||||
</h3>
|
</h3>
|
||||||
<div class="mt-2 mb-6">
|
<div class="mt-2 mb-6">
|
||||||
<p class="text-sm text-gray-500">
|
<p class="text-sm text-gray-500">
|
||||||
{$_(
|
{$_('please-provide-the-nessecary-information-to-create-a-new-scan')}
|
||||||
"please-provide-the-nessecary-information-to-create-a-new-scan"
|
|
||||||
)}
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="grid grid-cols-6 gap-6">
|
<div class="grid grid-cols-6 gap-6">
|
||||||
<div class="col-span-6">
|
<div class="col-span-6">
|
||||||
<label
|
<label
|
||||||
for="donor"
|
for="donor"
|
||||||
class="block text-sm font-medium text-gray-700"
|
class="block text-sm font-medium text-gray-700">{$_('runner')}</label>
|
||||||
>{$_("runner")}</label
|
|
||||||
>
|
|
||||||
<Select
|
<Select
|
||||||
containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
||||||
itemFilter={(label, filterText, option) =>
|
itemFilter={(label, filterText, option) => filterRunners(label, filterText, option)}
|
||||||
filterRunners(label, filterText, option)}
|
|
||||||
items={runners}
|
items={runners}
|
||||||
showChevron={true}
|
showChevron={true}
|
||||||
placeholder={$_("search-for-runner-by-name-or-id")}
|
placeholder={$_('search-for-runner-by-name-or-id')}
|
||||||
noOptionsMessage={$_("no-runners-found")}
|
noOptionsMessage={$_('no-runners-found')}
|
||||||
on:select={(selectedValue) =>
|
on:select={(selectedValue) => (runner = selectedValue.detail.value.id)}
|
||||||
(runner = selectedValue.detail.value.id)}
|
on:clear={() => (runner = null)} />
|
||||||
on:clear={() => (runner = null)}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="col-span-6">
|
<div class="col-span-6">
|
||||||
<label
|
<label
|
||||||
for="donation_amount_eur"
|
for="donation_amount_eur"
|
||||||
class="block text-sm font-medium text-gray-700"
|
class="block text-sm font-medium text-gray-700">
|
||||||
>
|
{$_('distance')}</label>
|
||||||
{$_("distance")}</label
|
|
||||||
>
|
|
||||||
<div class="mt-1 flex rounded-md shadow-sm">
|
<div class="mt-1 flex rounded-md shadow-sm">
|
||||||
<input
|
<input
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
@ -161,18 +156,14 @@
|
|||||||
step="1"
|
step="1"
|
||||||
name="donation_amount_eur"
|
name="donation_amount_eur"
|
||||||
class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 p-2"
|
class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 p-2"
|
||||||
placeholder="400"
|
placeholder="400" />
|
||||||
/>
|
|
||||||
<span
|
<span
|
||||||
class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500 text-sm"
|
class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500 text-sm">m</span>
|
||||||
>m</span
|
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
{#if !is_distance_valid}
|
{#if !is_distance_valid}
|
||||||
<span
|
<span
|
||||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
|
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||||
>
|
{$_('the-scans-distance-must-be-greater-than-0m')}
|
||||||
{$_("the-scans-distance-must-be-greater-than-0m")}
|
|
||||||
</span>
|
</span>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
@ -186,18 +177,16 @@
|
|||||||
class:opacity-50={!createbtnenabled}
|
class:opacity-50={!createbtnenabled}
|
||||||
on:click={submit}
|
on:click={submit}
|
||||||
type="button"
|
type="button"
|
||||||
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
|
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
|
||||||
>
|
{$_('create')}
|
||||||
{$_("create")}
|
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
on:click={() => {
|
on:click={() => {
|
||||||
modal_open = false;
|
modal_open = false;
|
||||||
}}
|
}}
|
||||||
type="button"
|
type="button"
|
||||||
class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
|
class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
|
||||||
>
|
{$_('cancel')}
|
||||||
{$_("cancel")}
|
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,8 +1,11 @@
|
|||||||
<script>
|
<script>
|
||||||
import { _ } from "svelte-i18n";
|
import { _ } from "svelte-i18n";
|
||||||
import store from "../../store";
|
import store from "../../store";
|
||||||
import { RunnerService, ScanService } from "@odit/lfk-client-js";
|
import {
|
||||||
|
RunnerService,
|
||||||
|
ScanService,
|
||||||
|
} from "@odit/lfk-client-js";
|
||||||
|
import Toastify from "toastify-js";
|
||||||
import PromiseError from "../base/PromiseError.svelte";
|
import PromiseError from "../base/PromiseError.svelte";
|
||||||
import Select from "svelte-select";
|
import Select from "svelte-select";
|
||||||
let data_loaded = false;
|
let data_loaded = false;
|
||||||
@ -28,12 +31,14 @@
|
|||||||
original_data = Object.assign(original_data, data);
|
original_data = Object.assign(original_data, data);
|
||||||
original_data.runner = original_data.runner.id;
|
original_data.runner = original_data.runner.id;
|
||||||
editable = Object.assign(editable, original_data);
|
editable = Object.assign(editable, original_data);
|
||||||
RunnerService.runnerControllerGetAll().then((val) => {
|
RunnerService.runnerControllerGetAll().then(
|
||||||
current_runners = val.map((r) => {
|
(val) => {
|
||||||
return { label: getRunnerLabel(r), value: r };
|
current_runners = val.map((r) => {
|
||||||
});
|
return { label: getRunnerLabel(r), value: r };
|
||||||
runner = current_runners.find((r) => r.value.id == editable.runner);
|
});
|
||||||
});
|
runner = current_runners.find(r => r.value.id == editable.runner);
|
||||||
|
}
|
||||||
|
);
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
const getRunnerLabel = (option) =>
|
const getRunnerLabel = (option) =>
|
||||||
@ -44,7 +49,10 @@
|
|||||||
|
|
||||||
function submit() {
|
function submit() {
|
||||||
if (data_loaded === true && save_enabled) {
|
if (data_loaded === true && save_enabled) {
|
||||||
toast($_("scan-is-being-updated"));
|
Toastify({
|
||||||
|
text: $_('scan-is-being-updated'),
|
||||||
|
duration: 2500,
|
||||||
|
}).showToast();
|
||||||
let postdata = {};
|
let postdata = {};
|
||||||
if (original_data.responseType === "TRACKSCAN") {
|
if (original_data.responseType === "TRACKSCAN") {
|
||||||
postdata = Object.assign(postdata, editable);
|
postdata = Object.assign(postdata, editable);
|
||||||
@ -53,7 +61,11 @@
|
|||||||
.then((resp) => {
|
.then((resp) => {
|
||||||
Object.assign(original_data, editable);
|
Object.assign(original_data, editable);
|
||||||
original_data = original_data;
|
original_data = original_data;
|
||||||
toast.success($_("updated-scan"));
|
Toastify({
|
||||||
|
text: $_('updated-scan'),
|
||||||
|
duration: 2500,
|
||||||
|
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||||
|
}).showToast();
|
||||||
})
|
})
|
||||||
.catch((err) => {});
|
.catch((err) => {});
|
||||||
} else {
|
} else {
|
||||||
@ -62,7 +74,11 @@
|
|||||||
.then((resp) => {
|
.then((resp) => {
|
||||||
Object.assign(original_data, editable);
|
Object.assign(original_data, editable);
|
||||||
original_data = original_data;
|
original_data = original_data;
|
||||||
toast.success($_("updated-scan"));
|
Toastify({
|
||||||
|
text: $_('updated-scan'),
|
||||||
|
duration: 2500,
|
||||||
|
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||||
|
}).showToast();
|
||||||
})
|
})
|
||||||
.catch((err) => {});
|
.catch((err) => {});
|
||||||
}
|
}
|
||||||
@ -72,7 +88,11 @@
|
|||||||
function deleteScan() {
|
function deleteScan() {
|
||||||
ScanService.scanControllerRemove(original_data.id, false)
|
ScanService.scanControllerRemove(original_data.id, false)
|
||||||
.then((resp) => {
|
.then((resp) => {
|
||||||
toast($_("deleted-scan"));
|
Toastify({
|
||||||
|
text: $_('deleted-scan'),
|
||||||
|
duration: 500,
|
||||||
|
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||||
|
}).showToast();
|
||||||
location.replace("./");
|
location.replace("./");
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
@ -80,25 +100,11 @@
|
|||||||
delete_scan = original_data;
|
delete_scan = original_data;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
function format_laptime(laptime) {
|
function format_laptime(laptime){
|
||||||
if (laptime == 0 || laptime == null) {
|
if(laptime == 0 || laptime == null){return $_('first-scan-of-the-day')}
|
||||||
return $_("first-scan-of-the-day");
|
if(laptime < 60){return `${laptime}s`}
|
||||||
}
|
if(laptime < 3600){return `${Math.floor(laptime / 60)}min ${laptime - (Math.floor(laptime / 60)*60)}s`}
|
||||||
if (laptime < 60) {
|
return `${Math.floor(laptime / 3600)}h ${laptime - (Math.floor(laptime / 3600)*3600)}min ${laptime - (Math.floor(laptime / 3600)*3600) - (Math.floor(laptime / 60)*60)}`
|
||||||
return `${laptime}s`;
|
|
||||||
}
|
|
||||||
if (laptime < 3600) {
|
|
||||||
return `${Math.floor(laptime / 60)}min ${
|
|
||||||
laptime - Math.floor(laptime / 60) * 60
|
|
||||||
}s`;
|
|
||||||
}
|
|
||||||
return `${Math.floor(laptime / 3600)}h ${
|
|
||||||
laptime - Math.floor(laptime / 3600) * 3600
|
|
||||||
}min ${
|
|
||||||
laptime -
|
|
||||||
Math.floor(laptime / 3600) * 3600 -
|
|
||||||
Math.floor(laptime / 60) * 60
|
|
||||||
}`;
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@ -116,12 +122,9 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
width="24"
|
width="24"
|
||||||
height="24"
|
height="24"><path
|
||||||
><path
|
|
||||||
fill="currentColor"
|
fill="currentColor"
|
||||||
d="M2 4h2v16H2V4zm4 0h1v16H6V4zm2 0h2v16H8V4zm3 0h2v16h-2V4zm3 0h2v16h-2V4zm3 0h1v16h-1V4zm2 0h3v16h-3V4z"
|
d="M2 4h2v16H2V4zm4 0h1v16H6V4zm2 0h2v16H8V4zm3 0h2v16h-2V4zm3 0h2v16h-2V4zm3 0h1v16h-1V4zm2 0h3v16h-3V4z" /></svg>
|
||||||
/></svg
|
|
||||||
>
|
|
||||||
</li>
|
</li>
|
||||||
<li class="flex items-center ml-2">
|
<li class="flex items-center ml-2">
|
||||||
<a class="mr-2" href="./">Scans</a><svg
|
<a class="mr-2" href="./">Scans</a><svg
|
||||||
@ -134,10 +137,12 @@
|
|||||||
class="h-3 w-3 mr-2 stroke-current"
|
class="h-3 w-3 mr-2 stroke-current"
|
||||||
height="1em"
|
height="1em"
|
||||||
width="1em"
|
width="1em"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"><line
|
||||||
><line x1="5" y1="12" x2="19" y2="12" />
|
x1="5"
|
||||||
<polyline points="12 5 19 12 12 19" /></svg
|
y1="12"
|
||||||
>
|
x2="19"
|
||||||
|
y2="12" />
|
||||||
|
<polyline points="12 5 19 12 12 19" /></svg>
|
||||||
</li>
|
</li>
|
||||||
<li class="flex items-center">
|
<li class="flex items-center">
|
||||||
<span class="mr-2">{original_data.id}</span>
|
<span class="mr-2">{original_data.id}</span>
|
||||||
@ -148,24 +153,20 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="mb-8 text-3xl font-extrabold leading-tight">
|
<div class="mb-8 text-3xl font-extrabold leading-tight">
|
||||||
{runner.value?.firstname}
|
{runner.value?.firstname}
|
||||||
{runner.value?.middlename || ""}
|
{runner.value?.middlename || ''}
|
||||||
{runner.value?.lastname}
|
{runner.value?.lastname}
|
||||||
#{original_data.id}
|
#{original_data.id}
|
||||||
<span data-id="donation_actions_${original_data.id}">
|
<span data-id="donation_actions_${original_data.id}">
|
||||||
{#if store.state.jwtinfo.userdetails.permissions.includes("SCAN:DELETE")}
|
{#if store.state.jwtinfo.userdetails.permissions.includes('SCAN:DELETE')}
|
||||||
{#if delete_triggered}
|
{#if delete_triggered}
|
||||||
<button
|
<button
|
||||||
on:click={deleteScan}
|
on:click={deleteScan}
|
||||||
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:"
|
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:">{$_('confirm-deletion')}</button>
|
||||||
>{$_("confirm-deletion")}</button
|
|
||||||
>
|
|
||||||
<button
|
<button
|
||||||
on:click={() => {
|
on:click={() => {
|
||||||
delete_triggered = !delete_triggered;
|
delete_triggered = !delete_triggered;
|
||||||
}}
|
}}
|
||||||
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:"
|
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:">{$_('cancel')}</button>
|
||||||
>{$_("cancel")}</button
|
|
||||||
>
|
|
||||||
{/if}
|
{/if}
|
||||||
{#if !delete_triggered}
|
{#if !delete_triggered}
|
||||||
<button
|
<button
|
||||||
@ -173,9 +174,7 @@
|
|||||||
delete_triggered = true;
|
delete_triggered = true;
|
||||||
}}
|
}}
|
||||||
type="button"
|
type="button"
|
||||||
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:"
|
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:">{$_('delete-scan')}</button>
|
||||||
>{$_("delete-scan")}</button
|
|
||||||
>
|
|
||||||
{/if}
|
{/if}
|
||||||
{/if}
|
{/if}
|
||||||
{#if !delete_triggered}
|
{#if !delete_triggered}
|
||||||
@ -184,16 +183,13 @@
|
|||||||
class:opacity-50={!save_enabled}
|
class:opacity-50={!save_enabled}
|
||||||
type="button"
|
type="button"
|
||||||
on:click={submit}
|
on:click={submit}
|
||||||
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:"
|
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:">{$_('save-changes')}</button>
|
||||||
>{$_("save-changes")}</button
|
|
||||||
>
|
|
||||||
{/if}
|
{/if}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<!-- -->
|
<!-- -->
|
||||||
<div class="w-full inline-flex">
|
<div class="w-full inline-flex">
|
||||||
<label for="valid" class="block font-medium text-gray-700"
|
<label for="valid" class="block font-medium text-gray-700">{$_('status')}:
|
||||||
>{$_("status")}:
|
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
<input
|
<input
|
||||||
@ -204,57 +200,49 @@
|
|||||||
name="valid"
|
name="valid"
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
checked={editable.valid}
|
checked={editable.valid}
|
||||||
class="focus:ring-indigo-500 align-bottom h-7 w-5font-medium text-indigo-600 border-gray-300 rounded"
|
class="focus:ring-indigo-500 align-bottom h-7 w-5font-medium text-indigo-600 border-gray-300 rounded" />
|
||||||
/>
|
|
||||||
|
|
||||||
<p class="font-medium">
|
<p class="font-medium">
|
||||||
{#if editable.valid}{$_("valid")}{:else}{$_("invalid")}{/if}
|
{#if editable.valid}{$_('valid')}{:else}{$_('invalid')}{/if}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
{#if editable.responseType === "TRACKSCAN"}
|
{#if editable.responseType === 'TRACKSCAN'}
|
||||||
<div class="w-full inline-flex">
|
<div class="w-full inline-flex">
|
||||||
<label for="valid" class="block font-semibold text-gray-700"
|
<label for="valid" class="block font-semibold text-gray-700">{$_('track')}:
|
||||||
>{$_("track")}:
|
|
||||||
</label>
|
</label>
|
||||||
<a
|
<a
|
||||||
href="../tracks"
|
href="../tracks"
|
||||||
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
|
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{editable.track.name}
|
||||||
>{editable.track.name}
|
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="w-full inline-flex pb-3">
|
<div class="w-full inline-flex pb-3">
|
||||||
<label for="valid" class="block font-semibold text-gray-700"
|
<label for="valid" class="block font-semibold text-gray-700">{$_('laptime')}: {format_laptime(editable.laptime)}
|
||||||
>{$_("laptime")}: {format_laptime(editable.laptime)}
|
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
<div class=" w-full">
|
<div class=" w-full">
|
||||||
<label for="runner" class="block font-medium text-gray-700"
|
<label
|
||||||
>{$_("runner")}</label
|
for="runner"
|
||||||
>
|
class="block font-medium text-gray-700">{$_('runner')}</label>
|
||||||
<Select
|
<Select
|
||||||
containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
||||||
itemFilter={(label, filterText, option) =>
|
itemFilter={(label, filterText, option) => filterRunners(label, filterText, option)}
|
||||||
filterRunners(label, filterText, option)}
|
|
||||||
items={current_runners}
|
items={current_runners}
|
||||||
showChevron={true}
|
showChevron={true}
|
||||||
isDisabled={editable.responseType === "TRACKSCAN"}
|
isDisabled={editable.responseType === 'TRACKSCAN'}
|
||||||
placeholder={$_("search-for-runner-by-name-or-id")}
|
placeholder={$_('search-for-runner-by-name-or-id')}
|
||||||
noOptionsMessage={$_("no-runners-found")}
|
noOptionsMessage={$_('no-runners-found')}
|
||||||
bind:selectedValue={runner}
|
bind:selectedValue={runner}
|
||||||
on:select={(selectedValue) => {
|
on:select={(selectedValue) => {
|
||||||
editable.runner = selectedValue.detail.value.id;
|
editable.runner = selectedValue.detail.value.id;
|
||||||
}}
|
}}
|
||||||
on:clear={() => (editable.runner = null)}
|
on:clear={() => (editable.runner = null)} />
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class=" w-full">
|
<div class=" w-full">
|
||||||
<label
|
<label
|
||||||
for="scan_distance"
|
for="scan_distance"
|
||||||
class="block text-sm font-medium text-gray-700"
|
class="block text-sm font-medium text-gray-700">
|
||||||
>
|
{$_('distance')}</label>
|
||||||
{$_("distance")}</label
|
|
||||||
>
|
|
||||||
<div class="mt-1 flex rounded-md shadow-sm">
|
<div class="mt-1 flex rounded-md shadow-sm">
|
||||||
<input
|
<input
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
@ -262,23 +250,19 @@
|
|||||||
class:focus:border-red-500={!is_distance_valid}
|
class:focus:border-red-500={!is_distance_valid}
|
||||||
class:focus:ring-red-500={!is_distance_valid}
|
class:focus:ring-red-500={!is_distance_valid}
|
||||||
bind:value={editable.distance}
|
bind:value={editable.distance}
|
||||||
disabled={editable.responseType === "TRACKSCAN"}
|
disabled={editable.responseType === 'TRACKSCAN'}
|
||||||
type="number"
|
type="number"
|
||||||
step="1"
|
step="1"
|
||||||
name="scan_distance"
|
name="scan_distance"
|
||||||
class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 p-2"
|
class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 p-2"
|
||||||
placeholder="400"
|
placeholder="400" />
|
||||||
/>
|
|
||||||
<span
|
<span
|
||||||
class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500 text-sm"
|
class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500 text-sm">m</span>
|
||||||
>m</span
|
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
{#if !is_distance_valid}
|
{#if !is_distance_valid}
|
||||||
<span
|
<span
|
||||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
|
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||||
>
|
{$_('the-scans-distance-must-be-greater-than-0m')}
|
||||||
{$_("the-scans-distance-must-be-greater-than-0m")}
|
|
||||||
</span>
|
</span>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -10,27 +10,23 @@
|
|||||||
|
|
||||||
<section class="container p-5">
|
<section class="container p-5">
|
||||||
<span class="mb-1 text-3xl font-extrabold leading-tight">
|
<span class="mb-1 text-3xl font-extrabold leading-tight">
|
||||||
{$_("scans")}
|
{$_('scans')}
|
||||||
{#if store.state.jwtinfo.userdetails.permissions.includes("SCAN:CREATE")}
|
{#if store.state.jwtinfo.userdetails.permissions.includes('SCAN:CREATE')}
|
||||||
<button
|
<button
|
||||||
on:click={() => {
|
on:click={() => {
|
||||||
modal_open = true;
|
modal_open = true;
|
||||||
}}
|
}}
|
||||||
type="button"
|
type="button"
|
||||||
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
|
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
|
||||||
>
|
{$_('add-scan')}
|
||||||
{$_("add-scan")}
|
|
||||||
</button>
|
</button>
|
||||||
{/if}
|
{/if}
|
||||||
</span>
|
</span>
|
||||||
<ScansOverview bind:current_scans bind:addScans />
|
<ScansOverview bind:current_scans bind:addScans />
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{#if store.state.jwtinfo.userdetails.permissions.includes("SCAN:CREATE")}
|
{#if store.state.jwtinfo.userdetails.permissions.includes('SCAN:CREATE')}
|
||||||
<AddScanModal
|
<AddScanModal bind:modal_open on:created={(event)=>{
|
||||||
bind:modal_open
|
addScans(event.detail.scans)
|
||||||
on:created={(event) => {
|
}} />
|
||||||
addScans(event.detail.scans);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
{/if}
|
{/if}
|
||||||
|
|||||||
@ -6,7 +6,7 @@
|
|||||||
<div class="text-center items-center justify-center">
|
<div class="text-center items-center justify-center">
|
||||||
<p class="mb-16 text-lg text-gray-500">
|
<p class="mb-16 text-lg text-gray-500">
|
||||||
<img class="m-auto" style="height:15rem" src={scans_empty} alt="" />
|
<img class="m-auto" style="height:15rem" src={scans_empty} alt="" />
|
||||||
<span class="font-bold">{$_("there-are-no-scans-yet")}</span><br />
|
<span class="font-bold">{$_('there-are-no-scans-yet')}</span><br />
|
||||||
<span>{$_("add-your-fist-scan")}</span>
|
<span>{$_('add-your-fist-scan')}</span>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -13,7 +13,7 @@
|
|||||||
} from "@tanstack/svelte-table";
|
} from "@tanstack/svelte-table";
|
||||||
import { onMount } from "svelte";
|
import { onMount } from "svelte";
|
||||||
import { writable } from "svelte/store";
|
import { writable } from "svelte/store";
|
||||||
|
import Toastify from "toastify-js";
|
||||||
import TableBottom from "../shared/TableBottom.svelte";
|
import TableBottom from "../shared/TableBottom.svelte";
|
||||||
import TableHeader from "../shared/TableHeader.svelte";
|
import TableHeader from "../shared/TableHeader.svelte";
|
||||||
import ScansEmptyState from "./ScansEmptyState.svelte";
|
import ScansEmptyState from "./ScansEmptyState.svelte";
|
||||||
@ -23,7 +23,6 @@
|
|||||||
import CardRunner from "../cards/CardRunner.svelte";
|
import CardRunner from "../cards/CardRunner.svelte";
|
||||||
import ScanValid from "./ScanValid.svelte";
|
import ScanValid from "./ScanValid.svelte";
|
||||||
import DeleteScanModal from "./DeleteScanModal.svelte";
|
import DeleteScanModal from "./DeleteScanModal.svelte";
|
||||||
import toast from "svelte-french-toast";
|
|
||||||
|
|
||||||
$: selectedScans =
|
$: selectedScans =
|
||||||
$table?.getSelectedRowModel().rows.map((row) => row.original) || [];
|
$table?.getSelectedRowModel().rows.map((row) => row.original) || [];
|
||||||
@ -49,15 +48,21 @@
|
|||||||
if (laptime == 0 || laptime == null) {
|
if (laptime == 0 || laptime == null) {
|
||||||
return $_("first-scan-of-the-day");
|
return $_("first-scan-of-the-day");
|
||||||
}
|
}
|
||||||
laptime = Number(laptime);
|
if (laptime < 60) {
|
||||||
const h = Math.floor(laptime / 3600);
|
return `${laptime}s`;
|
||||||
const m = Math.floor((laptime % 3600) / 60);
|
}
|
||||||
const s = Math.floor((laptime % 3600) % 60);
|
if (laptime < 3600) {
|
||||||
|
return `${Math.floor(laptime / 60)}min ${
|
||||||
const hDisplay = h > 0 ? h + (h == 1 ? "h, " : "h, ") : "";
|
laptime - Math.floor(laptime / 60) * 60
|
||||||
const mDisplay = m > 0 ? m + (m == 1 ? "min, " : "min, ") : "";
|
}s`;
|
||||||
const sDisplay = s > 0 ? s + (s == 1 ? "s" : "s") : "";
|
}
|
||||||
return hDisplay + mDisplay + sDisplay;
|
return `${Math.floor(laptime / 3600)}h ${
|
||||||
|
laptime - Math.floor(laptime / 3600) * 3600
|
||||||
|
}min ${
|
||||||
|
laptime -
|
||||||
|
Math.floor(laptime / 3600) * 3600 -
|
||||||
|
Math.floor(laptime / 60) * 60
|
||||||
|
}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
const columns = [
|
const columns = [
|
||||||
@ -86,17 +91,7 @@
|
|||||||
accessorKey: "timestamp",
|
accessorKey: "timestamp",
|
||||||
header: () => $_("timestamp"),
|
header: () => $_("timestamp"),
|
||||||
cell: (info) => {
|
cell: (info) => {
|
||||||
return new Date(parseInt(info.getValue()) * 1000).toLocaleString(
|
return new Date(parseInt(info.getValue()) * 1000).toLocaleString();
|
||||||
{ language: "de-DE" },
|
|
||||||
{
|
|
||||||
day: "2-digit",
|
|
||||||
month: "2-digit",
|
|
||||||
year: "numeric",
|
|
||||||
hour: "2-digit",
|
|
||||||
minute: "2-digit",
|
|
||||||
second: "2-digit",
|
|
||||||
}
|
|
||||||
);
|
|
||||||
},
|
},
|
||||||
enableColumnFilter: false,
|
enableColumnFilter: false,
|
||||||
},
|
},
|
||||||
@ -174,14 +169,17 @@
|
|||||||
...options,
|
...options,
|
||||||
data: current_scans,
|
data: current_scans,
|
||||||
}));
|
}));
|
||||||
toast($_("scan-deleted"));
|
Toastify({
|
||||||
|
text: $_("scan-deleted"),
|
||||||
|
duration: 3500,
|
||||||
|
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||||
|
}).showToast();
|
||||||
}
|
}
|
||||||
|
|
||||||
onMount(async () => {
|
onMount(async () => {
|
||||||
let page = 0;
|
let page = 0;
|
||||||
let pagesize = 100;
|
|
||||||
while (page >= 0) {
|
while (page >= 0) {
|
||||||
const scans = await ScanService.scanControllerGetAll(page, pagesize);
|
const scans = await ScanService.scanControllerGetAll(page, 500);
|
||||||
if (scans.length == 0) {
|
if (scans.length == 0) {
|
||||||
page = -2;
|
page = -2;
|
||||||
}
|
}
|
||||||
@ -194,10 +192,8 @@
|
|||||||
|
|
||||||
dataLoaded = true;
|
dataLoaded = true;
|
||||||
page++;
|
page++;
|
||||||
if (pagesize < 1000) {
|
|
||||||
pagesize += 100;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
console.log("All scans loaded");
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@ -239,7 +235,11 @@
|
|||||||
data: current_scans,
|
data: current_scans,
|
||||||
}));
|
}));
|
||||||
$table.resetRowSelection();
|
$table.resetRowSelection();
|
||||||
toast.success($_("scan-deleted"));
|
Toastify({
|
||||||
|
text: $_("scan-deleted"),
|
||||||
|
duration: 3500,
|
||||||
|
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||||
|
}).showToast();
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{$_("delete-scans")}
|
{$_("delete-scans")}
|
||||||
@ -261,7 +261,7 @@
|
|||||||
{/if}
|
{/if}
|
||||||
<div class="overflow-x-auto">
|
<div class="overflow-x-auto">
|
||||||
<table class="w-full">
|
<table class="w-full">
|
||||||
<thead class="border-b border-gray-400">
|
<thead>
|
||||||
{#each $table.getHeaderGroups() as headerGroup}
|
{#each $table.getHeaderGroups() as headerGroup}
|
||||||
<tr class="select-none">
|
<tr class="select-none">
|
||||||
<th class="inset-y-0 left-0 px-4 py-2 text-left w-px">
|
<th class="inset-y-0 left-0 px-4 py-2 text-left w-px">
|
||||||
@ -280,7 +280,7 @@
|
|||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
{#each $table.getRowModel().rows as row}
|
{#each $table.getRowModel().rows as row}
|
||||||
<tr class="odd:bg-white even:bg-gray-100">
|
<tr>
|
||||||
<td class="inset-y-0 left-0 px-4 py-2 text-center w-px">
|
<td class="inset-y-0 left-0 px-4 py-2 text-center w-px">
|
||||||
<InputElement
|
<InputElement
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
@ -306,9 +306,3 @@
|
|||||||
<TableBottom {table} {selected} />
|
<TableBottom {table} {selected} />
|
||||||
{/if}
|
{/if}
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<style>
|
|
||||||
table tbody tr td:nth-child(2) {
|
|
||||||
font-family: monospace;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@ -3,8 +3,8 @@
|
|||||||
import { clickOutside } from "../base/outsideclick";
|
import { clickOutside } from "../base/outsideclick";
|
||||||
|
|
||||||
import { ScanStationService, TrackService } from "@odit/lfk-client-js";
|
import { ScanStationService, TrackService } from "@odit/lfk-client-js";
|
||||||
|
import Toastify from "toastify-js";
|
||||||
import Select from "svelte-select";
|
import Select from "svelte-select";
|
||||||
import toast from "svelte-french-toast";
|
|
||||||
export let modal_open;
|
export let modal_open;
|
||||||
export let new_station;
|
export let new_station;
|
||||||
export let current_stations;
|
export let current_stations;
|
||||||
@ -40,7 +40,10 @@
|
|||||||
function submit() {
|
function submit() {
|
||||||
if (processed_last_submit === true) {
|
if (processed_last_submit === true) {
|
||||||
processed_last_submit = false;
|
processed_last_submit = false;
|
||||||
toast.loading($_("scanstation-is-being-added"));
|
const toast = Toastify({
|
||||||
|
text: $_("scanstation-is-being-added"),
|
||||||
|
duration: -1,
|
||||||
|
}).showToast();
|
||||||
let postdata = {
|
let postdata = {
|
||||||
description,
|
description,
|
||||||
enabled,
|
enabled,
|
||||||
@ -53,8 +56,11 @@
|
|||||||
enabled = true;
|
enabled = true;
|
||||||
modal_open = false;
|
modal_open = false;
|
||||||
//
|
//
|
||||||
toast.dismiss();
|
Toastify({
|
||||||
toast.success($_("scanstation-added"));
|
text: $_("scanstation-added"),
|
||||||
|
duration: 500,
|
||||||
|
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||||
|
}).showToast();
|
||||||
current_stations.push(result);
|
current_stations.push(result);
|
||||||
current_stations = current_stations;
|
current_stations = current_stations;
|
||||||
new_station = result;
|
new_station = result;
|
||||||
@ -65,6 +71,8 @@
|
|||||||
})
|
})
|
||||||
.finally(() => {
|
.finally(() => {
|
||||||
processed_last_submit = true;
|
processed_last_submit = true;
|
||||||
|
//
|
||||||
|
toast.hideToast();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -73,101 +81,87 @@
|
|||||||
{#if modal_open}
|
{#if modal_open}
|
||||||
<div
|
<div
|
||||||
class="fixed z-10 inset-0 overflow-y-auto"
|
class="fixed z-10 inset-0 overflow-y-auto"
|
||||||
|
|
||||||
use:clickOutside
|
use:clickOutside
|
||||||
on:click_outside={() => {
|
on:click_outside={() => {
|
||||||
modal_open = false;
|
modal_open = false;
|
||||||
}}
|
}}>
|
||||||
>
|
|
||||||
<div
|
<div
|
||||||
class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
|
class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
|
||||||
>
|
|
||||||
<div class="fixed inset-0 transition-opacity" aria-hidden="true">
|
<div class="fixed inset-0 transition-opacity" aria-hidden="true">
|
||||||
<div
|
<div
|
||||||
class="absolute inset-0 bg-gray-500 opacity-75"
|
class="absolute inset-0 bg-gray-500 opacity-75"
|
||||||
data-id="modal_backdrop"
|
data-id="modal_backdrop" />
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<span
|
<span
|
||||||
class="hidden sm:inline-block sm:align-middle sm:h-screen"
|
class="hidden sm:inline-block sm:align-middle sm:h-screen"
|
||||||
aria-hidden="true">​</span
|
aria-hidden="true">​</span>
|
||||||
>
|
|
||||||
<div
|
<div
|
||||||
class="inline-block align-bottom bg-white rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
|
class="inline-block align-bottom bg-white rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
|
||||||
role="dialog"
|
role="dialog"
|
||||||
aria-modal="true"
|
aria-modal="true"
|
||||||
aria-labelledby="modal-headline"
|
aria-labelledby="modal-headline">
|
||||||
>
|
|
||||||
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
||||||
<div class="sm:flex sm:items-start">
|
<div class="sm:flex sm:items-start">
|
||||||
<div
|
<div
|
||||||
class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
|
class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
|
||||||
>
|
|
||||||
<svg
|
<svg
|
||||||
class="h-6 w-6 text-blue-600"
|
class="h-6 w-6 text-blue-600"
|
||||||
fill="currentColor"
|
fill="currentColor"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
width="24"
|
width="24"
|
||||||
height="24"
|
height="24"><path fill="none" d="M0 0h24v24H0z" />
|
||||||
><path fill="none" d="M0 0h24v24H0z" />
|
|
||||||
<path
|
<path
|
||||||
d="M4 5v11h16V5H4zM2 4a1 1 0 011-1h18a1 1 0 011 1v14H2V4zM1 19h22v2H1v-2z"
|
d="M4 5v11h16V5H4zM2 4a1 1 0 011-1h18a1 1 0 011 1v14H2V4zM1 19h22v2H1v-2z" /></svg>
|
||||||
/></svg
|
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
|
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
|
||||||
<h3 class="text-lg leading-6 font-medium text-gray-900">
|
<h3 class="text-lg leading-6 font-medium text-gray-900">
|
||||||
{$_("create-a-new-scanstation")}
|
{$_('create-a-new-scanstation')}
|
||||||
</h3>
|
</h3>
|
||||||
<div class="mt-2 mb-6">
|
<div class="mt-2 mb-6">
|
||||||
<p class="text-sm text-gray-500">
|
<p class="text-sm text-gray-500">
|
||||||
{$_(
|
{$_('please-provide-the-required-information-to-create-a-new-scanstation')}
|
||||||
"please-provide-the-required-information-to-create-a-new-scanstation"
|
|
||||||
)}
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="grid grid-cols-6 gap-6">
|
<div class="grid grid-cols-6 gap-6">
|
||||||
<div class="col-span-6">
|
<div class="col-span-6">
|
||||||
<label
|
<label
|
||||||
for="track"
|
for="track"
|
||||||
class="block text-sm font-medium text-gray-700">Track</label
|
class="block text-sm font-medium text-gray-700">Track</label>
|
||||||
>
|
|
||||||
<Select
|
<Select
|
||||||
containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
||||||
itemFilter={(label, filterText, option) =>
|
itemFilter={(label, filterText, option) => label
|
||||||
label.toLowerCase().includes(filterText.toLowerCase()) ||
|
.toLowerCase()
|
||||||
option.value.id
|
.includes(
|
||||||
|
filterText.toLowerCase()
|
||||||
|
) || option.value.id
|
||||||
.toString()
|
.toString()
|
||||||
.startsWith(filterText.toLowerCase())}
|
.startsWith(filterText.toLowerCase())}
|
||||||
items={tracks}
|
items={tracks}
|
||||||
showChevron={true}
|
showChevron={true}
|
||||||
placeholder="Search for a track (by name or id)."
|
placeholder="Search for a track (by name or id)."
|
||||||
noOptionsMessage="No track found"
|
noOptionsMessage="No track found"
|
||||||
on:select={(selectedValue) =>
|
on:select={(selectedValue) => (track = selectedValue.detail.value.id)}
|
||||||
(track = selectedValue.detail.value.id)}
|
on:clear={() => (track = null)} />
|
||||||
on:clear={() => (track = null)}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="col-span-6">
|
<div class="col-span-6">
|
||||||
<label
|
<label
|
||||||
for="description"
|
for="description"
|
||||||
class="block text-sm font-medium text-gray-700"
|
class="block text-sm font-medium text-gray-700">{$_('description')}</label>
|
||||||
>{$_("description")}</label
|
|
||||||
>
|
|
||||||
<input
|
<input
|
||||||
use:focus
|
use:focus
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
placeholder={$_("description")}
|
placeholder={$_('description')}
|
||||||
bind:value={description}
|
bind:value={description}
|
||||||
type="text"
|
type="text"
|
||||||
name="description"
|
name="description"
|
||||||
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="col-span-6">
|
<div class="col-span-6">
|
||||||
<label for="enabled" class="font-medium text-gray-700"
|
<label
|
||||||
>{$_("enabled_large")}</label
|
for="enabled"
|
||||||
>
|
class="font-medium text-gray-700">{$_('enabled_large')}</label>
|
||||||
<br />
|
<br />
|
||||||
<p class="text-gray-500">
|
<p class="text-gray-500">
|
||||||
<input
|
<input
|
||||||
@ -178,10 +172,9 @@
|
|||||||
name="enabled"
|
name="enabled"
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
checked={enabled}
|
checked={enabled}
|
||||||
class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
|
class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
|
||||||
/>
|
{$_('this-scanstation-is')}
|
||||||
{$_("this-scanstation-is")}
|
{#if enabled}{$_('enabled')}{:else}{$_('disabled')}{/if}
|
||||||
{#if enabled}{$_("enabled")}{:else}{$_("disabled")}{/if}
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -194,18 +187,16 @@
|
|||||||
class:opacity-50={!createbtnenabled}
|
class:opacity-50={!createbtnenabled}
|
||||||
on:click={submit}
|
on:click={submit}
|
||||||
type="button"
|
type="button"
|
||||||
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
|
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
|
||||||
>
|
{$_('create')}
|
||||||
{$_("create")}
|
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
on:click={() => {
|
on:click={() => {
|
||||||
modal_open = false;
|
modal_open = false;
|
||||||
}}
|
}}
|
||||||
type="button"
|
type="button"
|
||||||
class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
|
class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
|
||||||
>
|
{$_('cancel')}
|
||||||
{$_("cancel")}
|
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -3,8 +3,8 @@
|
|||||||
import { clickOutside } from "../base/outsideclick";
|
import { clickOutside } from "../base/outsideclick";
|
||||||
|
|
||||||
import { ScanStationService } from "@odit/lfk-client-js";
|
import { ScanStationService } from "@odit/lfk-client-js";
|
||||||
|
import Toastify from "toastify-js";
|
||||||
import { createEventDispatcher } from "svelte";
|
import { createEventDispatcher } from "svelte";
|
||||||
import toast from "svelte-french-toast";
|
|
||||||
export let modal_open;
|
export let modal_open;
|
||||||
export let delete_station;
|
export let delete_station;
|
||||||
const dispatch = createEventDispatcher();
|
const dispatch = createEventDispatcher();
|
||||||
@ -13,9 +13,16 @@
|
|||||||
dispatch("cancelDelete", { id: delete_station.id });
|
dispatch("cancelDelete", { id: delete_station.id });
|
||||||
}
|
}
|
||||||
function deleteStation() {
|
function deleteStation() {
|
||||||
ScanStationService.scanStationControllerRemove(delete_station.id, true)
|
ScanStationService.scanStationControllerRemove(
|
||||||
|
delete_station.id,
|
||||||
|
true
|
||||||
|
)
|
||||||
.then((resp) => {
|
.then((resp) => {
|
||||||
toast($_("station-deleted"));
|
Toastify({
|
||||||
|
text: $_('station-deleted'),
|
||||||
|
duration: 500,
|
||||||
|
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||||
|
}).showToast();
|
||||||
location.replace("./");
|
location.replace("./");
|
||||||
})
|
})
|
||||||
.catch((err) => {});
|
.catch((err) => {});
|
||||||
@ -25,54 +32,41 @@
|
|||||||
{#if modal_open}
|
{#if modal_open}
|
||||||
<div
|
<div
|
||||||
class="fixed z-10 inset-0 overflow-y-auto"
|
class="fixed z-10 inset-0 overflow-y-auto"
|
||||||
|
|
||||||
use:clickOutside
|
use:clickOutside
|
||||||
on:click_outside={cancelDelete}
|
on:click_outside={cancelDelete}>
|
||||||
>
|
|
||||||
<div
|
<div
|
||||||
class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
|
class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
|
||||||
>
|
|
||||||
<div class="fixed inset-0 transition-opacity" aria-hidden="true">
|
<div class="fixed inset-0 transition-opacity" aria-hidden="true">
|
||||||
<div
|
<div
|
||||||
class="absolute inset-0 bg-gray-500 opacity-75"
|
class="absolute inset-0 bg-gray-500 opacity-75"
|
||||||
data-id="modal_backdrop"
|
data-id="modal_backdrop" />
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<span
|
<span
|
||||||
class="hidden sm:inline-block sm:align-middle sm:h-screen"
|
class="hidden sm:inline-block sm:align-middle sm:h-screen"
|
||||||
aria-hidden="true">​</span
|
aria-hidden="true">​</span>
|
||||||
>
|
|
||||||
<div
|
<div
|
||||||
class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
|
class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
|
||||||
role="dialog"
|
role="dialog"
|
||||||
aria-modal="true"
|
aria-modal="true"
|
||||||
aria-labelledby="modal-headline"
|
aria-labelledby="modal-headline">
|
||||||
>
|
|
||||||
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
||||||
<div class="sm:flex sm:items-start">
|
<div class="sm:flex sm:items-start">
|
||||||
<div
|
<div
|
||||||
class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
|
class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
|
||||||
>
|
<svg class="h-6 w-6 text-blue-600" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M4 5v11h16V5H4zM2 4a1 1 0 011-1h18a1 1 0 011 1v14H2V4zM1 19h22v2H1v-2z"/></svg>
|
||||||
<svg
|
|
||||||
class="h-6 w-6 text-blue-600"
|
|
||||||
fill="currentColor"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
><path fill="none" d="M0 0h24v24H0z" /><path
|
|
||||||
d="M4 5v11h16V5H4zM2 4a1 1 0 011-1h18a1 1 0 011 1v14H2V4zM1 19h22v2H1v-2z"
|
|
||||||
/></svg
|
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
|
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
|
||||||
<h3 class="text-lg leading-6 font-medium text-gray-900">
|
<h3 class="text-lg leading-6 font-medium text-gray-900">
|
||||||
{$_("attention")}
|
{$_('attention')}
|
||||||
</h3>
|
</h3>
|
||||||
<div class="mt-2 mb-6">
|
<div class="mt-2 mb-6">
|
||||||
<p class="text-sm text-gray-500">
|
<p class="text-sm text-gray-500">
|
||||||
{$_(
|
{$_(
|
||||||
"do-you-want-to-delete-this-donor-with-all-related-donations"
|
'do-you-want-to-delete-this-donor-with-all-related-donations'
|
||||||
)}
|
)}
|
||||||
<br />
|
<br />
|
||||||
{$_("all-associated-scans-will-get-deleted-as-well")}
|
{$_('all-associated-scans-will-get-deleted-as-well')}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -82,16 +76,14 @@
|
|||||||
<button
|
<button
|
||||||
on:click={deleteStation}
|
on:click={deleteStation}
|
||||||
type="button"
|
type="button"
|
||||||
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
|
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">
|
||||||
>
|
{$_('confirm-delete-station-with-all-scans')}
|
||||||
{$_("confirm-delete-station-with-all-scans")}
|
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
on:click={cancelDelete}
|
on:click={cancelDelete}
|
||||||
type="button"
|
type="button"
|
||||||
class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
|
class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
|
||||||
>
|
{$_('cancel-keep-station')}
|
||||||
{$_("cancel-keep-station")}
|
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
<script>
|
<script>
|
||||||
import { _ } from "svelte-i18n";
|
import { _ } from "svelte-i18n";
|
||||||
|
import Toastify from "toastify-js";
|
||||||
import { tick, createEventDispatcher } from "svelte";
|
import { tick, createEventDispatcher } from "svelte";
|
||||||
import bwipjs from "bwip-js";
|
import bwipjs from "bwip-js";
|
||||||
|
|
||||||
@ -26,12 +26,21 @@
|
|||||||
if (!successful) {
|
if (!successful) {
|
||||||
throw new Error();
|
throw new Error();
|
||||||
}
|
}
|
||||||
toast($_("copied-token-to-clipboard"));
|
Toastify({
|
||||||
|
text: $_("copied-token-to-clipboard"),
|
||||||
|
duration: 500,
|
||||||
|
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||||
|
}).showToast();
|
||||||
copied = true;
|
copied = true;
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
toast.Error($_("error-whyile-copying-to-clipboard"));
|
Toastify({
|
||||||
|
text: $_("error-whyile-copying-to-clipboard"),
|
||||||
|
duration: 500,
|
||||||
|
backgroundColor:
|
||||||
|
"linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
|
||||||
|
}).showToast();
|
||||||
}
|
}
|
||||||
// we can notify by event or storage about copy status
|
// we can notifi by event or storage about copy status
|
||||||
valueCopy = null;
|
valueCopy = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -159,7 +168,7 @@
|
|||||||
id="codeswitch"
|
id="codeswitch"
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
bind:checked={is_qrcode}
|
bind:checked={is_qrcode}
|
||||||
class="relative shrink-0 w-[3.25rem] h-7 bg-gray-100 checked:bg-none checked:bg-blue-600 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 ring-1 ring-transparent focus:border-blue-600 focus:ring-blue-600 ring-offset-white focus:outline-none appearance-none before:inline-block before:w-6 before:h-6 before:bg-white checked:before:bg-blue-200 before:translate-x-0 checked:before:translate-x-full before:shadow before:rounded-full before:transform before:ring-0 before:transition before:ease-in-out before:duration-200"
|
class="relative shrink-0 w-[3.25rem] h-7 bg-gray-100 checked:bg-none checked:bg-blue-600 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 border border-transparent ring-1 ring-transparent focus:border-blue-600 focus:ring-blue-600 ring-offset-white focus:outline-none appearance-none before:inline-block before:w-6 before:h-6 before:bg-white checked:before:bg-blue-200 before:translate-x-0 checked:before:translate-x-full before:shadow before:rounded-full before:transform before:ring-0 before:transition before:ease-in-out before:duration-200 dark:before:bg-gray-400 dark:checked:before:bg-blue-200"
|
||||||
/>
|
/>
|
||||||
<label for="codeswitch" class="text-md text-gray-900 ml-3"
|
<label for="codeswitch" class="text-md text-gray-900 ml-3"
|
||||||
>QR-Code</label
|
>QR-Code</label
|
||||||
@ -173,7 +182,7 @@
|
|||||||
class:w-full={!is_qrcode}
|
class:w-full={!is_qrcode}
|
||||||
class="md:w-auto mb-2 mx-auto"
|
class="md:w-auto mb-2 mx-auto"
|
||||||
alt="Registrierungscode"
|
alt="Registrierungscode"
|
||||||
src={textToBase64Barcode(window.config.baseurl, is_qrcode)}
|
src={textToBase64Barcode(config.baseurl, is_qrcode)}
|
||||||
/>
|
/>
|
||||||
<h3 class="leading-6 font-medium text-gray-900">{$_("token")}</h3>
|
<h3 class="leading-6 font-medium text-gray-900">{$_("token")}</h3>
|
||||||
<img
|
<img
|
||||||
|
|||||||
@ -2,7 +2,7 @@
|
|||||||
import { t, _ } from "svelte-i18n";
|
import { t, _ } from "svelte-i18n";
|
||||||
import store from "../../store";
|
import store from "../../store";
|
||||||
import { ScanStationService, TrackService } from "@odit/lfk-client-js";
|
import { ScanStationService, TrackService } from "@odit/lfk-client-js";
|
||||||
|
import Toastify from "toastify-js";
|
||||||
import PromiseError from "../base/PromiseError.svelte";
|
import PromiseError from "../base/PromiseError.svelte";
|
||||||
import ConfirmScanStationDeletion from "./ConfirmScanStationDeletion.svelte";
|
import ConfirmScanStationDeletion from "./ConfirmScanStationDeletion.svelte";
|
||||||
import Select from "svelte-select";
|
import Select from "svelte-select";
|
||||||
@ -35,12 +35,19 @@
|
|||||||
});
|
});
|
||||||
function submit() {
|
function submit() {
|
||||||
if (data_loaded === true && save_enabled) {
|
if (data_loaded === true && save_enabled) {
|
||||||
toast($_("station-is-being-updated"));
|
Toastify({
|
||||||
|
text: $_("station-is-being-updated"),
|
||||||
|
duration: 2500,
|
||||||
|
}).showToast();
|
||||||
ScanStationService.scanStationControllerPut(original_data.id, editable)
|
ScanStationService.scanStationControllerPut(original_data.id, editable)
|
||||||
.then((resp) => {
|
.then((resp) => {
|
||||||
Object.assign(original_data, editable);
|
Object.assign(original_data, editable);
|
||||||
original_data = original_data;
|
original_data = original_data;
|
||||||
toast.success($_("updated-station"));
|
Toastify({
|
||||||
|
text: $_("updated-station"),
|
||||||
|
duration: 2500,
|
||||||
|
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||||
|
}).showToast();
|
||||||
})
|
})
|
||||||
.catch((err) => {});
|
.catch((err) => {});
|
||||||
} else {
|
} else {
|
||||||
@ -49,7 +56,11 @@
|
|||||||
function deleteStation() {
|
function deleteStation() {
|
||||||
ScanStationService.scanStationControllerRemove(original_data.id, false)
|
ScanStationService.scanStationControllerRemove(original_data.id, false)
|
||||||
.then((resp) => {
|
.then((resp) => {
|
||||||
toast($_("station-deleted"));
|
Toastify({
|
||||||
|
text: $_("station-deleted"),
|
||||||
|
duration: 500,
|
||||||
|
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||||
|
}).showToast();
|
||||||
location.replace("./");
|
location.replace("./");
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
@ -61,7 +72,7 @@
|
|||||||
|
|
||||||
<ConfirmScanStationDeletion bind:modal_open bind:delete_station />
|
<ConfirmScanStationDeletion bind:modal_open bind:delete_station />
|
||||||
{#await promise}
|
{#await promise}
|
||||||
{$_("loading-station-details")}
|
{$_('loading-station-details')}
|
||||||
{:then}
|
{:then}
|
||||||
<section class="container p-5 select-none">
|
<section class="container p-5 select-none">
|
||||||
<div class="flex flex-row mb-4">
|
<div class="flex flex-row mb-4">
|
||||||
@ -74,15 +85,12 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
width="24"
|
width="24"
|
||||||
height="24"
|
height="24"><path fill="none" d="M0 0h24v24H0z" />
|
||||||
><path fill="none" d="M0 0h24v24H0z" />
|
|
||||||
<path
|
<path
|
||||||
d="M4 5v11h16V5H4zM2 4a1 1 0 011-1h18a1 1 0 011 1v14H2V4zM1 19h22v2H1v-2z"
|
d="M4 5v11h16V5H4zM2 4a1 1 0 011-1h18a1 1 0 011 1v14H2V4zM1 19h22v2H1v-2z" /></svg>
|
||||||
/></svg
|
|
||||||
>
|
|
||||||
</li>
|
</li>
|
||||||
<li class="flex items-center ml-2">
|
<li class="flex items-center ml-2">
|
||||||
<a class="mr-2" href="./">{$_("scanstation")}</a><svg
|
<a class="mr-2" href="./">{$_('scanstation')}</a><svg
|
||||||
stroke="currentColor"
|
stroke="currentColor"
|
||||||
fill="none"
|
fill="none"
|
||||||
stroke-width="2"
|
stroke-width="2"
|
||||||
@ -92,10 +100,12 @@
|
|||||||
class="h-3 w-3 mr-2 stroke-current"
|
class="h-3 w-3 mr-2 stroke-current"
|
||||||
height="1em"
|
height="1em"
|
||||||
width="1em"
|
width="1em"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"><line
|
||||||
><line x1="5" y1="12" x2="19" y2="12" />
|
x1="5"
|
||||||
<polyline points="12 5 19 12 12 19" /></svg
|
y1="12"
|
||||||
>
|
x2="19"
|
||||||
|
y2="12" />
|
||||||
|
<polyline points="12 5 19 12 12 19" /></svg>
|
||||||
</li>
|
</li>
|
||||||
<li class="flex items-center">
|
<li class="flex items-center">
|
||||||
<span class="mr-2">#{original_data.id}</span>
|
<span class="mr-2">#{original_data.id}</span>
|
||||||
@ -107,20 +117,16 @@
|
|||||||
<div class="mb-8 text-3xl font-extrabold leading-tight">
|
<div class="mb-8 text-3xl font-extrabold leading-tight">
|
||||||
#{original_data.id}
|
#{original_data.id}
|
||||||
<span data-id="stations_actions_${editable.id}">
|
<span data-id="stations_actions_${editable.id}">
|
||||||
{#if store.state.jwtinfo.userdetails.permissions.includes("STATION:DELETE")}
|
{#if store.state.jwtinfo.userdetails.permissions.includes('STATION:DELETE')}
|
||||||
{#if delete_triggered}
|
{#if delete_triggered}
|
||||||
<button
|
<button
|
||||||
on:click={deleteStation}
|
on:click={deleteStation}
|
||||||
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
|
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('confirm-deletion')}</button>
|
||||||
>{$_("confirm-deletion")}</button
|
|
||||||
>
|
|
||||||
<button
|
<button
|
||||||
on:click={() => {
|
on:click={() => {
|
||||||
delete_triggered = !delete_triggered;
|
delete_triggered = !delete_triggered;
|
||||||
}}
|
}}
|
||||||
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:text-sm"
|
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:text-sm">{$_('cancel')}</button>
|
||||||
>{$_("cancel")}</button
|
|
||||||
>
|
|
||||||
{/if}
|
{/if}
|
||||||
{#if !delete_triggered}
|
{#if !delete_triggered}
|
||||||
<button
|
<button
|
||||||
@ -128,9 +134,7 @@
|
|||||||
delete_triggered = true;
|
delete_triggered = true;
|
||||||
}}
|
}}
|
||||||
type="button"
|
type="button"
|
||||||
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
|
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('delete-station')}</button>
|
||||||
>{$_("delete-station")}</button
|
|
||||||
>
|
|
||||||
{/if}
|
{/if}
|
||||||
{/if}
|
{/if}
|
||||||
{#if !delete_triggered}
|
{#if !delete_triggered}
|
||||||
@ -139,49 +143,48 @@
|
|||||||
class:opacity-50={!save_enabled}
|
class:opacity-50={!save_enabled}
|
||||||
type="button"
|
type="button"
|
||||||
on:click={submit}
|
on:click={submit}
|
||||||
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
|
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('save-changes')}</button>
|
||||||
>{$_("save-changes")}</button
|
|
||||||
>
|
|
||||||
{/if}
|
{/if}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<!-- -->
|
<!-- -->
|
||||||
<div class="text-sm w-full">
|
<div class="text-sm w-full">
|
||||||
<label for="track" class="block text-sm font-medium text-gray-700"
|
<label
|
||||||
>Track</label
|
for="track"
|
||||||
>
|
class="block text-sm font-medium text-gray-700">Track</label>
|
||||||
<Select
|
<Select
|
||||||
containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
||||||
itemFilter={(label, filterText, option) =>
|
itemFilter={(label, filterText, option) => label
|
||||||
label.toLowerCase().includes(filterText.toLowerCase()) ||
|
.toLowerCase()
|
||||||
option.value.id.toString().startsWith(filterText.toLowerCase())}
|
.includes(
|
||||||
|
filterText.toLowerCase()
|
||||||
|
) || option.value.id
|
||||||
|
.toString()
|
||||||
|
.startsWith(filterText.toLowerCase())}
|
||||||
items={tracks}
|
items={tracks}
|
||||||
showChevron={true}
|
showChevron={true}
|
||||||
placeholder="Search for a track (by name or id)."
|
placeholder="Search for a track (by name or id)."
|
||||||
noOptionsMessage="No track found"
|
noOptionsMessage="No track found"
|
||||||
bind:selectedValue={track}
|
bind:selectedValue={track}
|
||||||
on:select={(selectedValue) =>
|
on:select={(selectedValue) => (editable.track = selectedValue.detail.value.id)}
|
||||||
(editable.track = selectedValue.detail.value.id)}
|
on:clear={() => (track = null)} />
|
||||||
on:clear={() => (track = null)}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="text-sm w-full">
|
<div class="text-sm w-full">
|
||||||
<label for="description" class="font-medium text-gray-700"
|
<label
|
||||||
>{$_("description")}</label
|
for="description"
|
||||||
>
|
class="font-medium text-gray-700">{$_('description')}</label>
|
||||||
<input
|
<input
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
placeholder={$_("description")}
|
placeholder={$_('description')}
|
||||||
type="text"
|
type="text"
|
||||||
bind:value={editable.description}
|
bind:value={editable.description}
|
||||||
name="description"
|
name="description"
|
||||||
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="text-sm w-full">
|
<div class="text-sm w-full">
|
||||||
<label for="enabled" class="ml-1 font-medium text-gray-700"
|
<label
|
||||||
>{$_("enabled")}</label
|
for="enabled"
|
||||||
>
|
class="ml-1 font-medium text-gray-700">{$_('enabled')}</label>
|
||||||
<br />
|
<br />
|
||||||
<p class="text-gray-500">
|
<p class="text-gray-500">
|
||||||
<input
|
<input
|
||||||
@ -192,10 +195,9 @@
|
|||||||
name="enabled"
|
name="enabled"
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
checked={editable.enabled}
|
checked={editable.enabled}
|
||||||
class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
|
class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
|
||||||
/>
|
{$_('this-scanstation-is')}
|
||||||
{$_("this-scanstation-is")}
|
{#if editable.enabled}{$_('enabled')}{:else}{$_('disabled')}{/if}
|
||||||
{#if editable.enabled}{$_("enabled")}{:else}{$_("disabled")}{/if}
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user