Ecosystem/xmr-remote-nodes
1
0
Fork 0
mirror of https://github.com/ditatompel/xmr-remote-nodes.git synced 2024-11-16 17:07:36 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Create auto refresh action as a component

Browse source
This commit is contained in:
ditatompel 2024-05-08 00:38:10 +07:00
parent cda024ca6f
commit bc90c8bf3c
No known key found for this signature in database
GPG key ID: 31D3D06D77950979
7 changed files with 218 additions and 230 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

126
2 Normal file
View file

@ -0,0 +1,126 @@
<script>
import { DataHandler } from '@vincjo/datatables/remote';
import { format, formatDistance } from 'date-fns';
import { loadData } from './api-handler';
import { onMount } from 'svelte';
import {
DtSrThSort,
DtSrThFilter,
DtSrRowCount,
DtSrAutoRefresh
} from '$lib/components/datatables/server';
const handler = new DataHandler([], { rowsPerPage: 1000, totalRows: 0 });
let rows = handler.getRows();
/** @type {string | number} */
let filterState = -1;
/** @type {string | number} */
let filterEnabled = -1;
onMount(() => {
handler.onChange((state) => loadData(state));
handler.invalidate();
});
</script>
<div class="mb-4">
<h1 class="h2 font-extrabold dark:text-white">Crons</h1>
</div>
<div class="dashboard-card">
<div class="flex justify-between">
<div class="invisible flex place-items-center md:visible">
<DtSrAutoRefresh {handler} />
</div>
<div class="flex place-items-center">
<button
id="reloadDt"
name="reloadDt"
class="variant-filled-primary btn"
on:click={() => handler.invalidate()}
>
>Reload</button
>
</div>
</div>
<div class="my-2 overflow-x-auto">
<table class="table table-hover table-compact w-full table-auto">
<thead>
<tr>
<DtSrThSort {handler} orderBy="id">ID</DtSrThSort>
<th>Title</th>
<th>Slug</th>
<th>Description</th>
<DtSrThSort {handler} orderBy="run_every">Run Every</DtSrThSort>
<DtSrThSort {handler} orderBy="last_run">Last Run</DtSrThSort>
<DtSrThSort {handler} orderBy="next_run">Next Run</DtSrThSort>
<DtSrThSort {handler} orderBy="run_time">Run Time</DtSrThSort>
<th>State</th>
<th>Enabled</th>
</tr>
<tr>
<DtSrThFilter {handler} filterBy="title" placeholder="Title" colspan={3} />
<DtSrThFilter {handler} filterBy="description" placeholder="Description" colspan={5} />
<th>
<select
id="fState"
name="fState"
class="select variant-form-material"
bind:value={filterState}
on:change={() => {
handler.filter(filterState, 'cron_state');
}}
>
<option value={-1}>Any</option>
<option value={1}>Running</option>
<option value={0}>Idle</option>
</select>
</th>
<th>
<select
id="fEnabled"
name="fEnabled"
class="select variant-form-material"
bind:value={filterEnabled}
on:change={() => {
handler.filter(filterEnabled, 'is_enabled');
}}
>
<option value={-1}>Any</option>
<option value={1}>Yes</option>
<option value={0}>No</option>
</select>
</th>
</tr>
</thead>
<tbody>
{#each $rows as row (row.id)}
<tr>
<td>{row.id}</td>
<td>{row.title}</td>
<td>{row.slug}</td>
<td>{row.description}</td>
<td>{row.run_every}s</td>
<td>
{format(row.last_run * 1000, 'PP HH:mm')}<br />
{formatDistance(row.last_run * 1000, new Date(), { addSuffix: true })}
</td>
<td>
{format(row.next_run * 1000, 'PP HH:mm')}<br />
{formatDistance(row.next_run * 1000, new Date(), { addSuffix: true })}
</td>
<td>{row.run_time}</td>
<td>{row.cron_state ? 'RUNNING' : 'IDLE'}</td>
<td>{row.is_enabled ? 'ENABLED' : 'DISABLED'}</td>
</tr>
{/each}
</tbody>
</table>
</div>
<div class="flex justify-between mb-2">
<DtSrRowCount {handler} />
</div>
</div>

58
frontend/src/lib/components/datatables/server/DtSrAutoRefresh.svelte Normal file
View file

@ -0,0 +1,58 @@
<script lang="ts">
import { onDestroy } from 'svelte';
import type { DataHandler, Row } from '@vincjo/datatables/remote';
type T = $$Generic<Row>;
export let handler: DataHandler<T>;
let intervalId: number | undefined;
let intervalValue = 0;
const intervalOptions = [
{ value: 0, label: 'No' },
{ value: 5, label: '5s' },
{ value: 10, label: '10s' },
{ value: 30, label: '30s' },
{ value: 60, label: '1m' }
];
const startInterval = () => {
const seconds = intervalValue;
if (isNaN(seconds) || seconds < 0) {
return;
}
if (!intervalOptions.some((option) => option.value === seconds)) {
return;
}
if (intervalId) {
clearInterval(intervalId);
}
if (seconds > 0) {
handler.invalidate();
intervalId = setInterval(() => {
handler.invalidate();
}, seconds * 1000);
}
};
$: startInterval();
onDestroy(() => {
clearInterval(intervalId);
});
</script>
<label for="autoRefreshInterval">Auto Refresh:</label>
<select
class="select ml-2"
id="autoRefreshInterval"
bind:value={intervalValue}
on:change={startInterval}
>
{#each intervalOptions as { value, label }}
<option {value}>{label}</option>
{/each}
</select>

1
frontend/src/lib/components/datatables/server/index.js
View file

@ -4,3 +4,4 @@ export { default as DtSrRowsPerPage } from './DtSrRowsPerPage.svelte';
export { default as DtSrSearch } from './DtSrSearch.svelte';
export { default as DtSrThFilter } from './DtSrThFilter.svelte';
export { default as DtSrThSort } from './DtSrThSort.svelte';
export { default as DtSrAutoRefresh } from './DtSrAutoRefresh.svelte';

62
frontend/src/routes/(front)/remote-nodes/+page.svelte
View file

@ -2,13 +2,14 @@
import { DataHandler } from '@vincjo/datatables/remote';
import { format, formatDistance } from 'date-fns';
import { loadData, loadCountries } from './api-handler';
import { onMount, onDestroy } from 'svelte';
import { onMount } from 'svelte';
import {
DtSrRowsPerPage,
DtSrThSort,
DtSrThFilter,
DtSrRowCount,
DtSrPagination
DtSrPagination,
DtSrAutoRefresh
} from '$lib/components/datatables/server';
import {
HostPortCell,
@ -33,10 +34,6 @@
const handler = new DataHandler([], { rowsPerPage: 10, totalRows: 0 });
let rows = handler.getRows();
const reloadData = () => {
handler.invalidate();
};
/**
* Array containing network fees.
* For now, I use static data to reduce the amount of API calls.
@ -72,45 +69,6 @@
{}
);
/** @type {number | undefined} */
let intervalId;
let intervalValue = 0;
const intervalOptions = [
{ value: 0, label: 'No' },
{ value: 5, label: '5s' },
{ value: 10, label: '10s' },
{ value: 30, label: '30s' },
{ value: 60, label: '1m' }
];
const startInterval = () => {
const seconds = intervalValue;
if (isNaN(seconds) || seconds < 0) {
return;
}
if (!intervalOptions.some((option) => option.value === seconds)) {
return;
}
if (intervalId) {
clearInterval(intervalId);
}
if (seconds > 0) {
reloadData();
intervalId = setInterval(() => {
reloadData();
}, seconds * 1000);
}
};
$: startInterval(); // Automatically start the interval on change
onDestroy(() => {
clearInterval(intervalId); // Clear the interval when the component is destroyed
});
onMount(() => {
loadCountries().then((data) => {
countries = data;
@ -156,24 +114,14 @@
<div class="flex justify-between">
<DtSrRowsPerPage {handler} />
<div class="invisible flex place-items-center md:visible">
<label for="autoRefreshInterval">Auto Refresh:</label>
<select
class="select ml-2"
id="autoRefreshInterval"
bind:value={intervalValue}
on:change={startInterval}
>
{#each intervalOptions as { value, label }}
<option {value}>{label}</option>
{/each}
</select>
<DtSrAutoRefresh {handler} />
</div>
<div class="flex place-items-center">
<button
id="reloadDt"
name="reloadDt"
class="variant-filled-primary btn"
on:click={reloadData}>Reload</button
on:click={() => handler.invalidate()}>Reload</button
>
</div>
</div>

62
frontend/src/routes/(front)/remote-nodes/logs/+page.svelte
View file

@ -2,14 +2,15 @@
import { DataHandler } from '@vincjo/datatables/remote';
import { format, formatDistance } from 'date-fns';
import { loadData, loadNodeInfo } from './api-handler';
import { onMount, onDestroy } from 'svelte';
import { onMount } from 'svelte';
import { formatHashes, formatBytes } from '$lib/utils/strings';
import {
DtSrRowsPerPage,
DtSrThSort,
DtSrThFilter,
DtSrRowCount,
DtSrPagination
DtSrPagination,
DtSrAutoRefresh
} from '$lib/components/datatables/server';
/** @param {number | null } runtime */
@ -28,49 +29,6 @@
const handler = new DataHandler([], { rowsPerPage: 10, totalRows: 0 });
let rows = handler.getRows();
const reloadData = () => {
handler.invalidate();
};
/** @type {number | undefined} */
let intervalId;
let intervalValue = 0;
const intervalOptions = [
{ value: 0, label: 'No' },
{ value: 5, label: '5s' },
{ value: 10, label: '10s' },
{ value: 30, label: '30s' },
{ value: 60, label: '1m' }
];
const startInterval = () => {
const seconds = intervalValue;
if (isNaN(seconds) || seconds < 0) {
return;
}
if (!intervalOptions.some((option) => option.value === seconds)) {
return;
}
if (intervalId) {
clearInterval(intervalId);
}
if (seconds > 0) {
reloadData();
intervalId = setInterval(() => {
reloadData();
}, seconds * 1000);
}
};
$: startInterval();
onDestroy(() => {
clearInterval(intervalId);
});
onMount(() => {
pageId = new URLSearchParams(window.location.search).get('node_id') || '0';
loadNodeInfo(pageId).then((data) => {
@ -134,24 +92,14 @@
<div class="flex justify-between">
<DtSrRowsPerPage {handler} />
<div class="invisible flex place-items-center md:visible">
<label for="autoRefreshInterval">Auto Refresh:</label>
<select
class="select ml-2"
id="autoRefreshInterval"
bind:value={intervalValue}
on:change={startInterval}
>
{#each intervalOptions as { value, label }}
<option {value}>{label}</option>
{/each}
</select>
<DtSrAutoRefresh {handler} />
</div>
<div class="flex place-items-center">
<button
id="reloadDt"
name="reloadDt"
class="variant-filled-primary btn"
on:click={reloadData}>Reload</button
on:click={() => handler.invalidate()}>Reload</button
>
</div>
</div>

72
frontend/src/routes/(loggedin)/app/crons/+page.svelte
View file

@ -2,60 +2,22 @@
import { DataHandler } from '@vincjo/datatables/remote';
import { format, formatDistance } from 'date-fns';
import { loadData } from './api-handler';
import { onMount, onDestroy } from 'svelte';
import { DtSrThSort, DtSrThFilter, DtSrRowCount } from '$lib/components/datatables/server';
import { onMount } from 'svelte';
import {
DtSrThSort,
DtSrThFilter,
DtSrRowCount,
DtSrAutoRefresh
} from '$lib/components/datatables/server';
const handler = new DataHandler([], { rowsPerPage: 1000, totalRows: 0 });
let rows = handler.getRows();
const reloadData = () => {
handler.invalidate();
};
/** @type {string | number} */
let filterState = -1;
/** @type {string | number} */
let filterEnabled = -1;
/** @type {number | undefined} */
let intervalId;
let intervalValue = 0;
const intervalOptions = [
{ value: 0, label: 'No' },
{ value: 5, label: '5s' },
{ value: 10, label: '10s' },
{ value: 30, label: '30s' },
{ value: 60, label: '1m' }
];
const startInterval = () => {
const seconds = intervalValue;
if (isNaN(seconds) || seconds < 0) {
return;
}
if (!intervalOptions.some((option) => option.value === seconds)) {
return;
}
if (intervalId) {
clearInterval(intervalId);
}
if (seconds > 0) {
reloadData();
intervalId = setInterval(() => {
reloadData();
}, seconds * 1000);
}
};
$: startInterval(); // Automatically start the interval on change
onDestroy(() => {
clearInterval(intervalId); // Clear the interval when the component is destroyed
});
onMount(() => {
handler.onChange((state) => loadData(state));
handler.invalidate();
@ -69,24 +31,16 @@
<div class="dashboard-card">
<div class="flex justify-between">
<div class="invisible flex place-items-center md:visible">
<label for="autoRefreshInterval">Auto Refresh:</label>
<select
class="select ml-2"
id="autoRefreshInterval"
bind:value={intervalValue}
on:change={startInterval}
>
{#each intervalOptions as { value, label }}
<option {value}>{label}</option>
{/each}
</select>
<DtSrAutoRefresh {handler} />
</div>
<div class="flex place-items-center">
<button
id="reloadDt"
name="reloadDt"
class="variant-filled-primary btn"
on:click={reloadData}>Reload</button
on:click={() => handler.invalidate()}
>
>Reload</button
>
</div>
</div>
@ -117,7 +71,7 @@
bind:value={filterState}
on:change={() => {
handler.filter(filterState, 'cron_state');
reloadData();
handler.invalidate();
}}
>
<option value={-1}>Any</option>
@ -133,7 +87,7 @@
bind:value={filterEnabled}
on:change={() => {
handler.filter(filterEnabled, 'is_enabled');
reloadData();
handler.invalidate();
}}
>
<option value={-1}>Any</option>

67
frontend/src/routes/(loggedin)/app/prober/+page.svelte
View file

@ -2,14 +2,15 @@
import { DataHandler } from '@vincjo/datatables/remote';
import { format, formatDistance } from 'date-fns';
import { loadData, createProber, editProber, deleteProber } from './api-handler';
import { onMount, onDestroy } from 'svelte';
import { onMount } from 'svelte';
import { getModalStore, getToastStore } from '@skeletonlabs/skeleton';
import {
DtSrRowsPerPage,
DtSrThSort,
DtSrThFilter,
DtSrRowCount,
DtSrPagination
DtSrPagination,
DtSrAutoRefresh
} from '$lib/components/datatables/server';
const modalStore = getModalStore();
const toastStore = getToastStore();
@ -111,49 +112,6 @@
const handler = new DataHandler([], { rowsPerPage: 10, totalRows: 0 });
let rows = handler.getRows();
const reloadData = () => {
handler.invalidate();
};
/** @type {number | undefined} */
let intervalId;
let intervalValue = 0;
const intervalOptions = [
{ value: 0, label: 'No' },
{ value: 5, label: '5s' },
{ value: 10, label: '10s' },
{ value: 30, label: '30s' },
{ value: 60, label: '1m' }
];
const startInterval = () => {
const seconds = intervalValue;
if (isNaN(seconds) || seconds < 0) {
return;
}
if (!intervalOptions.some((option) => option.value === seconds)) {
return;
}
if (intervalId) {
clearInterval(intervalId);
}
if (seconds > 0) {
reloadData();
intervalId = setInterval(() => {
reloadData();
}, seconds * 1000);
}
};
$: startInterval(); // Automatically start the interval on change
onDestroy(() => {
clearInterval(intervalId); // Clear the interval when the component is destroyed
});
onMount(() => {
handler.onChange((state) => loadData(state));
handler.invalidate();
@ -169,20 +127,15 @@
<div class="flex justify-between">
<DtSrRowsPerPage {handler} />
<div class="invisible flex place-items-center md:visible">
<label for="autoRefreshInterval">Auto Refresh:</label>
<select
class="select ml-2"
id="autoRefreshInterval"
bind:value={intervalValue}
on:change={startInterval}
>
{#each intervalOptions as { value, label }}
<option {value}>{label}</option>
{/each}
</select>
<DtSrAutoRefresh {handler} />
</div>
<div class="flex place-items-center">
<button id="reloadDt" name="reloadDt" class="variant-filled-primary btn" on:click={reloadData}
<button
id="reloadDt"
name="reloadDt"
class="variant-filled-primary btn"
on:click={() => handler.invalidate()}
>
>Reload</button
>
</div>