|
|
|
|
@ -36,12 +36,8 @@
|
|
|
|
|
value['questions'] = element["questions"];
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
value.questions.forEach(question => {
|
|
|
|
|
value['answers'].push({'name': question.name, 'option': question.options[0]['name']});
|
|
|
|
|
});
|
|
|
|
|
update_price(value);
|
|
|
|
|
update_example(value);
|
|
|
|
|
console.log(value.example);
|
|
|
|
|
});
|
|
|
|
|
} catch(msg) {
|
|
|
|
|
prefill = true;
|
|
|
|
|
@ -109,18 +105,22 @@
|
|
|
|
|
"answers": value["answers"]
|
|
|
|
|
})
|
|
|
|
|
});
|
|
|
|
|
console.log(data);
|
|
|
|
|
console.log(JSON.stringify(data));
|
|
|
|
|
|
|
|
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
|
|
|
urlParams.set("commissions", JSON.stringify(data));
|
|
|
|
|
|
|
|
|
|
let url = window.location.origin + window.location.pathname + "?" + urlParams.toString();
|
|
|
|
|
|
|
|
|
|
navigator.clipboard.writeText(url);
|
|
|
|
|
window.history.replaceState( {} , document.title, url);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function save_clipboard() {
|
|
|
|
|
save();
|
|
|
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
|
|
|
let url = window.location.origin + window.location.pathname + "?" + urlParams.toString();
|
|
|
|
|
navigator.clipboard.writeText(url);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function update_commission_type(commission: Commission) {
|
|
|
|
|
types.forEach(element => {
|
|
|
|
|
if(element["name"] == commission.type) {
|
|
|
|
|
@ -138,9 +138,11 @@
|
|
|
|
|
function update_price(commission: Commission) {
|
|
|
|
|
commission.price = 0;
|
|
|
|
|
|
|
|
|
|
for (let index = 0; index < commission.questions.length; index++) {
|
|
|
|
|
const question = commission.questions[index];
|
|
|
|
|
for (let index = 0; index < commission.answers.length; index++) {
|
|
|
|
|
const answer = commission.answers[index];
|
|
|
|
|
const question = commission.questions.filter(value => {
|
|
|
|
|
return value['name'] == answer['name'];
|
|
|
|
|
})[0];
|
|
|
|
|
|
|
|
|
|
question['options'].forEach(value => {
|
|
|
|
|
if(value['name'] == answer['option']) {
|
|
|
|
|
@ -156,7 +158,28 @@
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
async function load() {
|
|
|
|
|
window.location.href = await navigator.clipboard.readText();
|
|
|
|
|
let url = await navigator.clipboard.readText();
|
|
|
|
|
window.history.replaceState( {} , document.title, url);
|
|
|
|
|
|
|
|
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
|
|
|
urlParams.forEach((value, key) => {
|
|
|
|
|
if(key == "commissions") {
|
|
|
|
|
try {
|
|
|
|
|
commissions = JSON.parse(value);
|
|
|
|
|
commissions.forEach(value => {
|
|
|
|
|
types.forEach(element => {
|
|
|
|
|
if(element["name"] == value.type) {
|
|
|
|
|
value['questions'] = element["questions"];
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
update_price(value);
|
|
|
|
|
update_example(value);
|
|
|
|
|
});
|
|
|
|
|
} catch(msg) {
|
|
|
|
|
error = "The selected preset link failed to load. It may be from an old version of the commission picker."
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function createNew() {
|
|
|
|
|
@ -182,6 +205,12 @@
|
|
|
|
|
save();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function clear() {
|
|
|
|
|
commissions = [];
|
|
|
|
|
total = 0;
|
|
|
|
|
save();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
onMount(() => {
|
|
|
|
|
setup();
|
|
|
|
|
});
|
|
|
|
|
@ -197,19 +226,16 @@
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<section class="container bg-slate-800 rounded-lg shadow-lg p-5 flex flex-col w-full gap-10">
|
|
|
|
|
<div class="flex justify-between -ml-2 -mr-2">
|
|
|
|
|
<div class="w-full flex gap-3">
|
|
|
|
|
<span><Button on:click={createNew}>➕ Add Commission</Button></span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="w-full flex justify-end gap-3">
|
|
|
|
|
<span><Button on:click={save}>💾 Save to Clipboard</Button></span>
|
|
|
|
|
<span><Button on:click={load}>📋 Load from Clipboard</Button></span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex flex-col lg:flex-row gap-5 lg:gap-1 flex-wrap -ml-2 -mr-2">
|
|
|
|
|
<span class="flex-grow"><Button added_classes="w-full" on:click={createNew}>➕ Add Commission</Button></span>
|
|
|
|
|
<span><Button on:click={save_clipboard}>💾 Save to Clipboard</Button></span>
|
|
|
|
|
<span><Button on:click={load}>📋 Load from Clipboard</Button></span>
|
|
|
|
|
<span><Button on:click={clear}>❌ Clear</Button></span>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="flex items-center justify-between">
|
|
|
|
|
<div class="flex items-center gap-5">
|
|
|
|
|
<h3 class="text-6xl">🧮</h3>
|
|
|
|
|
<h3 class="hidden lg:block text-6xl">🧮</h3>
|
|
|
|
|
<div class="flex flex-col gap-2">
|
|
|
|
|
<div class="flex gap-3 items-center">
|
|
|
|
|
<p class="font-bold bg-green-500 py-1 px-5 rounded-lg text-lg">${total}</p>
|
|
|
|
|
@ -222,33 +248,33 @@
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
{#if error}
|
|
|
|
|
<section class="bg-slate-800 text-yellow-500 font-bold rounded-lg shadow-lg p-5 flex flex-col gap-5">
|
|
|
|
|
<section class="bg-slate-800 text-yellow-500 font-bold rounded-lg shadow-lg p-5 flex flex-col gap-5 text-center lg:text-left">
|
|
|
|
|
⚠️ {error}
|
|
|
|
|
</section>
|
|
|
|
|
{/if}
|
|
|
|
|
|
|
|
|
|
{#if commissions.length == 0}
|
|
|
|
|
<section class="bg-slate-800 rounded-lg shadow-lg p-5 flex justify-between items-center w-full gap-5">
|
|
|
|
|
<div class="flex flex-col">
|
|
|
|
|
<section class="bg-slate-800 rounded-lg shadow-lg p-5 flex flex-col lg:flex-row justify-between items-center w-full gap-5">
|
|
|
|
|
<div class="flex flex-col text-center lg:text-left">
|
|
|
|
|
<p class="text-green-500 font-bold text-xl">It's alone here :'(</p>
|
|
|
|
|
<p>You currently have no commissions selected. Add one --></p>
|
|
|
|
|
<p>You currently have no commissions selected. <span class="hidden lg:block">Add one --></span></p>
|
|
|
|
|
</div>
|
|
|
|
|
<span><Button on:click={createNew}>➕ Add Commission</Button></span>
|
|
|
|
|
</section>
|
|
|
|
|
{/if}
|
|
|
|
|
|
|
|
|
|
{#if commissions.length > 10}
|
|
|
|
|
<section class="bg-slate-800 rounded-lg shadow-lg p-5 flex items-end w-full gap-5">
|
|
|
|
|
<section class="bg-slate-800 rounded-lg shadow-lg p-5 flex items-end w-full gap-5 text-center lg:text-left">
|
|
|
|
|
<p><span class="text-green-500 font-bold text-xl">Calm down Elon Musk!</span>
|
|
|
|
|
Your list is becoming quite long. Loading and saving long lists is not supported and may cause considerable lag or result in loss of data.</p>
|
|
|
|
|
</section>
|
|
|
|
|
{/if}
|
|
|
|
|
|
|
|
|
|
{#each [...commissions].reverse() as commission}
|
|
|
|
|
<section class="flex gap-5">
|
|
|
|
|
<div class="w-3/5">
|
|
|
|
|
<section class="flex flex-col lg:flex-row gap-5">
|
|
|
|
|
<div class="w-full lg:w-3/5">
|
|
|
|
|
<div class="bg-slate-800 rounded-lg shadow-lg p-5 flex flex-col gap-5">
|
|
|
|
|
<div class="flex justify-between">
|
|
|
|
|
<div class="flex justify-between flex-col lg:flex-row gap-5 lg:gap-0">
|
|
|
|
|
<h3 class="text-xl font-bold flex gap-5">{commission.name}<p class="bg-green-500 py-1 text-sm px-5 rounded-lg">${commission.price}</p></h3>
|
|
|
|
|
<span>
|
|
|
|
|
<Button on:click={() => {copy(commission)}}>⤴️</Button>
|
|
|
|
|
@ -259,7 +285,7 @@
|
|
|
|
|
<form class="flex flex-col gap-10" on:change={() => {update_example(commission)}}>
|
|
|
|
|
<div class="flex flex-col gap-1">
|
|
|
|
|
<label for={commission.type}>Type of commission</label>
|
|
|
|
|
<select class="bg-slate-600 p-2 rounded-lg" bind:value={commission.type} on:change={() => {update_commission_type(commission)}}>
|
|
|
|
|
<select class="bg-slate-600 p-2 rounded-lg hover:bg-slate-500 duration-300" bind:value={commission.type} on:change={() => {update_commission_type(commission)}}>
|
|
|
|
|
{#each types as question}
|
|
|
|
|
<option value={question.name}>{question.name}</option>
|
|
|
|
|
{/each}
|
|
|
|
|
@ -267,20 +293,41 @@
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{#each commission.questions as question, key}
|
|
|
|
|
<div class="flex flex-col gap-1">
|
|
|
|
|
<label for={commission.answers[key]['option']}>{question.name}</label>
|
|
|
|
|
<select class="bg-slate-600 p-2 rounded-lg" bind:value={commission.answers[key]['option']} on:change={() => {update_price(commission)}}>
|
|
|
|
|
{#each question.options as option}
|
|
|
|
|
<option value={option.name}>{option.name} | ${option.price}</option>
|
|
|
|
|
{#if question.multiple}
|
|
|
|
|
<div class="flex flex-col gap-1">
|
|
|
|
|
<label for={commission.answers[key]['option']}>{question.name}</label>
|
|
|
|
|
{#each commission.answers.filter(value => { return value['name'] == question.name; }) as answer, key}
|
|
|
|
|
<div class="flex gap-1">
|
|
|
|
|
<select class="flex-grow bg-slate-600 p-2 rounded-lg hover:bg-slate-500 duration-300" bind:value={answer['option']} on:change={() => {update_price(commission)}}>
|
|
|
|
|
{#each question.options as option}
|
|
|
|
|
<option value={option.name}>{option.name} | ${option.price}</option>
|
|
|
|
|
{/each}
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
{/each}
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex gap-1 w-full items-stretch">
|
|
|
|
|
<button type="none" class="w-full bg-slate-600 p-2 rounded-lg hover:bg-slate-500 duration-300" on:click|preventDefault={() => {commission.answers.push({'name': question['name'], 'option': question.options[0]['name']}); commission.answers = commission.answers;}}>Add</button>
|
|
|
|
|
{#if commission.answers.filter(value => { return value['name'] == question.name; }).length > 1}
|
|
|
|
|
<button type="none" class="w-full bg-slate-600 p-2 rounded-lg hover:bg-slate-500 duration-300" on:click|preventDefault={() => {commission.answers.pop(); commission.answers = commission.answers; }}>Remove</button>
|
|
|
|
|
{/if}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
{:else}
|
|
|
|
|
<div class="flex flex-col gap-1">
|
|
|
|
|
<label for={commission.answers[key]['option']}>{question.name}</label>
|
|
|
|
|
<select class="bg-slate-600 p-2 rounded-lg hover:bg-slate-500 duration-300" bind:value={commission.answers[key]['option']} on:change={() => {update_price(commission)}}>
|
|
|
|
|
{#each question.options as option}
|
|
|
|
|
<option value={option.name}>{option.name} | ${option.price}</option>
|
|
|
|
|
{/each}
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
{/if}
|
|
|
|
|
{/each}
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="w-2/5">
|
|
|
|
|
<div class="w-full lg:w-2/5">
|
|
|
|
|
{#if commission.example != ""}
|
|
|
|
|
<div class="relative bg-black bg-opacity-50 rounded-xl shadow-xl">
|
|
|
|
|
<p class="xl:block hidden absolute top-0 right-0 text-right -rotate-12 font-bold text-4xl -mb-40 -mr-40">
|
|
|
|
|
|
Midnight
Mid (Pascal)