Skip to content

Commit fabf940

Browse files
zleyyijzleyyij
authored
Merge pull request #81 from K97i/v2-gpu
Add GPU modal
2 parents e396de2 + a260f00 commit fabf940

3 files changed

Lines changed: 104 additions & 62 deletions

File tree

‎new/apps/web/src/lib/common/constants.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
const bytesToMegabytes: number = 1048576;
2+
3+
export {
4+
bytesToMegabytes,
5+
}

‎new/apps/web/src/lib/components/Widgets.svelte‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,9 @@
2626
bios={report.Hardware.BiosInfo}
2727
/>
2828
<Ram ram={report.Hardware.Ram} pagefile={report.System.PageFile}/>
29+
<Gpu gpus={report.Hardware.Gpu} monitors={report.Hardware.Monitors} />
30+
2931
<!--
30-
<GPU rawGPUData={rawJSON.Hardware.Gpu} rawMonitorData={rawJSON.Hardware.Monitors} />
3132
<OS securityData={rawJSON.Security} basicinfoData={rawJSON.BasicInfo} />
3233
<NIC nicData={rawJSON.Network.Adapters} /> -->
3334
</div>

‎new/apps/web/src/lib/components/widgets/Gpu.svelte‎

Lines changed: 97 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,81 +1,117 @@
1-
<!-- NOT YET MIGRATED TO NEW WIDGET SYSTEM -->
21
<script lang="ts">
32
import Widget from '../../common/ModalWidget.svelte';
3+
import { bytesToMegabytes } from '$lib/common/constants';
44
5-
export let rawGPUData;
6-
export let rawMonitorData;
5+
interface GpuInfo {
6+
AdapterRAM: number;
7+
CurrentBitsPerPixel: number;
8+
CurrentHorizontalResolution: number;
9+
CurrentRefreshRate: number;
10+
CurrentVerticalResolution: number;
11+
Description: string;
12+
DriverDate: string;
13+
DriverVersion: string;
14+
}
715
8-
const gpuData: Record<any, Record<string, any>> = rawGPUData;
9-
const monitorData: Record<any, Record<string, any>> = rawMonitorData;
16+
interface MonitorInfo {
17+
Source: string;
18+
Name: string;
19+
ChipType: string;
20+
DedicatedMemory: string;
21+
MonitorModel: string;
22+
CurrentMode: string;
23+
ConnectionType: string;
24+
}
25+
26+
interface Props {
27+
gpus: Array<GpuInfo>;
28+
monitors: Array<MonitorInfo>;
29+
}
30+
31+
let {
32+
gpus,
33+
monitors
34+
}: Props = $props();
1035
</script>
1136

1237
<!-- GPU -->
1338

14-
<Widget title="GPU" modalId="gpu-modal">
15-
<div slot="values">
39+
<Widget title="GPU">
40+
{#snippet widgetContents()}
1641
<div class="widget-value">
17-
<div class="green">
18-
{#if !monitorData}
19-
{gpuData[0]['Description']}
42+
<span>
43+
{#if !monitors}
44+
{gpus[0]['Description']}
2045
{:else}
21-
{monitorData[0]['Name']}
46+
{monitors[0]['Name']}
2247
{/if}
23-
</div>
48+
</span>
2449
<div>Model</div>
2550
</div>
26-
</div>
51+
{/snippet}
2752

28-
<div slot="modal-body" class="modal-body">
29-
{#if !(gpuData == null)}
30-
<h5>GPU Info</h5>
31-
<table class="table">
32-
<thead>
33-
<tr>
34-
<th scope="col">Name</th>
35-
<th scope="col">VRAM</th>
36-
<th scope="col">Resolution</th>
37-
<th scope="col">Refresh Rate</th>
38-
</tr>
39-
</thead>
40-
<tbody>
41-
{#each Object.values(gpuData) as gpu}
53+
{#snippet modalContents()}
54+
<div class="modal-body">
55+
{#if gpus !== null}
56+
<h5>GPU Info</h5>
57+
<table class="table">
58+
<thead>
4259
<tr>
43-
<td>{gpu.Description}</td>
44-
<td>{gpu.AdapterRAM / 1048576} MB</td>
45-
<td
46-
>{gpu.CurrentHorizontalResolution} x {gpu.CurrentVerticalResolution}</td
47-
>
48-
<td>{gpu.CurrentRefreshRate} Hz</td>
60+
<th scope="col">Name</th>
61+
<th scope="col">VRAM</th>
62+
<th scope="col">Resolution</th>
63+
<th scope="col">Refresh Rate</th>
4964
</tr>
50-
{/each}
51-
</tbody>
52-
</table>
53-
{/if}
65+
</thead>
66+
<tbody>
67+
{#each Object.values(gpus) as gpu}
68+
<tr>
69+
<td>{gpu.Description}</td>
70+
<td>{gpu.AdapterRAM / bytesToMegabytes} MB</td>
71+
<td>{gpu.CurrentHorizontalResolution} x {gpu.CurrentVerticalResolution}</td>
72+
<td>{gpu.CurrentRefreshRate} Hz</td>
73+
</tr>
74+
{/each}
75+
</tbody>
76+
</table>
77+
{/if}
5478

55-
{#if !(monitorData == null)}
56-
<h5>Monitor Info</h5>
57-
<table class="table">
58-
<thead>
59-
<tr>
60-
<th scope="col">Name</th>
61-
<th scope="col">VRAM</th>
62-
<th scope="col">Mode</th>
63-
<th scope="col">Monitor</th>
64-
<th scope="col">Connection</th>
65-
</tr>
66-
</thead>
67-
<tbody>
68-
{#each Object.values(monitorData) as monitor}
79+
{#if monitors !== null}
80+
<h5>Monitor Info</h5>
81+
<table class="table">
82+
<thead>
6983
<tr>
70-
<td>{monitor.Name}</td>
71-
<td>{monitor.DedicatedMemory} MB</td>
72-
<td>{monitor.CurrentMode}</td>
73-
<td>{monitor.MonitorModel} Hz</td>
74-
<td>{monitor.ConnectionType}</td>
84+
<th scope="col">Name</th>
85+
<th scope="col">VRAM</th>
86+
<th scope="col">Mode</th>
87+
<th scope="col">Monitor</th>
88+
<th scope="col">Connection</th>
7589
</tr>
76-
{/each}
77-
</tbody>
78-
</table>
79-
{/if}
80-
</div>
90+
</thead>
91+
<tbody>
92+
{#each monitors as monitor}
93+
<tr>
94+
<td>{monitor.Name}</td>
95+
<td>{monitor.DedicatedMemory} MB</td>
96+
<td>{monitor.CurrentMode}</td>
97+
<td>{monitor.MonitorModel} Hz</td>
98+
<td>{monitor.ConnectionType}</td>
99+
</tr>
100+
{/each}
101+
</tbody>
102+
</table>
103+
{/if}
104+
</div>
105+
{/snippet}
81106
</Widget>
107+
108+
<style>
109+
span {
110+
color: var(--color-secondary-50);
111+
}
112+
113+
div {
114+
color: var(--color-surface-300);
115+
font-size: 13pt;
116+
}
117+
</style>

0 commit comments

Comments
 (0)