formatting, full migration to svelte-french-toast
This commit is contained in:
parent
38a665024e
commit
46d076af9d
GPG Key ID:
3BB9ADD52DCA4314
@ -1,6 +1,5 @@
|
||||
FROM mcr.microsoft.com/vscode/devcontainers/base:alpine-3.12
|
||||
RUN apk update
|
||||
RUN apk add --upgrade nodejs-current npm
|
||||
RUN npm i -g yarn rimraf
|
||||
RUN npm i -g pnpm rimraf
|
||||
RUN rimraf node_modules
|
||||
RUN yarn set version berry
|
||||
4
.vscode/extensions.json
vendored
4
.vscode/extensions.json
vendored
@ -8,7 +8,5 @@
|
||||
"fivethree.vscode-svelte-snippets",
|
||||
"voorjaar.windicss-intellisense"
|
||||
],
|
||||
"unwantedRecommendations": [
|
||||
"antfu.i18n-ally"
|
||||
]
|
||||
"unwantedRecommendations": ["antfu.i18n-ally"]
|
||||
}
|
||||
2
.vscode/settings.json
vendored
2
.vscode/settings.json
vendored
@ -1,5 +1,5 @@
|
||||
{
|
||||
"i18n-ally.localesPaths": "src/locales",
|
||||
"i18n-ally.keystyle": "nested",
|
||||
"windicss.enableCodeFolding": false,
|
||||
"windicss.enableCodeFolding": false
|
||||
}
|
||||
@ -1,21 +1,27 @@
|
||||
# @odit/lfk-frontend
|
||||
|
||||
## ✒️ Overview
|
||||
|
||||
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.
|
||||
|
||||
## 🚀 Getting Started
|
||||
|
||||
```
|
||||
pnpm i
|
||||
```
|
||||
|
||||
## Development
|
||||
|
||||
```
|
||||
pnpm dev
|
||||
/
|
||||
pnpm dev --open
|
||||
```
|
||||
|
||||
## Build
|
||||
|
||||
```
|
||||
pnpm build
|
||||
```
|
||||
20
index.html
20
index.html
@ -1,22 +1,22 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<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">
|
||||
<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>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<span style="display: none;visibility: hidden;" id="buildinfo">RELEASE_INFO-1.3.4-RELEASE_INFO</span>
|
||||
<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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
8
order.js
8
order.js
@ -1,11 +1,13 @@
|
||||
import fs from 'fs'
|
||||
import fs from "fs";
|
||||
// get all language files
|
||||
const files = fs.readdirSync('./src/locales/');
|
||||
const files = fs.readdirSync("./src/locales/");
|
||||
files.forEach((f) => {
|
||||
// read file as object
|
||||
const unordered = JSON.parse(fs.readFileSync(`src/locales/${f}`));
|
||||
// order object by keys alpabetically A-Z
|
||||
const ordered = Object.keys(unordered).sort().reduce((obj, key) => {
|
||||
const ordered = Object.keys(unordered)
|
||||
.sort()
|
||||
.reduce((obj, key) => {
|
||||
obj[key] = unordered[key];
|
||||
return obj;
|
||||
}, {});
|
||||
|
||||
14
package.json
14
package.json
@ -5,6 +5,7 @@
|
||||
"scripts": {
|
||||
"i18n-order": "node order.js",
|
||||
"dev": "vite",
|
||||
"format": "prettier --write --plugin-search-dir=. .",
|
||||
"build": "vite build",
|
||||
"release": "release-it",
|
||||
"licenses:export": "license-exporter --json -o public"
|
||||
@ -12,14 +13,16 @@
|
||||
"license": "CC-BY-NC-SA-4.0",
|
||||
"devDependencies": {
|
||||
"@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",
|
||||
"autoprefixer": "10.4.14",
|
||||
"postcss": "8.4.23",
|
||||
"prettier": "^2.8.8",
|
||||
"prettier-plugin-svelte": "^2.10.0",
|
||||
"release-it": "15.10.1",
|
||||
"svelte-select": "3.17.0",
|
||||
"tailwindcss": "3.3.1",
|
||||
"vite": "4.3.1"
|
||||
"tailwindcss": "3.3.2",
|
||||
"vite": "4.3.3"
|
||||
},
|
||||
"release-it": {
|
||||
"git": {
|
||||
@ -41,18 +44,17 @@
|
||||
"dependencies": {
|
||||
"@odit/lfk-client-js": "1.1.1",
|
||||
"@paralleldrive/cuid2": "^2.2.0",
|
||||
"@tanstack/svelte-table": "^8.8.5",
|
||||
"@tanstack/svelte-table": "^8.8.6",
|
||||
"bwip-js": "^3.4.0",
|
||||
"check-password-strength": "2.0.7",
|
||||
"csvtojson": "2.0.10",
|
||||
"gridjs": "3.4.0",
|
||||
"localforage": "1.10.0",
|
||||
"marked": "2.0.3",
|
||||
"marked": "4.3.0",
|
||||
"svelte": "3.58.0",
|
||||
"svelte-french-toast": "1.0.4-beta.0",
|
||||
"svelte-i18n": "3.6.0",
|
||||
"tinro": "0.6.12",
|
||||
"toastify-js": "1.12.0",
|
||||
"validator": "13.9.0",
|
||||
"xlsx": "0.18.5"
|
||||
},
|
||||
|
||||
3779
pnpm-lock.yaml
generated
3779
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@ -1,6 +1,6 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {}
|
||||
}
|
||||
autoprefixer: {},
|
||||
},
|
||||
};
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
const config = {
|
||||
baseurl: 'http://localhost:4010',
|
||||
baseurl_documentserver: 'http://localhost:4010/documents',
|
||||
documentserver_key: 'NqZSYTy5AFQ7MppbLW5moqpTk7u7YrNUHKYhKYuThnnya2WpCOIU694hIZT1FzYe',
|
||||
baseurl: "http://localhost:4010",
|
||||
baseurl_documentserver: "http://localhost:4010/documents",
|
||||
documentserver_key:
|
||||
"NqZSYTy5AFQ7MppbLW5moqpTk7u7YrNUHKYhKYuThnnya2WpCOIU694hIZT1FzYe",
|
||||
// optional
|
||||
default_username: 'demo',
|
||||
default_password: 'demo',
|
||||
prefersHashRouting: true
|
||||
default_username: "demo",
|
||||
default_password: "demo",
|
||||
prefersHashRouting: true,
|
||||
};
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -29,6 +29,11 @@
|
||||
"sizes": "1540x144",
|
||||
"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,5 +1,4 @@
|
||||
<script>
|
||||
import "toastify-js/src/toastify.css";
|
||||
import "gridjs/dist/theme/mermaid.css";
|
||||
import { Route, router } from "tinro";
|
||||
router.subscribe((routeInfo) => {
|
||||
@ -28,7 +27,6 @@
|
||||
});
|
||||
window.onunhandledrejection = (event) => {
|
||||
if (event.reason.toString() == "Error: Unauthorized") {
|
||||
console.log("Found 1");
|
||||
localForage.clear();
|
||||
location.replace("/");
|
||||
}
|
||||
@ -78,23 +76,23 @@
|
||||
</script>
|
||||
|
||||
<Route>
|
||||
{#if $router.path === '/forgot_password'}
|
||||
{#if $router.path === "/forgot_password"}
|
||||
<Route path="/forgot_password">
|
||||
<ForgotPassword />
|
||||
</Route>
|
||||
{:else if $router.path.includes('/reset')}
|
||||
{:else if $router.path.includes("/reset")}
|
||||
<Route path="/reset/:resetkey" let:params>
|
||||
<ResetPassword {params} />
|
||||
</Route>
|
||||
{:else if $router.path === '/about'}
|
||||
{:else if $router.path === "/about"}
|
||||
<Route path="/about">
|
||||
<About />
|
||||
</Route>
|
||||
{:else if $router.path === '/imprint'}
|
||||
{:else if $router.path === "/imprint"}
|
||||
<Route path="/imprint">
|
||||
<Imprint />
|
||||
</Route>
|
||||
{:else if $router.path === '/privacy'}
|
||||
{:else if $router.path === "/privacy"}
|
||||
<Route path="/privacy">
|
||||
<Privacy />
|
||||
</Route>
|
||||
|
||||
@ -1,28 +1,22 @@
|
||||
<script>
|
||||
import { ApiError, AuthService } from "@odit/lfk-client-js";
|
||||
import { AuthService } from "@odit/lfk-client-js";
|
||||
import toast from "svelte-french-toast";
|
||||
import { _ } from "svelte-i18n";
|
||||
import Toastify from "toastify-js";
|
||||
import "toastify-js/src/toastify.css";
|
||||
import isEmail from "validator/es/lib/isEmail";
|
||||
|
||||
let reset_mail_sent = false;
|
||||
let usersEmail = "";
|
||||
function reset() {
|
||||
if (isEmail(usersEmail)) {
|
||||
toast.loading($_("mail-validation-in-progress"));
|
||||
AuthService.authControllerGetResetToken("de", { email: usersEmail })
|
||||
.then((resp) => {
|
||||
Toastify({
|
||||
text: $_("mail-validation-in-progress"),
|
||||
duration: 3500,
|
||||
}).showToast();
|
||||
toast.dismiss();
|
||||
reset_mail_sent = true;
|
||||
})
|
||||
.catch((err) => {});
|
||||
} else {
|
||||
Toastify({
|
||||
text: $_("invalid-mail-reset"),
|
||||
duration: 3500,
|
||||
}).showToast();
|
||||
toast($_("invalid-mail-reset"));
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -32,17 +26,18 @@
|
||||
<div class="max-w-md w-full py-12 px-6">
|
||||
<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">
|
||||
{$_('application_name')}
|
||||
{$_("application_name")}
|
||||
</p>
|
||||
<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>
|
||||
<div class="mt-6">
|
||||
<div class="mt-6">
|
||||
<a
|
||||
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">
|
||||
{$_('goback')}
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
@ -53,25 +48,26 @@
|
||||
<div class="max-w-md w-full py-12 px-6">
|
||||
<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">
|
||||
{$_('application_name')}
|
||||
{$_("application_name")}
|
||||
</p>
|
||||
<p class="mt-6 text-sm text-center text-gray-900">
|
||||
{$_('forgot_password')}
|
||||
{$_("forgot_password")}
|
||||
</p>
|
||||
<p class="mt-2 mb-2 text-sm text-center text-gray-900">
|
||||
{$_('dont-panic-were-resetting-it')}
|
||||
{$_("dont-panic-were-resetting-it")}
|
||||
</p>
|
||||
<div>
|
||||
<div class="rounded-md shadow-sm">
|
||||
<div>
|
||||
<input
|
||||
aria-label={$_('e-mail-adress')}
|
||||
aria-label={$_("e-mail-adress")}
|
||||
name="email"
|
||||
type="email"
|
||||
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"
|
||||
placeholder={$_('e-mail-adress')}
|
||||
bind:value={usersEmail} />
|
||||
placeholder={$_("e-mail-adress")}
|
||||
bind:value={usersEmail}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -79,19 +75,22 @@
|
||||
<button
|
||||
on:click={reset}
|
||||
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">
|
||||
<svg
|
||||
class="h-5 w-5 text-gray-500"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20">
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path
|
||||
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"
|
||||
clip-rule="evenodd" />
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
{$_('reset-my-password')}
|
||||
{$_("reset-my-password")}
|
||||
</button>
|
||||
</div>
|
||||
<div class="mt-6">
|
||||
@ -100,24 +99,30 @@
|
||||
<div class="w-full border-t border-gray-300" />
|
||||
</div>
|
||||
<div class="relative flex justify-center text-sm">
|
||||
<span
|
||||
class="px-2 bg-gray-100 text-gray-500">{$_('dont-have-your-email-connected')}</span>
|
||||
<span class="px-2 bg-gray-100 text-gray-500"
|
||||
>{$_("dont-have-your-email-connected")}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
class="mt-2 text-sm px-2 bg-gray-100 text-gray-500 justify-center relative flex">{$_('cannot-reset-your-password-directly')}</span>
|
||||
class="mt-2 text-sm px-2 bg-gray-100 text-gray-500 justify-center relative flex"
|
||||
>{$_("cannot-reset-your-password-directly")}</span
|
||||
>
|
||||
|
||||
<div class="mt-6">
|
||||
<a
|
||||
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">
|
||||
{$_('send-a-mail-to-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"
|
||||
>
|
||||
{$_("send-a-mail-to-lfk-odit-services")}
|
||||
</a>
|
||||
</div>
|
||||
<div class="mt-6">
|
||||
<a
|
||||
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">{$_('goback')}</a>
|
||||
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
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -33,20 +33,20 @@
|
||||
|
||||
<div class="ml-4">
|
||||
<ul class="list-disc font-medium tracking-wide text-red-500 text-xs">
|
||||
{#if !strength.contains.includes('lowercase')}
|
||||
<li>{$_('must-contain-a-lowercase-letter')}</li>
|
||||
{#if !strength.contains.includes("lowercase")}
|
||||
<li>{$_("must-contain-a-lowercase-letter")}</li>
|
||||
{/if}
|
||||
{#if !strength.contains.includes('uppercase')}
|
||||
<li>{$_('must-contain-a-uppercase-letter')}</li>
|
||||
{#if !strength.contains.includes("uppercase")}
|
||||
<li>{$_("must-contain-a-uppercase-letter")}</li>
|
||||
{/if}
|
||||
{#if !strength.contains.includes('number')}
|
||||
<li>{$_('must-contain-a-number')}</li>
|
||||
{#if !strength.contains.includes("number")}
|
||||
<li>{$_("must-contain-a-number")}</li>
|
||||
{/if}
|
||||
{#if !(strength.length > 9)}
|
||||
<li>{$_('must-be-at-least-10-characters-long')}</li>
|
||||
<li>{$_("must-be-at-least-10-characters-long")}</li>
|
||||
{/if}
|
||||
{#if !(passwords_match == true)}
|
||||
<li>{$_('passwords-dont-match')}</li>
|
||||
<li>{$_("passwords-dont-match")}</li>
|
||||
{/if}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
<script>
|
||||
import { AuthService } from "@odit/lfk-client-js";
|
||||
import { _ } from "svelte-i18n";
|
||||
import Toastify from "toastify-js";
|
||||
import "toastify-js/src/toastify.css";
|
||||
import toast from "svelte-french-toast";
|
||||
import PasswordStrength, {
|
||||
password_strong_enough,
|
||||
} from "../auth/PasswordStrength.svelte";
|
||||
@ -11,101 +10,97 @@
|
||||
export let params;
|
||||
function set_new_password() {
|
||||
if (password.trim() !== "") {
|
||||
Toastify({
|
||||
text: $_("password-reset-in-progress"),
|
||||
duration: 3500,
|
||||
}).showToast();
|
||||
toast.loading($_("password-reset-in-progress"));
|
||||
AuthService.authControllerResetPassword(atob(params.resetkey), {
|
||||
password,
|
||||
})
|
||||
.then((resp) => {
|
||||
Toastify({
|
||||
text: $_("password-reset-successful"),
|
||||
duration: 3500,
|
||||
}).showToast();
|
||||
toast.dismiss();
|
||||
toast($_("password-reset-successful"));
|
||||
state = "reset_success";
|
||||
})
|
||||
.catch((err) => {
|
||||
state = "reset_error";
|
||||
});
|
||||
} else {
|
||||
Toastify({
|
||||
text: $_("please-provide-a-password"),
|
||||
duration: 3500,
|
||||
}).showToast();
|
||||
toast.dismiss();
|
||||
toast.error($_("please-provide-a-password"));
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if state === 'reset_success'}
|
||||
{#if state === "reset_success"}
|
||||
<div class="min-h-screen flex items-center justify-center bg-gray-100">
|
||||
<div class="max-w-md w-full py-12 px-6">
|
||||
<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">
|
||||
{$_('application_name')}
|
||||
{$_("application_name")}
|
||||
</p>
|
||||
<p class="mt-2 mb-2 text-sm text-center text-gray-900 font-bold">
|
||||
{$_('successful-password-reset')}
|
||||
{$_("successful-password-reset")}
|
||||
</p>
|
||||
<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>
|
||||
<div class="mt-6">
|
||||
<div class="mt-6">
|
||||
<a
|
||||
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">
|
||||
{$_('go-to-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"
|
||||
>
|
||||
{$_("go-to-login")}
|
||||
</a>
|
||||
</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="max-w-md w-full py-12 px-6">
|
||||
<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">
|
||||
{$_('application_name')}
|
||||
{$_("application_name")}
|
||||
</p>
|
||||
<p class="mt-2 mb-2 text-sm text-center text-gray-900 font-bold">
|
||||
{$_('password-reset-failed')}
|
||||
{$_("password-reset-failed")}
|
||||
</p>
|
||||
<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>
|
||||
<div class="mt-6">
|
||||
<div class="mt-6">
|
||||
<a
|
||||
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">
|
||||
{$_('request-a-new-reset-mail')}
|
||||
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")}
|
||||
</a>
|
||||
</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="max-w-md w-full py-12 px-6">
|
||||
<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">
|
||||
{$_('application_name')}
|
||||
{$_("application_name")}
|
||||
</p>
|
||||
<p class="mt-2 mb-4 text-md text-center text-gray-900">
|
||||
{$_('reset-password')}
|
||||
{$_("reset-password")}
|
||||
</p>
|
||||
<div>
|
||||
<div class="rounded-md shadow-sm">
|
||||
<div>
|
||||
<input
|
||||
aria-label={$_('new-password')}
|
||||
aria-label={$_("new-password")}
|
||||
name="password"
|
||||
type="password"
|
||||
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"
|
||||
placeholder={$_('new-password')}
|
||||
bind:value={password} />
|
||||
placeholder={$_("new-password")}
|
||||
bind:value={password}
|
||||
/>
|
||||
</div>
|
||||
<PasswordStrength bind:password_change={password} />
|
||||
</div>
|
||||
@ -116,19 +111,22 @@
|
||||
disabled={!password_strong_enough(password)}
|
||||
class:opacity-50={!password_strong_enough(password)}
|
||||
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">
|
||||
<svg
|
||||
class="h-5 w-5 text-gray-500"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20">
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path
|
||||
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"
|
||||
clip-rule="evenodd" />
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
{$_('reset-my-password')}
|
||||
{$_("reset-my-password")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,274 +0,0 @@
|
||||
<!--
|
||||
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,19 +4,22 @@
|
||||
|
||||
<body class="antialiased font-sans">
|
||||
<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="text-black text-5xl md:text-15xl font-black">
|
||||
{$_('internal-error')}
|
||||
{$_("internal-error")}
|
||||
</div>
|
||||
<div class="w-16 h-1 bg-purple-light my-3 md:my-6" />
|
||||
<p
|
||||
class="text-grey-darker text-2xl md:text-3xl font-light mb-8 leading-normal">
|
||||
{$_('generic-ui-logic-error')}
|
||||
class="text-grey-darker text-2xl md:text-3xl font-light mb-8 leading-normal"
|
||||
>
|
||||
{$_("generic-ui-logic-error")}
|
||||
</p>
|
||||
<a
|
||||
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">{$_('goback')}</a>
|
||||
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
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
|
||||
<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">
|
||||
<b class="capitalize">{$_('general_promise_error')}</b>
|
||||
<b class="capitalize">{$_("general_promise_error")}</b>
|
||||
{error}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@ -1,24 +1,25 @@
|
||||
export function getlang(langkeys) {
|
||||
return {
|
||||
search: {
|
||||
placeholder: langkeys.search
|
||||
placeholder: langkeys.search,
|
||||
},
|
||||
sort: {
|
||||
sortAsc: langkeys.sort_column_ascending,
|
||||
sortDesc: langkeys.sort_column_descending
|
||||
sortDesc: langkeys.sort_column_descending,
|
||||
},
|
||||
pagination: {
|
||||
previous: langkeys.previous,
|
||||
next: langkeys.next,
|
||||
navigate: (page, pages) => `${langkeys.page} ${page} ${langkeys.of} ${pages}`,
|
||||
navigate: (page, pages) =>
|
||||
`${langkeys.page} ${page} ${langkeys.of} ${pages}`,
|
||||
page: (page) => `${langkeys.page} ${page}`,
|
||||
showing: langkeys.showing,
|
||||
of: langkeys.of,
|
||||
to: langkeys.to,
|
||||
results: langkeys.records
|
||||
results: langkeys.records,
|
||||
},
|
||||
loading: langkeys.loading,
|
||||
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.
|
||||
Issue: https://git.odit.services/lfk/frontend/issues/136
|
||||
-->
|
||||
<div class="opacity-50"></div>
|
||||
<div class="opacity-50" />
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
/** Dispatch event on click outside of node */
|
||||
export function clickOutside(node) {
|
||||
const handleClick = (event) => {
|
||||
if (event.target.getAttribute('data-id') === 'modal_backdrop') {
|
||||
node.dispatchEvent(new CustomEvent('click_outside', node));
|
||||
if (event.target.getAttribute("data-id") === "modal_backdrop") {
|
||||
node.dispatchEvent(new CustomEvent("click_outside", node));
|
||||
}
|
||||
};
|
||||
document.removeEventListener('click', handleClick, true);
|
||||
document.addEventListener('click', handleClick, true);
|
||||
document.removeEventListener("click", handleClick, true);
|
||||
document.addEventListener("click", handleClick, true);
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -3,12 +3,9 @@
|
||||
import { clickOutside } from "../base/outsideclick";
|
||||
|
||||
import { RunnerCardService } from "@odit/lfk-client-js";
|
||||
import Toastify from "toastify-js";
|
||||
import { createEventDispatcher } from "svelte";
|
||||
import toast from "svelte-french-toast";
|
||||
export let bulk_modal_open;
|
||||
function focus(el) {
|
||||
el.focus();
|
||||
}
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
$: card_count = 0;
|
||||
@ -32,28 +29,20 @@
|
||||
function submit_without_print() {
|
||||
if (processed_last_submit === true) {
|
||||
processed_last_submit = false;
|
||||
const toast = Toastify({
|
||||
text: $_("creating-blanco-cards"),
|
||||
duration: -1,
|
||||
}).showToast();
|
||||
toast.loading($_("creating-blanco-cards"));
|
||||
RunnerCardService.runnerCardControllerPostBlancoBulk(card_count, true)
|
||||
.then((result) => {
|
||||
bulk_modal_open = false;
|
||||
//
|
||||
Toastify({
|
||||
text: $_("created-blanco-cards"),
|
||||
duration: 500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
dispatch("created", {cards: result})
|
||||
toast.dismiss();
|
||||
toast.success($_("created-blanco-cards"));
|
||||
dispatch("created", { cards: result });
|
||||
})
|
||||
.catch((err) => {
|
||||
//
|
||||
})
|
||||
.finally(() => {
|
||||
processed_last_submit = true;
|
||||
//
|
||||
toast.hideToast();
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -61,24 +50,16 @@
|
||||
function submit_with_print() {
|
||||
if (processed_last_submit === true) {
|
||||
processed_last_submit = false;
|
||||
const toast = Toastify({
|
||||
text: $_("creating-blanco-cards"),
|
||||
duration: -1,
|
||||
}).showToast();
|
||||
toast.dismiss();
|
||||
toast.loading($_("creating-blanco-cards"));
|
||||
RunnerCardService.runnerCardControllerPostBlancoBulk(card_count, true)
|
||||
.then((result) => {
|
||||
bulk_modal_open = false;
|
||||
//
|
||||
Toastify({
|
||||
text: $_("created-blanco-cards"),
|
||||
duration: 500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
const toast = Toastify({
|
||||
text: $_("generating-pdf"),
|
||||
duration: -1,
|
||||
}).showToast();
|
||||
dispatch("created", {cards: result})
|
||||
toast.dismiss();
|
||||
toast.success($_("created-blanco-cards"));
|
||||
toast.loading($_("generating-pdf"));
|
||||
dispatch("created", { cards: result });
|
||||
fetch(
|
||||
`${config.baseurl_documentserver}/cards?&download=true&key=${config.documentserver_key}`,
|
||||
{
|
||||
@ -91,13 +72,8 @@
|
||||
)
|
||||
.then((response) => {
|
||||
if (response.status != "200") {
|
||||
toast.hideToast();
|
||||
Toastify({
|
||||
text: $_("pdf-generation-failed"),
|
||||
duration: 3500,
|
||||
backgroundColor:
|
||||
"linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
|
||||
}).showToast();
|
||||
toast.dismiss();
|
||||
toast.error($_("pdf-generation-failed"));
|
||||
} else {
|
||||
return response.blob();
|
||||
}
|
||||
@ -110,12 +86,8 @@
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
a.remove();
|
||||
toast.hideToast();
|
||||
Toastify({
|
||||
text: $_("pdf-successfully-generated"),
|
||||
duration: 3500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
toast.dismiss();
|
||||
toast.success($_("pdf-successfully-generated"));
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err);
|
||||
@ -126,8 +98,6 @@
|
||||
})
|
||||
.finally(() => {
|
||||
processed_last_submit = true;
|
||||
//
|
||||
toast.hideToast();
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -136,55 +106,67 @@
|
||||
{#if bulk_modal_open}
|
||||
<div
|
||||
class="fixed z-10 inset-0 overflow-y-auto"
|
||||
|
||||
use:clickOutside
|
||||
on:click_outside={() => {
|
||||
bulk_modal_open = false;
|
||||
}}>
|
||||
}}
|
||||
>
|
||||
<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="absolute inset-0 bg-gray-500 opacity-75"
|
||||
data-id="modal_backdrop" />
|
||||
data-id="modal_backdrop"
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
class="hidden sm:inline-block sm:align-middle sm:h-screen"
|
||||
aria-hidden="true">​</span>
|
||||
aria-hidden="true">​</span
|
||||
>
|
||||
<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"
|
||||
role="dialog"
|
||||
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="sm:flex sm:items-start">
|
||||
<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
|
||||
class="h-6 w-6 text-blue-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" />
|
||||
height="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>
|
||||
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
|
||||
>
|
||||
</div>
|
||||
<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">
|
||||
{$_('create-bulk-blanco-cards')}
|
||||
{$_("create-bulk-blanco-cards")}
|
||||
</h3>
|
||||
<div class="mt-2 mb-6">
|
||||
<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>
|
||||
</div>
|
||||
<div class="grid grid-cols-6 gap-6">
|
||||
<div class="col-span-6">
|
||||
<label
|
||||
for="amount"
|
||||
class="block text-sm font-medium text-gray-700">{$_('amount')}</label>
|
||||
class="block text-sm font-medium text-gray-700"
|
||||
>{$_("amount")}</label
|
||||
>
|
||||
<div class="mt-1 flex rounded-md shadow-sm">
|
||||
<input
|
||||
autocomplete="off"
|
||||
@ -196,14 +178,18 @@
|
||||
step="1"
|
||||
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"
|
||||
placeholder="400" />
|
||||
placeholder="400"
|
||||
/>
|
||||
<span
|
||||
class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500 text-sm">{$_('cards')}</span>
|
||||
class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500 text-sm"
|
||||
>{$_("cards")}</span
|
||||
>
|
||||
</div>
|
||||
{#if !is_card_count_valid}
|
||||
<span
|
||||
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')}
|
||||
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")}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
@ -217,24 +203,27 @@
|
||||
class:opacity-50={!createbtnenabled}
|
||||
on:click={submit_with_print}
|
||||
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">
|
||||
{$_('create-and-generate-pdf')}
|
||||
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")}
|
||||
</button>
|
||||
<button
|
||||
disabled={!createbtnenabled}
|
||||
class:opacity-50={!createbtnenabled}
|
||||
on:click={submit_without_print}
|
||||
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">
|
||||
{$_('create-without-pdf')}
|
||||
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")}
|
||||
</button>
|
||||
<button
|
||||
on:click={() => {
|
||||
bulk_modal_open = false;
|
||||
}}
|
||||
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">
|
||||
{$_('cancel')}
|
||||
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")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -2,14 +2,10 @@
|
||||
import { _ } from "svelte-i18n";
|
||||
import { clickOutside } from "../base/outsideclick";
|
||||
|
||||
import {
|
||||
RunnerCardService,
|
||||
RunnerService,
|
||||
ScanService,
|
||||
} from "@odit/lfk-client-js";
|
||||
import { RunnerCardService, RunnerService } from "@odit/lfk-client-js";
|
||||
import Select from "svelte-select";
|
||||
import Toastify from "toastify-js";
|
||||
import { createEventDispatcher } from "svelte";
|
||||
import toast from "svelte-french-toast";
|
||||
export let modal_open;
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
@ -62,10 +58,7 @@
|
||||
function submit() {
|
||||
if (processed_last_submit === true) {
|
||||
processed_last_submit = false;
|
||||
const toast = Toastify({
|
||||
text: $_("adding-card"),
|
||||
duration: -1,
|
||||
}).showToast();
|
||||
toast.loading($_("adding-card"));
|
||||
let postdata = {
|
||||
runner,
|
||||
enabled,
|
||||
@ -75,11 +68,8 @@
|
||||
runner = 0;
|
||||
modal_open = false;
|
||||
//
|
||||
Toastify({
|
||||
text: $_("card-added"),
|
||||
duration: 500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
toast.dismiss();
|
||||
toast.success($_("card-added"));
|
||||
dispatch("created", { cards: [result] });
|
||||
})
|
||||
.catch((err) => {
|
||||
@ -87,8 +77,6 @@
|
||||
})
|
||||
.finally(() => {
|
||||
processed_last_submit = true;
|
||||
//
|
||||
toast.hideToast();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,8 +4,8 @@
|
||||
|
||||
import { RunnerCardService, RunnerService } from "@odit/lfk-client-js";
|
||||
import Select from "svelte-select";
|
||||
import Toastify from "toastify-js";
|
||||
import { createEventDispatcher } from "svelte";
|
||||
import toast from "svelte-french-toast";
|
||||
export let edit_modal_open;
|
||||
export let runner = {};
|
||||
export let editable = {};
|
||||
@ -14,7 +14,7 @@
|
||||
option.firstname + " " + (option.middlename || "") + " " + option.lastname;
|
||||
const filterRunners = (label, filterText, option) => {
|
||||
if (filterText.startsWith("#")) {
|
||||
return option.value.id == parseInt(filterText.replace("#",""))
|
||||
return option.value.id == parseInt(filterText.replace("#", ""));
|
||||
}
|
||||
return (
|
||||
label.toLowerCase().includes(filterText.toLowerCase()) ||
|
||||
@ -54,32 +54,23 @@
|
||||
function submit() {
|
||||
if (processed_last_submit === true) {
|
||||
processed_last_submit = false;
|
||||
const toast = Toastify({
|
||||
text: $_("updating-card"),
|
||||
duration: -1,
|
||||
}).showToast();
|
||||
toast.loading($_("updating-card"));
|
||||
RunnerCardService.runnerCardControllerPut(original_data.id, editable)
|
||||
.then((result) => {
|
||||
let id = original_data.id;
|
||||
runner = {};
|
||||
editable = {};
|
||||
original_data = {};
|
||||
edit_modal_open = false;
|
||||
//
|
||||
Toastify({
|
||||
text: $_("card-updated"),
|
||||
duration: 500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
dispatch('dataUpdated', {card: result});
|
||||
toast.dismiss();
|
||||
toast.success($_("card-updated"));
|
||||
dispatch("dataUpdated", { card: result });
|
||||
})
|
||||
.catch((err) => {
|
||||
//
|
||||
})
|
||||
.finally(() => {
|
||||
processed_last_submit = true;
|
||||
//
|
||||
toast.hideToast();
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -88,65 +79,78 @@
|
||||
{#if edit_modal_open}
|
||||
<div
|
||||
class="fixed z-10 inset-0 overflow-y-auto"
|
||||
|
||||
use:clickOutside
|
||||
on:click_outside={() => {
|
||||
edit_modal_open = false;
|
||||
}}>
|
||||
}}
|
||||
>
|
||||
<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="absolute inset-0 bg-gray-500 opacity-75"
|
||||
data-id="modal_backdrop" />
|
||||
data-id="modal_backdrop"
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
class="hidden sm:inline-block sm:align-middle sm:h-screen"
|
||||
aria-hidden="true">​</span>
|
||||
aria-hidden="true">​</span
|
||||
>
|
||||
<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"
|
||||
role="dialog"
|
||||
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="sm:flex sm:items-start">
|
||||
<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"
|
||||
width="24"
|
||||
height="24"><path fill="none" d="M0 0h24v24H0z" />
|
||||
height="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>
|
||||
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
|
||||
>
|
||||
</div>
|
||||
<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">
|
||||
{$_('edit-a-card')}
|
||||
{$_("edit-a-card")}
|
||||
</h3>
|
||||
<div class="mt-2 mb-6">
|
||||
<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>
|
||||
</div>
|
||||
<div class="grid grid-cols-6 gap-6">
|
||||
<div class="col-span-6">
|
||||
<label
|
||||
for="runner"
|
||||
class="block text-sm font-medium text-gray-700">{$_('runner')}</label>
|
||||
class="block text-sm font-medium text-gray-700"
|
||||
>{$_("runner")}</label
|
||||
>
|
||||
<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"
|
||||
itemFilter={(label, filterText, option) => filterRunners(label, filterText, option)}
|
||||
itemFilter={(label, filterText, option) =>
|
||||
filterRunners(label, filterText, option)}
|
||||
items={runners}
|
||||
showChevron={true}
|
||||
placeholder={$_('search-for-runner-by-name-or-id')}
|
||||
noOptionsMessage={$_('no-runners-found')}
|
||||
placeholder={$_("search-for-runner-by-name-or-id")}
|
||||
noOptionsMessage={$_("no-runners-found")}
|
||||
bind:selectedValue={runner}
|
||||
on:select={(selectedValue) => (editable.runner = selectedValue.detail.value.id)}
|
||||
on:clear={() => (editable.runner = null)} />
|
||||
on:select={(selectedValue) =>
|
||||
(editable.runner = selectedValue.detail.value.id)}
|
||||
on:clear={() => (editable.runner = null)}
|
||||
/>
|
||||
</div>
|
||||
<div class="col-span-6">
|
||||
<p class="text-gray-500">
|
||||
@ -158,11 +162,12 @@
|
||||
name="enabled"
|
||||
type="checkbox"
|
||||
checked={editable.enabled}
|
||||
class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
|
||||
{$_('this-card-is')}
|
||||
class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
|
||||
/>
|
||||
{$_("this-card-is")}
|
||||
{#if editable.enabled}
|
||||
{$_('enabled')}
|
||||
{:else}{$_('disabled')}{/if}
|
||||
{$_("enabled")}
|
||||
{:else}{$_("disabled")}{/if}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -175,16 +180,18 @@
|
||||
class:opacity-50={!createbtnenabled}
|
||||
on:click={submit}
|
||||
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">
|
||||
{$_('save-changes')}
|
||||
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")}
|
||||
</button>
|
||||
<button
|
||||
on:click={() => {
|
||||
edit_modal_open = false;
|
||||
}}
|
||||
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">
|
||||
{$_('cancel')}
|
||||
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")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -41,7 +41,6 @@
|
||||
<AddCardModal
|
||||
bind:modal_open
|
||||
on:created={(event) => {
|
||||
console.log(event)
|
||||
addCards(event.detail.cards);
|
||||
}}
|
||||
/>
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
<div class="text-center items-center justify-center">
|
||||
<p class="mb-16 text-lg text-gray-500">
|
||||
<img class="m-auto" style="height:15rem" src={cards_empty} alt="" />
|
||||
<span class="font-bold">{$_('there-are-no-cards-yet')}</span><br />
|
||||
<span>{$_('add-your-first-card')}</span>
|
||||
<span class="font-bold">{$_("there-are-no-cards-yet")}</span><br />
|
||||
<span>{$_("add-your-first-card")}</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@ -32,7 +32,6 @@
|
||||
export let original_data = {};
|
||||
export let current_cards = [];
|
||||
export const addCards = (cards) => {
|
||||
console.log(cards);
|
||||
current_cards = current_cards.concat(...cards);
|
||||
options.update((options) => ({
|
||||
...options,
|
||||
@ -157,7 +156,7 @@
|
||||
while (page >= 0) {
|
||||
const cards = await RunnerCardService.runnerCardControllerGetAll(
|
||||
page,
|
||||
500
|
||||
150
|
||||
);
|
||||
if (cards.length == 0) {
|
||||
page = -2;
|
||||
@ -173,7 +172,7 @@
|
||||
page++;
|
||||
}
|
||||
toast.dismiss();
|
||||
toast.success($_('all-cards-loaded'));
|
||||
toast.success($_("all-cards-loaded"));
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
} from "@odit/lfk-client-js";
|
||||
import isEmail from "validator/es/lib/isEmail";
|
||||
import isMobilePhone from "validator/es/lib/isMobilePhone";
|
||||
import Toastify from "toastify-js";
|
||||
import toast from "svelte-french-toast";
|
||||
export let modal_open;
|
||||
export let current_contacts;
|
||||
$: selected_team = [];
|
||||
@ -85,10 +85,7 @@
|
||||
function submit() {
|
||||
if (processed_last_submit === true) {
|
||||
processed_last_submit = false;
|
||||
const toast = Toastify({
|
||||
text: $_('contact-is-being-added'),
|
||||
duration: -1,
|
||||
}).showToast();
|
||||
toast.loading($_("contact-is-being-added"));
|
||||
let address = {};
|
||||
if (address_checked === true) {
|
||||
address = {
|
||||
@ -122,11 +119,8 @@
|
||||
email_input_value = "";
|
||||
modal_open = false;
|
||||
//
|
||||
Toastify({
|
||||
text: $_('contact-added'),
|
||||
duration: 500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
toast.dismiss();
|
||||
toast.success($_("contact-added"));
|
||||
current_contacts.push(result);
|
||||
current_contacts = current_contacts;
|
||||
})
|
||||
@ -135,8 +129,6 @@
|
||||
})
|
||||
.finally(() => {
|
||||
processed_last_submit = true;
|
||||
//
|
||||
toast.hideToast();
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -145,58 +137,70 @@
|
||||
{#if modal_open}
|
||||
<div
|
||||
class="fixed z-10 inset-0 overflow-y-auto"
|
||||
|
||||
use:clickOutside
|
||||
on:click_outside={() => {
|
||||
modal_open = false;
|
||||
}}>
|
||||
}}
|
||||
>
|
||||
<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="absolute inset-0 bg-gray-500 opacity-75"
|
||||
data-id="modal_backdrop" />
|
||||
data-id="modal_backdrop"
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
class="hidden sm:inline-block sm:align-middle sm:h-screen"
|
||||
aria-hidden="true">​</span>
|
||||
aria-hidden="true">​</span
|
||||
>
|
||||
<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"
|
||||
role="dialog"
|
||||
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="sm:flex sm:items-start">
|
||||
<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"
|
||||
width="24"
|
||||
height="24"><path fill="none" d="M0 0h24v24H0z" />
|
||||
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>
|
||||
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
|
||||
>
|
||||
</div>
|
||||
<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">
|
||||
{$_('create-a-new-contact')}
|
||||
{$_("create-a-new-contact")}
|
||||
</h3>
|
||||
<div class="mt-2 mb-6">
|
||||
<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>
|
||||
</div>
|
||||
<div class="grid grid-cols-6 gap-6">
|
||||
<div class="col-span-6">
|
||||
<label
|
||||
for="firstname"
|
||||
class="block text-sm font-medium text-gray-700">{$_('first-name')}</label>
|
||||
class="block text-sm font-medium text-gray-700"
|
||||
>{$_("first-name")}</label
|
||||
>
|
||||
<input
|
||||
use:focus
|
||||
autocomplete="off"
|
||||
placeholder={$_('first-name')}
|
||||
placeholder={$_("first-name")}
|
||||
class:border-red-500={!isFirstnameValid}
|
||||
class:focus:border-red-500={!isFirstnameValid}
|
||||
class:focus:ring-red-500={!isFirstnameValid}
|
||||
@ -204,34 +208,41 @@
|
||||
bind:this={firstname_input}
|
||||
type="text"
|
||||
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}
|
||||
<span
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||
{$_('first-name-is-required')}
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
|
||||
>
|
||||
{$_("first-name-is-required")}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="col-span-6">
|
||||
<label
|
||||
for="trackname"
|
||||
class="block text-sm font-medium text-gray-700">{$_('middle-name')}</label>
|
||||
class="block text-sm font-medium text-gray-700"
|
||||
>{$_("middle-name")}</label
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder={$_('middle-name')}
|
||||
placeholder={$_("middle-name")}
|
||||
bind:value={middlename_input_value}
|
||||
bind:this={middlename_input}
|
||||
type="text"
|
||||
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 class="col-span-6">
|
||||
<label
|
||||
for="lastname"
|
||||
class="block text-sm font-medium text-gray-700">{$_('last-name')}</label>
|
||||
class="block text-sm font-medium text-gray-700"
|
||||
>{$_("last-name")}</label
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder="{$_('last-name')}"
|
||||
placeholder={$_("last-name")}
|
||||
class:border-red-500={!isLastnameValid}
|
||||
class:focus:border-red-500={!isLastnameValid}
|
||||
class:focus:ring-red-500={!isLastnameValid}
|
||||
@ -239,23 +250,28 @@
|
||||
bind:this={lastname_input}
|
||||
type="text"
|
||||
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}
|
||||
<span
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||
{$_('last-name-is-required')}
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
|
||||
>
|
||||
{$_("last-name-is-required")}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="col-span-6">
|
||||
<label
|
||||
for="team"
|
||||
class="block text-sm font-medium text-gray-700">{$_('teams')}</label>
|
||||
class="block text-sm font-medium text-gray-700"
|
||||
>{$_("teams")}</label
|
||||
>
|
||||
<select
|
||||
name="team"
|
||||
multiple
|
||||
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}
|
||||
<option value={team.id}>
|
||||
{team.parentGroup.name}
|
||||
@ -271,10 +287,12 @@
|
||||
<div class="col-span-6">
|
||||
<label
|
||||
for="phone"
|
||||
class="block text-sm font-medium text-gray-700">{$_('phone')}</label>
|
||||
class="block text-sm font-medium text-gray-700"
|
||||
>{$_("phone")}</label
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder={$_('phone')}
|
||||
placeholder={$_("phone")}
|
||||
class:border-red-500={!isPhoneValidOrEmpty}
|
||||
class:focus:border-red-500={!isPhoneValidOrEmpty}
|
||||
class:focus:ring-red-500={!isPhoneValidOrEmpty}
|
||||
@ -282,21 +300,27 @@
|
||||
bind:this={phone_input}
|
||||
type="tel"
|
||||
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}
|
||||
<span
|
||||
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')}
|
||||
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"
|
||||
)}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="col-span-6">
|
||||
<label
|
||||
for="email"
|
||||
class="block text-sm font-medium text-gray-700">{$_('e-mail-adress')}</label>
|
||||
class="block text-sm font-medium text-gray-700"
|
||||
>{$_("e-mail-adress")}</label
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder={$_('e-mail-adress')}
|
||||
placeholder={$_("e-mail-adress")}
|
||||
class:border-red-500={!isEmailValidOrEmpty}
|
||||
class:focus:border-red-500={!isEmailValidOrEmpty}
|
||||
class:focus:ring-red-500={!isEmailValidOrEmpty}
|
||||
@ -304,11 +328,13 @@
|
||||
bind:this={email_input}
|
||||
type="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}
|
||||
<span
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||
{$_('valid-email-is-required')}
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
|
||||
>
|
||||
{$_("valid-email-is-required")}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
@ -319,22 +345,25 @@
|
||||
id="comments"
|
||||
name="comments"
|
||||
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 class="ml-3 text-sm">
|
||||
<label
|
||||
for="comments"
|
||||
class="font-medium text-gray-700">{$_('address')}</label>
|
||||
<label for="comments" class="font-medium text-gray-700"
|
||||
>{$_("address")}</label
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
{#if address_checked === true}
|
||||
<div class="col-span-6">
|
||||
<label
|
||||
for="address1"
|
||||
class="block text-sm font-medium text-gray-700">{$_('address')}</label>
|
||||
class="block text-sm font-medium text-gray-700"
|
||||
>{$_("address")}</label
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder="{$_('address')}"
|
||||
placeholder={$_("address")}
|
||||
class:border-red-500={!isAddress1Valid}
|
||||
class:focus:border-red-500={!isAddress1Valid}
|
||||
class:focus:ring-red-500={!isAddress1Valid}
|
||||
@ -342,34 +371,41 @@
|
||||
bind:this={address_input1}
|
||||
type="text"
|
||||
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}
|
||||
<span
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||
{$_('address-is-required')}
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
|
||||
>
|
||||
{$_("address-is-required")}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="col-span-6">
|
||||
<label
|
||||
for="address2"
|
||||
class="block text-sm font-medium text-gray-700">{$_('apartment-suite-etc')}</label>
|
||||
class="block text-sm font-medium text-gray-700"
|
||||
>{$_("apartment-suite-etc")}</label
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder={$_('apartment-suite-etc')}
|
||||
placeholder={$_("apartment-suite-etc")}
|
||||
bind:value={address_input2_value}
|
||||
bind:this={address_input2}
|
||||
type="text"
|
||||
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 class="col-span-6">
|
||||
<label
|
||||
for="zipcode"
|
||||
class="block text-sm font-medium text-gray-700">{$_('zip-postal-code')}</label>
|
||||
class="block text-sm font-medium text-gray-700"
|
||||
>{$_("zip-postal-code")}</label
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder={$_('zip-postal-code')}
|
||||
placeholder={$_("zip-postal-code")}
|
||||
class:border-red-500={!iszipcodevalid}
|
||||
class:focus:border-red-500={!iszipcodevalid}
|
||||
class:focus:ring-red-500={!iszipcodevalid}
|
||||
@ -377,21 +413,25 @@
|
||||
bind:this={address_zipcode}
|
||||
type="text"
|
||||
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}
|
||||
<span
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||
{$_('valid-zipcode-postal-code-is-required')}
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
|
||||
>
|
||||
{$_("valid-zipcode-postal-code-is-required")}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="col-span-6">
|
||||
<label
|
||||
for="city"
|
||||
class="block text-sm font-medium text-gray-700">{$_('city')}</label>
|
||||
class="block text-sm font-medium text-gray-700"
|
||||
>{$_("city")}</label
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder="{$_('city')}"
|
||||
placeholder={$_("city")}
|
||||
class:border-red-500={!iscityvalid}
|
||||
class:focus:border-red-500={!iscityvalid}
|
||||
class:focus:ring-red-500={!iscityvalid}
|
||||
@ -399,11 +439,13 @@
|
||||
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" />
|
||||
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')}
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
|
||||
>
|
||||
{$_("valid-city-is-required")}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
@ -418,16 +460,18 @@
|
||||
class:opacity-50={!createbtnenabled}
|
||||
on:click={submit}
|
||||
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">
|
||||
{$_('create')}
|
||||
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")}
|
||||
</button>
|
||||
<button
|
||||
on:click={() => {
|
||||
modal_open = false;
|
||||
}}
|
||||
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">
|
||||
{$_('cancel')}
|
||||
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")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -6,9 +6,9 @@
|
||||
RunnerTeamService,
|
||||
RunnerOrganizationService,
|
||||
} from "@odit/lfk-client-js";
|
||||
import Toastify from "toastify-js";
|
||||
import PromiseError from "../base/PromiseError.svelte";
|
||||
import isEmail from "validator/es/lib/isEmail";
|
||||
import toast from "svelte-french-toast";
|
||||
let data_loaded = false;
|
||||
let orgs = [];
|
||||
let teams = [];
|
||||
@ -42,14 +42,14 @@
|
||||
original_data.groups = original_data.groups.map((g) => g.id);
|
||||
editable.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 = {
|
||||
address1: "",
|
||||
address2: "",
|
||||
city: "",
|
||||
postalcode: "",
|
||||
country: ""
|
||||
}
|
||||
country: "",
|
||||
};
|
||||
}
|
||||
});
|
||||
RunnerOrganizationService.runnerOrganizationControllerGetAll().then((val) => {
|
||||
@ -67,10 +67,7 @@
|
||||
$: iscityvalid = editable.address?.city?.trim().length !== 0;
|
||||
function submit() {
|
||||
if (data_loaded === true && save_enabled) {
|
||||
Toastify({
|
||||
text: $_("contact-is-being-updated"),
|
||||
duration: 2500,
|
||||
}).showToast();
|
||||
toast.loading($_("contact-is-being-updated"));
|
||||
editable.address.country = "DE";
|
||||
if (editable.address_checked === false) {
|
||||
editable.address = null;
|
||||
@ -81,12 +78,9 @@
|
||||
GroupContactService.groupContactControllerPut(original_data.id, editable)
|
||||
.then((resp) => {
|
||||
Object.assign(original_data, editable);
|
||||
original_data=original_data;
|
||||
Toastify({
|
||||
text: $_("updated-contact"),
|
||||
duration: 2500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
original_data = original_data;
|
||||
toast.dismiss();
|
||||
toast.success($_("updated-contact"));
|
||||
})
|
||||
.catch((err) => {});
|
||||
} else {
|
||||
@ -102,7 +96,7 @@
|
||||
</script>
|
||||
|
||||
{#await promise}
|
||||
{$_('loading-contact-details')}
|
||||
{$_("loading-contact-details")}
|
||||
{:then}
|
||||
<section class="container p-5 select-none">
|
||||
<div class="flex flex-row mb-4">
|
||||
@ -115,12 +109,15 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
height="24"><path fill="none" d="M0 0h24v24H0z" />
|
||||
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>
|
||||
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
|
||||
>
|
||||
</li>
|
||||
<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"
|
||||
fill="none"
|
||||
stroke-width="2"
|
||||
@ -130,17 +127,17 @@
|
||||
class="h-3 w-3 mr-2 stroke-current"
|
||||
height="1em"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"><line
|
||||
x1="5"
|
||||
y1="12"
|
||||
x2="19"
|
||||
y2="12" />
|
||||
<polyline points="12 5 19 12 12 19" /></svg>
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
><line x1="5" y1="12" x2="19" y2="12" />
|
||||
<polyline points="12 5 19 12 12 19" /></svg
|
||||
>
|
||||
</li>
|
||||
<li class="flex items-center">
|
||||
<span class="mr-2">{original_data.firstname}
|
||||
{original_data.middlename || ''}
|
||||
{original_data.lastname}</span>
|
||||
<span class="mr-2"
|
||||
>{original_data.firstname}
|
||||
{original_data.middlename || ""}
|
||||
{original_data.lastname}</span
|
||||
>
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
@ -148,19 +145,23 @@
|
||||
</div>
|
||||
<div class="mb-8 text-3xl font-extrabold leading-tight">
|
||||
{original_data.firstname}
|
||||
{original_data.middlename || ''}
|
||||
{original_data.middlename || ""}
|
||||
{original_data.lastname}
|
||||
<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}
|
||||
<button
|
||||
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">{$_('confirm-deletion')}</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"
|
||||
>{$_("confirm-deletion")}</button
|
||||
>
|
||||
<button
|
||||
on:click={() => {
|
||||
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">{$_('cancel')}</button>
|
||||
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
|
||||
>
|
||||
{/if}
|
||||
{#if !delete_triggered}
|
||||
<button
|
||||
@ -168,7 +169,9 @@
|
||||
delete_triggered = true;
|
||||
}}
|
||||
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">{$_('delete-contact')}</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"
|
||||
>{$_("delete-contact")}</button
|
||||
>
|
||||
{/if}
|
||||
{/if}
|
||||
{#if !delete_triggered}
|
||||
@ -177,112 +180,124 @@
|
||||
class:opacity-50={!save_enabled}
|
||||
type="button"
|
||||
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">{$_('save-changes')}</button>
|
||||
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
|
||||
>
|
||||
{/if}
|
||||
</span>
|
||||
</div>
|
||||
<!-- -->
|
||||
<div class="text-sm w-full">
|
||||
<label
|
||||
for="firstname"
|
||||
class="font-medium text-gray-700">{$_('first-name')}</label>
|
||||
<label for="firstname" class="font-medium text-gray-700"
|
||||
>{$_("first-name")}</label
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder={$_('first-name')}
|
||||
placeholder={$_("first-name")}
|
||||
type="text"
|
||||
class:border-red-500={!isFirstnameValid}
|
||||
class:focus:border-red-500={!isFirstnameValid}
|
||||
class:focus:ring-red-500={!isFirstnameValid}
|
||||
bind:value={editable.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}
|
||||
<span
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||
{$_('first-name-is-required')}
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
|
||||
>
|
||||
{$_("first-name-is-required")}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="text-sm w-full">
|
||||
<label
|
||||
for="middlename"
|
||||
class="font-medium text-gray-700">{$_('middle-name')}</label>
|
||||
<label for="middlename" class="font-medium text-gray-700"
|
||||
>{$_("middle-name")}</label
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder={$_('middle-name')}
|
||||
placeholder={$_("middle-name")}
|
||||
type="text"
|
||||
bind:value={editable.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 class="text-sm w-full">
|
||||
<label
|
||||
for="lastname"
|
||||
class="font-medium text-gray-700">{$_('last-name')}</label>
|
||||
<label for="lastname" class="font-medium text-gray-700"
|
||||
>{$_("last-name")}</label
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder={$_('last-name')}
|
||||
placeholder={$_("last-name")}
|
||||
type="text"
|
||||
bind:value={editable.lastname}
|
||||
class:border-red-500={!isLastnameValid}
|
||||
class:focus:border-red-500={!isLastnameValid}
|
||||
class:focus:ring-red-500={!isLastnameValid}
|
||||
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}
|
||||
<span
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||
{$_('last-name-is-required')}
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
|
||||
>
|
||||
{$_("last-name-is-required")}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="text-sm w-full">
|
||||
<label
|
||||
for="email"
|
||||
class="font-medium text-gray-700">{$_('e-mail-adress')}</label>
|
||||
<label for="email" class="font-medium text-gray-700"
|
||||
>{$_("e-mail-adress")}</label
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder={$_('e-mail-adress')}
|
||||
placeholder={$_("e-mail-adress")}
|
||||
type="email"
|
||||
bind:value={editable.email}
|
||||
class:border-red-500={!isEmailValid}
|
||||
class:focus:border-red-500={!isEmailValid}
|
||||
class:focus:ring-red-500={!isEmailValid}
|
||||
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}
|
||||
<span
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||
{$_('valid-email-is-required')}
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
|
||||
>
|
||||
{$_("valid-email-is-required")}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
<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
|
||||
autocomplete="off"
|
||||
placeholder={$_('phone')}
|
||||
placeholder={$_("phone")}
|
||||
type="tel"
|
||||
class:border-red-500={!isPhoneValidOrEmpty}
|
||||
class:focus:border-red-500={!isPhoneValidOrEmpty}
|
||||
class:focus:ring-red-500={!isPhoneValidOrEmpty}
|
||||
bind:value={editable.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}
|
||||
<span
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||
{$_('valid-international-phone-number-is-required')}
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
|
||||
>
|
||||
{$_("valid-international-phone-number-is-required")}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
<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
|
||||
bind:value={editable.groups}
|
||||
name="team"
|
||||
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}
|
||||
<option value={team.id}>
|
||||
{team.parentGroup.name}
|
||||
@ -303,19 +318,20 @@
|
||||
id="comments"
|
||||
name="comments"
|
||||
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 class="ml-3 text-sm">
|
||||
<label
|
||||
for="comments"
|
||||
class="font-medium text-gray-700">{$_('address')}</label>
|
||||
<label for="comments" class="font-medium text-gray-700"
|
||||
>{$_("address")}</label
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
{#if editable.address_checked === true}
|
||||
<div class="col-span-6">
|
||||
<label
|
||||
for="address1"
|
||||
class="block text-sm font-medium text-gray-700">{$_('address')}</label>
|
||||
<label for="address1" class="block text-sm font-medium text-gray-700"
|
||||
>{$_("address")}</label
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder="Address"
|
||||
@ -325,65 +341,72 @@
|
||||
bind:value={editable.address.address1}
|
||||
type="text"
|
||||
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}
|
||||
<span
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||
{$_('address-is-required')}
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
|
||||
>
|
||||
{$_("address-is-required")}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="col-span-6">
|
||||
<label
|
||||
for="address2"
|
||||
class="block text-sm font-medium text-gray-700">{$_('apartment-suite-etc')}</label>
|
||||
<label for="address2" class="block text-sm font-medium text-gray-700"
|
||||
>{$_("apartment-suite-etc")}</label
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder={$_('apartment-suite-etc')}
|
||||
placeholder={$_("apartment-suite-etc")}
|
||||
bind:value={editable.address.address2}
|
||||
type="text"
|
||||
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 class="col-span-6">
|
||||
<label
|
||||
for="zipcode"
|
||||
class="block text-sm font-medium text-gray-700">{$_('zip-postal-code')}</label>
|
||||
<label for="zipcode" class="block text-sm font-medium text-gray-700"
|
||||
>{$_("zip-postal-code")}</label
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder={$_('zip-postal-code')}
|
||||
placeholder={$_("zip-postal-code")}
|
||||
class:border-red-500={!iszipcodevalid}
|
||||
class:focus:border-red-500={!iszipcodevalid}
|
||||
class:focus:ring-red-500={!iszipcodevalid}
|
||||
bind:value={editable.address.postalcode}
|
||||
type="text"
|
||||
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}
|
||||
<span
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||
{$_('valid-zipcode-postal-code-is-required')}
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
|
||||
>
|
||||
{$_("valid-zipcode-postal-code-is-required")}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="col-span-6">
|
||||
<label
|
||||
for="city"
|
||||
class="block text-sm font-medium text-gray-700">{$_('city')}</label>
|
||||
<label for="city" class="block text-sm font-medium text-gray-700"
|
||||
>{$_("city")}</label
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder={$_('city')}
|
||||
placeholder={$_("city")}
|
||||
class:border-red-500={!iscityvalid}
|
||||
class:focus:border-red-500={!iscityvalid}
|
||||
class:focus:ring-red-500={!iscityvalid}
|
||||
bind:value={editable.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" />
|
||||
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')}
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
|
||||
>
|
||||
{$_("valid-city-is-required")}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
@ -9,21 +9,22 @@
|
||||
|
||||
<section class="container p-5">
|
||||
<span class="mb-1 text-3xl font-extrabold leading-tight">
|
||||
{$_('contacts')}
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes('CONTACT:CREATE')}
|
||||
{$_("contacts")}
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes("CONTACT:CREATE")}
|
||||
<button
|
||||
on:click={() => {
|
||||
modal_open = true;
|
||||
}}
|
||||
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">
|
||||
{$_('create-a-new-contact')}
|
||||
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")}
|
||||
</button>
|
||||
{/if}
|
||||
</span>
|
||||
<ContactsOverview bind:current_contacts />
|
||||
</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 />
|
||||
{/if}
|
||||
|
||||
@ -9,8 +9,8 @@
|
||||
<div class="text-center items-center justify-center">
|
||||
<p class="mb-16 text-lg text-gray-500">
|
||||
<img class="w-full h-44" src={team_empty} alt="" />
|
||||
<span class="font-bold">{$_('there-are-no-contacts-added-yet')}</span><br />
|
||||
<span>{$_('add-your-first-contact')}</span>
|
||||
<span class="font-bold">{$_("there-are-no-contacts-added-yet")}</span><br />
|
||||
<span>{$_("add-your-first-contact")}</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
<script>
|
||||
import { _ } from "svelte-i18n";
|
||||
import Toastify from "toastify-js";
|
||||
import { GroupContactService } from "@odit/lfk-client-js";
|
||||
const promise = GroupContactService.groupContactControllerGetAll().then(
|
||||
(result) => {
|
||||
@ -9,18 +8,20 @@
|
||||
);
|
||||
import store from "../../store";
|
||||
import ContactsEmptyState from "./ContactsEmptyState.svelte";
|
||||
import toast from "svelte-french-toast";
|
||||
$: searchvalue = "";
|
||||
$: active_deletes = [];
|
||||
export let current_contacts = [];
|
||||
</script>
|
||||
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes('TEAM:GET')}
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes("TEAM:GET")}
|
||||
{#await promise}
|
||||
<div
|
||||
class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
|
||||
role="alert">
|
||||
<p class="font-bold">{$_('contacts-are-being-loaded')}</p>
|
||||
<p class="text-sm">{$_('this-might-take-a-moment')}</p>
|
||||
role="alert"
|
||||
>
|
||||
<p class="font-bold">{$_("contacts-are-being-loaded")}</p>
|
||||
<p class="text-sm">{$_("this-might-take-a-moment")}</p>
|
||||
</div>
|
||||
{:then}
|
||||
{#if current_contacts.length === 0}
|
||||
@ -29,31 +30,36 @@
|
||||
<input
|
||||
type="search"
|
||||
bind:value={searchvalue}
|
||||
placeholder={$_('datatable.search')}
|
||||
aria-label={$_('datatable.search')}
|
||||
class="mb-4" />
|
||||
placeholder={$_("datatable.search")}
|
||||
aria-label={$_("datatable.search")}
|
||||
class="mb-4"
|
||||
/>
|
||||
<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">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
{$_('name')}
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
||||
>
|
||||
{$_("name")}
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
{$_('groups')}
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
||||
>
|
||||
{$_("groups")}
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
{$_('address')}
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
||||
>
|
||||
{$_("address")}
|
||||
</th>
|
||||
<th scope="col" class="relative px-6 py-3">
|
||||
<span class="sr-only">{$_('action')}</span>
|
||||
<span class="sr-only">{$_("action")}</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
@ -69,7 +75,7 @@
|
||||
<div class="ml-4">
|
||||
<div class="text-sm font-medium text-gray-900">
|
||||
{t.firstname}
|
||||
{t.middlename || ''}
|
||||
{t.middlename || ""}
|
||||
{t.lastname}
|
||||
</div>
|
||||
</div>
|
||||
@ -81,20 +87,24 @@
|
||||
<div class="text-sm font-medium text-gray-900">
|
||||
{#if t.groups.length > 0}
|
||||
{#each t.groups as g}
|
||||
{#if g.responseType === 'RUNNERORGANIZATION'}
|
||||
{#if g.responseType === "RUNNERORGANIZATION"}
|
||||
<a
|
||||
href="../orgs/{g.id}"
|
||||
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{g.name}</a>
|
||||
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
|
||||
>{g.name}</a
|
||||
>
|
||||
{:else}
|
||||
<a
|
||||
href="../teams/{g.id}"
|
||||
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{g.parentGroup.name}
|
||||
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
|
||||
>{g.parentGroup.name}
|
||||
>
|
||||
{g.name}</a>
|
||||
{g.name}</a
|
||||
>
|
||||
{/if}
|
||||
{/each}
|
||||
{:else}
|
||||
{$_('contact-is-not-a-member-in-any-group')}
|
||||
{$_("contact-is-not-a-member-in-any-group")}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
@ -106,7 +116,7 @@
|
||||
<div class="text-sm font-medium text-gray-900">
|
||||
{#if t.address.address1 !== null}
|
||||
{t.address.address1}<br />
|
||||
{t.address.address2 || ''}<br />
|
||||
{t.address.address2 || ""}<br />
|
||||
{t.address.postalcode}
|
||||
{t.address.city}
|
||||
{t.address.country}
|
||||
@ -117,45 +127,53 @@
|
||||
</td>
|
||||
{#if active_deletes[t.id] === true}
|
||||
<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
|
||||
on:click={() => {
|
||||
active_deletes[t.id] = false;
|
||||
}}
|
||||
tabindex="0"
|
||||
class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">{$_('cancel-delete')}</button>
|
||||
class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer"
|
||||
>{$_("cancel-delete")}</button
|
||||
>
|
||||
<button
|
||||
on:click={() => {
|
||||
GroupContactService.groupContactControllerRemove(t.id, false).then(
|
||||
(resp) => {
|
||||
toast.loading($_("deleting-contact"));
|
||||
GroupContactService.groupContactControllerRemove(
|
||||
t.id,
|
||||
false
|
||||
).then((resp) => {
|
||||
current_contacts = current_contacts.filter(
|
||||
(obj) => obj.id !== t.id
|
||||
);
|
||||
Toastify({
|
||||
text: $_('contact-deleted'),
|
||||
duration: 500,
|
||||
backgroundColor:
|
||||
'linear-gradient(to right, #00b09b, #96c93d)',
|
||||
}).showToast();
|
||||
}
|
||||
);
|
||||
toast.dismiss();
|
||||
toast($_("contact-deleted"));
|
||||
});
|
||||
}}
|
||||
tabindex="0"
|
||||
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('confirm-delete')}</button>
|
||||
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
|
||||
>{$_("confirm-delete")}</button
|
||||
>
|
||||
</td>
|
||||
{:else}
|
||||
<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
|
||||
href="./{t.id}"
|
||||
class="text-indigo-600 hover:text-indigo-900">{$_('details')}</a>
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes('TEAM:DELETE')}
|
||||
class="text-indigo-600 hover:text-indigo-900"
|
||||
>{$_("details")}</a
|
||||
>
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes("TEAM:DELETE")}
|
||||
<button
|
||||
on:click={() => {
|
||||
active_deletes[t.id] = true;
|
||||
}}
|
||||
tabindex="0"
|
||||
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('delete')}</button>
|
||||
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
|
||||
>{$_("delete")}</button
|
||||
>
|
||||
{/if}
|
||||
</td>
|
||||
{/if}
|
||||
@ -169,7 +187,7 @@
|
||||
{:catch error}
|
||||
<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">
|
||||
<b class="capitalize">{$_('general_promise_error')}</b>
|
||||
<b class="capitalize">{$_("general_promise_error")}</b>
|
||||
{error}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
import { router } from "tinro";
|
||||
import NoComponentLoaded from "../base/NoComponentLoaded.svelte";
|
||||
import { AuthService } from "@odit/lfk-client-js";
|
||||
import { Toaster } from 'svelte-french-toast';
|
||||
import { Toaster } from "svelte-french-toast";
|
||||
$: navOpen = false;
|
||||
function logout() {
|
||||
localForage.clear();
|
||||
@ -13,6 +13,412 @@
|
||||
}
|
||||
</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">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;
|
||||
}}
|
||||
class:hidden={!navOpen}
|
||||
class="fixed inset-0 z-10 w-screen h-screen bg-black bg-opacity-25 md:hidden"
|
||||
/>
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.collapsed_navigation {
|
||||
transform: translateX(-100%);
|
||||
@ -23,341 +429,3 @@
|
||||
}
|
||||
}
|
||||
</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,14 +1,13 @@
|
||||
<script>
|
||||
import { _ } from "svelte-i18n";
|
||||
|
||||
export let href = "#"
|
||||
export let href = "#";
|
||||
export let title = "";
|
||||
export let value = "";
|
||||
</script>
|
||||
|
||||
<a href={href}>
|
||||
<div
|
||||
class="p-4 rounded-lg bg-white border border-grey-100">
|
||||
<a {href}>
|
||||
<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-col">
|
||||
<div class="text-xs uppercase font-light text-grey-500">
|
||||
@ -16,7 +15,7 @@
|
||||
</div>
|
||||
<div class="text-xl font-bold">{value}</div>
|
||||
</div>
|
||||
<slot></slot>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
@ -8,9 +8,8 @@
|
||||
RunnerService,
|
||||
} from "@odit/lfk-client-js";
|
||||
import Select from "svelte-select";
|
||||
import Toastify from "toastify-js";
|
||||
import { is_promise } from "svelte/internal";
|
||||
import { createEventDispatcher } from "svelte";
|
||||
import toast from "svelte-french-toast";
|
||||
export let modal_open;
|
||||
const dispatch = createEventDispatcher();
|
||||
const getDonorLabel = (option) =>
|
||||
@ -18,9 +17,6 @@
|
||||
const filterDonors = (label, filterText, option) =>
|
||||
label.toLowerCase().includes(filterText.toLowerCase()) ||
|
||||
option.value.id.toString().startsWith(filterText.toLowerCase());
|
||||
function focus(el) {
|
||||
el.focus();
|
||||
}
|
||||
$: donor = 0;
|
||||
$: runner = 0;
|
||||
$: donors = [];
|
||||
@ -59,10 +55,7 @@
|
||||
if (processed_last_submit === true) {
|
||||
let amount_cent = Math.floor(amount_input * 100);
|
||||
processed_last_submit = false;
|
||||
const toast = Toastify({
|
||||
text: $_("adding-donation"),
|
||||
duration: -1,
|
||||
}).showToast();
|
||||
toast.loading($_("adding-donation"));
|
||||
if (is_fixed) {
|
||||
let postdata = {
|
||||
donor,
|
||||
@ -79,11 +72,8 @@
|
||||
amount_input = 0;
|
||||
modal_open = false;
|
||||
//
|
||||
Toastify({
|
||||
text: $_("donation_added"),
|
||||
duration: 500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
toast.dismiss();
|
||||
toast.success($_("donation_added"));
|
||||
dispatch("created", { donations: [result] });
|
||||
})
|
||||
.catch((err) => {
|
||||
@ -91,8 +81,6 @@
|
||||
})
|
||||
.finally(() => {
|
||||
processed_last_submit = true;
|
||||
//
|
||||
toast.hideToast();
|
||||
});
|
||||
} else {
|
||||
let postdata = {
|
||||
@ -107,11 +95,7 @@
|
||||
amount_input = 0;
|
||||
modal_open = false;
|
||||
//
|
||||
Toastify({
|
||||
text: $_("donation_added"),
|
||||
duration: 500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
toast.success($_("donation_added"));
|
||||
dispatch("created", { donations: [result] });
|
||||
})
|
||||
.catch((err) => {
|
||||
@ -119,8 +103,6 @@
|
||||
})
|
||||
.finally(() => {
|
||||
processed_last_submit = true;
|
||||
//
|
||||
toast.hideToast();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,18 +1,14 @@
|
||||
<script>
|
||||
import { _ } from "svelte-i18n";
|
||||
import { clickOutside } from "../base/outsideclick";
|
||||
|
||||
import { DonationService } from "@odit/lfk-client-js";
|
||||
import Toastify from "toastify-js";
|
||||
import { createEventDispatcher } from "svelte";
|
||||
import toast from "svelte-french-toast";
|
||||
export let payment_modal_open = false;
|
||||
export let original_data = {};
|
||||
export let paid_amount_input = 0;
|
||||
const dispatch = createEventDispatcher();
|
||||
$: processed_last_submit = true;
|
||||
function focus(el) {
|
||||
el.focus();
|
||||
}
|
||||
$: createbtnenabled =
|
||||
is_paid_amount_valid &&
|
||||
!(paid_amount_input * 100 == original_data.paidAmount);
|
||||
@ -34,10 +30,7 @@
|
||||
function submit() {
|
||||
if (processed_last_submit === true) {
|
||||
processed_last_submit = false;
|
||||
const toast = Toastify({
|
||||
text: $_("updating-donation"),
|
||||
duration: -1,
|
||||
}).showToast();
|
||||
toast.loading($_("updating-donation"));
|
||||
const editable = Object.assign({}, original_data);
|
||||
editable.donor = editable.donor.id;
|
||||
editable.paidAmount = paid_amount_input * 100;
|
||||
@ -50,11 +43,9 @@
|
||||
.then((result) => {
|
||||
payment_modal_open = false;
|
||||
//
|
||||
Toastify({
|
||||
text: $_("donation-updated"),
|
||||
duration: 500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
toast.dismiss();
|
||||
|
||||
toast.success($_("donation-updated"));
|
||||
dispatch("created", { donation: response });
|
||||
})
|
||||
.catch((err) => {
|
||||
@ -62,19 +53,14 @@
|
||||
})
|
||||
.finally(() => {
|
||||
processed_last_submit = true;
|
||||
//
|
||||
toast.hideToast();
|
||||
});
|
||||
} else {
|
||||
DonationService.donationControllerPutFixed(original_data.id, editable)
|
||||
.then((result) => {
|
||||
payment_modal_open = false;
|
||||
//
|
||||
Toastify({
|
||||
text: $_("donation-updated"),
|
||||
duration: 500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
toast.dismiss();
|
||||
toast.success($_("donation-updated"));
|
||||
dispatch("created", { donation: response });
|
||||
})
|
||||
.catch((err) => {
|
||||
@ -82,8 +68,6 @@
|
||||
})
|
||||
.finally(() => {
|
||||
processed_last_submit = true;
|
||||
//
|
||||
toast.hideToast();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
DonorService,
|
||||
RunnerService,
|
||||
} from "@odit/lfk-client-js";
|
||||
import Toastify from "toastify-js";
|
||||
|
||||
import PromiseError from "../base/PromiseError.svelte";
|
||||
import Select from "svelte-select";
|
||||
let data_loaded = false;
|
||||
@ -69,12 +69,9 @@
|
||||
|
||||
function submit() {
|
||||
if (data_loaded === true && save_enabled) {
|
||||
Toastify({
|
||||
text: $_('updating-donation'),
|
||||
duration: 2500,
|
||||
}).showToast();
|
||||
toast($_("updating-donation"));
|
||||
let postdata = {};
|
||||
editable.paidAmount = paid_amount_input*100;
|
||||
editable.paidAmount = paid_amount_input * 100;
|
||||
if (original_data.responseType === "DISTANCEDONATION") {
|
||||
editable.amountPerDistance = Math.floor(amount_input * 100);
|
||||
postdata = Object.assign(postdata, editable);
|
||||
@ -87,11 +84,7 @@
|
||||
.then((resp) => {
|
||||
Object.assign(original_data, editable);
|
||||
original_data = original_data;
|
||||
Toastify({
|
||||
text: $_('donation-updated'),
|
||||
duration: 2500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
toast.success($_("donation-updated"));
|
||||
})
|
||||
.catch((err) => {});
|
||||
} else {
|
||||
@ -102,11 +95,7 @@
|
||||
.then((resp) => {
|
||||
Object.assign(original_data, editable);
|
||||
original_data = original_data;
|
||||
Toastify({
|
||||
text: $_('donation-updated'),
|
||||
duration: 2500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
toast.success($_("donation-updated"));
|
||||
})
|
||||
.catch((err) => {});
|
||||
}
|
||||
@ -116,11 +105,7 @@
|
||||
function deleteDonation() {
|
||||
DonationService.donationControllerRemove(original_data.id, false)
|
||||
.then((resp) => {
|
||||
Toastify({
|
||||
text: $_('donation-deleted'),
|
||||
duration: 500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
toast($_("donation-deleted"));
|
||||
location.replace("./");
|
||||
})
|
||||
.catch((err) => {
|
||||
@ -131,7 +116,7 @@
|
||||
</script>
|
||||
|
||||
{#await promise}
|
||||
{$_('loading-donation-details')}
|
||||
{$_("loading-donation-details")}
|
||||
{:then}
|
||||
<section class="container p-5 select-none">
|
||||
<div class="flex flex-row mb-4">
|
||||
@ -144,12 +129,15 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
height="24"><path fill="none" d="M0 0h24v24H0z" />
|
||||
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>
|
||||
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
|
||||
>
|
||||
</li>
|
||||
<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"
|
||||
fill="none"
|
||||
stroke-width="2"
|
||||
@ -159,12 +147,10 @@
|
||||
class="h-3 w-3 mr-2 stroke-current"
|
||||
height="1em"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"><line
|
||||
x1="5"
|
||||
y1="12"
|
||||
x2="19"
|
||||
y2="12" />
|
||||
<polyline points="12 5 19 12 12 19" /></svg>
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
><line x1="5" y1="12" x2="19" y2="12" />
|
||||
<polyline points="12 5 19 12 12 19" /></svg
|
||||
>
|
||||
</li>
|
||||
<li class="flex items-center">
|
||||
<span class="mr-2">{original_data.id}</span>
|
||||
@ -175,28 +161,32 @@
|
||||
</div>
|
||||
<div class="mb-8 text-3xl font-extrabold leading-tight">
|
||||
{original_data.donor.firstname}
|
||||
{original_data.donor.middlename || ''}
|
||||
{original_data.donor.middlename || ""}
|
||||
{original_data.donor.lastname}
|
||||
>
|
||||
{#if original_data.responseType == 'DISTANCEDONATION'}
|
||||
{#if original_data.responseType == "DISTANCEDONATION"}
|
||||
{original_data.runner.firstname}
|
||||
{original_data.runner.middlename || ''}
|
||||
{original_data.runner.middlename || ""}
|
||||
{original_data.runner.lastname}
|
||||
{:else}
|
||||
{$_('fixed-donation')}:
|
||||
{amount_input.toFixed(2).toLocaleString('de-DE', { valute: 'EUR' })}€
|
||||
{$_("fixed-donation")}:
|
||||
{amount_input.toFixed(2).toLocaleString("de-DE", { valute: "EUR" })}€
|
||||
{/if}
|
||||
<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}
|
||||
<button
|
||||
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:">{$_('confirm-deletion')}</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:"
|
||||
>{$_("confirm-deletion")}</button
|
||||
>
|
||||
<button
|
||||
on:click={() => {
|
||||
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:">{$_('cancel')}</button>
|
||||
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
|
||||
>
|
||||
{/if}
|
||||
{#if !delete_triggered}
|
||||
<button
|
||||
@ -204,7 +194,9 @@
|
||||
delete_triggered = true;
|
||||
}}
|
||||
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:">{$_('delete-donation')}</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:"
|
||||
>{$_("delete-donation")}</button
|
||||
>
|
||||
{/if}
|
||||
{/if}
|
||||
{#if !delete_triggered}
|
||||
@ -213,72 +205,91 @@
|
||||
class:opacity-50={!save_enabled}
|
||||
type="button"
|
||||
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:">{$_('save-changes')}</button>
|
||||
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
|
||||
>
|
||||
{/if}
|
||||
</span>
|
||||
</div>
|
||||
<!-- -->
|
||||
<div>
|
||||
<span class="font-medium text-gray-700"
|
||||
>{$_("total-donation-amount")}:</span
|
||||
>
|
||||
<span
|
||||
class="font-medium text-gray-700">{$_('total-donation-amount')}:</span>
|
||||
<span>{(editable.amount / 100)
|
||||
>{(editable.amount / 100)
|
||||
.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
|
||||
class="font-medium text-gray-700">{$_('paid-amount')}:</span>
|
||||
<span>{(editable.paidAmount / 100)
|
||||
>{(editable.paidAmount / 100)
|
||||
.toFixed(2)
|
||||
.toLocaleString('de-DE', { valute: 'EUR' })}€</span>
|
||||
.toLocaleString("de-DE", { valute: "EUR" })}€</span
|
||||
>
|
||||
|
|
||||
<span class="font-medium text-gray-700">{$_("status")}:</span>
|
||||
{#if editable.status == "PAID"}
|
||||
<span
|
||||
class="font-medium text-gray-700">{$_('status')}:</span>
|
||||
{#if editable.status =="PAID"}
|
||||
<span
|
||||
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">{$_('paid')}</span>
|
||||
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"
|
||||
>{$_("paid")}</span
|
||||
>
|
||||
{:else}
|
||||
<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"
|
||||
>{$_("open")}</span
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
<br>
|
||||
<br />
|
||||
<div class=" w-full">
|
||||
<label
|
||||
for="donor"
|
||||
class="block font-medium text-gray-700">{$_('donor')}</label>
|
||||
<label for="donor" class="block font-medium text-gray-700"
|
||||
>{$_("donor")}</label
|
||||
>
|
||||
<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"
|
||||
itemFilter={(label, filterText, option) => filterDonors(label, filterText, option)}
|
||||
itemFilter={(label, filterText, option) =>
|
||||
filterDonors(label, filterText, option)}
|
||||
items={current_donors}
|
||||
showChevron={true}
|
||||
placeholder={$_('search-for-donor-name-or-id')}
|
||||
noOptionsMessage={$_('no-donors-found')}
|
||||
placeholder={$_("search-for-donor-name-or-id")}
|
||||
noOptionsMessage={$_("no-donors-found")}
|
||||
bind:selectedValue={donor}
|
||||
on:select={(selectedValue) => {editable.donor = selectedValue.detail.value; editable.donor.donationAmount=original_data.donor.donationAmount; editable.donor.paidDonationAmount =original_data.donor.paidDonationAmount}}
|
||||
on:clear={() => (editable.donor = null)} />
|
||||
on:select={(selectedValue) => {
|
||||
editable.donor = selectedValue.detail.value;
|
||||
editable.donor.donationAmount = original_data.donor.donationAmount;
|
||||
editable.donor.paidDonationAmount =
|
||||
original_data.donor.paidDonationAmount;
|
||||
}}
|
||||
on:clear={() => (editable.donor = null)}
|
||||
/>
|
||||
</div>
|
||||
{#if original_data.responseType == 'DISTANCEDONATION'}
|
||||
{#if original_data.responseType == "DISTANCEDONATION"}
|
||||
<div class=" w-full">
|
||||
<label
|
||||
for="donor"
|
||||
class="block font-medium text-gray-700">{$_('runner')}</label>
|
||||
<label for="donor" class="block font-medium text-gray-700"
|
||||
>{$_("runner")}</label
|
||||
>
|
||||
<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"
|
||||
itemFilter={(label, filterText, option) => filterDonors(label, filterText, option)}
|
||||
itemFilter={(label, filterText, option) =>
|
||||
filterDonors(label, filterText, option)}
|
||||
items={current_runners}
|
||||
showChevron={true}
|
||||
placeholder={$_('search-for-runner-by-name-or-id')}
|
||||
noOptionsMessage={$_('no-runners-found')}
|
||||
placeholder={$_("search-for-runner-by-name-or-id")}
|
||||
noOptionsMessage={$_("no-runners-found")}
|
||||
bind:selectedValue={runner}
|
||||
on:select={(selectedValue) => (editable.runner = selectedValue.detail.value)}
|
||||
on:clear={() => (editable.runner = null)} />
|
||||
on:select={(selectedValue) =>
|
||||
(editable.runner = selectedValue.detail.value)}
|
||||
on:clear={() => (editable.runner = null)}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
<div class=" w-full">
|
||||
<label for="lastname" class="font-medium text-gray-700">
|
||||
{#if original_data.responseType == 'DISTANCEDONATION'}
|
||||
{$_('amount-per-kilometer')}
|
||||
{:else}{$_('donation-amount')}{/if}
|
||||
{#if original_data.responseType == "DISTANCEDONATION"}
|
||||
{$_("amount-per-kilometer")}
|
||||
{:else}{$_("donation-amount")}{/if}
|
||||
</label>
|
||||
<div class="mt-1 flex rounded-md shadow-sm">
|
||||
<input
|
||||
@ -291,22 +302,28 @@
|
||||
step="0.01"
|
||||
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"
|
||||
placeholder="2.00" />
|
||||
placeholder="2.00"
|
||||
/>
|
||||
<span
|
||||
class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500 ">€</span>
|
||||
class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500"
|
||||
>€</span
|
||||
>
|
||||
</div>
|
||||
{#if !is_amount_valid}
|
||||
<span
|
||||
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')}
|
||||
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")}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<label
|
||||
for="token"
|
||||
class="block text-sm font-medium text-gray-700">{$_('paid-amount')}</label>
|
||||
<div class="inline-flex border-gray-300 border rounded-l-md rounded-r-md bg-gray-50 text-gray-500 w-full">
|
||||
<label for="token" class="block text-sm font-medium text-gray-700"
|
||||
>{$_("paid-amount")}</label
|
||||
>
|
||||
<div
|
||||
class="inline-flex border-gray-300 border rounded-l-md rounded-r-md bg-gray-50 text-gray-500 w-full"
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
class:border-red-500={!is_amount_valid}
|
||||
@ -317,21 +334,27 @@
|
||||
step="0.01"
|
||||
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"
|
||||
placeholder="2.00" />
|
||||
placeholder="2.00"
|
||||
/>
|
||||
<button
|
||||
on:click={
|
||||
()=>{
|
||||
paid_amount_input=paid_amount_input = (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>
|
||||
on:click={() => {
|
||||
paid_amount_input = paid_amount_input = (
|
||||
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
|
||||
>
|
||||
<span
|
||||
class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500 text-sm">€</span>
|
||||
class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500 text-sm"
|
||||
>€</span
|
||||
>
|
||||
</div>
|
||||
{#if !is_paid_amount_valid}
|
||||
<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')}
|
||||
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>
|
||||
|
||||
@ -29,7 +29,6 @@
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes("DONATION:CREATE")}
|
||||
<AddDonationModal
|
||||
on:created={(event) => {
|
||||
console.log(event)
|
||||
addDonations(event.detail.donations);
|
||||
}}
|
||||
bind:modal_open
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
<div class="text-center items-center justify-center">
|
||||
<p class="mb-16 text-lg text-gray-500">
|
||||
<img class="m-auto" style="height:15rem" src={donations_empty} alt="" />
|
||||
<span class="font-bold">{$_('there-are-no-donations-yet')}</span><br />
|
||||
<span>{$_('add-your-fist-donation')}</span>
|
||||
<span class="font-bold">{$_("there-are-no-donations-yet")}</span><br />
|
||||
<span>{$_("add-your-fist-donation")}</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@ -27,11 +27,10 @@
|
||||
donationDonorFilter,
|
||||
donationRunnerFilter,
|
||||
} from "../shared/tablefilters";
|
||||
import toast from "svelte-french-toast";
|
||||
$: searchvalue = "";
|
||||
$: active_deletes = [];
|
||||
$: active_edits = [];
|
||||
$: selectedDonations =
|
||||
$table?.getSelectedRowModel().rows.map((row) => row.original) || [];
|
||||
$: selected =
|
||||
$table?.getSelectedRowModel().rows.map((row) => row.index) || [];
|
||||
$: dataLoaded = false;
|
||||
@ -164,11 +163,7 @@
|
||||
...options,
|
||||
data: current_donations,
|
||||
}));
|
||||
Toastify({
|
||||
text: $_("donation-deleted"),
|
||||
duration: 3500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
toast($_("donation-deleted"));
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
@ -191,7 +186,6 @@
|
||||
dataLoaded = true;
|
||||
page++;
|
||||
}
|
||||
console.log("All donations loaded");
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@ -5,8 +5,9 @@
|
||||
import { DonorService } from "@odit/lfk-client-js";
|
||||
import isEmail from "validator/es/lib/isEmail";
|
||||
import isMobilePhone from "validator/es/lib/isMobilePhone";
|
||||
import Toastify from "toastify-js";
|
||||
|
||||
import { createEventDispatcher } from "svelte";
|
||||
import toast from "svelte-french-toast";
|
||||
export let modal_open;
|
||||
let firstname_input;
|
||||
let lastname_input;
|
||||
@ -73,10 +74,7 @@
|
||||
function submit() {
|
||||
if (processed_last_submit === true) {
|
||||
processed_last_submit = false;
|
||||
const toast = Toastify({
|
||||
text: $_("donor-is-being-added"),
|
||||
duration: -1,
|
||||
}).showToast();
|
||||
toast.loading($_("donor-is-being-added"));
|
||||
let address = {};
|
||||
if (address_checked === true) {
|
||||
address = {
|
||||
@ -110,11 +108,8 @@
|
||||
email_input_value = "";
|
||||
modal_open = false;
|
||||
//
|
||||
Toastify({
|
||||
text: $_("donor-added"),
|
||||
duration: 500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
toast.dismiss();
|
||||
toast.success($_("donor-added"));
|
||||
dispatch("created", { donors: [result] });
|
||||
})
|
||||
.catch((err) => {
|
||||
@ -122,8 +117,6 @@
|
||||
})
|
||||
.finally(() => {
|
||||
processed_last_submit = true;
|
||||
//
|
||||
toast.hideToast();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
import { clickOutside } from "../base/outsideclick";
|
||||
|
||||
import { DonorService } from "@odit/lfk-client-js";
|
||||
import Toastify from "toastify-js";
|
||||
|
||||
import { createEventDispatcher } from "svelte";
|
||||
export let modal_open;
|
||||
export let delete_donor;
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
import { _ } from "svelte-i18n";
|
||||
import store from "../../store";
|
||||
import { DonorService, DonationService } from "@odit/lfk-client-js";
|
||||
import Toastify from "toastify-js";
|
||||
|
||||
import PromiseError from "../base/PromiseError.svelte";
|
||||
import isEmail from "validator/es/lib/isEmail";
|
||||
import ConfirmDonorDeletion from "./ConfirmDonorDeletion.svelte";
|
||||
@ -62,10 +62,7 @@
|
||||
let delete_donor = {};
|
||||
function submit() {
|
||||
if (data_loaded === true && save_enabled) {
|
||||
Toastify({
|
||||
text: $_("donor-is-being-updated"),
|
||||
duration: 2500,
|
||||
}).showToast();
|
||||
toast($_("donor-is-being-updated"));
|
||||
editable.address.country = "DE";
|
||||
if (editable.address_checked === false) {
|
||||
editable.address = null;
|
||||
@ -78,11 +75,7 @@
|
||||
.then((resp) => {
|
||||
Object.assign(original_data, editable);
|
||||
original_data = original_data;
|
||||
Toastify({
|
||||
text: $_("updated-donor"),
|
||||
duration: 2500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
toast.success($_("updated-donor"));
|
||||
})
|
||||
.catch((err) => {});
|
||||
} else {
|
||||
@ -91,11 +84,7 @@
|
||||
function deleteDonor() {
|
||||
DonorService.donorControllerRemove(original_data.id, false)
|
||||
.then((resp) => {
|
||||
Toastify({
|
||||
text: $_("donor-deleted"),
|
||||
duration: 500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
toast($_("donor-deleted"));
|
||||
location.replace("./");
|
||||
})
|
||||
.catch((err) => {
|
||||
@ -107,7 +96,7 @@
|
||||
|
||||
<ConfirmDonorDeletion bind:modal_open bind:delete_donor />
|
||||
{#await promise && donation_promise}
|
||||
{$_('loading-donor-details')}
|
||||
{$_("loading-donor-details")}
|
||||
{:then}
|
||||
<section class="container p-5 select-none">
|
||||
<div class="flex flex-row mb-4">
|
||||
@ -120,12 +109,15 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
height="24"><path fill="none" d="M0 0h24v24H0z" />
|
||||
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>
|
||||
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
|
||||
>
|
||||
</li>
|
||||
<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"
|
||||
fill="none"
|
||||
stroke-width="2"
|
||||
@ -135,17 +127,17 @@
|
||||
class="h-3 w-3 mr-2 stroke-current"
|
||||
height="1em"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"><line
|
||||
x1="5"
|
||||
y1="12"
|
||||
x2="19"
|
||||
y2="12" />
|
||||
<polyline points="12 5 19 12 12 19" /></svg>
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
><line x1="5" y1="12" x2="19" y2="12" />
|
||||
<polyline points="12 5 19 12 12 19" /></svg
|
||||
>
|
||||
</li>
|
||||
<li class="flex items-center">
|
||||
<span class="mr-2">{original_data.firstname}
|
||||
{original_data.middlename || ''}
|
||||
{original_data.lastname}</span>
|
||||
<span class="mr-2"
|
||||
>{original_data.firstname}
|
||||
{original_data.middlename || ""}
|
||||
{original_data.lastname}</span
|
||||
>
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
@ -153,19 +145,23 @@
|
||||
</div>
|
||||
<div class="mb-8 text-3xl font-extrabold leading-tight">
|
||||
{original_data.firstname}
|
||||
{original_data.middlename || ''}
|
||||
{original_data.middlename || ""}
|
||||
{original_data.lastname}
|
||||
<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}
|
||||
<button
|
||||
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:">{$_('confirm-deletion')}</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:"
|
||||
>{$_("confirm-deletion")}</button
|
||||
>
|
||||
<button
|
||||
on:click={() => {
|
||||
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:">{$_('cancel')}</button>
|
||||
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
|
||||
>
|
||||
{/if}
|
||||
{#if !delete_triggered}
|
||||
<button
|
||||
@ -173,7 +169,9 @@
|
||||
delete_triggered = true;
|
||||
}}
|
||||
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:">{$_('delete-donor')}</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:"
|
||||
>{$_("delete-donor")}</button
|
||||
>
|
||||
{/if}
|
||||
{/if}
|
||||
{#if !delete_triggered}
|
||||
@ -182,135 +180,154 @@
|
||||
class:opacity-50={!save_enabled}
|
||||
type="button"
|
||||
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:">{$_('save-changes')}</button>
|
||||
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
|
||||
>
|
||||
{/if}
|
||||
</span>
|
||||
</div>
|
||||
<!-- -->
|
||||
<div>
|
||||
<span class="font-medium text-gray-700"
|
||||
>{$_("total-donation-amount")}:</span
|
||||
>
|
||||
<span
|
||||
class="font-medium text-gray-700">{$_('total-donation-amount')}:</span>
|
||||
<span>{(editable.donationAmount / 100)
|
||||
>{(editable.donationAmount / 100)
|
||||
.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
|
||||
class="font-medium text-gray-700">{$_('total-paid-amount')}:</span>
|
||||
<span>{(editable.paidDonationAmount / 100)
|
||||
>{(editable.paidDonationAmount / 100)
|
||||
.toFixed(2)
|
||||
.toLocaleString('de-DE', { valute: 'EUR' })}€</span>
|
||||
.toLocaleString("de-DE", { valute: "EUR" })}€</span
|
||||
>
|
||||
<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}
|
||||
{#each current_donations.filter((o) => o.donor.id == editable.id) as d}
|
||||
{#if d.responseType === 'DISTANCEDONATION'}
|
||||
{#if d.responseType === "DISTANCEDONATION"}
|
||||
<a
|
||||
href="../donations/{d.id}"
|
||||
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-600 text-white mr-1">{d.runner.firstname}
|
||||
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.middlename || ""}
|
||||
{d.runner.lastname}</a>
|
||||
{d.runner.lastname}</a
|
||||
>
|
||||
{:else}
|
||||
<a
|
||||
href="../donations/{d.id}"
|
||||
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-700 text-white mr-1">{$_('fixed-donation')}:
|
||||
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-700 text-white mr-1"
|
||||
>{$_("fixed-donation")}:
|
||||
{(d.amount / 100)
|
||||
.toFixed(2)
|
||||
.toLocaleString('de-DE', { valute: 'EUR' })}€</a>
|
||||
.toLocaleString("de-DE", { valute: "EUR" })}€</a
|
||||
>
|
||||
{/if}
|
||||
{/each}
|
||||
{:else}{$_('donor-has-no-associated-donations')}{/if}
|
||||
{:else}{$_("donor-has-no-associated-donations")}{/if}
|
||||
</div>
|
||||
<div class=" w-full">
|
||||
<label
|
||||
for="firstname"
|
||||
class="font-medium text-gray-700">{$_('first-name')}</label>
|
||||
<label for="firstname" class="font-medium text-gray-700"
|
||||
>{$_("first-name")}</label
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder={$_('first-name')}
|
||||
placeholder={$_("first-name")}
|
||||
type="text"
|
||||
class:border-red-500={!isFirstnameValid}
|
||||
class:focus:border-red-500={!isFirstnameValid}
|
||||
class:focus:ring-red-500={!isFirstnameValid}
|
||||
bind:value={editable.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}
|
||||
<span
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||
{$_('first-name-is-required')}
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
|
||||
>
|
||||
{$_("first-name-is-required")}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
<div class=" w-full">
|
||||
<label
|
||||
for="middlename"
|
||||
class="font-medium text-gray-700">{$_('middle-name')}</label>
|
||||
<label for="middlename" class="font-medium text-gray-700"
|
||||
>{$_("middle-name")}</label
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder={$_('middle-name')}
|
||||
placeholder={$_("middle-name")}
|
||||
type="text"
|
||||
bind:value={editable.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 class=" w-full">
|
||||
<label
|
||||
for="lastname"
|
||||
class="font-medium text-gray-700">{$_('last-name')}</label>
|
||||
<label for="lastname" class="font-medium text-gray-700"
|
||||
>{$_("last-name")}</label
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder={$_('last-name')}
|
||||
placeholder={$_("last-name")}
|
||||
type="text"
|
||||
bind:value={editable.lastname}
|
||||
class:border-red-500={!isLastnameValid}
|
||||
class:focus:border-red-500={!isLastnameValid}
|
||||
class:focus:ring-red-500={!isLastnameValid}
|
||||
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}
|
||||
<span
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||
{$_('last-name-is-required')}
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
|
||||
>
|
||||
{$_("last-name-is-required")}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
<div class=" w-full">
|
||||
<label
|
||||
for="email"
|
||||
class="font-medium text-gray-700">{$_('e-mail-adress')}</label>
|
||||
<label for="email" class="font-medium text-gray-700"
|
||||
>{$_("e-mail-adress")}</label
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder={$_('e-mail-adress')}
|
||||
placeholder={$_("e-mail-adress")}
|
||||
type="email"
|
||||
bind:value={editable.email}
|
||||
class:border-red-500={!isEmailValid}
|
||||
class:focus:border-red-500={!isEmailValid}
|
||||
class:focus:ring-red-500={!isEmailValid}
|
||||
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}
|
||||
<span
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||
{$_('valid-email-is-required')}
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
|
||||
>
|
||||
{$_("valid-email-is-required")}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
<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
|
||||
autocomplete="off"
|
||||
placeholder={$_('phone')}
|
||||
placeholder={$_("phone")}
|
||||
type="tel"
|
||||
class:border-red-500={!isPhoneValidOrEmpty}
|
||||
class:focus:border-red-500={!isPhoneValidOrEmpty}
|
||||
class:focus:ring-red-500={!isPhoneValidOrEmpty}
|
||||
bind:value={editable.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}
|
||||
<span
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||
{$_('valid-international-phone-number-is-required')}
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
|
||||
>
|
||||
{$_("valid-international-phone-number-is-required")}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
@ -321,19 +338,20 @@
|
||||
id="comments"
|
||||
name="comments"
|
||||
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 class="ml-3 ">
|
||||
<label
|
||||
for="comments"
|
||||
class="font-medium text-gray-700">{$_('receipt-needed')}</label>
|
||||
<div class="ml-3">
|
||||
<label for="comments" class="font-medium text-gray-700"
|
||||
>{$_("receipt-needed")}</label
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
{#if editable.address_checked === true}
|
||||
<div class="col-span-6">
|
||||
<label
|
||||
for="address1"
|
||||
class="block font-medium text-gray-700">{$_('address')}</label>
|
||||
<label for="address1" class="block font-medium text-gray-700"
|
||||
>{$_("address")}</label
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder="Address"
|
||||
@ -343,65 +361,72 @@
|
||||
bind:value={editable.address.address1}
|
||||
type="text"
|
||||
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}
|
||||
<span
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||
{$_('address-is-required')}
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
|
||||
>
|
||||
{$_("address-is-required")}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="col-span-6">
|
||||
<label
|
||||
for="address2"
|
||||
class="block font-medium text-gray-700">{$_('apartment-suite-etc')}</label>
|
||||
<label for="address2" class="block font-medium text-gray-700"
|
||||
>{$_("apartment-suite-etc")}</label
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder={$_('apartment-suite-etc')}
|
||||
placeholder={$_("apartment-suite-etc")}
|
||||
bind:value={editable.address.address2}
|
||||
type="text"
|
||||
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 class="col-span-6">
|
||||
<label
|
||||
for="zipcode"
|
||||
class="block font-medium text-gray-700">{$_('zip-postal-code')}</label>
|
||||
<label for="zipcode" class="block font-medium text-gray-700"
|
||||
>{$_("zip-postal-code")}</label
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder={$_('zip-postal-code')}
|
||||
placeholder={$_("zip-postal-code")}
|
||||
class:border-red-500={!iszipcodevalid}
|
||||
class:focus:border-red-500={!iszipcodevalid}
|
||||
class:focus:ring-red-500={!iszipcodevalid}
|
||||
bind:value={editable.address.postalcode}
|
||||
type="text"
|
||||
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}
|
||||
<span
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||
{$_('valid-zipcode-postal-code-is-required')}
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
|
||||
>
|
||||
{$_("valid-zipcode-postal-code-is-required")}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="col-span-6">
|
||||
<label
|
||||
for="city"
|
||||
class="block font-medium text-gray-700">{$_('city')}</label>
|
||||
<label for="city" class="block font-medium text-gray-700"
|
||||
>{$_("city")}</label
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder={$_('city')}
|
||||
placeholder={$_("city")}
|
||||
class:border-red-500={!iscityvalid}
|
||||
class:focus:border-red-500={!iscityvalid}
|
||||
class:focus:ring-red-500={!iscityvalid}
|
||||
bind:value={editable.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: 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}
|
||||
<span
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||
{$_('valid-city-is-required')}
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
|
||||
>
|
||||
{$_("valid-city-is-required")}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
</script>
|
||||
|
||||
{#if !donations || donations.length == 0}
|
||||
{$_('donor-has-no-associated-donations')}
|
||||
{$_("donor-has-no-associated-donations")}
|
||||
{:else}
|
||||
{#each donations as donation}
|
||||
{#if donation.responseType === "DISTANCEDONATION"}
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
<div class="text-center items-center justify-center">
|
||||
<p class="mb-16 text-lg text-gray-500">
|
||||
<img class="w-full" style="height:15rem" src={donors_empty} alt="" />
|
||||
<span class="font-bold">{$_('there-are-no-donors-yet')}</span><br />
|
||||
<span>{$_('add-your-first-donor')}</span>
|
||||
<span class="font-bold">{$_("there-are-no-donors-yet")}</span><br />
|
||||
<span>{$_("add-your-first-donor")}</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@ -1,10 +1,9 @@
|
||||
<script>
|
||||
import { _ } from "svelte-i18n";
|
||||
import { DonationService, DonorService } from "@odit/lfk-client-js";
|
||||
import { DonorService } from "@odit/lfk-client-js";
|
||||
import store from "../../store";
|
||||
import DonorsEmptyState from "./DonorsEmptyState.svelte";
|
||||
import ConfirmDonorDeletion from "./ConfirmDonorDeletion.svelte";
|
||||
import Toastify from "toastify-js";
|
||||
import TableBottom from "../shared/TableBottom.svelte";
|
||||
import {
|
||||
createSvelteTable,
|
||||
@ -23,6 +22,7 @@
|
||||
import DonorAddress from "./DonorAddress.svelte";
|
||||
import DonorDonations from "./DonorDonations.svelte";
|
||||
import { filterAddress, filterName } from "../shared/tablefilters";
|
||||
import toast from "svelte-french-toast";
|
||||
$: searchvalue = "";
|
||||
$: active_deletes = [];
|
||||
$: selectedDonors =
|
||||
@ -162,8 +162,6 @@
|
||||
dataLoaded = true;
|
||||
page++;
|
||||
}
|
||||
|
||||
console.log("All donors loaded");
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -172,12 +170,10 @@
|
||||
active_deletes = active_deletes.filter((a) => a.id !== event.detail.id);
|
||||
}}
|
||||
on:delete={async (event) => {
|
||||
toast.loading($_("deleting-donor"));
|
||||
await DonorService.donorControllerRemove(event.detail.id, true);
|
||||
Toastify({
|
||||
text: $_("donor-deleted"),
|
||||
duration: 500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
toast.dismiss();
|
||||
toast($_("donor-deleted"));
|
||||
current_donors = current_donors.filter((d) => d.id !== event.detail.id);
|
||||
active_deletes = active_deletes.filter((a) => a.id !== event.detail.id);
|
||||
options.update((options) => ({
|
||||
|
||||
@ -25,43 +25,51 @@
|
||||
{#if modal_open}
|
||||
<div
|
||||
class="fixed z-10 inset-0 overflow-y-auto"
|
||||
|
||||
use:clickOutside
|
||||
on:click_outside={() => {
|
||||
modal_open = false;
|
||||
}}>
|
||||
}}
|
||||
>
|
||||
<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="absolute inset-0 bg-gray-500 opacity-75"
|
||||
data-id="modal_backdrop" />
|
||||
data-id="modal_backdrop"
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
class="hidden sm:inline-block sm:align-middle sm:h-screen"
|
||||
aria-hidden="true">​</span>
|
||||
aria-hidden="true">​</span
|
||||
>
|
||||
<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"
|
||||
role="dialog"
|
||||
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="sm:flex sm:items-start">
|
||||
<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
|
||||
fill="currentColor"
|
||||
class="h-6 w-6 text-blue-600"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
height="24"><path fill="none" d="M0 0h24v24H0z" />
|
||||
height="24"
|
||||
><path fill="none" d="M0 0h24v24H0z" />
|
||||
<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" /></svg>
|
||||
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
|
||||
>
|
||||
</div>
|
||||
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
|
||||
<h3 class="text-lg leading-6 font-medium">
|
||||
{$_('read-license')}
|
||||
{$_("read-license")}
|
||||
</h3>
|
||||
<div class="mt-2 mb-6">
|
||||
<p class="text-sm text-gray-500">{currentlicense}</p>
|
||||
@ -78,8 +86,9 @@
|
||||
modal_open = false;
|
||||
}}
|
||||
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">
|
||||
{$_('close')}
|
||||
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")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -90,19 +99,21 @@
|
||||
<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">
|
||||
<h1
|
||||
class="mt-9 font-display text-4xl leading-none font-semibold text-white sm:text-5xl lg:text-6xl">
|
||||
{$_('about')}
|
||||
class="mt-9 font-display text-4xl leading-none font-semibold text-white sm:text-5xl lg:text-6xl"
|
||||
>
|
||||
{$_("about")}
|
||||
🧾
|
||||
</h1>
|
||||
<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!
|
||||
<strong class="text-white font-medium">
|
||||
{$_('by')}
|
||||
{$_("by")}
|
||||
<a href="https://odit.services" class="underline">ODIT.Services</a>
|
||||
</strong>
|
||||
<br />
|
||||
<span class="text-lg">{$_('lfk-is-os')}</span>
|
||||
<span class="text-lg">{$_("lfk-is-os")}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -110,23 +121,23 @@
|
||||
<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">
|
||||
<h2 class="text-4xl font-display font-semibold md:text-5xl">
|
||||
{$_('credits')}
|
||||
{$_("credits")}
|
||||
</h2>
|
||||
<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 class="w-screen leading-8 pl-5 mt-5">
|
||||
{#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}
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{$_('dependency_name')}</th>
|
||||
<th>{$_('license')}</th>
|
||||
<th>{$_('repo_link')}</th>
|
||||
<th>{$_('installed-version')}</th>
|
||||
<th>{$_('author')}</th>
|
||||
<th>{$_("dependency_name")}</th>
|
||||
<th>{$_("license")}</th>
|
||||
<th>{$_("repo_link")}</th>
|
||||
<th>{$_("installed-version")}</th>
|
||||
<th>{$_("author")}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@ -134,58 +145,64 @@
|
||||
<tr>
|
||||
<td>{l.name}</td>
|
||||
<td>
|
||||
{l.license || '?'}<br /><span
|
||||
{l.license || "?"}<br /><span
|
||||
class="underline cursor-pointer"
|
||||
on:click={() => {
|
||||
modal_open = true;
|
||||
currentlicense = l.name + '@' + l.version;
|
||||
licensetext = l.licensetext || $_('no-license-text-could-be-found');
|
||||
}}>{$_('read-license')}</span>
|
||||
currentlicense = l.name + "@" + l.version;
|
||||
licensetext =
|
||||
l.licensetext || $_("no-license-text-could-be-found");
|
||||
}}>{$_("read-license")}</span
|
||||
>
|
||||
</td>
|
||||
<td>
|
||||
{(l.repo?.url || l.repo)
|
||||
.replace('git+', '')
|
||||
.replace('git://', '')}
|
||||
.replace("git+", "")
|
||||
.replace("git://", "")}
|
||||
</td>
|
||||
<td>{l.version || '?'}</td>
|
||||
<td>{l.author?.name || l.author || '?'}</td>
|
||||
<td>{l.version || "?"}</td>
|
||||
<td>{l.author?.name || l.author || "?"}</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
{:catch error}
|
||||
<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">
|
||||
<b class="capitalize">{$_('general_promise_error')}</b>
|
||||
<b class="capitalize">{$_("general_promise_error")}</b>
|
||||
{error}
|
||||
</span>
|
||||
</div>
|
||||
{/await}
|
||||
</div>
|
||||
<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">
|
||||
<li>
|
||||
<a
|
||||
class="underline"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
href="https://storyset.com">https://storyset.com</a>
|
||||
href="https://storyset.com">https://storyset.com</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="underline"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
href="https://undraw.co">https://undraw.co</a>
|
||||
href="https://undraw.co">https://undraw.co</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="underline"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
href="https://remixicon.com">https://remixicon.com</a>
|
||||
href="https://remixicon.com">https://remixicon.com</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -20,27 +20,32 @@
|
||||
class="underline"
|
||||
href="https://odit.services"
|
||||
rel="noopener,noreferrer"
|
||||
target="_blank">ODIT.Services</a>
|
||||
target="_blank">ODIT.Services</a
|
||||
>
|
||||
</p>
|
||||
<p class="text-sm text-gray-500 mt-4">
|
||||
<a
|
||||
class="underline"
|
||||
target="_blank"
|
||||
rel="noopener, noreferrer"
|
||||
href="https://git.odit.services/lfk/frontend/">LfK!Frontend</a>@<a
|
||||
href="https://git.odit.services/lfk/frontend/">LfK!Frontend</a
|
||||
>@<a
|
||||
class="underline"
|
||||
target="_blank"
|
||||
rel="noopener, noreferrer"
|
||||
href="https://git.odit.services/lfk/frontend/src/tag/{releaseinfo}">{releaseinfo}</a>
|
||||
href="https://git.odit.services/lfk/frontend/src/tag/{releaseinfo}"
|
||||
>{releaseinfo}</a
|
||||
>
|
||||
-
|
||||
<a
|
||||
rel="noopener, noreferrer"
|
||||
class="underline"
|
||||
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>
|
||||
</footer>
|
||||
|
||||
@ -1,20 +1,20 @@
|
||||
<script>
|
||||
import { _, getLocaleFromNavigator } from "svelte-i18n";
|
||||
import marked from "marked";
|
||||
import { parse } from "marked";
|
||||
import Footer from "./Footer.svelte";
|
||||
import * as css from "../base/simple.css";
|
||||
// import * as css from "../base/simple.css";
|
||||
let html = "";
|
||||
async function load() {
|
||||
let md = await fetch("/imprint_" + getLocaleFromNavigator() + ".md");
|
||||
let text = (await md.text()).toString();
|
||||
if(text.includes("<meta")){
|
||||
md.ok=false
|
||||
if (text.includes("<meta")) {
|
||||
md.ok = false;
|
||||
}
|
||||
if (!md.ok) {
|
||||
md = await fetch("/imprint_en.md");
|
||||
text = await md.text();
|
||||
}
|
||||
html = marked(text);
|
||||
html = parse(text);
|
||||
}
|
||||
const promise = load();
|
||||
</script>
|
||||
@ -22,8 +22,9 @@
|
||||
<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">
|
||||
<h1
|
||||
class="mt-9 font-display text-4xl leading-none font-semibold text-white sm:text-5xl lg:text-6xl">
|
||||
{$_('imprint')}
|
||||
class="mt-9 font-display text-4xl leading-none font-semibold text-white sm:text-5xl lg:text-6xl"
|
||||
>
|
||||
{$_("imprint")}
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
@ -31,16 +32,17 @@
|
||||
<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">
|
||||
{#await promise}
|
||||
<p class="text-center w-full">{$_('imprint-loading')}</p>
|
||||
<p class="text-center w-full">{$_("imprint-loading")}</p>
|
||||
{:then}
|
||||
<div class="simplecontent">
|
||||
{@html html}
|
||||
</div>
|
||||
{:catch error}
|
||||
<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">
|
||||
<b class="capitalize">{$_('general_promise_error')}</b>
|
||||
<b class="capitalize">{$_("general_promise_error")}</b>
|
||||
{error}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@ -4,19 +4,22 @@
|
||||
|
||||
<body class="antialiased font-sans">
|
||||
<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="text-black text-5xl md:text-15xl font-black">
|
||||
{$_('404title')}
|
||||
{$_("404title")}
|
||||
</div>
|
||||
<div class="w-16 h-1 bg-purple-light my-3 md:my-6" />
|
||||
<p
|
||||
class="text-grey-darker text-2xl md:text-3xl font-light mb-8 leading-normal">
|
||||
{$_('404message')}
|
||||
class="text-grey-darker text-2xl md:text-3xl font-light mb-8 leading-normal"
|
||||
>
|
||||
{$_("404message")}
|
||||
</p>
|
||||
<a
|
||||
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">{$_('goback')}</a>
|
||||
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
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,20 +1,20 @@
|
||||
<script>
|
||||
import { _, getLocaleFromNavigator } from "svelte-i18n";
|
||||
import marked from "marked";
|
||||
import { parse } from "marked";
|
||||
import Footer from "./Footer.svelte";
|
||||
// import * as css from "../base/simple.css?inline";
|
||||
let html = "";
|
||||
async function load() {
|
||||
let md = await fetch("/privacy_" + getLocaleFromNavigator() + ".md");
|
||||
let text = (await md.text()).toString();
|
||||
if(text.includes("<meta")){
|
||||
md.ok=false
|
||||
if (text.includes("<meta")) {
|
||||
md.ok = false;
|
||||
}
|
||||
if (!md.ok) {
|
||||
md = await fetch("/privacy_en.md");
|
||||
text = await md.text();
|
||||
}
|
||||
html = marked(text);
|
||||
html = parse(text);
|
||||
}
|
||||
const promise = load();
|
||||
</script>
|
||||
@ -22,8 +22,9 @@
|
||||
<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">
|
||||
<h1
|
||||
class="mt-9 font-display text-4xl leading-none font-semibold text-white sm:text-5xl lg:text-6xl">
|
||||
{$_('privacy')}
|
||||
class="mt-9 font-display text-4xl leading-none font-semibold text-white sm:text-5xl lg:text-6xl"
|
||||
>
|
||||
{$_("privacy")}
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
@ -31,16 +32,17 @@
|
||||
<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">
|
||||
{#await promise}
|
||||
<p class="text-center w-full">{$_('privacy-loading')}</p>
|
||||
<p class="text-center w-full">{$_("privacy-loading")}</p>
|
||||
{:then}
|
||||
<div class="simplecontent">
|
||||
{@html html}
|
||||
</div>
|
||||
{:catch error}
|
||||
<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">
|
||||
<b class="capitalize">{$_('general_promise_error')}</b>
|
||||
<b class="capitalize">{$_("general_promise_error")}</b>
|
||||
{error}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@ -4,26 +4,33 @@
|
||||
|
||||
<div class="md:flex flex-col md:flex-row h-screen w-full">
|
||||
<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
|
||||
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
|
||||
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">Sidebar</a>
|
||||
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
|
||||
>
|
||||
<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">
|
||||
{#if open}
|
||||
<path
|
||||
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"
|
||||
clip-rule="evenodd" />
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
{/if}
|
||||
{#if !open}
|
||||
<path
|
||||
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"
|
||||
clip-rule="evenodd" />
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
{/if}
|
||||
</svg>
|
||||
</button>
|
||||
@ -31,49 +38,63 @@
|
||||
<nav
|
||||
:class:block={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
|
||||
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
|
||||
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
|
||||
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
|
||||
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">
|
||||
<button
|
||||
on:click={() => {
|
||||
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>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
class="inline w-4 h-4 mt-1 ml-1 transition-transform duration-200 transform md:-mt-1"><path
|
||||
class="inline w-4 h-4 mt-1 ml-1 transition-transform duration-200 transform md:-mt-1"
|
||||
><path
|
||||
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"
|
||||
clip-rule="evenodd" /></svg>
|
||||
clip-rule="evenodd"
|
||||
/></svg
|
||||
>
|
||||
</button>
|
||||
<div
|
||||
class:block={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
|
||||
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
|
||||
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
|
||||
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
|
||||
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>
|
||||
|
||||
@ -1,9 +1,8 @@
|
||||
<script>
|
||||
import { _ } from "svelte-i18n";
|
||||
import { clickOutside } from "../base/outsideclick";
|
||||
|
||||
import Toastify from "toastify-js";
|
||||
import { UserGroupService } from "@odit/lfk-client-js";
|
||||
import toast from "svelte-french-toast";
|
||||
export let modal_open;
|
||||
export let current_groups;
|
||||
let description_input_value;
|
||||
@ -32,10 +31,7 @@
|
||||
function submit() {
|
||||
if (processed_last_submit === true) {
|
||||
processed_last_submit = false;
|
||||
const toast = Toastify({
|
||||
text: $_('group-is-being-added'),
|
||||
duration: -1,
|
||||
}).showToast();
|
||||
toast.loading($_("group-is-being-added"));
|
||||
let postdata = {
|
||||
name: name_input_value,
|
||||
description: description_input_value,
|
||||
@ -46,11 +42,8 @@
|
||||
description_input_value = "";
|
||||
modal_open = false;
|
||||
//
|
||||
Toastify({
|
||||
text: $_('group-added'),
|
||||
duration: 500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
toast.dismiss();
|
||||
toast.success($_("group-added"));
|
||||
current_groups.push(result);
|
||||
current_groups = current_groups;
|
||||
})
|
||||
@ -59,8 +52,6 @@
|
||||
})
|
||||
.finally(() => {
|
||||
processed_last_submit = true;
|
||||
//
|
||||
toast.hideToast();
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -69,83 +60,100 @@
|
||||
{#if modal_open}
|
||||
<div
|
||||
class="fixed z-10 inset-0 overflow-y-auto"
|
||||
|
||||
use:clickOutside
|
||||
on:click_outside={() => {
|
||||
modal_open = false;
|
||||
}}>
|
||||
}}
|
||||
>
|
||||
<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="absolute inset-0 bg-gray-500 opacity-75"
|
||||
data-id="modal_backdrop" />
|
||||
data-id="modal_backdrop"
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
class="hidden sm:inline-block sm:align-middle sm:h-screen"
|
||||
aria-hidden="true">​</span>
|
||||
aria-hidden="true">​</span
|
||||
>
|
||||
<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"
|
||||
role="dialog"
|
||||
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="sm:flex sm:items-start">
|
||||
<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
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 640 512"
|
||||
class="h-6 w-6 text-blue-600"
|
||||
fill="currentColor"
|
||||
width="24"
|
||||
height="24"><path fill="none" d="M0 0h24v24H0z" />
|
||||
height="24"
|
||||
><path fill="none" d="M0 0h24v24H0z" />
|
||||
<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" /></svg>
|
||||
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
|
||||
>
|
||||
</div>
|
||||
<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">
|
||||
{$_('create-a-new-user-group')}
|
||||
{$_("create-a-new-user-group")}
|
||||
</h3>
|
||||
<div class="mt-2 mb-6">
|
||||
<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>
|
||||
</div>
|
||||
<div class="grid grid-cols-6 gap-6">
|
||||
<div class="col-span-6">
|
||||
<label
|
||||
for="firstname"
|
||||
class="block text-sm font-medium text-gray-700">{$_('name')}</label>
|
||||
class="block text-sm font-medium text-gray-700"
|
||||
>{$_("name")}</label
|
||||
>
|
||||
<input
|
||||
use:focus
|
||||
autocomplete="off"
|
||||
placeholder="{$_('name')}"
|
||||
placeholder={$_("name")}
|
||||
class:border-red-500={!isNameValid}
|
||||
class:focus:border-red-500={!isNameValid}
|
||||
class:focus:ring-red-500={!isNameValid}
|
||||
bind:value={name_input_value}
|
||||
type="text"
|
||||
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}
|
||||
<span
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||
{$_('name-is-required')}
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
|
||||
>
|
||||
{$_("name-is-required")}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="col-span-6">
|
||||
<label
|
||||
for="trackname"
|
||||
class="block text-sm font-medium text-gray-700">{$_('description-optional')}</label>
|
||||
class="block text-sm font-medium text-gray-700"
|
||||
>{$_("description-optional")}</label
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder="{$_('something-about-the-group')}"
|
||||
placeholder={$_("something-about-the-group")}
|
||||
bind:value={description_input_value}
|
||||
type="text"
|
||||
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>
|
||||
@ -157,16 +165,18 @@
|
||||
class:opacity-50={!createbtnenabled}
|
||||
on:click={submit}
|
||||
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">
|
||||
{$_('create')}
|
||||
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")}
|
||||
</button>
|
||||
<button
|
||||
on:click={() => {
|
||||
modal_open = false;
|
||||
}}
|
||||
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">
|
||||
{$_('cancel')}
|
||||
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")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,10 +1,8 @@
|
||||
<script>
|
||||
import { _ } from "svelte-i18n";
|
||||
import store from "../../store";
|
||||
import {
|
||||
UserGroupService
|
||||
} from "@odit/lfk-client-js";
|
||||
import Toastify from "toastify-js";
|
||||
import { UserGroupService } from "@odit/lfk-client-js";
|
||||
|
||||
import PromiseError from "../base/PromiseError.svelte";
|
||||
let data_loaded = false;
|
||||
export let params;
|
||||
@ -31,10 +29,11 @@
|
||||
$: search_permission = "";
|
||||
$: original_data = {};
|
||||
$: editable = {};
|
||||
$: changes_performed = !(JSON.stringify(original_data) == JSON.stringify(editable));
|
||||
$: changes_performed = !(
|
||||
JSON.stringify(original_data) == JSON.stringify(editable)
|
||||
);
|
||||
$: isGroupnameValid = editable.name !== "";
|
||||
$: save_enabled =
|
||||
changes_performed && isGroupnameValid
|
||||
$: save_enabled = changes_performed && isGroupnameValid;
|
||||
promise.then((data) => {
|
||||
let current_target = "";
|
||||
let colorindex = -1;
|
||||
@ -59,20 +58,13 @@
|
||||
});
|
||||
function submit() {
|
||||
if (data_loaded === true && save_enabled) {
|
||||
Toastify({
|
||||
text: $_('updateing-group'),
|
||||
duration: 2500,
|
||||
}).showToast();
|
||||
toast($_("updateing-group"));
|
||||
UserGroupService.userGroupControllerPut(original_data.id, editable)
|
||||
.then((resp) => {
|
||||
Object.assign(original_data, editable);
|
||||
original_data = editable;
|
||||
Object.assign(original_data, editable);
|
||||
Toastify({
|
||||
text: $_('group-updated'),
|
||||
duration: 2500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
toast.success($_("group-updated"));
|
||||
})
|
||||
.catch((err) => {});
|
||||
} else {
|
||||
@ -88,7 +80,7 @@
|
||||
</script>
|
||||
|
||||
{#await promise}
|
||||
{$_('loading-group-detail')}
|
||||
{$_("loading-group-detail")}
|
||||
{:then}
|
||||
<section class="container p-5 select-none">
|
||||
<div class="flex flex-row mb-4">
|
||||
@ -96,10 +88,21 @@
|
||||
<nav class="w-full flex">
|
||||
<ol class="list-none flex flex-row items-center justify-start">
|
||||
<li class="flex items-center">
|
||||
<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>
|
||||
<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 class="flex items-center">
|
||||
<a class="mr-2" href="../">{$_('groups')}</a><svg
|
||||
<a class="mr-2" href="../">{$_("groups")}</a><svg
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-width="2"
|
||||
@ -109,12 +112,10 @@
|
||||
class="h-3 w-3 mr-2 stroke-current"
|
||||
height="1em"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"><line
|
||||
x1="5"
|
||||
y1="12"
|
||||
x2="19"
|
||||
y2="12" />
|
||||
<polyline points="12 5 19 12 12 19" /></svg>
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
><line x1="5" y1="12" x2="19" y2="12" />
|
||||
<polyline points="12 5 19 12 12 19" /></svg
|
||||
>
|
||||
</li>
|
||||
<li class="flex items-center">
|
||||
<span class="mr-2">{editable.name}</span>
|
||||
@ -126,16 +127,20 @@
|
||||
<div class="mb-8 text-3xl font-extrabold leading-tight">
|
||||
{original_data.name}
|
||||
<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}
|
||||
<button
|
||||
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">{$_('confirm-deletion')}</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"
|
||||
>{$_("confirm-deletion")}</button
|
||||
>
|
||||
<button
|
||||
on:click={() => {
|
||||
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">{$_('cancel')}</button>
|
||||
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
|
||||
>
|
||||
{/if}
|
||||
{#if !delete_triggered}
|
||||
<button
|
||||
@ -143,7 +148,9 @@
|
||||
delete_triggered = true;
|
||||
}}
|
||||
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">{$_('delete-group')}</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"
|
||||
>{$_("delete-group")}</button
|
||||
>
|
||||
{/if}
|
||||
{/if}
|
||||
{#if !delete_triggered}
|
||||
@ -152,64 +159,74 @@
|
||||
class:opacity-50={!save_enabled}
|
||||
type="button"
|
||||
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">{$_('save-changes')}</button>
|
||||
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
|
||||
>
|
||||
{/if}
|
||||
</span>
|
||||
</div>
|
||||
<!-- -->
|
||||
<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
|
||||
autocomplete="off"
|
||||
placeholder={$_('name')}
|
||||
placeholder={$_("name")}
|
||||
type="text"
|
||||
bind:value={editable.name}
|
||||
class:border-red-500={!isGroupnameValid}
|
||||
class:focus:border-red-500={!isGroupnameValid}
|
||||
class:focus:ring-red-500={!isGroupnameValid}
|
||||
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}
|
||||
<span
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||
{$_('group-name-is-required')}
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
|
||||
>
|
||||
{$_("group-name-is-required")}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="text-sm w-full">
|
||||
<label
|
||||
for="firstname"
|
||||
class="font-medium text-gray-700">{$_('description')}</label>
|
||||
<label for="firstname" class="font-medium text-gray-700"
|
||||
>{$_("description")}</label
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder={$_('description')}
|
||||
placeholder={$_("description")}
|
||||
type="text"
|
||||
bind:value={editable.description}
|
||||
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 class="text-sm w-full mt-8">
|
||||
<p class="font-medium mb-4">
|
||||
{$_('permissions')}
|
||||
{$_("permissions")}
|
||||
<a
|
||||
class="px-4 py-2 bg-gray-500 rounded-md text-white"
|
||||
href="/groups/{params.groupid}/permissions/">{$_('edit-permissions')}</a>
|
||||
href="/groups/{params.groupid}/permissions/"
|
||||
>{$_("edit-permissions")}</a
|
||||
>
|
||||
</p>
|
||||
<div class="w-full sm:my-px sm:px-px sm:w-1/2">
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder="{$_('search-for-permission')}"
|
||||
placeholder={$_("search-for-permission")}
|
||||
type="text"
|
||||
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 dark:bg-gray-900 dark:text-gray-100 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>
|
||||
{#each original_data.permissions as p}
|
||||
{#if p.toLowerCase().includes(search_permission.toLowerCase())}
|
||||
<span
|
||||
style="background:{matched_colors[p.split(':')[0]][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>
|
||||
style="background:{matched_colors[
|
||||
p.split(':')[0]
|
||||
][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}
|
||||
{/each}
|
||||
|
||||
@ -3,9 +3,9 @@
|
||||
import {
|
||||
PermissionService,
|
||||
CreatePermission,
|
||||
UserGroupService,
|
||||
UserGroupService,
|
||||
} from "@odit/lfk-client-js";
|
||||
import Toastify from "toastify-js";
|
||||
|
||||
import PromiseError from "../base/PromiseError.svelte";
|
||||
export let params;
|
||||
let [
|
||||
@ -20,15 +20,14 @@ UserGroupService,
|
||||
$: save_enabled =
|
||||
JSON.stringify(grantedPermissions) ===
|
||||
JSON.stringify(grantedPermissions_initial);
|
||||
const group_promise = UserGroupService.userGroupControllerGetOne(params.groupid);
|
||||
const group_promise = UserGroupService.userGroupControllerGetOne(
|
||||
params.groupid
|
||||
);
|
||||
group_promise.then((data) => {
|
||||
original_data = Object.assign(original_data, data);
|
||||
});
|
||||
function submit() {
|
||||
Toastify({
|
||||
text: $_('updating-permissions'),
|
||||
duration: 2500,
|
||||
}).showToast();
|
||||
toast.loading($_("updating-permissions"));
|
||||
to_delete.forEach((d) => {
|
||||
promises = promises.concat([
|
||||
PermissionService.permissionControllerRemove(d, true),
|
||||
@ -50,11 +49,7 @@ UserGroupService,
|
||||
);
|
||||
});
|
||||
grantedPermissions_initial = grantedPermissions;
|
||||
Toastify({
|
||||
text: $_("permissions-updated"),
|
||||
duration: 2500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
toast($_("permissions-updated"));
|
||||
});
|
||||
}
|
||||
Object.values(CreatePermission.target).forEach((t) => {
|
||||
@ -62,13 +57,15 @@ UserGroupService,
|
||||
allpermissions = allpermissions.concat([{ target: t, action: a }]);
|
||||
});
|
||||
});
|
||||
UserGroupService.userGroupControllerGetPermissions(params.groupid).then((val) => {
|
||||
UserGroupService.userGroupControllerGetPermissions(params.groupid).then(
|
||||
(val) => {
|
||||
val.directlyGranted.forEach((p) => {
|
||||
delete p.responseType;
|
||||
grantedPermissions = grantedPermissions.concat([p]);
|
||||
});
|
||||
grantedPermissions_initial = grantedPermissions;
|
||||
});
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
{#await group_promise}
|
||||
@ -86,12 +83,15 @@ UserGroupService,
|
||||
width="24"
|
||||
height="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 640 512"><path
|
||||
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>
|
||||
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 class="flex items-center">
|
||||
<a class="mr-2" href="../../">{$_('user-groups')}</a><svg
|
||||
<a class="mr-2" href="../../">{$_("user-groups")}</a><svg
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-width="2"
|
||||
@ -101,12 +101,10 @@ UserGroupService,
|
||||
class="h-3 w-3 mr-2 stroke-current"
|
||||
height="1em"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"><line
|
||||
x1="5"
|
||||
y1="12"
|
||||
x2="19"
|
||||
y2="12" />
|
||||
<polyline points="12 5 19 12 12 19" /></svg>
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
><line x1="5" y1="12" x2="19" y2="12" />
|
||||
<polyline points="12 5 19 12 12 19" /></svg
|
||||
>
|
||||
</li>
|
||||
<li class="flex items-center">
|
||||
<span class="mr-2"><a href="../">{original_data.name}</a></span>
|
||||
@ -122,22 +120,20 @@ UserGroupService,
|
||||
class="h-3 w-3 mr-2 stroke-current"
|
||||
height="1em"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"><line
|
||||
x1="5"
|
||||
y1="12"
|
||||
x2="19"
|
||||
y2="12" />
|
||||
<polyline points="12 5 19 12 12 19" /></svg>
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
><line x1="5" y1="12" x2="19" y2="12" />
|
||||
<polyline points="12 5 19 12 12 19" /></svg
|
||||
>
|
||||
</li>
|
||||
<li class="flex items-center">
|
||||
<span class="mr-2">{$_('permissions')}</span>
|
||||
<span class="mr-2">{$_("permissions")}</span>
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-8 text-3xl font-extrabold">
|
||||
{$_('permissions')}:
|
||||
{$_("permissions")}:
|
||||
{original_data.name}
|
||||
<span>
|
||||
{#if promises.length === 0}
|
||||
@ -146,21 +142,25 @@ UserGroupService,
|
||||
class:opacity-50={save_enabled}
|
||||
type="button"
|
||||
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">{$_('save-changes')}</button>
|
||||
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
|
||||
>
|
||||
{:else}
|
||||
<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">{$_('applying-changes')}</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"
|
||||
>{$_("applying-changes")}</button
|
||||
>
|
||||
{/if}
|
||||
</span>
|
||||
</div>
|
||||
<!-- -->
|
||||
<div class="flex flex-wrap -mx-1 overflow-hidden">
|
||||
<div class="my-1 px-1 w-full overflow-hidden sm:w-1/2">
|
||||
{$_('verfuegbare')}
|
||||
{$_("available-permissions")}
|
||||
</div>
|
||||
<div class="my-1 px-1 w-full overflow-hidden sm:w-1/2">
|
||||
{$_('granted')}
|
||||
{$_("granted")}
|
||||
</div>
|
||||
</div>
|
||||
<!-- -->
|
||||
@ -168,12 +168,14 @@ UserGroupService,
|
||||
{#if allpermissions.length > 0}
|
||||
<div class="my-1 px-1 w-full overflow-hidden sm:w-1/2">
|
||||
<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}
|
||||
{#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
|
||||
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}
|
||||
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}
|
||||
<button
|
||||
on:click={() => {
|
||||
grantedPermissions = grantedPermissions.concat([p]);
|
||||
@ -190,7 +192,9 @@ UserGroupService,
|
||||
}
|
||||
}}
|
||||
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">+</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"
|
||||
>+</button
|
||||
>
|
||||
</p>
|
||||
{/if}
|
||||
{/each}
|
||||
@ -198,22 +202,39 @@ UserGroupService,
|
||||
</div>
|
||||
<div class="my-1 px-1 w-full overflow-hidden sm:w-1/2">
|
||||
<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}
|
||||
<p
|
||||
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}
|
||||
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}
|
||||
<button
|
||||
on:click={() => {
|
||||
grantedPermissions = grantedPermissions.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);
|
||||
grantedPermissions = grantedPermissions.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 {
|
||||
to_delete = to_delete.concat([p.id]);
|
||||
}
|
||||
}}
|
||||
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">-</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"
|
||||
>-</button
|
||||
>
|
||||
</p>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
@ -9,21 +9,22 @@
|
||||
|
||||
<section class="container p-5">
|
||||
<span class="mb-1 text-3xl font-extrabold leading-tight">
|
||||
{$_('user-groups')}
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes('USERGROUP:CREATE')}
|
||||
{$_("user-groups")}
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes("USERGROUP:CREATE")}
|
||||
<button
|
||||
on:click={() => {
|
||||
modal_open = true;
|
||||
}}
|
||||
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">
|
||||
{$_('add-user-group')}
|
||||
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")}
|
||||
</button>
|
||||
{/if}
|
||||
</span>
|
||||
<UserGroupsOverview bind:current_groups />
|
||||
</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 />
|
||||
{/if}
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
<div class="text-center items-center justify-center">
|
||||
<p class="mb-16 text-lg text-gray-500">
|
||||
<img class="w-full h-44" src={groups_empty} alt="" />
|
||||
<span class="font-bold">{$_('there-are-no-groups-yet')}.</span><br />
|
||||
<span>{$_('add-your-first-group')}</span>
|
||||
<span class="font-bold">{$_("there-are-no-groups-yet")}.</span><br />
|
||||
<span>{$_("add-your-first-group")}</span>
|
||||
</p>
|
||||
</div>
|
||||
@ -13,13 +13,14 @@
|
||||
);
|
||||
</script>
|
||||
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes('USERGROUP:GET')}
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes("USERGROUP:GET")}
|
||||
{#await groups_promise}
|
||||
<div
|
||||
class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
|
||||
role="alert">
|
||||
<p class="font-bold">{$_('groups-are-being-loaded')}</p>
|
||||
<p class="text-sm">{$_('this-might-take-a-moment')}</p>
|
||||
role="alert"
|
||||
>
|
||||
<p class="font-bold">{$_("groups-are-being-loaded")}</p>
|
||||
<p class="text-sm">{$_("this-might-take-a-moment")}</p>
|
||||
</div>
|
||||
{:then}
|
||||
{#if current_groups.length === 0}
|
||||
@ -28,26 +29,30 @@
|
||||
<input
|
||||
type="search"
|
||||
bind:value={searchvalue}
|
||||
placeholder={$_('datatable.search')}
|
||||
aria-label={$_('datatable.search')}
|
||||
class="mb-4" />
|
||||
placeholder={$_("datatable.search")}
|
||||
aria-label={$_("datatable.search")}
|
||||
class="mb-4"
|
||||
/>
|
||||
<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">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
{$_('name')}
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
||||
>
|
||||
{$_("name")}
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
{$_('description')}
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
||||
>
|
||||
{$_("description")}
|
||||
</th>
|
||||
<th scope="col" class="relative px-6 py-3">
|
||||
<span class="sr-only">{$_('action')}</span>
|
||||
<span class="sr-only">{$_("action")}</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
@ -72,39 +77,53 @@
|
||||
</td>
|
||||
{#if active_deletes[group.id] === true}
|
||||
<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
|
||||
on:click={() => {
|
||||
active_deletes[group.id] = false;
|
||||
}}
|
||||
tabindex="0"
|
||||
class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">{$_('cancel-delete')}</button>
|
||||
class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer"
|
||||
>{$_("cancel-delete")}</button
|
||||
>
|
||||
<button
|
||||
on:click={() => {
|
||||
UserGroupService.userGroupControllerRemove(group.id, true)
|
||||
UserGroupService.userGroupControllerRemove(
|
||||
group.id,
|
||||
true
|
||||
)
|
||||
.then((resp) => {
|
||||
current_groups = current_groups.filter((obj) => obj.id !== group.id);
|
||||
current_groups = current_groups.filter(
|
||||
(obj) => obj.id !== group.id
|
||||
);
|
||||
})
|
||||
.catch((err) => {
|
||||
// error deleting user
|
||||
});
|
||||
}}
|
||||
tabindex="0"
|
||||
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('confirm-delete')}</button>
|
||||
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
|
||||
>{$_("confirm-delete")}</button
|
||||
>
|
||||
</td>
|
||||
{:else}
|
||||
<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
|
||||
href="./{group.id}"
|
||||
class="text-indigo-600 hover:text-indigo-900">Details</a>
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes('USERGROUP:DELETE')}
|
||||
class="text-indigo-600 hover:text-indigo-900">Details</a
|
||||
>
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes("USERGROUP:DELETE")}
|
||||
<button
|
||||
on:click={() => {
|
||||
active_deletes[group.id] = true;
|
||||
}}
|
||||
tabindex="0"
|
||||
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('delete')}</button>
|
||||
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
|
||||
>{$_("delete")}</button
|
||||
>
|
||||
{/if}
|
||||
</td>
|
||||
{/if}
|
||||
@ -118,7 +137,7 @@
|
||||
{:catch error}
|
||||
<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">
|
||||
<b class="capitalize">{$_('general_promise_error')}</b>
|
||||
<b class="capitalize">{$_("general_promise_error")}</b>
|
||||
{error}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,8 @@
|
||||
import { clickOutside } from "../base/outsideclick";
|
||||
|
||||
import { RunnerOrganizationService } from "@odit/lfk-client-js";
|
||||
import Toastify from "toastify-js";
|
||||
|
||||
import toast from "svelte-french-toast";
|
||||
export let modal_open;
|
||||
export let current_organizations;
|
||||
let name_input_dom;
|
||||
@ -48,10 +49,7 @@
|
||||
function submit() {
|
||||
if (processed_last_submit === true) {
|
||||
processed_last_submit = false;
|
||||
const toast = Toastify({
|
||||
text: $_("organization-is-being-added"),
|
||||
duration: -1,
|
||||
}).showToast();
|
||||
toast.loading($_("organization-is-being-added"));
|
||||
let address = {};
|
||||
if (address_checked === true) {
|
||||
address = {
|
||||
@ -70,17 +68,13 @@
|
||||
.then((result) => {
|
||||
name = "";
|
||||
modal_open = false;
|
||||
Toastify({
|
||||
text: $_("organization-added"),
|
||||
duration: 500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
toast.dismiss();
|
||||
toast.success($_("organization-added"));
|
||||
current_organizations = current_organizations.concat([result]);
|
||||
})
|
||||
.catch((err) => {})
|
||||
.finally(() => {
|
||||
processed_last_submit = true;
|
||||
toast.hideToast();
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -89,57 +83,69 @@
|
||||
{#if modal_open}
|
||||
<div
|
||||
class="fixed z-10 inset-0 overflow-y-auto"
|
||||
|
||||
use:clickOutside
|
||||
on:click_outside={() => {
|
||||
modal_open = false;
|
||||
}}>
|
||||
}}
|
||||
>
|
||||
<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="absolute inset-0 bg-gray-500 opacity-75"
|
||||
data-id="modal_backdrop" />
|
||||
data-id="modal_backdrop"
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
class="hidden sm:inline-block sm:align-middle sm:h-screen"
|
||||
aria-hidden="true">​</span>
|
||||
aria-hidden="true">​</span
|
||||
>
|
||||
<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"
|
||||
role="dialog"
|
||||
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="sm:flex sm:items-start">
|
||||
<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"
|
||||
width="24"
|
||||
height="24"><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>
|
||||
height="24"
|
||||
><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
|
||||
>
|
||||
</div>
|
||||
<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">
|
||||
{$_('create-a-new-organization')}
|
||||
{$_("create-a-new-organization")}
|
||||
</h3>
|
||||
<div class="mt-2 mb-6">
|
||||
<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>
|
||||
</div>
|
||||
<div class="grid grid-cols-6 gap-6">
|
||||
<div class="col-span-6">
|
||||
<label
|
||||
for="firstname"
|
||||
class="block text-sm font-medium text-gray-700">{$_('name')}</label>
|
||||
class="block text-sm font-medium text-gray-700"
|
||||
>{$_("name")}</label
|
||||
>
|
||||
<input
|
||||
use:focus
|
||||
autocomplete="off"
|
||||
placeholder={$_('name')}
|
||||
placeholder={$_("name")}
|
||||
class:border-red-500={!isOrgnameValid}
|
||||
class:focus:border-red-500={!isOrgnameValid}
|
||||
class:focus:ring-red-500={!isOrgnameValid}
|
||||
@ -147,11 +153,13 @@
|
||||
bind:this={name_input_dom}
|
||||
type="text"
|
||||
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}
|
||||
<span
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||
{$_('organization-name-is-required')}
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
|
||||
>
|
||||
{$_("organization-name-is-required")}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
@ -162,22 +170,25 @@
|
||||
id="comments"
|
||||
name="comments"
|
||||
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 class="ml-3 text-sm">
|
||||
<label
|
||||
for="comments"
|
||||
class="font-medium text-gray-700">{$_('address')}</label>
|
||||
<label for="comments" class="font-medium text-gray-700"
|
||||
>{$_("address")}</label
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
{#if address_checked === true}
|
||||
<div class="col-span-6">
|
||||
<label
|
||||
for="address1"
|
||||
class="block text-sm font-medium text-gray-700">{$_('address')}</label>
|
||||
class="block text-sm font-medium text-gray-700"
|
||||
>{$_("address")}</label
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder="{$_('address')}"
|
||||
placeholder={$_("address")}
|
||||
class:border-red-500={!isAddress1Valid}
|
||||
class:focus:border-red-500={!isAddress1Valid}
|
||||
class:focus:ring-red-500={!isAddress1Valid}
|
||||
@ -185,34 +196,41 @@
|
||||
bind:this={address_input1}
|
||||
type="text"
|
||||
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}
|
||||
<span
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||
{$_('address-is-required')}
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
|
||||
>
|
||||
{$_("address-is-required")}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="col-span-6">
|
||||
<label
|
||||
for="address2"
|
||||
class="block text-sm font-medium text-gray-700">{$_('apartment-suite-etc')}</label>
|
||||
class="block text-sm font-medium text-gray-700"
|
||||
>{$_("apartment-suite-etc")}</label
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder="{$_('apartment-suite-etc')}"
|
||||
placeholder={$_("apartment-suite-etc")}
|
||||
bind:value={address_input2_value}
|
||||
bind:this={address_input2}
|
||||
type="text"
|
||||
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 class="col-span-6">
|
||||
<label
|
||||
for="zipcode"
|
||||
class="block text-sm font-medium text-gray-700">{$_('zip-postal-code')}</label>
|
||||
class="block text-sm font-medium text-gray-700"
|
||||
>{$_("zip-postal-code")}</label
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder="{$_('zip-postal-code')}"
|
||||
placeholder={$_("zip-postal-code")}
|
||||
class:border-red-500={!iszipcodevalid}
|
||||
class:focus:border-red-500={!iszipcodevalid}
|
||||
class:focus:ring-red-500={!iszipcodevalid}
|
||||
@ -220,21 +238,25 @@
|
||||
bind:this={address_zipcode}
|
||||
type="text"
|
||||
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}
|
||||
<span
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||
{$_('valid-zipcode-postal-code-is-required')}
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
|
||||
>
|
||||
{$_("valid-zipcode-postal-code-is-required")}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="col-span-6">
|
||||
<label
|
||||
for="city"
|
||||
class="block text-sm font-medium text-gray-700">{$_('city')}</label>
|
||||
class="block text-sm font-medium text-gray-700"
|
||||
>{$_("city")}</label
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder="{$_('city')}"
|
||||
placeholder={$_("city")}
|
||||
class:border-red-500={!iscityvalid}
|
||||
class:focus:border-red-500={!iscityvalid}
|
||||
class:focus:ring-red-500={!iscityvalid}
|
||||
@ -242,11 +264,13 @@
|
||||
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" />
|
||||
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')}
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
|
||||
>
|
||||
{$_("valid-city-is-required")}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
@ -261,16 +285,18 @@
|
||||
class:opacity-50={!createbtnenabled}
|
||||
on:click={submit}
|
||||
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">
|
||||
{$_('create')}
|
||||
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")}
|
||||
</button>
|
||||
<button
|
||||
on:click={() => {
|
||||
modal_open = false;
|
||||
}}
|
||||
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">
|
||||
{$_('cancel')}
|
||||
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")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
import { clickOutside } from "../base/outsideclick";
|
||||
|
||||
import { RunnerOrganizationService } from "@odit/lfk-client-js";
|
||||
import Toastify from "toastify-js";
|
||||
|
||||
import { createEventDispatcher } from "svelte";
|
||||
export let modal_open;
|
||||
export let delete_org;
|
||||
@ -18,11 +18,7 @@
|
||||
true
|
||||
)
|
||||
.then((resp) => {
|
||||
Toastify({
|
||||
text: $_('organization-deleted'),
|
||||
duration: 500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
toast($_("organization-deleted"));
|
||||
location.replace("./");
|
||||
})
|
||||
.catch((err) => {});
|
||||
@ -32,51 +28,59 @@
|
||||
{#if modal_open}
|
||||
<div
|
||||
class="fixed z-10 inset-0 overflow-y-auto"
|
||||
|
||||
use:clickOutside
|
||||
on:click_outside={cancelDelete}>
|
||||
on:click_outside={cancelDelete}
|
||||
>
|
||||
<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="absolute inset-0 bg-gray-500 opacity-75"
|
||||
data-id="modal_backdrop" />
|
||||
data-id="modal_backdrop"
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
class="hidden sm:inline-block sm:align-middle sm:h-screen"
|
||||
aria-hidden="true">​</span>
|
||||
aria-hidden="true">​</span
|
||||
>
|
||||
<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"
|
||||
role="dialog"
|
||||
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="sm:flex sm:items-start">
|
||||
<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"
|
||||
width="24"
|
||||
height="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 640 512"><path
|
||||
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>
|
||||
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
|
||||
>
|
||||
</div>
|
||||
<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">
|
||||
{$_('attention')}
|
||||
{$_("attention")}
|
||||
</h3>
|
||||
<div class="mt-2 mb-6">
|
||||
<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 },
|
||||
}
|
||||
)}<br />
|
||||
{$_('all-associated-teams-and-runners-will-be-deleted-too')}
|
||||
{$_("all-associated-teams-and-runners-will-be-deleted-too")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -86,14 +90,16 @@
|
||||
<button
|
||||
on:click={deleteOrg}
|
||||
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">
|
||||
{$_('confirm-delete-organization-and-associated-teams-runners')}
|
||||
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")}
|
||||
</button>
|
||||
<button
|
||||
on:click={cancelDelete}
|
||||
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">
|
||||
{$_('cancel-keep-organization')}
|
||||
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")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
RunnerOrganizationService,
|
||||
} from "@odit/lfk-client-js";
|
||||
import { getLocaleFromNavigator, _ } from "svelte-i18n";
|
||||
import Toastify from "toastify-js";
|
||||
|
||||
import store from "../../store";
|
||||
import ConfirmOrgDeletion from "./ConfirmOrgDeletion.svelte";
|
||||
import ImportRunnerModal from "../runners/ImportRunnerModal.svelte";
|
||||
@ -77,11 +77,7 @@
|
||||
false
|
||||
)
|
||||
.then((resp) => {
|
||||
Toastify({
|
||||
text: $_("organization-deleted"),
|
||||
duration: 500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
toast($_("organization-deleted"));
|
||||
location.replace("./");
|
||||
})
|
||||
.catch((err) => {
|
||||
@ -91,10 +87,7 @@
|
||||
}
|
||||
function submit() {
|
||||
if (data_loaded === true && save_enabled) {
|
||||
Toastify({
|
||||
text: $_("updating-organization"),
|
||||
duration: 2500,
|
||||
}).showToast();
|
||||
toast($_("updating-organization"));
|
||||
let postdata = Object.assign({}, editable);
|
||||
if (postdata.address_checked === false) {
|
||||
postdata.address = null;
|
||||
@ -108,11 +101,7 @@
|
||||
editable.registrationKey = resp.registrationKey;
|
||||
original_object = Object.assign({}, editable);
|
||||
original = JSON.stringify(original_object);
|
||||
Toastify({
|
||||
text: $_("updated-organization"),
|
||||
duration: 2500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
toast.success($_("updated-organization"));
|
||||
})
|
||||
.catch((err) => {});
|
||||
} else {
|
||||
@ -120,12 +109,7 @@
|
||||
}
|
||||
async function copy() {
|
||||
if (!editable.registrationKey) {
|
||||
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();
|
||||
toast.error($_("you-have-to-save-your-changes-to-generate-a-link"))
|
||||
return;
|
||||
}
|
||||
valueCopy = registrationLink;
|
||||
@ -137,19 +121,10 @@
|
||||
if (!successful) {
|
||||
throw new Error();
|
||||
}
|
||||
Toastify({
|
||||
text: $_("copied-link-to-clipboard"),
|
||||
duration: 500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
toast($_("copied-link-to-clipboard"));
|
||||
copied = true;
|
||||
} catch (err) {
|
||||
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();
|
||||
toast.error($_("error-whyile-copying-to-clipboard"))
|
||||
}
|
||||
// we can notifi by event or storage about copy status
|
||||
valueCopy = null;
|
||||
|
||||
@ -1,26 +1,31 @@
|
||||
<script>
|
||||
import { getLocaleFromNavigator, _ } from "svelte-i18n";
|
||||
import { _ } from "svelte-i18n";
|
||||
import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
|
||||
let modal_open = false;
|
||||
let delete_org = {};
|
||||
import { RunnerOrganizationService } from "@odit/lfk-client-js";
|
||||
import store from "../../store";
|
||||
import OrgsEmptyState from "./OrgsEmptyState.svelte";
|
||||
import Toastify from "toastify-js";
|
||||
import ConfirmOrgDeletion from "./ConfirmOrgDeletion.svelte";
|
||||
import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
|
||||
import GenerateRunnerCertificates from "../pdf_generation/GenerateRunnerCertificates.svelte";
|
||||
import toast from "svelte-french-toast";
|
||||
$: searchvalue = "";
|
||||
$: active_deletes = [];
|
||||
$: sponsoring_contracts_show = current_organizations.some((r) => r.is_selected === true);
|
||||
$: sponsoring_contracts_show = current_organizations.some(
|
||||
(r) => r.is_selected === true
|
||||
);
|
||||
$: cards_show = current_organizations.some((r) => r.is_selected === true);
|
||||
$: generate_orgs = current_organizations.filter((r) => r.is_selected === true);
|
||||
$: generate_orgs = current_organizations.filter(
|
||||
(r) => r.is_selected === true
|
||||
);
|
||||
$: certificates_show = current_organizations.some(
|
||||
(r) => r.is_selected === true
|
||||
);
|
||||
export let current_organizations = [];
|
||||
|
||||
const promise = RunnerOrganizationService.runnerOrganizationControllerGetAll().then(
|
||||
const promise =
|
||||
RunnerOrganizationService.runnerOrganizationControllerGetAll().then(
|
||||
(val) => {
|
||||
current_organizations = val;
|
||||
}
|
||||
@ -33,14 +38,16 @@
|
||||
active_deletes[event.detail.id] = false;
|
||||
}}
|
||||
bind:modal_open
|
||||
bind:delete_org />
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes('ORGANIZATION:GET')}
|
||||
bind:delete_org
|
||||
/>
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes("ORGANIZATION:GET")}
|
||||
{#await promise}
|
||||
<div
|
||||
class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
|
||||
role="alert">
|
||||
<p class="font-bold">{$_('organizations-are-being-loaded')}</p>
|
||||
<p class="text-sm">{$_('this-might-take-a-moment')}</p>
|
||||
role="alert"
|
||||
>
|
||||
<p class="font-bold">{$_("organizations-are-being-loaded")}</p>
|
||||
<p class="text-sm">{$_("this-might-take-a-moment")}</p>
|
||||
</div>
|
||||
{:then}
|
||||
{#if current_organizations.length === 0}
|
||||
@ -49,58 +56,64 @@
|
||||
<input
|
||||
type="search"
|
||||
bind:value={searchvalue}
|
||||
placeholder={$_('datatable.search')}
|
||||
aria-label={$_('datatable.search')}
|
||||
class="mb-4" />
|
||||
placeholder={$_("datatable.search")}
|
||||
aria-label={$_("datatable.search")}
|
||||
class="mb-4"
|
||||
/>
|
||||
<div class="h-12">
|
||||
<GenerateSponsoringContracts
|
||||
bind:sponsoring_contracts_show
|
||||
bind:generate_orgs />
|
||||
<GenerateRunnerCards
|
||||
bind:cards_show
|
||||
bind:generate_orgs />
|
||||
<GenerateRunnerCertificates
|
||||
bind:certificates_show
|
||||
bind:generate_orgs />
|
||||
bind:generate_orgs
|
||||
/>
|
||||
<GenerateRunnerCards bind:cards_show bind:generate_orgs />
|
||||
<GenerateRunnerCertificates bind:certificates_show bind:generate_orgs />
|
||||
</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">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th
|
||||
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
|
||||
on:click={() => {
|
||||
const newstate = !current_organizations.some((r) => r.is_selected === true);
|
||||
const newstate = !current_organizations.some(
|
||||
(r) => r.is_selected === true
|
||||
);
|
||||
current_organizations = current_organizations.map((r) => {
|
||||
r.is_selected = newstate;
|
||||
return r;
|
||||
});
|
||||
}}
|
||||
class="underline cursor-pointer select-none">{#if current_organizations.some((r) => r.is_selected === true)}
|
||||
{$_('deselect-all')}
|
||||
{:else}{$_('select-all')}{/if}
|
||||
class="underline cursor-pointer select-none"
|
||||
>{#if current_organizations.some((r) => r.is_selected === true)}
|
||||
{$_("deselect-all")}
|
||||
{:else}{$_("select-all")}{/if}
|
||||
</span>
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
{$_('name')}
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
||||
>
|
||||
{$_("name")}
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
{$_('address')}
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
||||
>
|
||||
{$_("address")}
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
{$_('contact')}
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
||||
>
|
||||
{$_("contact")}
|
||||
</th>
|
||||
<th scope="col" class="relative px-6 py-3">
|
||||
<span class="sr-only">{$_('action')}</span>
|
||||
<span class="sr-only">{$_("action")}</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
@ -115,7 +128,8 @@
|
||||
<input
|
||||
bind:checked={o.is_selected}
|
||||
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 class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="flex items-center">
|
||||
@ -148,34 +162,41 @@
|
||||
{#if o.contact}
|
||||
<a
|
||||
href="../contacts/{o.contact.id}"
|
||||
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{o.contact.firstname}
|
||||
{o.contact.middlename || ''}
|
||||
{o.contact.lastname}</a>
|
||||
{:else}{$_('no-contact-specified')}{/if}
|
||||
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
|
||||
>{o.contact.firstname}
|
||||
{o.contact.middlename || ""}
|
||||
{o.contact.lastname}</a
|
||||
>
|
||||
{:else}{$_("no-contact-specified")}{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
{#if active_deletes[o.id] === true}
|
||||
<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
|
||||
on:click={() => {
|
||||
active_deletes[o.id] = false;
|
||||
}}
|
||||
tabindex="0"
|
||||
class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">{$_('cancel-delete')}</button>
|
||||
class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer"
|
||||
>{$_("cancel-delete")}</button
|
||||
>
|
||||
<button
|
||||
on:click={() => {
|
||||
RunnerOrganizationService.runnerOrganizationControllerRemove(o.id, false)
|
||||
toast.loading($_("deleting-organization"));
|
||||
RunnerOrganizationService.runnerOrganizationControllerRemove(
|
||||
o.id,
|
||||
false
|
||||
)
|
||||
.then((resp) => {
|
||||
current_organizations = current_organizations.filter((obj) => obj.id !== o.id);
|
||||
Toastify({
|
||||
text: 'Organization deleted',
|
||||
duration: 500,
|
||||
backgroundColor:
|
||||
'linear-gradient(to right, #00b09b, #96c93d)',
|
||||
}).showToast();
|
||||
current_organizations =
|
||||
current_organizations.filter(
|
||||
(obj) => obj.id !== o.id
|
||||
);
|
||||
toast($_("organization-deleted"));
|
||||
})
|
||||
.catch((err) => {
|
||||
modal_open = true;
|
||||
@ -183,21 +204,28 @@
|
||||
});
|
||||
}}
|
||||
tabindex="0"
|
||||
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('confirm-delete')}</button>
|
||||
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
|
||||
>{$_("confirm-delete")}</button
|
||||
>
|
||||
</td>
|
||||
{:else}
|
||||
<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
|
||||
href="./{o.id}"
|
||||
class="text-indigo-600 hover:text-indigo-900">{$_('details')}</a>
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes('ORGANIZATION:DELETE')}
|
||||
class="text-indigo-600 hover:text-indigo-900"
|
||||
>{$_("details")}</a
|
||||
>
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes("ORGANIZATION:DELETE")}
|
||||
<button
|
||||
on:click={() => {
|
||||
active_deletes[o.id] = true;
|
||||
}}
|
||||
tabindex="0"
|
||||
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('delete')}</button>
|
||||
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
|
||||
>{$_("delete")}</button
|
||||
>
|
||||
{/if}
|
||||
</td>
|
||||
{/if}
|
||||
@ -211,7 +239,7 @@
|
||||
{:catch error}
|
||||
<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">
|
||||
<b class="capitalize">{$_('general_promise_error')}</b>
|
||||
<b class="capitalize">{$_("general_promise_error")}</b>
|
||||
{error}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@ -11,32 +11,34 @@
|
||||
|
||||
<section class="container p-5">
|
||||
<span class="mb-1 text-3xl font-extrabold leading-tight">
|
||||
{$_('organizations')}
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes('ORGANIZATION:CREATE')}
|
||||
{$_("organizations")}
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes("ORGANIZATION:CREATE")}
|
||||
<button
|
||||
on:click={() => {
|
||||
modal_open = true;
|
||||
}}
|
||||
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">
|
||||
{$_('create-organization')}
|
||||
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")}
|
||||
</button>
|
||||
{/if}
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:IMPORT')}
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:IMPORT")}
|
||||
<button
|
||||
on:click={() => {
|
||||
import_modal_open = true;
|
||||
}}
|
||||
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">
|
||||
{$_('import-runners')}
|
||||
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")}
|
||||
</button>
|
||||
{/if}
|
||||
</span>
|
||||
<OrgOverview bind:current_organizations />
|
||||
</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 />
|
||||
<ImportRunnerModal
|
||||
on:cancelDelete={(event) => {
|
||||
@ -47,5 +49,6 @@
|
||||
passed_orgs={current_organizations}
|
||||
opened_from="OrgOverview"
|
||||
current_runners={[]}
|
||||
bind:import_modal_open />
|
||||
bind:import_modal_open
|
||||
/>
|
||||
{/if}
|
||||
|
||||
@ -9,9 +9,9 @@
|
||||
<div class="text-center items-center justify-center">
|
||||
<p class="mb-16 text-lg text-gray-500">
|
||||
<img class="w-full h-44" src={org_empty} alt="" />
|
||||
<span
|
||||
class="font-bold">{$_('there-are-no-organizations-added-yet')}</span><br />
|
||||
<span>{$_('add-your-first-organization')}</span>
|
||||
<span class="font-bold">{$_("there-are-no-organizations-added-yet")}</span
|
||||
><br />
|
||||
<span>{$_("add-your-first-organization")}</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
RunnerOrganizationService,
|
||||
RunnerTeamService,
|
||||
} from "@odit/lfk-client-js";
|
||||
import Toastify from "toastify-js";
|
||||
|
||||
import { init } from "@paralleldrive/cuid2";
|
||||
const createId = init({ length: 10, fingerprint: "lfk-frontend" });
|
||||
|
||||
@ -39,10 +39,7 @@
|
||||
}
|
||||
|
||||
function generateCards(locale) {
|
||||
const toast = Toastify({
|
||||
text: $_("generating-pdf"),
|
||||
duration: -1,
|
||||
}).showToast();
|
||||
toast.loading($_("generating-pdf"));
|
||||
fetch(
|
||||
`${config.baseurl_documentserver}/cards?locale=${locale}&download=true&key=${config.documentserver_key}`,
|
||||
{
|
||||
@ -55,13 +52,8 @@
|
||||
)
|
||||
.then((response) => {
|
||||
if (response.status != "200") {
|
||||
toast.hideToast();
|
||||
Toastify({
|
||||
text: $_("pdf-generation-failed"),
|
||||
duration: 3500,
|
||||
backgroundColor:
|
||||
"linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
|
||||
}).showToast();
|
||||
toast.dismiss();
|
||||
toast.error($_("pdf-generation-failed"));
|
||||
} else {
|
||||
return response.blob();
|
||||
}
|
||||
@ -74,12 +66,8 @@
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
a.remove();
|
||||
toast.hideToast();
|
||||
Toastify({
|
||||
text: $_("pdf-successfully-generated"),
|
||||
duration: 3500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
toast.dismiss();
|
||||
toast($_("pdf-successfully-generated"));
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err);
|
||||
@ -87,10 +75,7 @@
|
||||
}
|
||||
|
||||
async function generateRunnersCards(locale) {
|
||||
const toast = Toastify({
|
||||
text: $_("generating-pdf"),
|
||||
duration: -1,
|
||||
}).showToast();
|
||||
toast.loading($_("generating-pdf"));
|
||||
const current_cards = await RunnerCardService.runnerCardControllerGetAll();
|
||||
let cards = [];
|
||||
for (let runner of generate_runners) {
|
||||
@ -114,13 +99,8 @@
|
||||
)
|
||||
.then((response) => {
|
||||
if (response.status != "200") {
|
||||
toast.hideToast();
|
||||
Toastify({
|
||||
text: $_("pdf-generation-failed"),
|
||||
duration: 3500,
|
||||
backgroundColor:
|
||||
"linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
|
||||
}).showToast();
|
||||
toast.dismiss();
|
||||
toast.error($_("pdf-generation-failed"));
|
||||
} else {
|
||||
return response.blob();
|
||||
}
|
||||
@ -139,21 +119,14 @@
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
a.remove();
|
||||
toast.hideToast();
|
||||
Toastify({
|
||||
text: $_("pdf-successfully-generated"),
|
||||
duration: 3500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
toast.dismiss();
|
||||
toast($_("pdf-successfully-generated"));
|
||||
})
|
||||
.catch((err) => {});
|
||||
}
|
||||
|
||||
async function generateTeamCards(locale) {
|
||||
const toast = Toastify({
|
||||
text: $_("generating-pdfs"),
|
||||
duration: -1,
|
||||
}).showToast();
|
||||
toast.loading($_("generating-pdfs"));
|
||||
let count = 0;
|
||||
const current_cards = await RunnerCardService.runnerCardControllerGetAll();
|
||||
for (const t of generate_teams) {
|
||||
@ -182,13 +155,8 @@
|
||||
)
|
||||
.then((response) => {
|
||||
if (response.status != "200") {
|
||||
toast.hideToast();
|
||||
Toastify({
|
||||
text: $_("pdf-generation-failed"),
|
||||
duration: 3500,
|
||||
backgroundColor:
|
||||
"linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
|
||||
}).showToast();
|
||||
toast.dismiss();
|
||||
toast.error($_("pdf-generation-failed"));
|
||||
} else {
|
||||
return response.blob();
|
||||
}
|
||||
@ -198,17 +166,15 @@
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
let a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = `${$_("runnercards")}_${t.name}-${locale}-${createId()}.pdf`;
|
||||
a.download = `${$_("runnercards")}_${
|
||||
t.name
|
||||
}-${locale}-${createId()}.pdf`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
a.remove();
|
||||
if (count === generate_teams.length) {
|
||||
toast.hideToast();
|
||||
Toastify({
|
||||
text: $_("pdfs-successfully-generated"),
|
||||
duration: 3500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
toast.dismiss();
|
||||
toast.success($_("pdfs-successfully-generated"));
|
||||
}
|
||||
})
|
||||
.catch((err) => {});
|
||||
@ -216,10 +182,7 @@
|
||||
}
|
||||
|
||||
async function generateOrgCards(locale) {
|
||||
const toast = Toastify({
|
||||
text: $_("generating-pdfs"),
|
||||
duration: -1,
|
||||
}).showToast();
|
||||
toast.loading($_("generating-pdfs"));
|
||||
const current_cards = await RunnerCardService.runnerCardControllerGetAll();
|
||||
let count = 0;
|
||||
let count_orgs = 0;
|
||||
@ -253,13 +216,8 @@
|
||||
)
|
||||
.then((response) => {
|
||||
if (response.status != "200") {
|
||||
toast.hideToast();
|
||||
Toastify({
|
||||
text: $_("pdf-generation-failed"),
|
||||
duration: 3500,
|
||||
backgroundColor:
|
||||
"linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
|
||||
}).showToast();
|
||||
toast.dismiss();
|
||||
toast.error($_("pdf-generation-failed"));
|
||||
} else {
|
||||
return response.blob();
|
||||
}
|
||||
@ -268,18 +226,15 @@
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
let a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = `${$_("runnercards")}_${o.name}_direct-${locale}-${createId()}.pdf`;
|
||||
a.download = `${$_("runnercards")}_${
|
||||
o.name
|
||||
}_direct-${locale}-${createId()}.pdf`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
a.remove();
|
||||
if (count === o.teams.length && count_orgs === generate_orgs.length) {
|
||||
toast.hideToast();
|
||||
console.log("here");
|
||||
Toastify({
|
||||
text: $_("pdfs-successfully-generated"),
|
||||
duration: 3500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
toast.dismiss();
|
||||
toast.success($_("pdfs-successfully-generated"));
|
||||
}
|
||||
})
|
||||
.catch((err) => {});
|
||||
@ -310,13 +265,8 @@
|
||||
)
|
||||
.then((response) => {
|
||||
if (response.status != "200") {
|
||||
toast.hideToast();
|
||||
Toastify({
|
||||
text: $_("pdf-generation-failed"),
|
||||
duration: 3500,
|
||||
backgroundColor:
|
||||
"linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
|
||||
}).showToast();
|
||||
toast.dismiss();
|
||||
toast.error($_("pdf-generation-failed"));
|
||||
} else {
|
||||
return response.blob();
|
||||
}
|
||||
@ -335,12 +285,8 @@
|
||||
count === o.teams.length &&
|
||||
count_orgs === generate_orgs.length
|
||||
) {
|
||||
toast.hideToast();
|
||||
Toastify({
|
||||
text: $_("pdfs-successfully-generated"),
|
||||
duration: 3500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
toast.dismiss();
|
||||
toast($_("pdfs-successfully-generated"));
|
||||
}
|
||||
})
|
||||
.catch((err) => {});
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
RunnerTeamService,
|
||||
RunnerOrganizationService,
|
||||
} from "@odit/lfk-client-js";
|
||||
import Toastify from "toastify-js";
|
||||
|
||||
import { init } from "@paralleldrive/cuid2";
|
||||
const createId = init({ length: 10, fingerprint: "lfk-frontend" });
|
||||
|
||||
@ -36,17 +36,13 @@
|
||||
}
|
||||
|
||||
async function generateRunnerCertificates(locale) {
|
||||
const toast = Toastify({
|
||||
text: $_("generating-pdf"),
|
||||
duration: -1,
|
||||
}).showToast();
|
||||
toast.loading($_("generating-pdf"));
|
||||
const current_donations =
|
||||
(await DonationService.donationControllerGetAll()) || [];
|
||||
let certificateRunners = [];
|
||||
for (let runner of generate_runners) {
|
||||
runner.distanceDonations =
|
||||
current_donations.filter((d) => d.runner?.id == runner.id) || [];
|
||||
console.log(runner.distanceDonations);
|
||||
certificateRunners.push(runner);
|
||||
}
|
||||
fetch(
|
||||
@ -61,13 +57,8 @@
|
||||
)
|
||||
.then((response) => {
|
||||
if (response.status != "200") {
|
||||
toast.hideToast();
|
||||
Toastify({
|
||||
text: $_("pdf-generation-failed"),
|
||||
duration: 3500,
|
||||
backgroundColor:
|
||||
"linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
|
||||
}).showToast();
|
||||
toast.dismiss();
|
||||
toast.error($_("pdf-generation-failed"));
|
||||
} else {
|
||||
return response.blob();
|
||||
}
|
||||
@ -86,21 +77,14 @@
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
a.remove();
|
||||
toast.hideToast();
|
||||
Toastify({
|
||||
text: $_("pdf-successfully-generated"),
|
||||
duration: 3500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
toast.dismiss();
|
||||
toast($_("pdf-successfully-generated"));
|
||||
})
|
||||
.catch((err) => {});
|
||||
}
|
||||
|
||||
async function generateTeamCertificates(locale) {
|
||||
const toast = Toastify({
|
||||
text: $_("generating-pdfs"),
|
||||
duration: -1,
|
||||
}).showToast();
|
||||
toast.loading($_("generating-pdfs"));
|
||||
let count = 0;
|
||||
const current_donations =
|
||||
(await DonationService.donationControllerGetAll()) || [];
|
||||
@ -126,13 +110,8 @@
|
||||
)
|
||||
.then((response) => {
|
||||
if (response.status != "200") {
|
||||
toast.hideToast();
|
||||
Toastify({
|
||||
text: $_("pdf-generation-failed"),
|
||||
duration: 3500,
|
||||
backgroundColor:
|
||||
"linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
|
||||
}).showToast();
|
||||
toast.dismiss();
|
||||
toast.error($_("pdf-generation-failed"));
|
||||
} else {
|
||||
return response.blob();
|
||||
}
|
||||
@ -142,17 +121,15 @@
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
let a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = `${$_("certificates")}_${t.name}-${locale}-${createId()}.pdf`;
|
||||
a.download = `${$_("certificates")}_${
|
||||
t.name
|
||||
}-${locale}-${createId()}.pdf`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
a.remove();
|
||||
if (count === generate_teams.length) {
|
||||
toast.hideToast();
|
||||
Toastify({
|
||||
text: $_("pdfs-successfully-generated"),
|
||||
duration: 3500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
toast.dismiss();
|
||||
toast.success($_("pdfs-successfully-generated"));
|
||||
}
|
||||
})
|
||||
.catch((err) => {});
|
||||
@ -160,10 +137,7 @@
|
||||
}
|
||||
|
||||
async function generateOrgCertificates(locale) {
|
||||
const toast = Toastify({
|
||||
text: $_("generating-pdfs"),
|
||||
duration: -1,
|
||||
}).showToast();
|
||||
toast.loading($_("generating-pdfs"));
|
||||
const current_donations =
|
||||
(await DonationService.donationControllerGetAll()) || [];
|
||||
let count = 0;
|
||||
@ -194,13 +168,8 @@
|
||||
)
|
||||
.then((response) => {
|
||||
if (response.status != "200") {
|
||||
toast.hideToast();
|
||||
Toastify({
|
||||
text: $_("pdf-generation-failed"),
|
||||
duration: 3500,
|
||||
backgroundColor:
|
||||
"linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
|
||||
}).showToast();
|
||||
toast.dismiss();
|
||||
toast.error($_("pdf-generation-failed"));
|
||||
} else {
|
||||
return response.blob();
|
||||
}
|
||||
@ -209,18 +178,15 @@
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
let a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = `${$_("certificates")}_${o.name}-${locale}-${createId()}.pdf`;
|
||||
a.download = `${$_("certificates")}_${
|
||||
o.name
|
||||
}-${locale}-${createId()}.pdf`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
a.remove();
|
||||
if (count === o.teams.length && count_orgs === generate_orgs.length) {
|
||||
toast.hideToast();
|
||||
console.log("here");
|
||||
Toastify({
|
||||
text: $_("pdfs-successfully-generated"),
|
||||
duration: 3500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
toast.dismiss();
|
||||
toast.success($_("pdfs-successfully-generated"));
|
||||
}
|
||||
})
|
||||
.catch((err) => {});
|
||||
@ -247,13 +213,8 @@
|
||||
)
|
||||
.then((response) => {
|
||||
if (response.status != "200") {
|
||||
toast.hideToast();
|
||||
Toastify({
|
||||
text: $_("pdf-generation-failed"),
|
||||
duration: 3500,
|
||||
backgroundColor:
|
||||
"linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
|
||||
}).showToast();
|
||||
toast.dismiss();
|
||||
toast.error($_("pdf-generation-failed"));
|
||||
} else {
|
||||
return response.blob();
|
||||
}
|
||||
@ -272,12 +233,8 @@
|
||||
count === o.teams.length &&
|
||||
count_orgs === generate_orgs.length
|
||||
) {
|
||||
toast.hideToast();
|
||||
Toastify({
|
||||
text: $_("pdfs-successfully-generated"),
|
||||
duration: 3500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
toast.dismiss();
|
||||
toast($_("pdfs-successfully-generated"));
|
||||
}
|
||||
})
|
||||
.catch((err) => {});
|
||||
|
||||
@ -4,8 +4,9 @@
|
||||
RunnerOrganizationService,
|
||||
RunnerTeamService,
|
||||
} from "@odit/lfk-client-js";
|
||||
import Toastify from "toastify-js";
|
||||
|
||||
import { init } from "@paralleldrive/cuid2";
|
||||
import toast from "svelte-french-toast";
|
||||
const createId = init({ length: 10, fingerprint: "lfk-frontend" });
|
||||
|
||||
export let sponsoring_contracts_show = false;
|
||||
@ -35,10 +36,7 @@
|
||||
}
|
||||
|
||||
async function generateTeamContracts(locale) {
|
||||
const toast = Toastify({
|
||||
text: $_("generating-pdfs"),
|
||||
duration: -1,
|
||||
}).showToast();
|
||||
toast.loading($_("generating-pdfs"));
|
||||
let count = 0;
|
||||
for (const t of generate_teams) {
|
||||
count++;
|
||||
@ -57,13 +55,8 @@
|
||||
)
|
||||
.then((response) => {
|
||||
if (response.status != "200") {
|
||||
toast.hideToast();
|
||||
Toastify({
|
||||
text: $_("pdf-generation-failed"),
|
||||
duration: 3500,
|
||||
backgroundColor:
|
||||
"linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
|
||||
}).showToast();
|
||||
toast.dismiss();
|
||||
toast.error($_("pdf-generation-failed"));
|
||||
} else {
|
||||
return response.blob();
|
||||
}
|
||||
@ -72,17 +65,15 @@
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
let a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = `${$_("sponsorings")}_${t.name}-${locale}-${createId()}.pdf`;
|
||||
a.download = `${$_("sponsorings")}_${
|
||||
t.name
|
||||
}-${locale}-${createId()}.pdf`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
a.remove();
|
||||
if (count === generate_teams.length) {
|
||||
toast.hideToast();
|
||||
Toastify({
|
||||
text: $_("pdfs-successfully-generated"),
|
||||
duration: 3500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
toast.dismiss();
|
||||
toast.success($_("pdfs-successfully-generated"));
|
||||
}
|
||||
})
|
||||
.catch((err) => {});
|
||||
@ -90,10 +81,7 @@
|
||||
}
|
||||
|
||||
async function generateOrgContracts(locale) {
|
||||
const toast = Toastify({
|
||||
text: $_("generating-pdf"),
|
||||
duration: -1,
|
||||
}).showToast();
|
||||
toast.loading($_("generating-pdf"));
|
||||
let count_orgs = 0;
|
||||
for (const o of generate_orgs) {
|
||||
count_orgs++;
|
||||
@ -115,13 +103,8 @@
|
||||
)
|
||||
.then((response) => {
|
||||
if (response.status != "200") {
|
||||
toast.hideToast();
|
||||
Toastify({
|
||||
text: $_("pdf-generation-failed"),
|
||||
duration: 3500,
|
||||
backgroundColor:
|
||||
"linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
|
||||
}).showToast();
|
||||
toast.dismiss();
|
||||
toast.error($_("pdf-generation-failed"));
|
||||
} else {
|
||||
return response.blob();
|
||||
}
|
||||
@ -130,18 +113,15 @@
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
let a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = `${$_("sponsorings")}_${o.name}_direct-${locale}-${createId()}.pdf`;
|
||||
a.download = `${$_("sponsorings")}_${
|
||||
o.name
|
||||
}_direct-${locale}-${createId()}.pdf`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
a.remove();
|
||||
if (count === o.teams.length && count_orgs === generate_orgs.length) {
|
||||
toast.hideToast();
|
||||
console.log("here");
|
||||
Toastify({
|
||||
text: $_("pdfs-successfully-generated"),
|
||||
duration: 3500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
toast.dismiss();
|
||||
toast.success($_("pdfs-successfully-generated"));
|
||||
}
|
||||
})
|
||||
.catch((err) => {});
|
||||
@ -162,13 +142,8 @@
|
||||
)
|
||||
.then((response) => {
|
||||
if (response.status != "200") {
|
||||
toast.hideToast();
|
||||
Toastify({
|
||||
text: $_("pdf-generation-failed"),
|
||||
duration: 3500,
|
||||
backgroundColor:
|
||||
"linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
|
||||
}).showToast();
|
||||
toast.dismiss();
|
||||
toast.error($_("pdf-generation-failed"));
|
||||
} else {
|
||||
return response.blob();
|
||||
}
|
||||
@ -187,12 +162,8 @@
|
||||
count === o.teams.length &&
|
||||
count_orgs === generate_orgs.length
|
||||
) {
|
||||
toast.hideToast();
|
||||
Toastify({
|
||||
text: $_("pdfs-successfully-generated"),
|
||||
duration: 3500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
toast.dismiss();
|
||||
toast($_("pdfs-successfully-generated"));
|
||||
}
|
||||
})
|
||||
.catch((err) => {});
|
||||
@ -201,10 +172,7 @@
|
||||
}
|
||||
|
||||
function generateRunnerContracts(locale) {
|
||||
const toast = Toastify({
|
||||
text: $_("generating-pdf"),
|
||||
duration: -1,
|
||||
}).showToast();
|
||||
toast.loading($_("generating-pdf"));
|
||||
fetch(
|
||||
`${config.baseurl_documentserver}/contracts?locale=${locale}&download=true&key=${config.documentserver_key}`,
|
||||
{
|
||||
@ -217,13 +185,8 @@
|
||||
)
|
||||
.then((response) => {
|
||||
if (response.status != "200") {
|
||||
toast.hideToast();
|
||||
Toastify({
|
||||
text: $_("pdf-generation-failed"),
|
||||
duration: 3500,
|
||||
backgroundColor:
|
||||
"linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
|
||||
}).showToast();
|
||||
toast.dismiss();
|
||||
toast.error($_("pdf-generation-failed"));
|
||||
} else {
|
||||
return response.blob();
|
||||
}
|
||||
@ -241,12 +204,8 @@
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
a.remove();
|
||||
toast.hideToast();
|
||||
Toastify({
|
||||
text: $_("pdf-successfully-generated"),
|
||||
duration: 3500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
toast.dismiss();
|
||||
toast($_("pdf-successfully-generated"));
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err);
|
||||
|
||||
@ -3,78 +3,90 @@
|
||||
<img
|
||||
alt=""
|
||||
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 class="relative rounded-full w-8 h-8">
|
||||
<img
|
||||
alt=""
|
||||
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 class="relative rounded-full w-12 h-12">
|
||||
<img
|
||||
alt=""
|
||||
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 class="relative rounded-full w-16 h-16">
|
||||
<img
|
||||
alt=""
|
||||
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 class="relative rounded-full w-20 h-20">
|
||||
<img
|
||||
alt=""
|
||||
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 class="relative rounded-full w-24 h-24">
|
||||
<img
|
||||
alt=""
|
||||
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>
|
||||
<h3 class="text-lg">Status Avatars</h3>
|
||||
<div class="relative rounded-full w-4 h-4">
|
||||
<img
|
||||
alt=""
|
||||
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>
|
||||
<div class="relative rounded-full w-8 h-8">
|
||||
<img
|
||||
alt=""
|
||||
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>
|
||||
<div class="relative rounded-full w-12 h-12">
|
||||
<img
|
||||
alt=""
|
||||
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>
|
||||
<div class="relative rounded-full w-16 h-16">
|
||||
<img
|
||||
alt=""
|
||||
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>
|
||||
<div class="relative rounded-full w-20 h-20">
|
||||
<img
|
||||
alt=""
|
||||
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>
|
||||
<div class="relative rounded-full w-24 h-24">
|
||||
<img
|
||||
alt=""
|
||||
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>
|
||||
|
||||
@ -1,24 +1,36 @@
|
||||
<h3 class="text-lg">badges</h3>
|
||||
<span
|
||||
class="text-sm font-medium bg-green-100 py-1 px-2 rounded text-green-500 align-middle">Paid</span>
|
||||
class="text-sm font-medium bg-green-100 py-1 px-2 rounded text-green-500 align-middle"
|
||||
>Paid</span
|
||||
>
|
||||
<span
|
||||
class="text-sm font-medium bg-red-100 py-1 px-2 rounded text-red-500 align-middle">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-gray-600">Secondary</span>
|
||||
<span
|
||||
class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-green-600">Success</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-black bg-yellow-400">Warning</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>
|
||||
class="text-sm font-medium bg-red-100 py-1 px-2 rounded text-red-500 align-middle"
|
||||
>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-gray-600"
|
||||
>Secondary</span
|
||||
>
|
||||
<span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-green-600"
|
||||
>Success</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-black bg-yellow-400"
|
||||
>Warning</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>
|
||||
<span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-blue-600">
|
||||
Primary
|
||||
|
||||
@ -13,9 +13,10 @@
|
||||
class="h-3 w-3 stroke-current"
|
||||
height="1em"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"><path
|
||||
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>
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
><path 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
|
||||
>
|
||||
</li>
|
||||
<li class="flex items-center">
|
||||
<a class="mr-2" href="/">Home</a><svg
|
||||
@ -28,12 +29,10 @@
|
||||
class="h-3 w-3 mr-2 stroke-current"
|
||||
height="1em"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"><line
|
||||
x1="5"
|
||||
y1="12"
|
||||
x2="19"
|
||||
y2="12" />
|
||||
<polyline points="12 5 19 12 12 19" /></svg>
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
><line x1="5" y1="12" x2="19" y2="12" />
|
||||
<polyline points="12 5 19 12 12 19" /></svg
|
||||
>
|
||||
</li>
|
||||
<li class="flex items-center">
|
||||
<a class="mr-2" href="/">Second level</a><svg
|
||||
@ -46,12 +45,10 @@
|
||||
class="h-3 w-3 mr-2 stroke-current"
|
||||
height="1em"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"><line
|
||||
x1="5"
|
||||
y1="12"
|
||||
x2="19"
|
||||
y2="12" />
|
||||
<polyline points="12 5 19 12 12 19" /></svg>
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
><line x1="5" y1="12" x2="19" y2="12" />
|
||||
<polyline points="12 5 19 12 12 19" /></svg
|
||||
>
|
||||
</li>
|
||||
<li class="flex items-center">
|
||||
<a class="mr-2" href="/">Third level</a>
|
||||
|
||||
@ -29,8 +29,7 @@
|
||||
<div class="mb-8">
|
||||
<Table />
|
||||
</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-col">
|
||||
<div class="text-sm font-light text-grey-500">Regular</div>
|
||||
@ -39,32 +38,38 @@
|
||||
</div>
|
||||
<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="form-element ">
|
||||
<div class="form-label">Label</div><input
|
||||
<div class="form-element">
|
||||
<div class="form-label">Label</div>
|
||||
<input
|
||||
name="name"
|
||||
type="text"
|
||||
class="form-input"
|
||||
placeholder="Enter something..." />
|
||||
placeholder="Enter something..."
|
||||
/>
|
||||
<div class="form-hint">This is a hint</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full lg:w-1/4">
|
||||
<div class="form-element ">
|
||||
<div class="form-label">First name</div><input
|
||||
<div class="form-element">
|
||||
<div class="form-label">First name</div>
|
||||
<input
|
||||
name="name"
|
||||
type="text"
|
||||
class="form-input form-input-invalid"
|
||||
placeholder="john@example.com" />
|
||||
placeholder="john@example.com"
|
||||
/>
|
||||
<div class="form-error">First name is required</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full lg:w-1/4">
|
||||
<div class="form-element ">
|
||||
<div class="form-label">First name</div><input
|
||||
<div class="form-element">
|
||||
<div class="form-label">First name</div>
|
||||
<input
|
||||
name="name"
|
||||
type="text"
|
||||
class="form-input form-input-valid"
|
||||
placeholder="john@example.com" />
|
||||
placeholder="john@example.com"
|
||||
/>
|
||||
<div class="form-success">First name is valid</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -4,31 +4,55 @@
|
||||
<div class="text-sm font-light text-grey-500">Conversions</div>
|
||||
<div class="text-sm font-bold"><span>This year</span></div>
|
||||
</div>
|
||||
<div class="relative"><button
|
||||
class="btn btn-default btn-circle btn-icon bg-transparent hover:bg-transparent active:bg-transparent relative"><svg
|
||||
stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round"
|
||||
stroke-linejoin="round" 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>
|
||||
<circle cx="12" cy="5" r="1"></circle>
|
||||
<circle cx="12" cy="19" r="1"></circle>
|
||||
</svg></button>
|
||||
<div class="dropdown absolute top-0 right-0 mt-8 ">
|
||||
<div class="relative">
|
||||
<button
|
||||
class="btn btn-default btn-circle btn-icon bg-transparent hover:bg-transparent active:bg-transparent relative"
|
||||
><svg
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
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="flex flex-col w-full">
|
||||
<ul class="list-none">
|
||||
<li><a
|
||||
<li>
|
||||
<a
|
||||
class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
|
||||
href="/">Today</a></li>
|
||||
<li><a
|
||||
href="/">Today</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
|
||||
href="/">This week</a></li>
|
||||
<li><a
|
||||
href="/">This week</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
|
||||
href="/">This month</a></li>
|
||||
<li><a
|
||||
href="/">This month</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100"
|
||||
href="/">This year</a></li>
|
||||
href="/">This year</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@ -38,167 +62,418 @@
|
||||
<div class="flex flex-row w-full">
|
||||
<div style="width:100%;height:240px">
|
||||
<div class="recharts-responsive-container" style="width:100%;height:100%">
|
||||
<div class="recharts-wrapper"
|
||||
style="position: relative; cursor: default; width: 704px; height: 240px;"><svg
|
||||
class="recharts-surface" width="704" height="240" viewBox="0 0 704 240" version="1.1">
|
||||
<div
|
||||
class="recharts-wrapper"
|
||||
style="position: relative; cursor: default; width: 704px; height: 240px;"
|
||||
>
|
||||
<svg
|
||||
class="recharts-surface"
|
||||
width="704"
|
||||
height="240"
|
||||
viewBox="0 0 704 240"
|
||||
version="1.1"
|
||||
>
|
||||
<defs>
|
||||
<clipPath id="recharts3-clip">
|
||||
<rect x="40" y="10" height="190" width="654"></rect>
|
||||
<rect x="40" y="10" height="190" width="654" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
<g class="recharts-layer recharts-cartesian-axis recharts-xAxis xAxis">
|
||||
<g
|
||||
class="recharts-layer recharts-cartesian-axis recharts-xAxis xAxis"
|
||||
>
|
||||
<g class="recharts-cartesian-axis-ticks">
|
||||
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30" x="67.25"
|
||||
y="208" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value"
|
||||
text-anchor="middle">
|
||||
<g class="recharts-layer recharts-cartesian-axis-tick"
|
||||
><text
|
||||
width="654"
|
||||
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>
|
||||
</text></g>
|
||||
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
|
||||
x="121.75" y="208" stroke="none" fill="#666"
|
||||
class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
|
||||
</text></g
|
||||
>
|
||||
<g class="recharts-layer recharts-cartesian-axis-tick"
|
||||
><text
|
||||
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>
|
||||
</text></g>
|
||||
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
|
||||
x="176.25" y="208" stroke="none" fill="#666"
|
||||
class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
|
||||
</text></g
|
||||
>
|
||||
<g class="recharts-layer recharts-cartesian-axis-tick"
|
||||
><text
|
||||
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>
|
||||
</text></g>
|
||||
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
|
||||
x="230.75" y="208" stroke="none" fill="#666"
|
||||
class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
|
||||
</text></g
|
||||
>
|
||||
<g class="recharts-layer recharts-cartesian-axis-tick"
|
||||
><text
|
||||
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>
|
||||
</text></g>
|
||||
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
|
||||
x="285.25" y="208" stroke="none" fill="#666"
|
||||
class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
|
||||
</text></g
|
||||
>
|
||||
<g class="recharts-layer recharts-cartesian-axis-tick"
|
||||
><text
|
||||
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>
|
||||
</text></g>
|
||||
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
|
||||
x="339.75" y="208" stroke="none" fill="#666"
|
||||
class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
|
||||
</text></g
|
||||
>
|
||||
<g class="recharts-layer recharts-cartesian-axis-tick"
|
||||
><text
|
||||
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>
|
||||
</text></g>
|
||||
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
|
||||
x="394.25" y="208" stroke="none" fill="#666"
|
||||
class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
|
||||
</text></g
|
||||
>
|
||||
<g class="recharts-layer recharts-cartesian-axis-tick"
|
||||
><text
|
||||
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>
|
||||
</text></g>
|
||||
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
|
||||
x="448.75" y="208" stroke="none" fill="#666"
|
||||
class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
|
||||
</text></g
|
||||
>
|
||||
<g class="recharts-layer recharts-cartesian-axis-tick"
|
||||
><text
|
||||
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>
|
||||
</text></g>
|
||||
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
|
||||
x="503.25" y="208" stroke="none" fill="#666"
|
||||
class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
|
||||
</text></g
|
||||
>
|
||||
<g class="recharts-layer recharts-cartesian-axis-tick"
|
||||
><text
|
||||
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>
|
||||
</text></g>
|
||||
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
|
||||
x="557.75" y="208" stroke="none" fill="#666"
|
||||
class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
|
||||
</text></g
|
||||
>
|
||||
<g class="recharts-layer recharts-cartesian-axis-tick"
|
||||
><text
|
||||
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>
|
||||
</text></g>
|
||||
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
|
||||
x="612.25" y="208" stroke="none" fill="#666"
|
||||
class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
|
||||
</text></g
|
||||
>
|
||||
<g class="recharts-layer recharts-cartesian-axis-tick"
|
||||
><text
|
||||
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>
|
||||
</text></g>
|
||||
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
|
||||
x="666.75" y="208" stroke="none" fill="#666"
|
||||
class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
|
||||
</text></g
|
||||
>
|
||||
<g class="recharts-layer recharts-cartesian-axis-tick"
|
||||
><text
|
||||
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>
|
||||
</text></g>
|
||||
</text></g
|
||||
>
|
||||
</g>
|
||||
</g>
|
||||
<g class="recharts-layer recharts-cartesian-axis recharts-yAxis yAxis">
|
||||
<g
|
||||
class="recharts-layer recharts-cartesian-axis recharts-yAxis yAxis"
|
||||
>
|
||||
<g class="recharts-cartesian-axis-ticks">
|
||||
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="30" height="190" x="32"
|
||||
y="200" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value"
|
||||
text-anchor="end">
|
||||
<g class="recharts-layer recharts-cartesian-axis-tick"
|
||||
><text
|
||||
width="30"
|
||||
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>
|
||||
</text></g>
|
||||
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="30" height="190" x="32"
|
||||
y="152.5" stroke="none" fill="#666"
|
||||
class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end">
|
||||
</text></g
|
||||
>
|
||||
<g class="recharts-layer recharts-cartesian-axis-tick"
|
||||
><text
|
||||
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>
|
||||
</text></g>
|
||||
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="30" height="190" x="32"
|
||||
y="105" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value"
|
||||
text-anchor="end">
|
||||
</text></g
|
||||
>
|
||||
<g class="recharts-layer recharts-cartesian-axis-tick"
|
||||
><text
|
||||
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>
|
||||
</text></g>
|
||||
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="30" height="190" x="32"
|
||||
y="57.5" stroke="none" fill="#666"
|
||||
class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end">
|
||||
</text></g
|
||||
>
|
||||
<g class="recharts-layer recharts-cartesian-axis-tick"
|
||||
><text
|
||||
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>
|
||||
</text></g>
|
||||
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="30" height="190" x="32"
|
||||
y="10" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value"
|
||||
text-anchor="end">
|
||||
</text></g
|
||||
>
|
||||
<g class="recharts-layer recharts-cartesian-axis-tick"
|
||||
><text
|
||||
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>
|
||||
</text></g>
|
||||
</text></g
|
||||
>
|
||||
</g>
|
||||
</g>
|
||||
<g class="recharts-layer recharts-bar">
|
||||
<g class="recharts-layer recharts-bar-rectangles">
|
||||
<g class="recharts-layer">
|
||||
<g class="recharts-layer recharts-bar-rectangle">
|
||||
<path fill="#90caf9" width="10" 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"></path>
|
||||
<path
|
||||
fill="#90caf9"
|
||||
width="10"
|
||||
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 class="recharts-layer recharts-bar-rectangle">
|
||||
<path fill="#90caf9" 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"></path>
|
||||
<path
|
||||
fill="#90caf9"
|
||||
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 class="recharts-layer recharts-bar-rectangle">
|
||||
<path fill="#90caf9" width="10" 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"></path>
|
||||
<path
|
||||
fill="#90caf9"
|
||||
width="10"
|
||||
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 class="recharts-layer recharts-bar-rectangle">
|
||||
<path fill="#90caf9" width="10" 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"></path>
|
||||
<path
|
||||
fill="#90caf9"
|
||||
width="10"
|
||||
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 class="recharts-layer recharts-bar-rectangle">
|
||||
<path fill="#90caf9" width="10" height="114" x="273" y="86" radius="0"
|
||||
class="recharts-rectangle" d="M 273,86 h 10 v 114 h -10 Z"></path>
|
||||
<path
|
||||
fill="#90caf9"
|
||||
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 class="recharts-layer recharts-bar-rectangle">
|
||||
<path fill="#90caf9" width="10" 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"></path>
|
||||
<path
|
||||
fill="#90caf9"
|
||||
width="10"
|
||||
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 class="recharts-layer recharts-bar-rectangle">
|
||||
<path fill="#90caf9" width="10" 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"></path>
|
||||
<path
|
||||
fill="#90caf9"
|
||||
width="10"
|
||||
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 class="recharts-layer recharts-bar-rectangle">
|
||||
<path fill="#90caf9" width="10" 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"></path>
|
||||
<path
|
||||
fill="#90caf9"
|
||||
width="10"
|
||||
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 class="recharts-layer recharts-bar-rectangle">
|
||||
<path fill="#90caf9" width="10" 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"></path>
|
||||
<path
|
||||
fill="#90caf9"
|
||||
width="10"
|
||||
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 class="recharts-layer recharts-bar-rectangle">
|
||||
<path fill="#90caf9" width="10" 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"></path>
|
||||
<path
|
||||
fill="#90caf9"
|
||||
width="10"
|
||||
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 class="recharts-layer recharts-bar-rectangle">
|
||||
<path fill="#90caf9" width="10" 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"></path>
|
||||
<path
|
||||
fill="#90caf9"
|
||||
width="10"
|
||||
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 class="recharts-layer recharts-bar-rectangle">
|
||||
<path fill="#90caf9" width="10" 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"></path>
|
||||
<path
|
||||
fill="#90caf9"
|
||||
width="10"
|
||||
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>
|
||||
@ -207,74 +482,161 @@
|
||||
<g class="recharts-layer recharts-bar-rectangles">
|
||||
<g class="recharts-layer">
|
||||
<g class="recharts-layer recharts-bar-rectangle">
|
||||
<path fill="#1e88e5" width="10" 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"></path>
|
||||
<path
|
||||
fill="#1e88e5"
|
||||
width="10"
|
||||
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 class="recharts-layer recharts-bar-rectangle">
|
||||
<path fill="#1e88e5" width="10" 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"></path>
|
||||
<path
|
||||
fill="#1e88e5"
|
||||
width="10"
|
||||
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 class="recharts-layer recharts-bar-rectangle">
|
||||
<path fill="#1e88e5" width="10" 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"></path>
|
||||
<path
|
||||
fill="#1e88e5"
|
||||
width="10"
|
||||
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 class="recharts-layer recharts-bar-rectangle">
|
||||
<path fill="#1e88e5" width="10" 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"></path>
|
||||
<path
|
||||
fill="#1e88e5"
|
||||
width="10"
|
||||
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 class="recharts-layer recharts-bar-rectangle">
|
||||
<path fill="#1e88e5" width="10" 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"></path>
|
||||
<path
|
||||
fill="#1e88e5"
|
||||
width="10"
|
||||
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 class="recharts-layer recharts-bar-rectangle">
|
||||
<path fill="#1e88e5" width="10" 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"></path>
|
||||
<path
|
||||
fill="#1e88e5"
|
||||
width="10"
|
||||
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 class="recharts-layer recharts-bar-rectangle">
|
||||
<path fill="#1e88e5" width="10" 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"></path>
|
||||
<path
|
||||
fill="#1e88e5"
|
||||
width="10"
|
||||
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 class="recharts-layer recharts-bar-rectangle">
|
||||
<path fill="#1e88e5" width="10" 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"></path>
|
||||
<path
|
||||
fill="#1e88e5"
|
||||
width="10"
|
||||
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 class="recharts-layer recharts-bar-rectangle">
|
||||
<path fill="#1e88e5" width="10" 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"></path>
|
||||
<path
|
||||
fill="#1e88e5"
|
||||
width="10"
|
||||
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 class="recharts-layer recharts-bar-rectangle">
|
||||
<path fill="#1e88e5" width="10" 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"></path>
|
||||
<path
|
||||
fill="#1e88e5"
|
||||
width="10"
|
||||
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 class="recharts-layer recharts-bar-rectangle">
|
||||
<path fill="#1e88e5" width="10" 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"></path>
|
||||
<path
|
||||
fill="#1e88e5"
|
||||
width="10"
|
||||
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 class="recharts-layer recharts-bar-rectangle">
|
||||
<path fill="#1e88e5" width="10" 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"></path>
|
||||
<path
|
||||
fill="#1e88e5"
|
||||
width="10"
|
||||
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>
|
||||
</svg>
|
||||
<div class="recharts-tooltip-wrapper"
|
||||
style="pointer-events: none; visibility: hidden; position: absolute; top: 0px; transform: translate(538.875px, 126px);">
|
||||
<div
|
||||
class="recharts-tooltip-wrapper"
|
||||
style="pointer-events: none; visibility: hidden; position: absolute; top: 0px; transform: translate(538.875px, 126px);"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div style="position:absolute;width:0;height:0;visibility:hidden;display:none"></div>
|
||||
<div
|
||||
style="position:absolute;width:0;height:0;visibility:hidden;display:none"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,15 +1,18 @@
|
||||
<!-- This example requires Tailwind CSS v2.0+ -->
|
||||
<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">
|
||||
<a
|
||||
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
|
||||
</a>
|
||||
<a
|
||||
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
|
||||
</a>
|
||||
</div>
|
||||
@ -28,10 +31,12 @@
|
||||
<div>
|
||||
<nav
|
||||
class="relative z-0 inline-flex shadow-sm -space-x-px"
|
||||
aria-label="Pagination">
|
||||
aria-label="Pagination"
|
||||
>
|
||||
<a
|
||||
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>
|
||||
<!-- Heroicon name: chevron-left -->
|
||||
<svg
|
||||
@ -39,50 +44,60 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
aria-hidden="true">
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
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"
|
||||
clip-rule="evenodd" />
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
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
|
||||
</a>
|
||||
<a
|
||||
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
|
||||
</a>
|
||||
<a
|
||||
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
|
||||
</a>
|
||||
<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>
|
||||
<a
|
||||
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
|
||||
</a>
|
||||
<a
|
||||
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
|
||||
</a>
|
||||
<a
|
||||
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
|
||||
</a>
|
||||
<a
|
||||
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>
|
||||
<!-- Heroicon name: chevron-right -->
|
||||
<svg
|
||||
@ -90,11 +105,13 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
aria-hidden="true">
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
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"
|
||||
clip-rule="evenodd" />
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
@ -7,14 +7,14 @@
|
||||
</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-shrink-0 w-24">
|
||||
<img
|
||||
src="/images/faces/m1.png"
|
||||
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 class="py-2 px-2">
|
||||
<p class="text-base font-bold whitespace-no-wrap">Lucas Smith</p>
|
||||
@ -22,7 +22,8 @@
|
||||
Vital Database Dude
|
||||
</p>
|
||||
<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
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
@ -33,8 +34,11 @@
|
||||
class="stroke-current text-xl text-twitter"
|
||||
height="1em"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"><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
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
><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
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-width="2"
|
||||
@ -44,8 +48,11 @@
|
||||
class="stroke-current text-xl text-facebook"
|
||||
height="1em"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"><path
|
||||
d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" /></svg><svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
><path
|
||||
d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"
|
||||
/></svg
|
||||
><svg
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-width="2"
|
||||
@ -55,21 +62,21 @@
|
||||
class="stroke-current text-xl text-instagram"
|
||||
height="1em"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"><rect
|
||||
x="2"
|
||||
y="2"
|
||||
width="20"
|
||||
height="20"
|
||||
rx="5"
|
||||
ry="5" />
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
><rect 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" />
|
||||
<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 class="ml-auto flex-shrink-0 space-x-2 hidden lg:flex">
|
||||
<button
|
||||
class="btn btn-default btn-rounded bg-blue-500 hover:bg-blue-600 text-white">Subscribe</button><button
|
||||
class="btn btn-default btn-rounded bg-blue-500 hover:bg-blue-600 text-white">Follow</button>
|
||||
class="btn btn-default btn-rounded bg-blue-500 hover:bg-blue-600 text-white"
|
||||
>Subscribe</button
|
||||
><button
|
||||
class="btn btn-default btn-rounded bg-blue-500 hover:bg-blue-600 text-white"
|
||||
>Follow</button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap">
|
||||
@ -77,14 +84,19 @@
|
||||
<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-none">
|
||||
<button class="tab tab-underline tab-active" type="button">Account
|
||||
settings</button>
|
||||
<button class="tab tab-underline tab-active" type="button"
|
||||
>Account settings</button
|
||||
>
|
||||
</div>
|
||||
<div class="flex-none">
|
||||
<button class="tab tab-underline" type="button">Email preferences</button>
|
||||
<button class="tab tab-underline" type="button"
|
||||
>Email preferences</button
|
||||
>
|
||||
</div>
|
||||
<div class="flex-none">
|
||||
<button class="tab tab-underline" type="button">Security settings</button>
|
||||
<button class="tab tab-underline" type="button"
|
||||
>Security settings</button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-content block">
|
||||
@ -93,51 +105,64 @@
|
||||
<form class="form flex flex-wrap w-full">
|
||||
<div class="w-full">
|
||||
<div class="form-element">
|
||||
<div class="form-label">First name</div><input
|
||||
<div class="form-label">First name</div>
|
||||
<input
|
||||
name="first-name"
|
||||
type="text"
|
||||
class="form-input "
|
||||
placeholder="Enter you first name" />
|
||||
class="form-input"
|
||||
placeholder="Enter you first name"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-element">
|
||||
<div class="form-label">Last name</div><input
|
||||
<div class="form-label">Last name</div>
|
||||
<input
|
||||
name="last-name"
|
||||
type="text"
|
||||
class="form-input "
|
||||
placeholder="Enter you last name" />
|
||||
class="form-input"
|
||||
placeholder="Enter you last name"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-element">
|
||||
<div class="form-label">Email address</div><input
|
||||
<div class="form-label">Email address</div>
|
||||
<input
|
||||
name="email"
|
||||
type="email"
|
||||
class="form-input "
|
||||
placeholder="Enter you email address" />
|
||||
class="form-input"
|
||||
placeholder="Enter you email address"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-element">
|
||||
<div class="form-label">Company</div><input
|
||||
<div class="form-label">Company</div>
|
||||
<input
|
||||
name="company"
|
||||
type="text"
|
||||
class="form-input "
|
||||
placeholder="Enter you company" />
|
||||
class="form-input"
|
||||
placeholder="Enter you company"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-element">
|
||||
<div class="form-label">Position</div><input
|
||||
<div class="form-label">Position</div>
|
||||
<input
|
||||
name="position"
|
||||
type="text"
|
||||
class="form-input "
|
||||
placeholder="Enter you position" />
|
||||
class="form-input"
|
||||
placeholder="Enter you position"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-element">
|
||||
<div class="form-label">Language</div><select
|
||||
name="language"
|
||||
class="form-select "><option>Select language</option>
|
||||
<div class="form-label">Language</div>
|
||||
<select name="language" class="form-select"
|
||||
><option>Select language</option>
|
||||
<option value="english">English</option>
|
||||
<option value="spanish">Spanish</option>
|
||||
<option value="portuguese">Portuguese</option></select>
|
||||
<option value="portuguese">Portuguese</option></select
|
||||
>
|
||||
</div>
|
||||
</div><input
|
||||
</div>
|
||||
<input
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
@ -148,56 +173,70 @@
|
||||
<form class="form flex flex-wrap w-full">
|
||||
<div class="w-full">
|
||||
<div class="form-element">
|
||||
<div class="form-label">Current email</div><input
|
||||
<div class="form-label">Current email</div>
|
||||
<input
|
||||
name="email"
|
||||
type="email"
|
||||
class="form-input "
|
||||
placeholder="Enter you current email address" />
|
||||
class="form-input"
|
||||
placeholder="Enter you current email address"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-element">
|
||||
<div class="form-label">New email</div><input
|
||||
<div class="form-label">New email</div>
|
||||
<input
|
||||
name="email"
|
||||
type="email"
|
||||
class="form-input "
|
||||
placeholder="Enter you new email address" />
|
||||
class="form-input"
|
||||
placeholder="Enter you new email address"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-element">
|
||||
<div class="form-label">Daily updates</div>
|
||||
<div class="flex items-center justify-start space-x-2">
|
||||
<label
|
||||
class="flex items-center justify-start space-x-2"><input
|
||||
<label class="flex items-center justify-start space-x-2"
|
||||
><input
|
||||
type="radio"
|
||||
name="daily-updates"
|
||||
class="form-radio h-4 w-4 "
|
||||
value="yes" /><span
|
||||
class="">Yes</span></label><label
|
||||
class="flex items-center justify-start space-x-2"><input
|
||||
class="form-radio h-4 w-4"
|
||||
value="yes"
|
||||
/><span class="">Yes</span></label
|
||||
><label
|
||||
class="flex items-center justify-start space-x-2"
|
||||
><input
|
||||
type="radio"
|
||||
name="daily-updates"
|
||||
class="form-radio h-4 w-4 "
|
||||
value="no" /><span class="">No</span></label>
|
||||
class="form-radio h-4 w-4"
|
||||
value="no"
|
||||
/><span class="">No</span></label
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-element">
|
||||
<div class="form-label">Weekly updates</div>
|
||||
<div class="flex items-center justify-start space-x-2">
|
||||
<label
|
||||
class="flex items-center justify-start space-x-2"><input
|
||||
<label class="flex items-center justify-start space-x-2"
|
||||
><input
|
||||
type="radio"
|
||||
name="weekle-updates"
|
||||
class="form-radio h-4 w-4 "
|
||||
value="yes" /><span
|
||||
class="">Yes</span></label><label
|
||||
class="flex items-center justify-start space-x-2"><input
|
||||
class="form-radio h-4 w-4"
|
||||
value="yes"
|
||||
/><span class="">Yes</span></label
|
||||
><label
|
||||
class="flex items-center justify-start space-x-2"
|
||||
><input
|
||||
type="radio"
|
||||
name="weekle-updates"
|
||||
class="form-radio h-4 w-4 "
|
||||
value="no" /><span class="">No</span></label>
|
||||
class="form-radio h-4 w-4"
|
||||
value="no"
|
||||
/><span class="">No</span></label
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div><input
|
||||
</div>
|
||||
<input
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
@ -208,29 +247,37 @@
|
||||
<form class="form flex flex-wrap w-full">
|
||||
<div class="w-full">
|
||||
<div class="form-element">
|
||||
<div class="form-label">Current password</div><input
|
||||
<div class="form-label">Current password</div>
|
||||
<input
|
||||
name="current-password"
|
||||
type="password"
|
||||
class="form-input "
|
||||
placeholder="Enter your current password" />
|
||||
class="form-input"
|
||||
placeholder="Enter your current password"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-element">
|
||||
<div class="form-label">New password</div><input
|
||||
<div class="form-label">New password</div>
|
||||
<input
|
||||
name="new-password"
|
||||
type="password"
|
||||
class="form-input "
|
||||
placeholder="Enter your new password" />
|
||||
class="form-input"
|
||||
placeholder="Enter your new password"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-element">
|
||||
<div class="form-label">Confirm new password</div><input
|
||||
<div class="form-label">Confirm new password</div>
|
||||
<input
|
||||
name="confirm-new-password"
|
||||
type="password"
|
||||
class="form-input "
|
||||
placeholder="Enter your new password confirmation" />
|
||||
class="form-input"
|
||||
placeholder="Enter your new password confirmation"
|
||||
/>
|
||||
</div>
|
||||
</div><input
|
||||
</div>
|
||||
<input
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -3,32 +3,37 @@
|
||||
<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="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">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th
|
||||
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
|
||||
</th>
|
||||
<th
|
||||
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
|
||||
</th>
|
||||
<th
|
||||
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
|
||||
</th>
|
||||
<th
|
||||
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
|
||||
</th>
|
||||
<th scope="col" class="relative px-6 py-3">
|
||||
<span class="sr-only">{$_('edit')}</span>
|
||||
<span class="sr-only">{$_("edit")}</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
@ -40,7 +45,8 @@
|
||||
<img
|
||||
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"
|
||||
alt="" />
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<div class="text-sm font-medium text-gray-900">
|
||||
@ -60,7 +66,8 @@
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<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
|
||||
</span>
|
||||
</td>
|
||||
@ -68,10 +75,11 @@
|
||||
Admin
|
||||
</td>
|
||||
<td
|
||||
class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
||||
<a
|
||||
href="#"
|
||||
class="text-indigo-600 hover:text-indigo-900">{$_('edit')}</a>
|
||||
class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
|
||||
>
|
||||
<a href="#" class="text-indigo-600 hover:text-indigo-900"
|
||||
>{$_("edit")}</a
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
|
||||
@ -1,18 +1,23 @@
|
||||
<h3 class="text-lg">Tabs</h3>
|
||||
<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
|
||||
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
|
||||
</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
|
||||
</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
|
||||
</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>
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<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
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
@ -11,7 +12,8 @@
|
||||
stroke-width="2"
|
||||
stroke-linecap="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="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" />
|
||||
@ -22,7 +24,8 @@
|
||||
</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
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
@ -33,7 +36,8 @@
|
||||
stroke-width="2"
|
||||
stroke-linecap="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" />
|
||||
<polyline points="12 5 19 12 12 19" />
|
||||
</svg>
|
||||
@ -41,7 +45,8 @@
|
||||
</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
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
@ -52,14 +57,16 @@
|
||||
stroke-width="2"
|
||||
stroke-linecap="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" />
|
||||
</svg>
|
||||
Tag
|
||||
</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
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
@ -70,7 +77,8 @@
|
||||
stroke-width="2"
|
||||
stroke-linecap="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" />
|
||||
<rect x="1" y="3" width="22" height="5" />
|
||||
<line x1="10" y1="12" x2="14" y2="12" />
|
||||
@ -79,7 +87,8 @@
|
||||
</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
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
@ -90,10 +99,12 @@
|
||||
stroke-width="2"
|
||||
stroke-linecap="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" />
|
||||
<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="10" y1="16" x2="10.01" y2="16" />
|
||||
</svg>
|
||||
|
||||
@ -9,7 +9,6 @@
|
||||
} from "@odit/lfk-client-js";
|
||||
import isEmail from "validator/es/lib/isEmail";
|
||||
import isMobilePhone from "validator/es/lib/isMobilePhone";
|
||||
import Toastify from "toastify-js";
|
||||
import Select from "svelte-select";
|
||||
import { createEventDispatcher } from "svelte";
|
||||
const dispatch = createEventDispatcher();
|
||||
@ -78,10 +77,6 @@
|
||||
function submit() {
|
||||
if (processed_last_submit === true) {
|
||||
processed_last_submit = false;
|
||||
const toast = Toastify({
|
||||
text: $_("runner-is-being-added"),
|
||||
duration: -1,
|
||||
}).showToast();
|
||||
let postdata = {
|
||||
group: selected_team,
|
||||
firstname: firstname_input_value,
|
||||
@ -96,6 +91,7 @@
|
||||
if (email_input_value) {
|
||||
postdata.email = email_input_value;
|
||||
}
|
||||
toast.loading($_("runner-is-being-added"));
|
||||
RunnerService.runnerControllerPost(postdata)
|
||||
.then((result) => {
|
||||
firstname_input_value = "";
|
||||
@ -104,11 +100,8 @@
|
||||
email_input_value = "";
|
||||
modal_open = false;
|
||||
//
|
||||
Toastify({
|
||||
text: $_("runner-added"),
|
||||
duration: 500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
toast.dismiss();
|
||||
toast.success($_("runner-added"));
|
||||
dispatch("created", { runners: [result] });
|
||||
})
|
||||
.catch((err) => {
|
||||
@ -116,8 +109,6 @@
|
||||
})
|
||||
.finally(() => {
|
||||
processed_last_submit = true;
|
||||
//
|
||||
toast.hideToast();
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -126,58 +117,70 @@
|
||||
{#if modal_open}
|
||||
<div
|
||||
class="fixed z-10 inset-0 overflow-y-auto"
|
||||
|
||||
use:clickOutside
|
||||
on:click_outside={() => {
|
||||
modal_open = false;
|
||||
}}>
|
||||
}}
|
||||
>
|
||||
<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="absolute inset-0 bg-gray-500 opacity-75"
|
||||
data-id="modal_backdrop" />
|
||||
data-id="modal_backdrop"
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
class="hidden sm:inline-block sm:align-middle sm:h-screen"
|
||||
aria-hidden="true">​</span>
|
||||
aria-hidden="true">​</span
|
||||
>
|
||||
<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"
|
||||
role="dialog"
|
||||
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="sm:flex sm:items-start">
|
||||
<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
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
class="h-6 w-6 text-blue-600"
|
||||
fill="currentColor"
|
||||
width="24"
|
||||
height="24"><path fill="none" d="M0 0h24v24H0z" />
|
||||
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>
|
||||
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
|
||||
>
|
||||
</div>
|
||||
<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">
|
||||
{$_('create-a-new-runner')}
|
||||
{$_("create-a-new-runner")}
|
||||
</h3>
|
||||
<div class="mt-2 mb-6">
|
||||
<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>
|
||||
</div>
|
||||
<div class="grid grid-cols-6 gap-6">
|
||||
<div class="col-span-6">
|
||||
<label
|
||||
for="firstname"
|
||||
class="block text-sm font-medium text-gray-700">{$_('first-name')}</label>
|
||||
class="block text-sm font-medium text-gray-700"
|
||||
>{$_("first-name")}</label
|
||||
>
|
||||
<input
|
||||
use:focus
|
||||
autocomplete="off"
|
||||
placeholder={$_('first-name')}
|
||||
placeholder={$_("first-name")}
|
||||
class:border-red-500={!isFirstnameValid}
|
||||
class:focus:border-red-500={!isFirstnameValid}
|
||||
class:focus:ring-red-500={!isFirstnameValid}
|
||||
@ -185,34 +188,41 @@
|
||||
bind:this={firstname_input}
|
||||
type="text"
|
||||
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}
|
||||
<span
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||
{$_('first-name-is-required')}
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
|
||||
>
|
||||
{$_("first-name-is-required")}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="col-span-6">
|
||||
<label
|
||||
for="trackname"
|
||||
class="block text-sm font-medium text-gray-700">{$_('middle-name')}</label>
|
||||
class="block text-sm font-medium text-gray-700"
|
||||
>{$_("middle-name")}</label
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder={$_('middle-name')}
|
||||
placeholder={$_("middle-name")}
|
||||
bind:value={middlename_input_value}
|
||||
bind:this={middlename_input}
|
||||
type="text"
|
||||
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 class="col-span-6">
|
||||
<label
|
||||
for="lastname"
|
||||
class="block text-sm font-medium text-gray-700">{$_('last-name')}</label>
|
||||
class="block text-sm font-medium text-gray-700"
|
||||
>{$_("last-name")}</label
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder={$_('last-name')}
|
||||
placeholder={$_("last-name")}
|
||||
class:border-red-500={!isLastnameValid}
|
||||
class:focus:border-red-500={!isLastnameValid}
|
||||
class:focus:ring-red-500={!isLastnameValid}
|
||||
@ -220,41 +230,49 @@
|
||||
bind:this={lastname_input}
|
||||
type="text"
|
||||
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}
|
||||
<span
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||
{$_('last-name-is-required')}
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
|
||||
>
|
||||
{$_("last-name-is-required")}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="col-span-6">
|
||||
<label
|
||||
for="team"
|
||||
class="block text-sm font-medium text-gray-700">{$_('team')}</label>
|
||||
class="block text-sm font-medium text-gray-700"
|
||||
>{$_("team")}</label
|
||||
>
|
||||
<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"
|
||||
itemFilter={(label, filterText, option) => label
|
||||
.toLowerCase()
|
||||
.includes(
|
||||
filterText.toLowerCase()
|
||||
) || option.value.id
|
||||
itemFilter={(label, filterText, option) =>
|
||||
label.toLowerCase().includes(filterText.toLowerCase()) ||
|
||||
option.value.id
|
||||
.toString()
|
||||
.startsWith(filterText.toLowerCase())}
|
||||
items={orgs.concat(teams)}
|
||||
showChevron={true}
|
||||
placeholder={$_('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)}
|
||||
on:clear={() => (selected_team = null)} />
|
||||
placeholder={$_(
|
||||
"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)}
|
||||
on:clear={() => (selected_team = null)}
|
||||
/>
|
||||
</div>
|
||||
<div class="col-span-6">
|
||||
<label
|
||||
for="phone"
|
||||
class="block text-sm font-medium text-gray-700">{$_('phone')}</label>
|
||||
class="block text-sm font-medium text-gray-700"
|
||||
>{$_("phone")}</label
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder={$_('phone')}
|
||||
placeholder={$_("phone")}
|
||||
class:border-red-500={!isPhoneValidOrEmpty}
|
||||
class:focus:border-red-500={!isPhoneValidOrEmpty}
|
||||
class:focus:ring-red-500={!isPhoneValidOrEmpty}
|
||||
@ -262,21 +280,27 @@
|
||||
bind:this={phone_input}
|
||||
type="tel"
|
||||
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}
|
||||
<span
|
||||
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')}
|
||||
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"
|
||||
)}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="col-span-6">
|
||||
<label
|
||||
for="email"
|
||||
class="block text-sm font-medium text-gray-700">{$_('e-mail-adress')}</label>
|
||||
class="block text-sm font-medium text-gray-700"
|
||||
>{$_("e-mail-adress")}</label
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder={$_('e-mail-adress')}
|
||||
placeholder={$_("e-mail-adress")}
|
||||
class:border-red-500={!isEmailValidOrEmpty}
|
||||
class:focus:border-red-500={!isEmailValidOrEmpty}
|
||||
class:focus:ring-red-500={!isEmailValidOrEmpty}
|
||||
@ -284,11 +308,13 @@
|
||||
bind:this={email_input}
|
||||
type="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}
|
||||
<span
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||
{$_('valid-email-is-required')}
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
|
||||
>
|
||||
{$_("valid-email-is-required")}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
@ -302,16 +328,18 @@
|
||||
class:opacity-50={!createbtnenabled}
|
||||
on:click={submit}
|
||||
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">
|
||||
{$_('create')}
|
||||
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")}
|
||||
</button>
|
||||
<button
|
||||
on:click={() => {
|
||||
modal_open = false;
|
||||
}}
|
||||
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">
|
||||
{$_('cancel')}
|
||||
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")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -25,7 +25,7 @@
|
||||
});
|
||||
async function submit() {
|
||||
dispatch("delete", { id: delete_runner.id });
|
||||
modal_open=false;
|
||||
modal_open = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -4,7 +4,6 @@
|
||||
import { _ } from "svelte-i18n";
|
||||
import { clickOutside } from "../base/outsideclick";
|
||||
|
||||
import Toastify from "toastify-js";
|
||||
import {
|
||||
ImportService,
|
||||
RunnerTeamService,
|
||||
@ -12,6 +11,7 @@
|
||||
} from "@odit/lfk-client-js";
|
||||
import { createEventDispatcher } from "svelte";
|
||||
import Select from "svelte-select";
|
||||
import toast from "svelte-french-toast";
|
||||
export let opened_from;
|
||||
export let passed_org;
|
||||
export let passed_orgs;
|
||||
@ -90,10 +90,7 @@
|
||||
}
|
||||
function importAction() {
|
||||
if (recent_processed === true) {
|
||||
const toast = Toastify({
|
||||
text: $_("runners-are-being-imported"),
|
||||
duration: -1,
|
||||
}).showToast();
|
||||
toast.loading($_("runners-are-being-imported"));
|
||||
recent_processed = false;
|
||||
const mapped = json_output.map(function (runner) {
|
||||
return {
|
||||
@ -115,48 +112,30 @@
|
||||
if (opened_from === "OrgOverview" || opened_from === "OrgDetail") {
|
||||
ImportService.importControllerPostOrgsJson(org, mapped)
|
||||
.then((resp) => {
|
||||
toast.hideToast();
|
||||
toast.dismiss();
|
||||
recent_processed = true;
|
||||
Toastify({
|
||||
text: $_("import-finished"),
|
||||
duration: 500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
toast.success($_("import-finished"));
|
||||
cancelModal();
|
||||
})
|
||||
.catch((err) => {
|
||||
toast.hideToast();
|
||||
toast.dismiss();
|
||||
recent_processed = true;
|
||||
Toastify({
|
||||
text: $_("error-during-import"),
|
||||
duration: 500,
|
||||
backgroundColor:
|
||||
"linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
|
||||
}).showToast();
|
||||
toast.error($_("error-during-import"));
|
||||
cancelModal();
|
||||
});
|
||||
}
|
||||
if (opened_from === "TeamDetail") {
|
||||
ImportService.importControllerPostTeamsJson(passed_team.id, mapped)
|
||||
.then((resp) => {
|
||||
toast.hideToast();
|
||||
toast.dismiss();
|
||||
recent_processed = true;
|
||||
Toastify({
|
||||
text: $_("import-finished"),
|
||||
duration: 500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
toast.success($_("import-finished"));
|
||||
cancelModal();
|
||||
})
|
||||
.catch((err) => {
|
||||
toast.hideToast();
|
||||
toast.dismiss();
|
||||
recent_processed = true;
|
||||
Toastify({
|
||||
text: $_("error-during-import"),
|
||||
duration: 500,
|
||||
backgroundColor:
|
||||
"linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
|
||||
}).showToast();
|
||||
toast.error($_("error-during-import"));
|
||||
cancelModal();
|
||||
});
|
||||
}
|
||||
@ -169,24 +148,15 @@
|
||||
)
|
||||
.then((resp) => {
|
||||
dispatch("created", { runners: resp });
|
||||
toast.hideToast();
|
||||
toast.dismiss();
|
||||
recent_processed = true;
|
||||
Toastify({
|
||||
text: $_("import-finished"),
|
||||
duration: 500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
toast($_("import-finished"));
|
||||
cancelModal();
|
||||
})
|
||||
.catch((err) => {
|
||||
toast.hideToast();
|
||||
toast.dismiss();
|
||||
recent_processed = true;
|
||||
Toastify({
|
||||
text: $_("error-during-import"),
|
||||
duration: 500,
|
||||
backgroundColor:
|
||||
"linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
|
||||
}).showToast();
|
||||
toast.error($_("error-during-import"));
|
||||
cancelModal();
|
||||
});
|
||||
}
|
||||
@ -198,24 +168,15 @@
|
||||
)
|
||||
.then((resp) => {
|
||||
dispatch("created", { runners: resp });
|
||||
toast.hideToast();
|
||||
toast.dismiss();
|
||||
recent_processed = true;
|
||||
Toastify({
|
||||
text: $_('import-finished'),
|
||||
duration: 500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
toast($_("import-finished"));
|
||||
cancelModal();
|
||||
})
|
||||
.catch((err) => {
|
||||
toast.hideToast();
|
||||
toast.dismiss();
|
||||
recent_processed = true;
|
||||
Toastify({
|
||||
text: $_("error-during-import"),
|
||||
duration: 500,
|
||||
backgroundColor:
|
||||
"linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
|
||||
}).showToast();
|
||||
toast.error($_("error-during-import"));
|
||||
cancelModal();
|
||||
});
|
||||
}
|
||||
@ -227,43 +188,51 @@
|
||||
{#if import_modal_open}
|
||||
<div
|
||||
class="fixed z-10 inset-0 overflow-y-auto"
|
||||
|
||||
use:clickOutside
|
||||
on:click_outside={() => {
|
||||
cancelModal();
|
||||
}}>
|
||||
}}
|
||||
>
|
||||
<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="absolute inset-0 bg-gray-500 opacity-75"
|
||||
data-id="modal_backdrop" />
|
||||
data-id="modal_backdrop"
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
class="hidden sm:inline-block sm:align-middle sm:h-screen"
|
||||
aria-hidden="true">​</span>
|
||||
aria-hidden="true">​</span
|
||||
>
|
||||
<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"
|
||||
role="dialog"
|
||||
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="sm:flex sm:items-start">
|
||||
<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
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
class="h-6 w-6 text-blue-600"
|
||||
fill="currentColor"
|
||||
width="24"
|
||||
height="24"><path fill="none" d="M0 0h24v24H0z" />
|
||||
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>
|
||||
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
|
||||
>
|
||||
</div>
|
||||
<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">
|
||||
{$_('runner-import')}
|
||||
{$_("runner-import")}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
@ -271,14 +240,15 @@
|
||||
{#if json_output.length === 0}
|
||||
<div class="mt-2 mb-6">
|
||||
<p class="text-sm text-gray-500">
|
||||
{$_('please-provide-the-required-csv-xlsx-file')}
|
||||
{$_("please-provide-the-required-csv-xlsx-file")}
|
||||
</p>
|
||||
</div>
|
||||
<div class="overflow-hidden relative mt-4 mb-4">
|
||||
<input
|
||||
accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
|
||||
bind:files
|
||||
type="file" />
|
||||
type="file"
|
||||
/>
|
||||
</div>
|
||||
<div class="overflow-hidden relative mt-4 mb-4">
|
||||
<button
|
||||
@ -286,47 +256,50 @@
|
||||
cancelModal();
|
||||
}}
|
||||
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">
|
||||
{$_('cancel')}
|
||||
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")}
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
{#if json_output.length > 0}
|
||||
{#if opened_from === 'OrgOverview'}
|
||||
<p>{$_('import__target-organization')}</p>
|
||||
{#if opened_from === "OrgOverview"}
|
||||
<p>{$_("import__target-organization")}</p>
|
||||
<select
|
||||
name="team"
|
||||
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}
|
||||
<option value={o.id}>{o.name}</option>
|
||||
{/each}
|
||||
</select>
|
||||
<p>{$_('bitte-bestaetige-diese-laeufer-fuer-den-import')}</p>
|
||||
<p>{$_("confirm-runner-import")}</p>
|
||||
{/if}
|
||||
{#if opened_from === 'RunnerOverview'}
|
||||
<p>{$_('group')}</p>
|
||||
{#if opened_from === "RunnerOverview"}
|
||||
<p>{$_("group")}</p>
|
||||
<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"
|
||||
itemFilter={(label, filterText, option) => label
|
||||
.toLowerCase()
|
||||
.includes(
|
||||
filterText.toLowerCase()
|
||||
) || option.id.value
|
||||
itemFilter={(label, filterText, option) =>
|
||||
label.toLowerCase().includes(filterText.toLowerCase()) ||
|
||||
option.id.value
|
||||
.toString()
|
||||
.startsWith(filterText.toLowerCase())}
|
||||
items={groups}
|
||||
showChevron={true}
|
||||
placeholder={$_('search-for-an-organization-or-team-by-name-or-id')}
|
||||
noOptionsMessage={$_('no-organization-or-team-found')}
|
||||
placeholder={$_(
|
||||
"search-for-an-organization-or-team-by-name-or-id"
|
||||
)}
|
||||
noOptionsMessage={$_("no-organization-or-team-found")}
|
||||
on:select={(selectedValue) => {
|
||||
selected_org_or_team = selectedValue.detail.value;
|
||||
}}
|
||||
on:clear={() => (selected_org_or_team = null)} />
|
||||
on:clear={() => (selected_org_or_team = null)}
|
||||
/>
|
||||
{/if}
|
||||
{#if opened_from === 'OrgDetail'}
|
||||
{#if opened_from === "OrgDetail"}
|
||||
<p>
|
||||
{$_('runnerimport_verify_runners_org', {
|
||||
{$_("runnerimport_verify_runners_org", {
|
||||
values: { org_name: passed_org.name },
|
||||
})}
|
||||
</p>
|
||||
@ -334,9 +307,10 @@
|
||||
<input
|
||||
type="search"
|
||||
bind:value={searchvalue}
|
||||
placeholder={$_('datatable.search')}
|
||||
aria-label={$_('datatable.search')}
|
||||
class="p-2 w-full" />
|
||||
placeholder={$_("datatable.search")}
|
||||
aria-label={$_("datatable.search")}
|
||||
class="p-2 w-full"
|
||||
/>
|
||||
<div class="relative w-full mt-4 mb-4">
|
||||
<div class="w-full overflow-x-auto">
|
||||
<table class="divide-y divide-gray-200 w-full">
|
||||
@ -344,24 +318,28 @@
|
||||
<tr>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
{$_('csv_import__firstname')}
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
||||
>
|
||||
{$_("csv_import__firstname")}
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
{$_('csv_import__middlename')}
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
||||
>
|
||||
{$_("csv_import__middlename")}
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
{$_('csv_import__lastname')}
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
||||
>
|
||||
{$_("csv_import__lastname")}
|
||||
</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
|
||||
scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
{$_('csv_import__team')}
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
||||
>
|
||||
{$_("csv_import__team")}
|
||||
</th>
|
||||
{/if}
|
||||
</tr>
|
||||
@ -374,17 +352,19 @@
|
||||
.includes(searchvalue)}
|
||||
<tr>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
{runner[`${$_('csv_import__firstname')}`]}
|
||||
{runner[`${$_("csv_import__firstname")}`]}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
{runner[`${$_('csv_import__middlename')}`] || ''}
|
||||
{runner[`${$_("csv_import__middlename")}`] || ""}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
{runner[`${$_('csv_import__lastname')}`]}
|
||||
{runner[`${$_("csv_import__lastname")}`]}
|
||||
</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">
|
||||
{runner[`${$_('csv_import__team')}`] || runner[`${$_('csv_import__class')}`] || '---'}
|
||||
{runner[`${$_("csv_import__team")}`] ||
|
||||
runner[`${$_("csv_import__class")}`] ||
|
||||
"---"}
|
||||
</td>
|
||||
{/if}
|
||||
</tr>
|
||||
@ -398,16 +378,18 @@
|
||||
class:opacity-50={!importButtonEnabled}
|
||||
on:click={importAction}
|
||||
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">
|
||||
{$_('import-runners')}
|
||||
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")}
|
||||
</button>
|
||||
<button
|
||||
on:click={() => {
|
||||
cancelModal();
|
||||
}}
|
||||
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">
|
||||
{$_('cancel')}
|
||||
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")}
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<script>
|
||||
import { getLocaleFromNavigator, _ } from "svelte-i18n";
|
||||
import { _ } from "svelte-i18n";
|
||||
import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
|
||||
import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
|
||||
import GenerateRunnerCertificates from "../pdf_generation/GenerateRunnerCertificates.svelte";
|
||||
@ -9,10 +9,10 @@
|
||||
RunnerTeamService,
|
||||
RunnerOrganizationService,
|
||||
} from "@odit/lfk-client-js";
|
||||
import Toastify from "toastify-js";
|
||||
import PromiseError from "../base/PromiseError.svelte";
|
||||
import isEmail from "validator/es/lib/isEmail";
|
||||
import Select from "svelte-select";
|
||||
import toast from "svelte-french-toast";
|
||||
let data_loaded = false;
|
||||
export let params;
|
||||
const runner_promise = RunnerService.runnerControllerGetOne(params.runnerid);
|
||||
@ -65,10 +65,7 @@
|
||||
let groups = [];
|
||||
function submit() {
|
||||
if (data_loaded === true && save_enabled) {
|
||||
Toastify({
|
||||
text: $_("updating-runner"),
|
||||
duration: 2500,
|
||||
}).showToast();
|
||||
toast.loading($_("updating-runner"));
|
||||
let postdata = {};
|
||||
postdata = Object.assign(postdata, editable);
|
||||
if (postdata.phone === "") {
|
||||
@ -78,11 +75,8 @@
|
||||
.then((resp) => {
|
||||
Object.assign(original_data, editable);
|
||||
original_data = original_data;
|
||||
Toastify({
|
||||
text: $_("runner-updated"),
|
||||
duration: 2500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
toast.dismiss();
|
||||
toast.success($_("runner-updated"));
|
||||
})
|
||||
.catch((err) => {});
|
||||
} else {
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
<div class="text-center items-center justify-center">
|
||||
<p class="mb-16 text-lg text-gray-500">
|
||||
<img class="w-full h-44" src={runners_empty} alt="" />
|
||||
<span class="font-bold">{$_('there-are-no-runners-added-yet')}</span><br />
|
||||
<span>{$_('add-your-first-runner')}</span>
|
||||
<span class="font-bold">{$_("there-are-no-runners-added-yet")}</span><br />
|
||||
<span>{$_("add-your-first-runner")}</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@ -24,7 +24,6 @@
|
||||
import TableActions from "../shared/TableActions.svelte";
|
||||
import { groupFilter } from "../shared/tablefilters";
|
||||
import DeleteRunnerModal from "./DeleteRunnerModal.svelte";
|
||||
import Toastify from "toastify-js";
|
||||
import TableBottom from "../shared/TableBottom.svelte";
|
||||
import TableHeader from "../shared/TableHeader.svelte";
|
||||
|
||||
@ -149,11 +148,7 @@
|
||||
...options,
|
||||
data: current_runners,
|
||||
}));
|
||||
Toastify({
|
||||
text: $_("runner-deleted"),
|
||||
duration: 3500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
toast($_("runner-deleted"));
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
@ -182,7 +177,6 @@
|
||||
dataLoaded = true;
|
||||
page++;
|
||||
}
|
||||
console.log("All runners loaded");
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@ -2,27 +2,23 @@
|
||||
import { _ } from "svelte-i18n";
|
||||
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 Toastify from "toastify-js";
|
||||
import { createEventDispatcher } from "svelte";
|
||||
import toast from "svelte-french-toast";
|
||||
export let modal_open;
|
||||
const getRunnerLabel = (option) =>
|
||||
option.firstname + " " + (option.middlename || "") + " " + option.lastname;
|
||||
const filterRunners = (label, filterText, option) =>
|
||||
label.toLowerCase().includes(filterText.toLowerCase()) ||
|
||||
option.value.id.toString().startsWith(filterText.toLowerCase());
|
||||
function focus(el) {
|
||||
el.focus();
|
||||
}
|
||||
const dispatch = createEventDispatcher();
|
||||
$: runner = 0;
|
||||
$: runners = [];
|
||||
RunnerService.runnerControllerGetAll().then((val) => {
|
||||
runners = val.map(r => {return {label: getRunnerLabel(r), value: r}});
|
||||
runners = val.map((r) => {
|
||||
return { label: getRunnerLabel(r), value: r };
|
||||
});
|
||||
});
|
||||
$: distance_input = 0;
|
||||
$: processed_last_submit = true;
|
||||
@ -45,10 +41,7 @@
|
||||
function submit() {
|
||||
if (processed_last_submit === true) {
|
||||
processed_last_submit = false;
|
||||
const toast = Toastify({
|
||||
text: $_('adding-scan'),
|
||||
duration: -1,
|
||||
}).showToast();
|
||||
toast.loading($_("adding-scan"));
|
||||
let postdata = {
|
||||
runner,
|
||||
distance: distance_input,
|
||||
@ -59,11 +52,8 @@
|
||||
distance_input = 0;
|
||||
modal_open = false;
|
||||
//
|
||||
Toastify({
|
||||
text: $_('scan-added'),
|
||||
duration: 500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
toast.dismiss();
|
||||
toast.success($_("scan-added"));
|
||||
dispatch("created", { scans: [result] });
|
||||
})
|
||||
.catch((err) => {
|
||||
@ -71,8 +61,6 @@
|
||||
})
|
||||
.finally(() => {
|
||||
processed_last_submit = true;
|
||||
//
|
||||
toast.hideToast();
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -81,70 +69,87 @@
|
||||
{#if modal_open}
|
||||
<div
|
||||
class="fixed z-10 inset-0 overflow-y-auto"
|
||||
|
||||
use:clickOutside
|
||||
on:click_outside={() => {
|
||||
modal_open = false;
|
||||
}}>
|
||||
}}
|
||||
>
|
||||
<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="absolute inset-0 bg-gray-500 opacity-75"
|
||||
data-id="modal_backdrop" />
|
||||
data-id="modal_backdrop"
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
class="hidden sm:inline-block sm:align-middle sm:h-screen"
|
||||
aria-hidden="true">​</span>
|
||||
aria-hidden="true">​</span
|
||||
>
|
||||
<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"
|
||||
role="dialog"
|
||||
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="sm:flex sm:items-start">
|
||||
<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"
|
||||
width="24"
|
||||
height="24"><path fill="none" d="M0 0h24v24H0z" />
|
||||
height="24"
|
||||
><path fill="none" d="M0 0h24v24H0z" />
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M2 4h2v16H2V4zm4 0h1v16H6V4zm2 0h2v16H8V4zm3 0h2v16h-2V4zm3 0h2v16h-2V4zm3 0h1v16h-1V4zm2 0h3v16h-3V4z" /></svg>
|
||||
d="M2 4h2v16H2V4zm4 0h1v16H6V4zm2 0h2v16H8V4zm3 0h2v16h-2V4zm3 0h2v16h-2V4zm3 0h1v16h-1V4zm2 0h3v16h-3V4z"
|
||||
/></svg
|
||||
>
|
||||
</div>
|
||||
<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">
|
||||
{$_('create-a-new-scan-fixed-only')}
|
||||
{$_("create-a-new-scan-fixed-only")}
|
||||
</h3>
|
||||
<div class="mt-2 mb-6">
|
||||
<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>
|
||||
</div>
|
||||
<div class="grid grid-cols-6 gap-6">
|
||||
<div class="col-span-6">
|
||||
<label
|
||||
for="donor"
|
||||
class="block text-sm font-medium text-gray-700">{$_('runner')}</label>
|
||||
class="block text-sm font-medium text-gray-700"
|
||||
>{$_("runner")}</label
|
||||
>
|
||||
<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"
|
||||
itemFilter={(label, filterText, option) => filterRunners(label, filterText, option)}
|
||||
itemFilter={(label, filterText, option) =>
|
||||
filterRunners(label, filterText, option)}
|
||||
items={runners}
|
||||
showChevron={true}
|
||||
placeholder={$_('search-for-runner-by-name-or-id')}
|
||||
noOptionsMessage={$_('no-runners-found')}
|
||||
on:select={(selectedValue) => (runner = selectedValue.detail.value.id)}
|
||||
on:clear={() => (runner = null)} />
|
||||
placeholder={$_("search-for-runner-by-name-or-id")}
|
||||
noOptionsMessage={$_("no-runners-found")}
|
||||
on:select={(selectedValue) =>
|
||||
(runner = selectedValue.detail.value.id)}
|
||||
on:clear={() => (runner = null)}
|
||||
/>
|
||||
</div>
|
||||
<div class="col-span-6">
|
||||
<label
|
||||
for="donation_amount_eur"
|
||||
class="block text-sm font-medium text-gray-700">
|
||||
{$_('distance')}</label>
|
||||
class="block text-sm font-medium text-gray-700"
|
||||
>
|
||||
{$_("distance")}</label
|
||||
>
|
||||
<div class="mt-1 flex rounded-md shadow-sm">
|
||||
<input
|
||||
autocomplete="off"
|
||||
@ -156,14 +161,18 @@
|
||||
step="1"
|
||||
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"
|
||||
placeholder="400" />
|
||||
placeholder="400"
|
||||
/>
|
||||
<span
|
||||
class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500 text-sm">m</span>
|
||||
class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500 text-sm"
|
||||
>m</span
|
||||
>
|
||||
</div>
|
||||
{#if !is_distance_valid}
|
||||
<span
|
||||
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')}
|
||||
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")}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
@ -177,16 +186,18 @@
|
||||
class:opacity-50={!createbtnenabled}
|
||||
on:click={submit}
|
||||
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">
|
||||
{$_('create')}
|
||||
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")}
|
||||
</button>
|
||||
<button
|
||||
on:click={() => {
|
||||
modal_open = false;
|
||||
}}
|
||||
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">
|
||||
{$_('cancel')}
|
||||
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")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,11 +1,8 @@
|
||||
<script>
|
||||
import { _ } from "svelte-i18n";
|
||||
import store from "../../store";
|
||||
import {
|
||||
RunnerService,
|
||||
ScanService,
|
||||
} from "@odit/lfk-client-js";
|
||||
import Toastify from "toastify-js";
|
||||
import { RunnerService, ScanService } from "@odit/lfk-client-js";
|
||||
|
||||
import PromiseError from "../base/PromiseError.svelte";
|
||||
import Select from "svelte-select";
|
||||
let data_loaded = false;
|
||||
@ -31,14 +28,12 @@
|
||||
original_data = Object.assign(original_data, data);
|
||||
original_data.runner = original_data.runner.id;
|
||||
editable = Object.assign(editable, original_data);
|
||||
RunnerService.runnerControllerGetAll().then(
|
||||
(val) => {
|
||||
RunnerService.runnerControllerGetAll().then((val) => {
|
||||
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) =>
|
||||
@ -49,10 +44,7 @@
|
||||
|
||||
function submit() {
|
||||
if (data_loaded === true && save_enabled) {
|
||||
Toastify({
|
||||
text: $_('scan-is-being-updated'),
|
||||
duration: 2500,
|
||||
}).showToast();
|
||||
toast($_("scan-is-being-updated"));
|
||||
let postdata = {};
|
||||
if (original_data.responseType === "TRACKSCAN") {
|
||||
postdata = Object.assign(postdata, editable);
|
||||
@ -61,11 +53,7 @@
|
||||
.then((resp) => {
|
||||
Object.assign(original_data, editable);
|
||||
original_data = original_data;
|
||||
Toastify({
|
||||
text: $_('updated-scan'),
|
||||
duration: 2500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
toast.success($_("updated-scan"));
|
||||
})
|
||||
.catch((err) => {});
|
||||
} else {
|
||||
@ -74,11 +62,7 @@
|
||||
.then((resp) => {
|
||||
Object.assign(original_data, editable);
|
||||
original_data = original_data;
|
||||
Toastify({
|
||||
text: $_('updated-scan'),
|
||||
duration: 2500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
toast.success($_("updated-scan"));
|
||||
})
|
||||
.catch((err) => {});
|
||||
}
|
||||
@ -88,11 +72,7 @@
|
||||
function deleteScan() {
|
||||
ScanService.scanControllerRemove(original_data.id, false)
|
||||
.then((resp) => {
|
||||
Toastify({
|
||||
text: $_('deleted-scan'),
|
||||
duration: 500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
toast($_("deleted-scan"));
|
||||
location.replace("./");
|
||||
})
|
||||
.catch((err) => {
|
||||
@ -100,11 +80,25 @@
|
||||
delete_scan = original_data;
|
||||
});
|
||||
}
|
||||
function format_laptime(laptime){
|
||||
if(laptime == 0 || laptime == null){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`}
|
||||
return `${Math.floor(laptime / 3600)}h ${laptime - (Math.floor(laptime / 3600)*3600)}min ${laptime - (Math.floor(laptime / 3600)*3600) - (Math.floor(laptime / 60)*60)}`
|
||||
function format_laptime(laptime) {
|
||||
if (laptime == 0 || laptime == null) {
|
||||
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`;
|
||||
}
|
||||
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>
|
||||
|
||||
@ -122,9 +116,12 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
height="24"><path
|
||||
height="24"
|
||||
><path
|
||||
fill="currentColor"
|
||||
d="M2 4h2v16H2V4zm4 0h1v16H6V4zm2 0h2v16H8V4zm3 0h2v16h-2V4zm3 0h2v16h-2V4zm3 0h1v16h-1V4zm2 0h3v16h-3V4z" /></svg>
|
||||
d="M2 4h2v16H2V4zm4 0h1v16H6V4zm2 0h2v16H8V4zm3 0h2v16h-2V4zm3 0h2v16h-2V4zm3 0h1v16h-1V4zm2 0h3v16h-3V4z"
|
||||
/></svg
|
||||
>
|
||||
</li>
|
||||
<li class="flex items-center ml-2">
|
||||
<a class="mr-2" href="./">Scans</a><svg
|
||||
@ -137,12 +134,10 @@
|
||||
class="h-3 w-3 mr-2 stroke-current"
|
||||
height="1em"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"><line
|
||||
x1="5"
|
||||
y1="12"
|
||||
x2="19"
|
||||
y2="12" />
|
||||
<polyline points="12 5 19 12 12 19" /></svg>
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
><line x1="5" y1="12" x2="19" y2="12" />
|
||||
<polyline points="12 5 19 12 12 19" /></svg
|
||||
>
|
||||
</li>
|
||||
<li class="flex items-center">
|
||||
<span class="mr-2">{original_data.id}</span>
|
||||
@ -153,20 +148,24 @@
|
||||
</div>
|
||||
<div class="mb-8 text-3xl font-extrabold leading-tight">
|
||||
{runner.value?.firstname}
|
||||
{runner.value?.middlename || ''}
|
||||
{runner.value?.middlename || ""}
|
||||
{runner.value?.lastname}
|
||||
#{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}
|
||||
<button
|
||||
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:">{$_('confirm-deletion')}</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:"
|
||||
>{$_("confirm-deletion")}</button
|
||||
>
|
||||
<button
|
||||
on:click={() => {
|
||||
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:">{$_('cancel')}</button>
|
||||
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
|
||||
>
|
||||
{/if}
|
||||
{#if !delete_triggered}
|
||||
<button
|
||||
@ -174,7 +173,9 @@
|
||||
delete_triggered = true;
|
||||
}}
|
||||
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:">{$_('delete-scan')}</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:"
|
||||
>{$_("delete-scan")}</button
|
||||
>
|
||||
{/if}
|
||||
{/if}
|
||||
{#if !delete_triggered}
|
||||
@ -183,13 +184,16 @@
|
||||
class:opacity-50={!save_enabled}
|
||||
type="button"
|
||||
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:">{$_('save-changes')}</button>
|
||||
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
|
||||
>
|
||||
{/if}
|
||||
</span>
|
||||
</div>
|
||||
<!-- -->
|
||||
<div class="w-full inline-flex">
|
||||
<label for="valid" class="block font-medium text-gray-700">{$_('status')}:
|
||||
<label for="valid" class="block font-medium text-gray-700"
|
||||
>{$_("status")}:
|
||||
</label>
|
||||
|
||||
<input
|
||||
@ -200,49 +204,57 @@
|
||||
name="valid"
|
||||
type="checkbox"
|
||||
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">
|
||||
{#if editable.valid}{$_('valid')}{:else}{$_('invalid')}{/if}
|
||||
{#if editable.valid}{$_("valid")}{:else}{$_("invalid")}{/if}
|
||||
</p>
|
||||
</div>
|
||||
{#if editable.responseType === 'TRACKSCAN'}
|
||||
{#if editable.responseType === "TRACKSCAN"}
|
||||
<div class="w-full inline-flex">
|
||||
<label for="valid" class="block font-semibold text-gray-700">{$_('track')}:
|
||||
<label for="valid" class="block font-semibold text-gray-700"
|
||||
>{$_("track")}:
|
||||
</label>
|
||||
<a
|
||||
href="../tracks"
|
||||
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{editable.track.name}
|
||||
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
|
||||
>{editable.track.name}
|
||||
</a>
|
||||
</div>
|
||||
<div class="w-full inline-flex pb-3">
|
||||
<label for="valid" class="block font-semibold text-gray-700">{$_('laptime')}: {format_laptime(editable.laptime)}
|
||||
<label for="valid" class="block font-semibold text-gray-700"
|
||||
>{$_("laptime")}: {format_laptime(editable.laptime)}
|
||||
</label>
|
||||
</div>
|
||||
{/if}
|
||||
<div class=" w-full">
|
||||
<label
|
||||
for="runner"
|
||||
class="block font-medium text-gray-700">{$_('runner')}</label>
|
||||
<label for="runner" class="block font-medium text-gray-700"
|
||||
>{$_("runner")}</label
|
||||
>
|
||||
<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"
|
||||
itemFilter={(label, filterText, option) => filterRunners(label, filterText, option)}
|
||||
itemFilter={(label, filterText, option) =>
|
||||
filterRunners(label, filterText, option)}
|
||||
items={current_runners}
|
||||
showChevron={true}
|
||||
isDisabled={editable.responseType === 'TRACKSCAN'}
|
||||
placeholder={$_('search-for-runner-by-name-or-id')}
|
||||
noOptionsMessage={$_('no-runners-found')}
|
||||
isDisabled={editable.responseType === "TRACKSCAN"}
|
||||
placeholder={$_("search-for-runner-by-name-or-id")}
|
||||
noOptionsMessage={$_("no-runners-found")}
|
||||
bind:selectedValue={runner}
|
||||
on:select={(selectedValue) => {
|
||||
editable.runner = selectedValue.detail.value.id;
|
||||
}}
|
||||
on:clear={() => (editable.runner = null)} />
|
||||
on:clear={() => (editable.runner = null)}
|
||||
/>
|
||||
</div>
|
||||
<div class=" w-full">
|
||||
<label
|
||||
for="scan_distance"
|
||||
class="block text-sm font-medium text-gray-700">
|
||||
{$_('distance')}</label>
|
||||
class="block text-sm font-medium text-gray-700"
|
||||
>
|
||||
{$_("distance")}</label
|
||||
>
|
||||
<div class="mt-1 flex rounded-md shadow-sm">
|
||||
<input
|
||||
autocomplete="off"
|
||||
@ -250,19 +262,23 @@
|
||||
class:focus:border-red-500={!is_distance_valid}
|
||||
class:focus:ring-red-500={!is_distance_valid}
|
||||
bind:value={editable.distance}
|
||||
disabled={editable.responseType === 'TRACKSCAN'}
|
||||
disabled={editable.responseType === "TRACKSCAN"}
|
||||
type="number"
|
||||
step="1"
|
||||
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"
|
||||
placeholder="400" />
|
||||
placeholder="400"
|
||||
/>
|
||||
<span
|
||||
class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500 text-sm">m</span>
|
||||
class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500 text-sm"
|
||||
>m</span
|
||||
>
|
||||
</div>
|
||||
{#if !is_distance_valid}
|
||||
<span
|
||||
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')}
|
||||
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")}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
@ -10,23 +10,27 @@
|
||||
|
||||
<section class="container p-5">
|
||||
<span class="mb-1 text-3xl font-extrabold leading-tight">
|
||||
{$_('scans')}
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes('SCAN:CREATE')}
|
||||
{$_("scans")}
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes("SCAN:CREATE")}
|
||||
<button
|
||||
on:click={() => {
|
||||
modal_open = true;
|
||||
}}
|
||||
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">
|
||||
{$_('add-scan')}
|
||||
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")}
|
||||
</button>
|
||||
{/if}
|
||||
</span>
|
||||
<ScansOverview bind:current_scans bind:addScans />
|
||||
</section>
|
||||
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes('SCAN:CREATE')}
|
||||
<AddScanModal bind:modal_open on:created={(event)=>{
|
||||
addScans(event.detail.scans)
|
||||
}} />
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes("SCAN:CREATE")}
|
||||
<AddScanModal
|
||||
bind:modal_open
|
||||
on:created={(event) => {
|
||||
addScans(event.detail.scans);
|
||||
}}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
<div class="text-center items-center justify-center">
|
||||
<p class="mb-16 text-lg text-gray-500">
|
||||
<img class="m-auto" style="height:15rem" src={scans_empty} alt="" />
|
||||
<span class="font-bold">{$_('there-are-no-scans-yet')}</span><br />
|
||||
<span>{$_('add-your-fist-scan')}</span>
|
||||
<span class="font-bold">{$_("there-are-no-scans-yet")}</span><br />
|
||||
<span>{$_("add-your-fist-scan")}</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
} from "@tanstack/svelte-table";
|
||||
import { onMount } from "svelte";
|
||||
import { writable } from "svelte/store";
|
||||
import Toastify from "toastify-js";
|
||||
|
||||
import TableBottom from "../shared/TableBottom.svelte";
|
||||
import TableHeader from "../shared/TableHeader.svelte";
|
||||
import ScansEmptyState from "./ScansEmptyState.svelte";
|
||||
@ -23,6 +23,7 @@
|
||||
import CardRunner from "../cards/CardRunner.svelte";
|
||||
import ScanValid from "./ScanValid.svelte";
|
||||
import DeleteScanModal from "./DeleteScanModal.svelte";
|
||||
import toast from "svelte-french-toast";
|
||||
|
||||
$: selectedScans =
|
||||
$table?.getSelectedRowModel().rows.map((row) => row.original) || [];
|
||||
@ -169,11 +170,7 @@
|
||||
...options,
|
||||
data: current_scans,
|
||||
}));
|
||||
Toastify({
|
||||
text: $_("scan-deleted"),
|
||||
duration: 3500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
toast($_("scan-deleted"));
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
@ -193,7 +190,6 @@
|
||||
dataLoaded = true;
|
||||
page++;
|
||||
}
|
||||
console.log("All scans loaded");
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -235,11 +231,7 @@
|
||||
data: current_scans,
|
||||
}));
|
||||
$table.resetRowSelection();
|
||||
Toastify({
|
||||
text: $_("scan-deleted"),
|
||||
duration: 3500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
toast.success($_("scan-deleted"));
|
||||
}}
|
||||
>
|
||||
{$_("delete-scans")}
|
||||
|
||||
@ -3,8 +3,8 @@
|
||||
import { clickOutside } from "../base/outsideclick";
|
||||
|
||||
import { ScanStationService, TrackService } from "@odit/lfk-client-js";
|
||||
import Toastify from "toastify-js";
|
||||
import Select from "svelte-select";
|
||||
import toast from "svelte-french-toast";
|
||||
export let modal_open;
|
||||
export let new_station;
|
||||
export let current_stations;
|
||||
@ -40,10 +40,7 @@
|
||||
function submit() {
|
||||
if (processed_last_submit === true) {
|
||||
processed_last_submit = false;
|
||||
const toast = Toastify({
|
||||
text: $_("scanstation-is-being-added"),
|
||||
duration: -1,
|
||||
}).showToast();
|
||||
toast.loading($_("scanstation-is-being-added"));
|
||||
let postdata = {
|
||||
description,
|
||||
enabled,
|
||||
@ -56,11 +53,8 @@
|
||||
enabled = true;
|
||||
modal_open = false;
|
||||
//
|
||||
Toastify({
|
||||
text: $_("scanstation-added"),
|
||||
duration: 500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
toast.dismiss();
|
||||
toast.success($_("scanstation-added"));
|
||||
current_stations.push(result);
|
||||
current_stations = current_stations;
|
||||
new_station = result;
|
||||
@ -71,8 +65,6 @@
|
||||
})
|
||||
.finally(() => {
|
||||
processed_last_submit = true;
|
||||
//
|
||||
toast.hideToast();
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -81,87 +73,101 @@
|
||||
{#if modal_open}
|
||||
<div
|
||||
class="fixed z-10 inset-0 overflow-y-auto"
|
||||
|
||||
use:clickOutside
|
||||
on:click_outside={() => {
|
||||
modal_open = false;
|
||||
}}>
|
||||
}}
|
||||
>
|
||||
<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="absolute inset-0 bg-gray-500 opacity-75"
|
||||
data-id="modal_backdrop" />
|
||||
data-id="modal_backdrop"
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
class="hidden sm:inline-block sm:align-middle sm:h-screen"
|
||||
aria-hidden="true">​</span>
|
||||
aria-hidden="true">​</span
|
||||
>
|
||||
<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"
|
||||
role="dialog"
|
||||
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="sm:flex sm:items-start">
|
||||
<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"
|
||||
width="24"
|
||||
height="24"><path fill="none" d="M0 0h24v24H0z" />
|
||||
height="24"
|
||||
><path fill="none" d="M0 0h24v24H0z" />
|
||||
<path
|
||||
d="M4 5v11h16V5H4zM2 4a1 1 0 011-1h18a1 1 0 011 1v14H2V4zM1 19h22v2H1v-2z" /></svg>
|
||||
d="M4 5v11h16V5H4zM2 4a1 1 0 011-1h18a1 1 0 011 1v14H2V4zM1 19h22v2H1v-2z"
|
||||
/></svg
|
||||
>
|
||||
</div>
|
||||
<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">
|
||||
{$_('create-a-new-scanstation')}
|
||||
{$_("create-a-new-scanstation")}
|
||||
</h3>
|
||||
<div class="mt-2 mb-6">
|
||||
<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>
|
||||
</div>
|
||||
<div class="grid grid-cols-6 gap-6">
|
||||
<div class="col-span-6">
|
||||
<label
|
||||
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
|
||||
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) => label
|
||||
.toLowerCase()
|
||||
.includes(
|
||||
filterText.toLowerCase()
|
||||
) || option.value.id
|
||||
itemFilter={(label, filterText, option) =>
|
||||
label.toLowerCase().includes(filterText.toLowerCase()) ||
|
||||
option.value.id
|
||||
.toString()
|
||||
.startsWith(filterText.toLowerCase())}
|
||||
items={tracks}
|
||||
showChevron={true}
|
||||
placeholder="Search for a track (by name or id)."
|
||||
noOptionsMessage="No track found"
|
||||
on:select={(selectedValue) => (track = selectedValue.detail.value.id)}
|
||||
on:clear={() => (track = null)} />
|
||||
on:select={(selectedValue) =>
|
||||
(track = selectedValue.detail.value.id)}
|
||||
on:clear={() => (track = null)}
|
||||
/>
|
||||
</div>
|
||||
<div class="col-span-6">
|
||||
<label
|
||||
for="description"
|
||||
class="block text-sm font-medium text-gray-700">{$_('description')}</label>
|
||||
class="block text-sm font-medium text-gray-700"
|
||||
>{$_("description")}</label
|
||||
>
|
||||
<input
|
||||
use:focus
|
||||
autocomplete="off"
|
||||
placeholder={$_('description')}
|
||||
placeholder={$_("description")}
|
||||
bind:value={description}
|
||||
type="text"
|
||||
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 class="col-span-6">
|
||||
<label
|
||||
for="enabled"
|
||||
class="font-medium text-gray-700">{$_('enabled_large')}</label>
|
||||
<label for="enabled" class="font-medium text-gray-700"
|
||||
>{$_("enabled_large")}</label
|
||||
>
|
||||
<br />
|
||||
<p class="text-gray-500">
|
||||
<input
|
||||
@ -172,9 +178,10 @@
|
||||
name="enabled"
|
||||
type="checkbox"
|
||||
checked={enabled}
|
||||
class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
|
||||
{$_('this-scanstation-is')}
|
||||
{#if enabled}{$_('enabled')}{:else}{$_('disabled')}{/if}
|
||||
class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
|
||||
/>
|
||||
{$_("this-scanstation-is")}
|
||||
{#if enabled}{$_("enabled")}{:else}{$_("disabled")}{/if}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -187,16 +194,18 @@
|
||||
class:opacity-50={!createbtnenabled}
|
||||
on:click={submit}
|
||||
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">
|
||||
{$_('create')}
|
||||
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")}
|
||||
</button>
|
||||
<button
|
||||
on:click={() => {
|
||||
modal_open = false;
|
||||
}}
|
||||
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">
|
||||
{$_('cancel')}
|
||||
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")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -3,8 +3,8 @@
|
||||
import { clickOutside } from "../base/outsideclick";
|
||||
|
||||
import { ScanStationService } from "@odit/lfk-client-js";
|
||||
import Toastify from "toastify-js";
|
||||
import { createEventDispatcher } from "svelte";
|
||||
import toast from "svelte-french-toast";
|
||||
export let modal_open;
|
||||
export let delete_station;
|
||||
const dispatch = createEventDispatcher();
|
||||
@ -13,16 +13,9 @@
|
||||
dispatch("cancelDelete", { id: delete_station.id });
|
||||
}
|
||||
function deleteStation() {
|
||||
ScanStationService.scanStationControllerRemove(
|
||||
delete_station.id,
|
||||
true
|
||||
)
|
||||
ScanStationService.scanStationControllerRemove(delete_station.id, true)
|
||||
.then((resp) => {
|
||||
Toastify({
|
||||
text: $_('station-deleted'),
|
||||
duration: 500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
toast($_("station-deleted"));
|
||||
location.replace("./");
|
||||
})
|
||||
.catch((err) => {});
|
||||
@ -32,41 +25,54 @@
|
||||
{#if modal_open}
|
||||
<div
|
||||
class="fixed z-10 inset-0 overflow-y-auto"
|
||||
|
||||
use:clickOutside
|
||||
on:click_outside={cancelDelete}>
|
||||
on:click_outside={cancelDelete}
|
||||
>
|
||||
<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="absolute inset-0 bg-gray-500 opacity-75"
|
||||
data-id="modal_backdrop" />
|
||||
data-id="modal_backdrop"
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
class="hidden sm:inline-block sm:align-middle sm:h-screen"
|
||||
aria-hidden="true">​</span>
|
||||
aria-hidden="true">​</span
|
||||
>
|
||||
<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"
|
||||
role="dialog"
|
||||
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="sm:flex sm:items-start">
|
||||
<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">
|
||||
<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>
|
||||
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
|
||||
>
|
||||
</div>
|
||||
<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">
|
||||
{$_('attention')}
|
||||
{$_("attention")}
|
||||
</h3>
|
||||
<div class="mt-2 mb-6">
|
||||
<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 />
|
||||
{$_('all-associated-scans-will-get-deleted-as-well')}
|
||||
{$_("all-associated-scans-will-get-deleted-as-well")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -76,14 +82,16 @@
|
||||
<button
|
||||
on:click={deleteStation}
|
||||
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">
|
||||
{$_('confirm-delete-station-with-all-scans')}
|
||||
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")}
|
||||
</button>
|
||||
<button
|
||||
on:click={cancelDelete}
|
||||
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">
|
||||
{$_('cancel-keep-station')}
|
||||
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")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<script>
|
||||
import { _ } from "svelte-i18n";
|
||||
import Toastify from "toastify-js";
|
||||
|
||||
import { tick, createEventDispatcher } from "svelte";
|
||||
import bwipjs from "bwip-js";
|
||||
|
||||
@ -26,21 +26,12 @@
|
||||
if (!successful) {
|
||||
throw new Error();
|
||||
}
|
||||
Toastify({
|
||||
text: $_("copied-token-to-clipboard"),
|
||||
duration: 500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
toast($_("copied-token-to-clipboard"));
|
||||
copied = true;
|
||||
} catch (err) {
|
||||
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();
|
||||
toast.Error($_("error-whyile-copying-to-clipboard"));
|
||||
}
|
||||
// we can notifi by event or storage about copy status
|
||||
// we can notify by event or storage about copy status
|
||||
valueCopy = null;
|
||||
}
|
||||
|
||||
@ -182,7 +173,7 @@
|
||||
class:w-full={!is_qrcode}
|
||||
class="md:w-auto mb-2 mx-auto"
|
||||
alt="Registrierungscode"
|
||||
src={textToBase64Barcode(config.baseurl, is_qrcode)}
|
||||
src={textToBase64Barcode(window.config.baseurl, is_qrcode)}
|
||||
/>
|
||||
<h3 class="leading-6 font-medium text-gray-900">{$_("token")}</h3>
|
||||
<img
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
import { t, _ } from "svelte-i18n";
|
||||
import store from "../../store";
|
||||
import { ScanStationService, TrackService } from "@odit/lfk-client-js";
|
||||
import Toastify from "toastify-js";
|
||||
|
||||
import PromiseError from "../base/PromiseError.svelte";
|
||||
import ConfirmScanStationDeletion from "./ConfirmScanStationDeletion.svelte";
|
||||
import Select from "svelte-select";
|
||||
@ -35,19 +35,12 @@
|
||||
});
|
||||
function submit() {
|
||||
if (data_loaded === true && save_enabled) {
|
||||
Toastify({
|
||||
text: $_("station-is-being-updated"),
|
||||
duration: 2500,
|
||||
}).showToast();
|
||||
toast($_("station-is-being-updated"));
|
||||
ScanStationService.scanStationControllerPut(original_data.id, editable)
|
||||
.then((resp) => {
|
||||
Object.assign(original_data, editable);
|
||||
original_data = original_data;
|
||||
Toastify({
|
||||
text: $_("updated-station"),
|
||||
duration: 2500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
toast.success($_("updated-station"));
|
||||
})
|
||||
.catch((err) => {});
|
||||
} else {
|
||||
@ -56,11 +49,7 @@
|
||||
function deleteStation() {
|
||||
ScanStationService.scanStationControllerRemove(original_data.id, false)
|
||||
.then((resp) => {
|
||||
Toastify({
|
||||
text: $_("station-deleted"),
|
||||
duration: 500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
toast($_("station-deleted"));
|
||||
location.replace("./");
|
||||
})
|
||||
.catch((err) => {
|
||||
@ -72,7 +61,7 @@
|
||||
|
||||
<ConfirmScanStationDeletion bind:modal_open bind:delete_station />
|
||||
{#await promise}
|
||||
{$_('loading-station-details')}
|
||||
{$_("loading-station-details")}
|
||||
{:then}
|
||||
<section class="container p-5 select-none">
|
||||
<div class="flex flex-row mb-4">
|
||||
@ -85,12 +74,15 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
height="24"><path fill="none" d="M0 0h24v24H0z" />
|
||||
height="24"
|
||||
><path fill="none" d="M0 0h24v24H0z" />
|
||||
<path
|
||||
d="M4 5v11h16V5H4zM2 4a1 1 0 011-1h18a1 1 0 011 1v14H2V4zM1 19h22v2H1v-2z" /></svg>
|
||||
d="M4 5v11h16V5H4zM2 4a1 1 0 011-1h18a1 1 0 011 1v14H2V4zM1 19h22v2H1v-2z"
|
||||
/></svg
|
||||
>
|
||||
</li>
|
||||
<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"
|
||||
fill="none"
|
||||
stroke-width="2"
|
||||
@ -100,12 +92,10 @@
|
||||
class="h-3 w-3 mr-2 stroke-current"
|
||||
height="1em"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"><line
|
||||
x1="5"
|
||||
y1="12"
|
||||
x2="19"
|
||||
y2="12" />
|
||||
<polyline points="12 5 19 12 12 19" /></svg>
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
><line x1="5" y1="12" x2="19" y2="12" />
|
||||
<polyline points="12 5 19 12 12 19" /></svg
|
||||
>
|
||||
</li>
|
||||
<li class="flex items-center">
|
||||
<span class="mr-2">#{original_data.id}</span>
|
||||
@ -117,16 +107,20 @@
|
||||
<div class="mb-8 text-3xl font-extrabold leading-tight">
|
||||
#{original_data.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}
|
||||
<button
|
||||
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">{$_('confirm-deletion')}</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"
|
||||
>{$_("confirm-deletion")}</button
|
||||
>
|
||||
<button
|
||||
on:click={() => {
|
||||
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">{$_('cancel')}</button>
|
||||
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
|
||||
>
|
||||
{/if}
|
||||
{#if !delete_triggered}
|
||||
<button
|
||||
@ -134,7 +128,9 @@
|
||||
delete_triggered = true;
|
||||
}}
|
||||
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">{$_('delete-station')}</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"
|
||||
>{$_("delete-station")}</button
|
||||
>
|
||||
{/if}
|
||||
{/if}
|
||||
{#if !delete_triggered}
|
||||
@ -143,48 +139,49 @@
|
||||
class:opacity-50={!save_enabled}
|
||||
type="button"
|
||||
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">{$_('save-changes')}</button>
|
||||
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
|
||||
>
|
||||
{/if}
|
||||
</span>
|
||||
</div>
|
||||
<!-- -->
|
||||
<div class="text-sm w-full">
|
||||
<label
|
||||
for="track"
|
||||
class="block text-sm font-medium text-gray-700">Track</label>
|
||||
<label for="track" class="block text-sm font-medium text-gray-700"
|
||||
>Track</label
|
||||
>
|
||||
<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"
|
||||
itemFilter={(label, filterText, option) => label
|
||||
.toLowerCase()
|
||||
.includes(
|
||||
filterText.toLowerCase()
|
||||
) || option.value.id
|
||||
.toString()
|
||||
.startsWith(filterText.toLowerCase())}
|
||||
itemFilter={(label, filterText, option) =>
|
||||
label.toLowerCase().includes(filterText.toLowerCase()) ||
|
||||
option.value.id.toString().startsWith(filterText.toLowerCase())}
|
||||
items={tracks}
|
||||
showChevron={true}
|
||||
placeholder="Search for a track (by name or id)."
|
||||
noOptionsMessage="No track found"
|
||||
bind:selectedValue={track}
|
||||
on:select={(selectedValue) => (editable.track = selectedValue.detail.value.id)}
|
||||
on:clear={() => (track = null)} />
|
||||
on:select={(selectedValue) =>
|
||||
(editable.track = selectedValue.detail.value.id)}
|
||||
on:clear={() => (track = null)}
|
||||
/>
|
||||
</div>
|
||||
<div class="text-sm w-full">
|
||||
<label
|
||||
for="description"
|
||||
class="font-medium text-gray-700">{$_('description')}</label>
|
||||
<label for="description" class="font-medium text-gray-700"
|
||||
>{$_("description")}</label
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder={$_('description')}
|
||||
placeholder={$_("description")}
|
||||
type="text"
|
||||
bind:value={editable.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 class="text-sm w-full">
|
||||
<label
|
||||
for="enabled"
|
||||
class="ml-1 font-medium text-gray-700">{$_('enabled')}</label>
|
||||
<label for="enabled" class="ml-1 font-medium text-gray-700"
|
||||
>{$_("enabled")}</label
|
||||
>
|
||||
<br />
|
||||
<p class="text-gray-500">
|
||||
<input
|
||||
@ -195,9 +192,10 @@
|
||||
name="enabled"
|
||||
type="checkbox"
|
||||
checked={editable.enabled}
|
||||
class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
|
||||
{$_('this-scanstation-is')}
|
||||
{#if editable.enabled}{$_('enabled')}{:else}{$_('disabled')}{/if}
|
||||
class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
|
||||
/>
|
||||
{$_("this-scanstation-is")}
|
||||
{#if editable.enabled}{$_("enabled")}{:else}{$_("disabled")}{/if}
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
import { _ } from "svelte-i18n";
|
||||
import store from "../../store";
|
||||
import AddScanStationModal from "./AddScanStationModal.svelte";
|
||||
import CopyScanStationTokenModal from "./CopyScanStationTokenModal.svelte";
|
||||
import CopyScanStationTokenModal from "./CopyScanStationTokenModal.svelte";
|
||||
import ScanStationsOverview from "./ScanStationsOverview.svelte";
|
||||
export let modal_open = false;
|
||||
export let copy_modal_open = false;
|
||||
@ -12,22 +12,33 @@ import CopyScanStationTokenModal from "./CopyScanStationTokenModal.svelte";
|
||||
|
||||
<section class="container p-5">
|
||||
<span class="mb-1 text-3xl font-extrabold leading-tight">
|
||||
{$_('scanstations')}
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes('STATION:CREATE')}
|
||||
{$_("scanstations")}
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes("STATION:CREATE")}
|
||||
<button
|
||||
on:click={() => {
|
||||
modal_open = true;
|
||||
}}
|
||||
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">
|
||||
{$_('create-a-new-scanstation')}
|
||||
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-scanstation")}
|
||||
</button>
|
||||
{/if}
|
||||
</span>
|
||||
<ScanStationsOverview bind:current_stations bind:modal_open bind:new_station bind:copy_modal_open />
|
||||
<ScanStationsOverview
|
||||
bind:current_stations
|
||||
bind:modal_open
|
||||
bind:new_station
|
||||
bind:copy_modal_open
|
||||
/>
|
||||
</section>
|
||||
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes('STATION:CREATE')}
|
||||
<AddScanStationModal bind:modal_open bind:current_stations bind:new_station bind:copy_modal_open/>
|
||||
<CopyScanStationTokenModal bind:copy_modal_open bind:new_station />
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes("STATION:CREATE")}
|
||||
<AddScanStationModal
|
||||
bind:modal_open
|
||||
bind:current_stations
|
||||
bind:new_station
|
||||
bind:copy_modal_open
|
||||
/>
|
||||
<CopyScanStationTokenModal bind:copy_modal_open bind:new_station />
|
||||
{/if}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<script>
|
||||
import { _ } from "svelte-i18n";
|
||||
import AddScanStationModal from "./AddScanStationModal.svelte";
|
||||
import CopyScanStationTokenModal from "./CopyScanStationTokenModal.svelte";
|
||||
import AddScanStationModal from "./AddScanStationModal.svelte";
|
||||
import CopyScanStationTokenModal from "./CopyScanStationTokenModal.svelte";
|
||||
import scanstations_empty from "./scanstations_empty.svg";
|
||||
let modal_open = false;
|
||||
let copy_modal_open = false;
|
||||
@ -12,10 +12,16 @@ import CopyScanStationTokenModal from "./CopyScanStationTokenModal.svelte";
|
||||
<div class="text-center items-center justify-center">
|
||||
<p class="mb-16 text-lg text-gray-500">
|
||||
<img class="w-full h-44" src={scanstations_empty} alt="" />
|
||||
<span class="font-bold">{$_('you-dont-have-any-scanstations-yet')}.</span><br />
|
||||
<span>{$_('add-the-first-scanstation')}</span>
|
||||
<span class="font-bold">{$_("you-dont-have-any-scanstations-yet")}.</span
|
||||
><br />
|
||||
<span>{$_("add-the-first-scanstation")}</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<AddScanStationModal bind:modal_open bind:current_stations bind:new_station bind:copy_modal_open/>
|
||||
<AddScanStationModal
|
||||
bind:modal_open
|
||||
bind:current_stations
|
||||
bind:new_station
|
||||
bind:copy_modal_open
|
||||
/>
|
||||
<CopyScanStationTokenModal bind:copy_modal_open bind:new_station />
|
||||
@ -1,6 +1,5 @@
|
||||
<script>
|
||||
import { _ } from "svelte-i18n";
|
||||
import Toastify from "toastify-js";
|
||||
import { ScanStationService } from "@odit/lfk-client-js";
|
||||
const promise = ScanStationService.scanStationControllerGetAll().then(
|
||||
(result) => {
|
||||
@ -10,6 +9,7 @@
|
||||
import store from "../../store";
|
||||
import ScanStationsEmptyState from "./ScanStationsEmptyState.svelte";
|
||||
import ConfirmScanStationDeletion from "./ConfirmScanStationDeletion.svelte";
|
||||
import toast from "svelte-french-toast";
|
||||
$: searchvalue = "";
|
||||
$: active_deletes = [];
|
||||
let delete_station = {};
|
||||
@ -23,14 +23,16 @@
|
||||
active_deletes[event.detail.id] = false;
|
||||
}}
|
||||
bind:modal_open
|
||||
bind:delete_station />
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes('STATION:GET')}
|
||||
bind:delete_station
|
||||
/>
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes("STATION:GET")}
|
||||
{#await promise}
|
||||
<div
|
||||
class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
|
||||
role="alert">
|
||||
<p class="font-bold">{$_('scanstations-are-being-loaded')}</p>
|
||||
<p class="text-sm">{$_('this-might-take-a-moment')}</p>
|
||||
role="alert"
|
||||
>
|
||||
<p class="font-bold">{$_("scanstations-are-being-loaded")}</p>
|
||||
<p class="text-sm">{$_("this-might-take-a-moment")}</p>
|
||||
</div>
|
||||
{:then}
|
||||
{#if current_stations.length === 0}
|
||||
@ -39,31 +41,36 @@
|
||||
<input
|
||||
type="search"
|
||||
bind:value={searchvalue}
|
||||
placeholder={$_('datatable.search')}
|
||||
aria-label={$_('datatable.search')}
|
||||
class="mb-4" />
|
||||
placeholder={$_("datatable.search")}
|
||||
aria-label={$_("datatable.search")}
|
||||
class="mb-4"
|
||||
/>
|
||||
<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">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
{$_('track')}
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
||||
>
|
||||
{$_("track")}
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
{$_('description')}
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
||||
>
|
||||
{$_("description")}
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
{$_('status')}
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
||||
>
|
||||
{$_("status")}
|
||||
</th>
|
||||
<th scope="col" class="relative px-6 py-3">
|
||||
<span class="sr-only">{$_('action')}</span>
|
||||
<span class="sr-only">{$_("action")}</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
@ -80,8 +87,10 @@
|
||||
<div class="text-sm font-medium text-gray-900">
|
||||
<a
|
||||
href="../tracks"
|
||||
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">
|
||||
{s.track.name || s.track.distance + 'm'}</a>
|
||||
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
|
||||
>
|
||||
{s.track.name || s.track.distance + "m"}</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -99,33 +108,40 @@
|
||||
<div class="flex items-center">
|
||||
{#if s.enabled}
|
||||
<span
|
||||
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">{$_('active')}</span>
|
||||
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"
|
||||
>{$_("active")}</span
|
||||
>
|
||||
{:else}
|
||||
<span
|
||||
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">{$_('inactive')}</span>
|
||||
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800"
|
||||
>{$_("inactive")}</span
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
</td>
|
||||
{#if active_deletes[s.id] === true}
|
||||
<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
|
||||
on:click={() => {
|
||||
active_deletes[s.id] = false;
|
||||
}}
|
||||
tabindex="0"
|
||||
class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">{$_('cancel-delete')}</button>
|
||||
class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer"
|
||||
>{$_("cancel-delete")}</button
|
||||
>
|
||||
<button
|
||||
on:click={() => {
|
||||
ScanStationService.scanStationControllerRemove(s.id, false)
|
||||
ScanStationService.scanStationControllerRemove(
|
||||
s.id,
|
||||
false
|
||||
)
|
||||
.then((resp) => {
|
||||
current_stations = current_stations.filter((obj) => obj.id !== s.id);
|
||||
Toastify({
|
||||
text: $_('station-deleted'),
|
||||
duration: 500,
|
||||
backgroundColor:
|
||||
'linear-gradient(to right, #00b09b, #96c93d)',
|
||||
}).showToast();
|
||||
current_stations = current_stations.filter(
|
||||
(obj) => obj.id !== s.id
|
||||
);
|
||||
toast($_("station-deleted"));
|
||||
})
|
||||
.catch((err) => {
|
||||
modal_open = true;
|
||||
@ -133,21 +149,28 @@
|
||||
});
|
||||
}}
|
||||
tabindex="0"
|
||||
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('confirm-delete')}</button>
|
||||
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
|
||||
>{$_("confirm-delete")}</button
|
||||
>
|
||||
</td>
|
||||
{:else}
|
||||
<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
|
||||
href="/scanstations/{s.id}"
|
||||
class="text-indigo-600 hover:text-indigo-900">{$_('details')}</a>
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes('STATION:DELETE')}
|
||||
class="text-indigo-600 hover:text-indigo-900"
|
||||
>{$_("details")}</a
|
||||
>
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes("STATION:DELETE")}
|
||||
<button
|
||||
on:click={() => {
|
||||
active_deletes[s.id] = true;
|
||||
}}
|
||||
tabindex="0"
|
||||
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('delete')}</button>
|
||||
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
|
||||
>{$_("delete")}</button
|
||||
>
|
||||
{/if}
|
||||
</td>
|
||||
{/if}
|
||||
@ -161,7 +184,7 @@
|
||||
{:catch error}
|
||||
<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">
|
||||
<b class="capitalize">{$_('general_promise_error')}</b>
|
||||
<b class="capitalize">{$_("general_promise_error")}</b>
|
||||
{error}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@ -3,8 +3,8 @@
|
||||
import { clickOutside } from "../base/outsideclick";
|
||||
|
||||
import { MeService } from "@odit/lfk-client-js";
|
||||
import Toastify from "toastify-js";
|
||||
import { createEventDispatcher } from "svelte";
|
||||
import toast from "svelte-french-toast";
|
||||
export let modal_open;
|
||||
export let delete_triggered;
|
||||
const dispatch = createEventDispatcher();
|
||||
@ -16,11 +16,7 @@
|
||||
function deleteMe() {
|
||||
MeService.meControllerRemove(true)
|
||||
.then((resp) => {
|
||||
Toastify({
|
||||
text: $_('profile-deleted'),
|
||||
duration: 500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
toast($_("profile-deleted"));
|
||||
location.replace("../");
|
||||
})
|
||||
.catch((err) => {});
|
||||
@ -30,41 +26,56 @@
|
||||
{#if modal_open}
|
||||
<div
|
||||
class="fixed z-10 inset-0 overflow-y-auto"
|
||||
|
||||
use:clickOutside
|
||||
on:click_outside={cancelDelete}>
|
||||
on:click_outside={cancelDelete}
|
||||
>
|
||||
<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="absolute inset-0 bg-gray-500 opacity-75"
|
||||
data-id="modal_backdrop" />
|
||||
data-id="modal_backdrop"
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
class="hidden sm:inline-block sm:align-middle sm:h-screen"
|
||||
aria-hidden="true">​</span>
|
||||
aria-hidden="true">​</span
|
||||
>
|
||||
<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"
|
||||
role="dialog"
|
||||
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="sm:flex sm:items-start">
|
||||
<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">
|
||||
<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="M9.33 11.5h2.17A4.5 4.5 0 0116 16H9v1h8v-1a5.58 5.58 0 00-.89-3H19a5 5 0 014.52 2.85A13.15 13.15 0 0113 21c-2.76 0-5.1-.59-7-1.63v-9.3a6.97 6.97 0 013.33 1.43zM5 19a1 1 0 01-1 1H2a1 1 0 01-1-1v-9a1 1 0 011-1h2a1 1 0 011 1v9zM18 5a3 3 0 110 6 3 3 0 010-6zm-7-3a3 3 0 110 6 3 3 0 010-6z"/></svg>
|
||||
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="M9.33 11.5h2.17A4.5 4.5 0 0116 16H9v1h8v-1a5.58 5.58 0 00-.89-3H19a5 5 0 014.52 2.85A13.15 13.15 0 0113 21c-2.76 0-5.1-.59-7-1.63v-9.3a6.97 6.97 0 013.33 1.43zM5 19a1 1 0 01-1 1H2a1 1 0 01-1-1v-9a1 1 0 011-1h2a1 1 0 011 1v9zM18 5a3 3 0 110 6 3 3 0 010-6zm-7-3a3 3 0 110 6 3 3 0 010-6z"
|
||||
/></svg
|
||||
>
|
||||
</div>
|
||||
<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">
|
||||
{$_('attention')}
|
||||
{$_("attention")}
|
||||
</h3>
|
||||
<div class="mt-2 mb-6">
|
||||
<p class="text-sm text-gray-500">
|
||||
{$_('do-you-really-want-to-delete-your-profile')}
|
||||
{$_("do-you-really-want-to-delete-your-profile")}
|
||||
<br />
|
||||
{$_('you-are-going-to-loose-all-permissions-and-access-to-the-runner-system')}
|
||||
<br>
|
||||
{$_('after-deletion-we-cant-restore-your-old-profile')}
|
||||
{$_(
|
||||
"you-are-going-to-loose-all-permissions-and-access-to-the-runner-system"
|
||||
)}
|
||||
<br />
|
||||
{$_("after-deletion-we-cant-restore-your-old-profile")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -74,14 +85,16 @@
|
||||
<button
|
||||
on:click={deleteMe}
|
||||
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">
|
||||
{$_('confirm-delete-my-user-profile')}
|
||||
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-my-user-profile")}
|
||||
</button>
|
||||
<button
|
||||
on:click={cancelDelete}
|
||||
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">
|
||||
{$_('cancel-keep-my-profile')}
|
||||
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-my-profile")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
import { _ } from "svelte-i18n";
|
||||
import isEmail from "validator/es/lib/isEmail";
|
||||
import { MeService } from "@odit/lfk-client-js";
|
||||
import Toastify from "toastify-js";
|
||||
|
||||
import ConfirmProfileDeletion from "./ConfirmProfileDeletion.svelte";
|
||||
import PasswordStrength, {
|
||||
password_strong_enough_and_equal,
|
||||
@ -31,28 +31,18 @@
|
||||
});
|
||||
function submit() {
|
||||
if (data_loaded === true && save_enabled) {
|
||||
Toastify({
|
||||
text: $_("updating-your-profile"),
|
||||
duration: 2500,
|
||||
}).showToast();
|
||||
toast($_("updating-your-profile"));
|
||||
MeService.meControllerPut(editable)
|
||||
.then((resp) => {
|
||||
original_data = Object.assign(original_data, editable);
|
||||
Toastify({
|
||||
text: $_("profile-updated"),
|
||||
duration: 2500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
toast.success($_("profile-updated"));
|
||||
})
|
||||
.catch((err) => {});
|
||||
}
|
||||
}
|
||||
function changePassword() {
|
||||
if (data_loaded === true && update_password_enabled) {
|
||||
Toastify({
|
||||
text: $_("changing-your-password"),
|
||||
duration: 2500,
|
||||
}).showToast();
|
||||
toast($_("changing-your-password"));
|
||||
let postdata = Object.assign({}, original_data);
|
||||
postdata.password = password_confirm;
|
||||
MeService.meControllerPut(postdata)
|
||||
@ -60,11 +50,7 @@
|
||||
password_confirm = "";
|
||||
password_change = "";
|
||||
postdata = {};
|
||||
Toastify({
|
||||
text: $_("password-changed"),
|
||||
duration: 2500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
toast.success($_("password-changed"));
|
||||
setTimeout(() => {
|
||||
location.replace("./");
|
||||
}, 500);
|
||||
@ -78,8 +64,9 @@
|
||||
<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">
|
||||
<h1
|
||||
class="mt-9 font-display text-4xl leading-none font-semibold text-white sm:text-5xl lg:text-6xl">
|
||||
🔨<br />{$_('settings')}
|
||||
class="mt-9 font-display text-4xl leading-none font-semibold text-white sm:text-5xl lg:text-6xl"
|
||||
>
|
||||
🔨<br />{$_("settings")}
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
@ -90,82 +77,89 @@
|
||||
<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')}
|
||||
{$_("profile")}
|
||||
</h3>
|
||||
<p class="mt-1 text-sm text-gray-600">
|
||||
{$_('everything-concerning-your-profile')}
|
||||
{$_("everything-concerning-your-profile")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{#await user_promise}
|
||||
{$_('loading-profile-data')}
|
||||
{$_("loading-profile-data")}
|
||||
{:then}
|
||||
<div class="mt-5 md:mt-0 md:col-span-2">
|
||||
<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="text-sm w-full">
|
||||
<label
|
||||
for="username"
|
||||
class="font-medium text-gray-700">{$_('username')}</label>
|
||||
<label for="username" class="font-medium text-gray-700"
|
||||
>{$_("username")}</label
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder={$_('username')}
|
||||
placeholder={$_("username")}
|
||||
type="text"
|
||||
bind:value={editable.username}
|
||||
name="username"
|
||||
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 dark:bg-gray-900 dark:text-gray-100 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 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2"
|
||||
/>
|
||||
</div>
|
||||
<div class="text-sm w-full">
|
||||
<label
|
||||
for="email"
|
||||
class="font-medium text-gray-700">{$_('e-mail-adress')}</label>
|
||||
<label for="email" class="font-medium text-gray-700"
|
||||
>{$_("e-mail-adress")}</label
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder={$_('e-mail-adress')}
|
||||
placeholder={$_("e-mail-adress")}
|
||||
type="email"
|
||||
bind:value={editable.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 dark:bg-gray-900 dark:text-gray-100 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 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2"
|
||||
/>
|
||||
</div>
|
||||
{#if !isEmail(editable.email)}
|
||||
<span
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">{$_('valid-email-is-required')}</span>
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
|
||||
>{$_("valid-email-is-required")}</span
|
||||
>
|
||||
{/if}
|
||||
<div class="text-sm w-full">
|
||||
<label
|
||||
for="firstname"
|
||||
class="font-medium text-gray-700">{$_('first-name')}</label>
|
||||
<label for="firstname" class="font-medium text-gray-700"
|
||||
>{$_("first-name")}</label
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder={$_('first-name')}
|
||||
placeholder={$_("first-name")}
|
||||
type="text"
|
||||
bind:value={editable.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 dark:bg-gray-900 dark:text-gray-100 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 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2"
|
||||
/>
|
||||
</div>
|
||||
<div class="text-sm w-full">
|
||||
<label
|
||||
for="middlename"
|
||||
class="font-medium text-gray-700">{$_('middle-name')}</label>
|
||||
<label for="middlename" class="font-medium text-gray-700"
|
||||
>{$_("middle-name")}</label
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder={$_('middle-name')}
|
||||
placeholder={$_("middle-name")}
|
||||
type="text"
|
||||
bind:value={editable.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 dark:bg-gray-900 dark:text-gray-100 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 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2"
|
||||
/>
|
||||
</div>
|
||||
<div class="text-sm w-full">
|
||||
<label
|
||||
for="lastname"
|
||||
class="font-medium text-gray-700">{$_('last-name')}</label>
|
||||
<label for="lastname" class="font-medium text-gray-700"
|
||||
>{$_("last-name")}</label
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder={$_('last-name')}
|
||||
placeholder={$_("last-name")}
|
||||
type="text"
|
||||
bind:value={editable.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 dark:bg-gray-900 dark:text-gray-100 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 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
|
||||
@ -174,8 +168,9 @@
|
||||
disabled={!save_enabled}
|
||||
class:opacity-50={!save_enabled}
|
||||
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">
|
||||
{$_('save-changes')}
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
@ -190,42 +185,44 @@
|
||||
<div class="md:col-span-1">
|
||||
<div class="px-4 sm:px-0">
|
||||
<h3 class="text-lg font-medium leading-6 text-gray-900">
|
||||
{$_('password')}
|
||||
{$_("password")}
|
||||
</h3>
|
||||
<p class="mt-1 text-sm text-gray-600">
|
||||
{$_('change-your-password-here')}
|
||||
{$_("change-your-password-here")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{#await user_promise}
|
||||
{$_('loading-profile-data')}
|
||||
{$_("loading-profile-data")}
|
||||
{:then}
|
||||
<div class="mt-5 md:mt-0 md:col-span-2">
|
||||
<div class="shadow sm:rounded-md sm:overflow-hidden">
|
||||
<div class="px-4 py-3 bg-gray-50 text-left sm:px-6">
|
||||
<label
|
||||
for="new_password"
|
||||
class="font-medium text-gray-700">{$_('new-password')}</label>
|
||||
<label for="new_password" class="font-medium text-gray-700"
|
||||
>{$_("new-password")}</label
|
||||
>
|
||||
<div class="-mt-px relative">
|
||||
<input
|
||||
aria-label={$_('password')}
|
||||
aria-label={$_("password")}
|
||||
type="password"
|
||||
required=""
|
||||
bind:value={password_change}
|
||||
class="border-gray-300 placeholder-gray-500 appearance-none rounded-md relative block w-full px-3 py-2 border focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm"
|
||||
placeholder={$_('password')} />
|
||||
placeholder={$_("password")}
|
||||
/>
|
||||
</div>
|
||||
<label
|
||||
for="new_password"
|
||||
class="font-medium text-gray-700">{$_('confirm-the-new-password')}</label>
|
||||
<label for="new_password" class="font-medium text-gray-700"
|
||||
>{$_("confirm-the-new-password")}</label
|
||||
>
|
||||
<div class="-mt-px relative">
|
||||
<input
|
||||
aria-label={$_('password')}
|
||||
aria-label={$_("password")}
|
||||
type="password"
|
||||
required=""
|
||||
bind:value={password_confirm}
|
||||
class="border-gray-300 placeholder-gray-500 appearance-none rounded-md relative block w-full px-3 py-2 border focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm"
|
||||
placeholder={$_('password')} />
|
||||
placeholder={$_("password")}
|
||||
/>
|
||||
</div>
|
||||
<PasswordStrength bind:password_change bind:password_confirm />
|
||||
</div>
|
||||
@ -235,12 +232,15 @@
|
||||
disabled={!update_password_enabled}
|
||||
class:opacity-50={!update_password_enabled}
|
||||
on:click={changePassword}
|
||||
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">
|
||||
{$_('update-password')}
|
||||
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"
|
||||
>
|
||||
{$_("update-password")}
|
||||
</button>
|
||||
{#if update_password_enabled}
|
||||
<p>
|
||||
{$_('after-the-update-youll-get-logged-out-please-login-with-your-new-password-after-that')}
|
||||
{$_(
|
||||
"after-the-update-youll-get-logged-out-please-login-with-your-new-password-after-that"
|
||||
)}
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
@ -256,15 +256,15 @@
|
||||
<div class="md:col-span-1">
|
||||
<div class="px-4 sm:px-0">
|
||||
<h3 class="text-lg font-medium leading-6 text-gray-900">
|
||||
{$_('danger-zone')}
|
||||
{$_("danger-zone")}
|
||||
</h3>
|
||||
<p class="mt-1 text-sm text-gray-600">
|
||||
{$_('stuff-that-could-harm-your-profile')}
|
||||
{$_("stuff-that-could-harm-your-profile")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{#await user_promise}
|
||||
{$_('loading-profile-data')}
|
||||
{$_("loading-profile-data")}
|
||||
{:then}
|
||||
<div class="mt-5 md:mt-0 md:col-span-2">
|
||||
<div class="shadow sm:rounded-md sm:overflow-hidden">
|
||||
@ -275,12 +275,16 @@
|
||||
on:click={() => {
|
||||
modal_open = true;
|
||||
}}
|
||||
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>
|
||||
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
|
||||
>
|
||||
<button
|
||||
on:click={() => {
|
||||
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:">{$_('cancel')}</button>
|
||||
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
|
||||
>
|
||||
{/if}
|
||||
{#if !delete_triggered}
|
||||
<button
|
||||
@ -288,7 +292,9 @@
|
||||
delete_triggered = true;
|
||||
}}
|
||||
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:">{$_('delete-profile')}</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:"
|
||||
>{$_("delete-profile")}</button
|
||||
>
|
||||
{/if}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@ -55,7 +55,6 @@
|
||||
value={$table.getState().pagination.pageSize}
|
||||
on:input={(e) => {
|
||||
const ps = Number(e.target.value);
|
||||
console.log({ ps });
|
||||
$table.setPageSize(Number(e.target.value));
|
||||
}}
|
||||
>
|
||||
|
||||
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