parent
e0356fa360
commit
b1e9f955b0
119
src/components/ImportRunnerModal.svelte
Normal file
119
src/components/ImportRunnerModal.svelte
Normal file
@ -0,0 +1,119 @@
|
||||
<script>
|
||||
import { _ } from "svelte-i18n";
|
||||
import { clickOutside } from "./outsideclick";
|
||||
import { focusTrap } from "svelte-focus-trap";
|
||||
import isEmail from "validator/es/lib/isEmail";
|
||||
import isMobilePhone from "validator/es/lib/isMobilePhone";
|
||||
import Toastify from "toastify-js";
|
||||
export let import_modal_open;
|
||||
$: phone_input_value = "";
|
||||
$: email_input_value = "";
|
||||
$: lastname_input_value = "";
|
||||
$: firstname_input_value = "";
|
||||
$: isPhoneValidOrEmpty =
|
||||
isMobilePhone(
|
||||
phone_input_value
|
||||
.replaceAll("(", "")
|
||||
.replaceAll(")", "")
|
||||
.replaceAll("-", "")
|
||||
.replaceAll(" ", "")
|
||||
) || phone_input_value === "";
|
||||
$: isEmailValidOrEmpty =
|
||||
isEmail(email_input_value) || email_input_value === "";
|
||||
$: isLastnameValid = lastname_input_value.trim().length !== 0;
|
||||
$: isFirstnameValid = firstname_input_value.trim().length !== 0;
|
||||
$: createbtnenabled =
|
||||
isFirstnameValid &&
|
||||
isLastnameValid &&
|
||||
isEmailValidOrEmpty &&
|
||||
isPhoneValidOrEmpty;
|
||||
(() => {
|
||||
document.onkeydown = (e) => {
|
||||
e = e || window.event;
|
||||
if (e.key === "Escape") {
|
||||
import_modal_open = false;
|
||||
}
|
||||
if (e.keyCode === 13) {
|
||||
if (createbtnenabled === true) {
|
||||
createbtnenabled = false;
|
||||
submit();
|
||||
}
|
||||
}
|
||||
};
|
||||
})();
|
||||
let files;
|
||||
$: {
|
||||
if (files) {
|
||||
const reader = new FileReader();
|
||||
reader.addEventListener("load", (e) => {
|
||||
const text = e.target.result;
|
||||
parsedtext = text;
|
||||
});
|
||||
reader.readAsText(files[0]);
|
||||
}
|
||||
}
|
||||
let parsedtext = "";
|
||||
</script>
|
||||
|
||||
{#if import_modal_open}
|
||||
<div
|
||||
class="fixed z-10 inset-0 overflow-y-auto"
|
||||
use:focusTrap
|
||||
use:clickOutside
|
||||
on:click_outside={() => {
|
||||
import_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">
|
||||
<div class="fixed inset-0 transition-opacity" aria-hidden="true">
|
||||
<div
|
||||
class="absolute inset-0 bg-gray-500 opacity-75"
|
||||
data-id="modal_backdrop" />
|
||||
</div>
|
||||
<span
|
||||
class="hidden sm:inline-block sm:align-middle sm:h-screen"
|
||||
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">
|
||||
<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
|
||||
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" />
|
||||
<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>
|
||||
</div>
|
||||
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
|
||||
<h3 class="text-lg leading-6 font-medium text-gray-900">
|
||||
Runner Import
|
||||
</h3>
|
||||
<div class="mt-2 mb-6">
|
||||
<p class="text-sm text-gray-500">
|
||||
Please provide the required csv/ xlsx file
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-2 mb-6">
|
||||
<p class="text-sm text-gray-500">{parsedtext}</p>
|
||||
</div>
|
||||
<!-- component -->
|
||||
<div class="overflow-hidden relative w-64 mt-4 mb-4">
|
||||
<input bind:files type="file" />
|
||||
|
||||
<!-- <RunnerFileUpload /> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
75
src/components/RunnerFileUpload.svelte
Normal file
75
src/components/RunnerFileUpload.svelte
Normal file
@ -0,0 +1,75 @@
|
||||
<script>
|
||||
import "filepond/dist/filepond.css";
|
||||
import FilePond from "svelte-filepond";
|
||||
import { _ } from "svelte-i18n";
|
||||
let pond;
|
||||
// pond.getFiles() will return the active files
|
||||
// the name to use for the internal file input
|
||||
let name = "filepond";
|
||||
function handleInit() {
|
||||
// console.log("FilePond has initialised");
|
||||
}
|
||||
function handleAddFile(err, fileItem) {
|
||||
// console.log("A file has been added", fileItem);
|
||||
}
|
||||
const labelInvalidField = $_("filepond__field-contains-invalid-files");
|
||||
const labelFileWaitingForSize = $_("filepond__waiting-for-size");
|
||||
const labelFileSizeNotAvailable = $_("filepond__size-not-available");
|
||||
const labelFileLoading = $_("filepond__loading");
|
||||
const labelFileLoadError = $_("filepond__error-during-load");
|
||||
const labelFileProcessing = $_("filepond__uploading");
|
||||
const labelFileProcessingComplete = $_("filepond__upload-complete");
|
||||
const labelFileProcessingAborted = $_("filepond__upload-cancelled");
|
||||
const labelFileProcessingError = $_("filepond__error-during-upload");
|
||||
const labelFileProcessingRevertError = $_("filepond__error-during-revert");
|
||||
const labelFileRemoveError = $_("filepond__error-during-remove");
|
||||
const labelTapToCancel = $_("filepond__tap-to-cancel");
|
||||
const labelTapToRetry = $_("filepond__tap-to-retry");
|
||||
const labelTapToUndo = $_("filepond__tap-to-undo");
|
||||
const labelButtonRemoveItem = $_("filepond__remove");
|
||||
const labelButtonAbortItemLoad = $_("filepond__abort");
|
||||
const labelButtonRetryItemLoad = $_("filepond__retry");
|
||||
const labelButtonAbortItemProcessing = $_("filepond__cancel");
|
||||
const labelButtonUndoItemProcessing = $_("filepond__undo");
|
||||
const labelButtonRetryItemProcessing = $_("filepond__retry");
|
||||
const labelButtonProcessItem = $_("filepond__upload");
|
||||
const labelIdle =
|
||||
$_("drag-and-drop-your-files-or") +
|
||||
` <span class="filepond--label-action"> ` +
|
||||
$_("browse") +
|
||||
` </span>`;
|
||||
</script>
|
||||
|
||||
<div class="col-span-6">
|
||||
<FilePond
|
||||
class="col-span-6"
|
||||
bind:this={pond}
|
||||
{name}
|
||||
{labelFileWaitingForSize}
|
||||
{labelFileSizeNotAvailable}
|
||||
{labelFileLoading}
|
||||
{labelFileLoadError}
|
||||
{labelFileProcessing}
|
||||
{labelFileProcessingComplete}
|
||||
{labelFileProcessingAborted}
|
||||
{labelFileProcessingError}
|
||||
{labelFileProcessingRevertError}
|
||||
{labelFileRemoveError}
|
||||
{labelTapToCancel}
|
||||
{labelTapToRetry}
|
||||
{labelTapToUndo}
|
||||
{labelButtonRemoveItem}
|
||||
{labelButtonAbortItemLoad}
|
||||
{labelButtonRetryItemLoad}
|
||||
{labelButtonAbortItemProcessing}
|
||||
{labelButtonUndoItemProcessing}
|
||||
{labelButtonRetryItemProcessing}
|
||||
{labelButtonProcessItem}
|
||||
{labelIdle}
|
||||
{labelInvalidField}
|
||||
server="/api"
|
||||
allowMultiple={false}
|
||||
credits={false}
|
||||
oninit={handleInit}
|
||||
onaddfile={handleAddFile} />
|
||||
</div>
|
||||
@ -2,8 +2,10 @@
|
||||
import { _ } from "svelte-i18n";
|
||||
import store from "../store";
|
||||
import AddRunnerModal from "./AddRunnerModal.svelte";
|
||||
import ImportRunnerModal from "./ImportRunnerModal.svelte";
|
||||
import RunnersOverview from "./RunnersOverview.svelte";
|
||||
export let modal_open = false;
|
||||
export let import_modal_open = false;
|
||||
let current_runners = [];
|
||||
</script>
|
||||
|
||||
@ -19,6 +21,14 @@
|
||||
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">
|
||||
Läufer hinzufügen
|
||||
</button>
|
||||
<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">
|
||||
Läufer importieren
|
||||
</button>
|
||||
{/if}
|
||||
</span>
|
||||
<p class="mb-8 text-lg text-gray-500">läuft bei ihnen</p>
|
||||
@ -27,4 +37,5 @@
|
||||
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:CREATE')}
|
||||
<AddRunnerModal bind:current_runners bind:modal_open />
|
||||
<ImportRunnerModal bind:import_modal_open />
|
||||
{/if}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user