added copyvolumefield

This commit is contained in:
Shivam Deepak Chaudhary 2023-02-11 09:24:08 +00:00
parent ce70252a69
commit b4886e604e
2 changed files with 48 additions and 12 deletions

View File

@ -0,0 +1,29 @@
<script>
import { addToast } from '$lib/store';
export let value = "";
let isHttps = window.location.protocol === 'https:';
function copyToClipboard() {
if (isHttps && navigator.clipboard) {
navigator.clipboard.writeText(value);
addToast({
message: 'Copied to clipboard.',
type: 'success'
});
}
}
</script>
<div class="w-full relative">
<p class="text-white p-5">{value}</p>
<div class="absolute top-0 right-0 flex justify-center items-center h-full cursor-pointer text-stone-600 mr-3">
<div on:click={copyToClipboard}>
<svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="stroke-gray-700 hover:stroke-white">
<path fill="none" stroke-width="2" d="M9,15 L17,15 L9,15 Z M9,11 L19,11 L9,11 Z M9,7 L13,7 L9,7 Z M16,1 L16,7 L22,7 M6,5 L2,5 L2,23 L18,23 L18,19 M22,19 L6,19 L6,1 L17,1 L22,6 L22,19 L22,19 Z"/>
</svg>
</div>
</div>
</div>

View File

@ -7,12 +7,23 @@
import { del, post } from '$lib/api';
import { page } from '$app/stores';
import { createEventDispatcher } from 'svelte';
import { browser } from '$app/env';
import { t } from '$lib/translations';
import { errorNotification } from '$lib/common';
import { addToast } from '$lib/store';
import CopyVolumeField from '$lib/components/CopyVolumeField.svelte';
const { id } = $page.params;
let isHttps = browser && window.location.protocol === 'https:';
export let value: string;
function copyToClipboard() {
if (isHttps && navigator.clipboard) {
navigator.clipboard.writeText(value);
addToast({
message: 'Copied to clipboard.',
type: 'success'
});
}
}
const dispatch = createEventDispatcher();
async function saveStorage(newStorage = false) {
try {
@ -69,18 +80,14 @@
<div class="flex gap-4 pb-2" class:pt-8={isNew}>
{#if storage.applicationId}
{#if storage.oldPath}
<input
disabled
readonly
class="w-full"
<CopyVolumeField
value="{storage.applicationId}{storage.path.replace(/\//gi, '-').replace('-app', '')}"
/>
/>
{:else}
<input
disabled
readonly
class="w-full"
value="{storage.applicationId}{storage.path.replace(/\//gi, '-')}"
<CopyVolumeField
value="{storage.applicationId}{storage.path.replace(/\//gi, '-').replace('-app', '')}"
/>
{/if}
{/if}