mirror of
https://github.com/ClusterCockpit/cc-backend
synced 2024-12-26 05:19:05 +01:00
add workaround for clipboard button
This commit is contained in:
parent
bc89025924
commit
7b91a819be
@ -7,7 +7,7 @@
|
|||||||
-->
|
-->
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { Badge, Button, Icon } from "@sveltestrap/sveltestrap";
|
import { Badge, Button, Icon, Tooltip } from "@sveltestrap/sveltestrap";
|
||||||
import { scrambleNames, scramble } from "../utils.js";
|
import { scrambleNames, scramble } from "../utils.js";
|
||||||
import Tag from "../helper/Tag.svelte";
|
import Tag from "../helper/Tag.svelte";
|
||||||
import TagManagement from "../helper/TagManagement.svelte";
|
import TagManagement from "../helper/TagManagement.svelte";
|
||||||
@ -42,12 +42,30 @@
|
|||||||
let displayCheck = false;
|
let displayCheck = false;
|
||||||
function clipJobId(jid) {
|
function clipJobId(jid) {
|
||||||
displayCheck = true;
|
displayCheck = true;
|
||||||
navigator.clipboard
|
// Navigator clipboard api needs a secure context (https)
|
||||||
.writeText(jid)
|
if (navigator.clipboard && window.isSecureContext) {
|
||||||
.catch((reason) => console.error(reason));
|
navigator.clipboard
|
||||||
setTimeout(function () {
|
.writeText(jid)
|
||||||
displayCheck = false;
|
.catch((reason) => console.error(reason));
|
||||||
}, 1500);
|
} else {
|
||||||
|
// Workaround: Create, Fill, And Copy Content of Textarea
|
||||||
|
const textArea = document.createElement("textarea");
|
||||||
|
textArea.value = jid;
|
||||||
|
textArea.style.position = "absolute";
|
||||||
|
textArea.style.left = "-999999px";
|
||||||
|
document.body.prepend(textArea);
|
||||||
|
textArea.select();
|
||||||
|
try {
|
||||||
|
document.execCommand('copy');
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
|
} finally {
|
||||||
|
textArea.remove();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
setTimeout(function () {
|
||||||
|
displayCheck = false;
|
||||||
|
}, 1000);
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@ -58,13 +76,18 @@
|
|||||||
<a href="/monitoring/job/{job.id}" target="_blank">{job.jobId}</a>
|
<a href="/monitoring/job/{job.id}" target="_blank">{job.jobId}</a>
|
||||||
({job.cluster})
|
({job.cluster})
|
||||||
</span>
|
</span>
|
||||||
<Button outline color="secondary" size="sm" title="Copy JobID to Clipboard" on:click={clipJobId(job.jobId)} >
|
<Button id={`${job.cluster}-${job.jobId}-clipboard`} outline color="secondary" size="sm" on:click={clipJobId(job.jobId)} >
|
||||||
{#if displayCheck}
|
{#if displayCheck}
|
||||||
<Icon name="clipboard2-check-fill"/> Copied
|
<Icon name="clipboard2-check-fill"/>
|
||||||
{:else}
|
{:else}
|
||||||
<Icon name="clipboard2"/> Job ID
|
<Icon name="clipboard2"/>
|
||||||
{/if}
|
{/if}
|
||||||
</Button>
|
</Button>
|
||||||
|
<Tooltip
|
||||||
|
target={`${job.cluster}-${job.jobId}-clipboard`}
|
||||||
|
placement="right">
|
||||||
|
{ displayCheck ? 'Copied!' : 'Copy Job ID to Clipboard' }
|
||||||
|
</Tooltip>
|
||||||
</span>
|
</span>
|
||||||
{#if job.metaData?.jobName}
|
{#if job.metaData?.jobName}
|
||||||
{#if job.metaData?.jobName.length <= 25}
|
{#if job.metaData?.jobName.length <= 25}
|
||||||
|
Loading…
Reference in New Issue
Block a user