Skip to content

Commit ae481f5

Browse files
ChxGuillaumeChxGuillaume
authored
feat: redesign tweaks (#150)
1 parent 8e54c94 commit ae481f5

File tree

7 files changed

+105
-82
lines changed

7 files changed

+105
-82
lines changed

‎src/app.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
}
99

1010
.card-primary {
11-
@apply grid grid-cols-1 divide-y p-2 max-w-screen-lg border mx-4 border-base-content rounded-md text-sm text-base-content shadow
11+
@apply grid grid-cols-1 divide-y p-2 max-w-screen-lg mx-4 border-base-content rounded-md text-sm text-base-content shadow
1212
}
1313

1414
.card-pending {

‎src/lib/common/classes.ts‎

Lines changed: 51 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,72 @@
11
export class Device {
2-
public id: string = '';
3-
public name: string = '';
4-
public givenName: string = '';
5-
public lastSeen: string = '';
6-
public ipAddresses: string[] = []
7-
public forcedTags: string[] = []
8-
public validTags: string[] = []
9-
public invalidTags: string[] = []
10-
public user: { name: string } = { name: '' }
2+
public id: string = '';
3+
public name: string = '';
4+
public givenName: string = '';
5+
public lastSeen: string = '';
6+
public ipAddresses: string[] = [];
7+
public forcedTags: string[] = [];
8+
public validTags: string[] = [];
9+
public invalidTags: string[] = [];
10+
public user: { name: string } = { name: '' };
11+
public online?: boolean;
1112

12-
public constructor(init?: Partial<Device>) {
13-
Object.assign(this, init);
14-
}
13+
public constructor(init?: Partial<Device>) {
14+
Object.assign(this, init);
15+
}
1516
}
1617

1718
export class ACL {
18-
public groups: {[key: string]: [string]} = {}
19+
public groups: { [key: string]: [string] } = {};
1920

20-
public constructor(init?: Partial<Route>) {
21-
Object.assign(this, init);
22-
}
21+
public constructor(init?: Partial<Route>) {
22+
Object.assign(this, init);
23+
}
2324
}
2425

2526
export class Route {
26-
// current (hs 18+) method of handling a route
27-
advertised: boolean = true;
28-
prefix: string = "";
29-
enabled: boolean = false;
30-
id: number = 0;
27+
// current (hs 18+) method of handling a route
28+
advertised: boolean = true;
29+
prefix: string = '';
30+
enabled: boolean = false;
31+
id: number = 0;
3132

32-
public constructor(init?: Partial<Route>) {
33-
Object.assign(this, init);
34-
}
33+
public constructor(init?: Partial<Route>) {
34+
Object.assign(this, init);
35+
}
3536
}
3637

3738
export class APIKey {
38-
id: string = '';
39-
prefix: string = '';
40-
expiration: string = '';
41-
createdAt: string = '';
42-
lastSeen: string = '';
39+
id: string = '';
40+
prefix: string = '';
41+
expiration: string = '';
42+
createdAt: string = '';
43+
lastSeen: string = '';
4344

44-
public constructor(init?: Partial<Route>) {
45-
Object.assign(this, init);
46-
}
45+
public constructor(init?: Partial<Route>) {
46+
Object.assign(this, init);
47+
}
4748
}
4849

4950
export class PreAuthKey {
50-
public user: string = '';
51-
public id: string = '';
52-
public key: string = '';
53-
public createdAt: string = '';
54-
public expiration: string = '';
55-
public reusable: boolean = false;
56-
public ephemeral: boolean = false;
57-
public used: boolean = false;
51+
public user: string = '';
52+
public id: string = '';
53+
public key: string = '';
54+
public createdAt: string = '';
55+
public expiration: string = '';
56+
public reusable: boolean = false;
57+
public ephemeral: boolean = false;
58+
public used: boolean = false;
5859

59-
public constructor(init?: Partial<PreAuthKey>) {
60-
Object.assign(this, init);
61-
}
60+
public constructor(init?: Partial<PreAuthKey>) {
61+
Object.assign(this, init);
62+
}
6263
}
6364

6465
export class User {
65-
public id: string = '';
66-
public name: string = '';
67-
public createdAt: string = '';
68-
public constructor(init?: Partial<User>) {
69-
Object.assign(this, init);
70-
}
71-
}
66+
public id: string = '';
67+
public name: string = '';
68+
public createdAt: string = '';
69+
public constructor(init?: Partial<User>) {
70+
Object.assign(this, init);
71+
}
72+
}

‎src/lib/devices/DeviceCard.svelte‎

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,21 @@
2020
} else if (timeDifference < 86400) {
2121
return 'bg-warning';
2222
}
23+
24+
return 'bg-error';
25+
}
26+
27+
// return button colour based on online status
28+
function onlineBackground(online: boolean) {
29+
return online ? 'bg-success' : 'bg-error';
30+
}
31+
32+
function getBadgeColour(date: Date, online?: boolean) {
33+
if (online !== undefined) {
34+
return onlineBackground(online);
35+
}
36+
37+
return timeDifference(date);
2338
}
2439
2540
// returns time last seen in human readable format
@@ -57,11 +72,11 @@
5772
}
5873
</script>
5974

60-
<div class="card-primary">
61-
<div on:keypress on:click={() => (cardExpanded = !cardExpanded)} class="flex">
75+
<div class="card-primary bg-base-200">
76+
<div on:keypress on:click={() => (cardExpanded = !cardExpanded)} class="flex items-center">
6277
<span class="min-w-64 w-1/2 font-bold">
6378
{#if cardEditing == false}
64-
<span class="badge badge-xs tooltip {timeDifference(new Date(device.lastSeen))}" data-tip={timeSince(new Date(device.lastSeen))} /> {device.id}: {device.givenName}
79+
<span class="badge badge-xs tooltip {getBadgeColour(new Date(device.lastSeen), device.online)}" data-tip={timeSince(new Date(device.lastSeen))} /> {device.id}: {device.givenName}
6580
{/if}
6681
<RenameDevice bind:cardEditing {device} />
6782
</span>
@@ -85,7 +100,7 @@
85100
</div>
86101
{#if cardExpanded}
87102
<!-- we put a conditional on the outro transition so page changes do not trigger the animation -->
88-
<div in:slide|global out:slide|global={{ duration: cardExpanded ? 0 : 500 }} class="pt-2 pl-2">
103+
<div in:slide|global out:slide|global={{ duration: cardExpanded ? 0 : 500 }} class="mt-2 pt-2 pl-2">
89104
<div class="overflow-x-auto">
90105
<table class="table table-compact w-full">
91106
<tbody>

‎src/lib/devices/DeviceCard/DeviceTags.svelte‎

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -20,21 +20,23 @@
2020
}
2121
</script>
2222

23-
<span><NewDeviceTag {device}/></span>
23+
<div class="flex gap-1">
24+
<span><NewDeviceTag {device}/></span>
2425

25-
{#each device.forcedTags as tag}
26-
<span class="mb-1 mr-1 btn btn-xs btn-primary normal-case">{tag.replace("tag:","")}
27-
<!-- Cancel symbol -->
28-
<button on:click|stopPropagation={() => {updateTagsAction(tag)}}
29-
class="ml-1"
30-
><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
31-
<path stroke-linecap="round" stroke-linejoin="round" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
32-
</svg></button
33-
>
34-
</span>
35-
{/each}
26+
{#each device.forcedTags as tag}
27+
<span class="btn btn-xs btn-primary normal-case">{tag.replace("tag:","")}
28+
<!-- Cancel symbol -->
29+
<button on:click|stopPropagation={() => {updateTagsAction(tag)}}
30+
class="ml-1"
31+
><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
32+
<path stroke-linecap="round" stroke-linejoin="round" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
33+
</svg></button
34+
>
35+
</span>
36+
{/each}
3637

37-
{#each device.validTags as tag}
38-
<span class="mb-1 mr-1 btn btn-xs btn-secondary normal-case">{tag.replace("tag:","")}</span>
39-
{/each}
38+
{#each device.validTags as tag}
39+
<span class="mb-1 mr-1 btn btn-xs btn-secondary normal-case">{tag.replace("tag:","")}</span>
40+
{/each}
41+
</div>
4042

‎src/lib/users/UserCard.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
let cardExpanded = false;
1212
</script>
1313

14-
<div in:fade|global class="card-primary">
14+
<div in:fade|global class="card-primary bg-base-200">
1515
<div on:keypress on:click={() => (cardExpanded = !cardExpanded)} class="flex justify-between">
1616
<div>
1717
<EditUser {user} />
@@ -34,7 +34,7 @@
3434
</div>
3535
{#if cardExpanded}
3636
<!-- we put a conditional on the outro transition so page changes do not trigger the animation -->
37-
<div in:slide|global out:slide|global={{ duration: cardExpanded ? 0 : 500 }} class="pt-2 pl-2">
37+
<div in:slide|global out:slide|global={{ duration: cardExpanded ? 0 : 500 }} class="mt-2 pt-2 pl-2">
3838
<div class="overflow-x-auto">
3939
<table class="table table-compact w-full">
4040
<tbody>

‎src/routes/devices.html/+page.svelte‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -64,11 +64,13 @@
6464

6565
<CreateDevice bind:newDeviceCardVisible bind:newDeviceKey />
6666

67-
{#each $deviceStore as device}
68-
{#if $deviceFilterStore.includes(device)}
69-
<DeviceCard {device} />
70-
{/if}
71-
{/each}
67+
<div class="flex flex-col gap-2">
68+
{#each $deviceStore as device}
69+
{#if $deviceFilterStore.includes(device)}
70+
<DeviceCard {device} />
71+
{/if}
72+
{/each}
73+
</div>
7274
{/if}
7375
{#if $apiTestStore === 'failed'}
7476
<div in:fade|global class="max-w-lg mx-auto p-4 border-4 text-sm text-base-content shadow-lg text-center">

‎src/routes/users.html/+page.svelte‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -52,11 +52,14 @@
5252
>
5353
</table>
5454
<CreateUser bind:newUserCardVisible />
55-
{#each $userStore as user}
56-
{#if $userFilterStore.includes(user)}
57-
<UserCard {user} />
58-
{/if}
59-
{/each}
55+
56+
<div class="flex flex-col gap-2">
57+
{#each $userStore as user}
58+
{#if $userFilterStore.includes(user)}
59+
<UserCard {user} />
60+
{/if}
61+
{/each}
62+
</div>
6063
{/if}
6164
{#if $apiTestStore === 'failed'}
6265
<div in:fade|global class="max-w-lg mx-auto p-4 border-4 text-sm text-base-content shadow-lg text-center">

0 commit comments

Comments
 (0)