Skip to content

Commit

Permalink
Update ram page
Browse files Browse the repository at this point in the history
  • Loading branch information
@Levminer
Levminer committed Dec 14, 2023
1 parent 1482d9f commit daf02e6
Showing 1 changed file with 36 additions and 56 deletions.
92 changes: 36 additions & 56 deletions interface/pages/ram.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,12 @@
<div class="transparent-900 m-10 mx-auto w-11/12 rounded-xl sm:m-3 sm:w-full">
<div class="mx-10 flex flex-col gap-5 pb-10 pt-10">
<div class="flex w-full flex-row items-start justify-start gap-5">
<!-- ram info -->
<div class="transparent-800 w-3/5 rounded-xl p-10 text-left">
<div class="mb-5 flex items-baseline gap-3">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16">
<path
d="M1 3a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h4.586a1 1 0 0 0 .707-.293l.353-.353a.5.5 0 0 1 .708 0l.353.353a1 1 0 0 0 .707.293H15a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H1Zm.5 1h3a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-4a.5.5 0 0 1 .5-.5Zm5 0h3a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-4a.5.5 0 0 1 .5-.5Zm4.5.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-4ZM2 10v2H1v-2h1Zm2 0v2H3v-2h1Zm2 0v2H5v-2h1Zm3 0v2H8v-2h1Zm2 0v2h-1v-2h1Zm2 0v2h-1v-2h1Zm2 0v2h-1v-2h1Z"
/>
</svg>
<div class="transparent-900 m-10 mx-auto w-11/12 rounded-xl sm:w-full">
<div class="mx-10 flex gap-5 pt-10 sm:mx-3 sm:flex-wrap">
<div class="flex w-full flex-row items-start justify-start gap-5 sm:flex-wrap">
<!-- ram modules -->
<div class="transparent-800 w-3/5 rounded-xl p-8 sm:w-full sm:p-4">
<div class="mb-5 flex items-center gap-3">
<div class="transparent-900 flex aspect-square items-center justify-center rounded-lg p-3 sm:p-2">
<Memory width={24} height={24} />
</div>
<h2>RAM Modules</h2>
</div>
{#each $hardwareInfo.ram.info as { manufacturerName, configuredSpeed, configuredVoltage, size, bankLocator }}
Expand All @@ -21,17 +19,12 @@
{/each}
</div>

<!-- ram usage -->
<div class="transparent-800 w-2/5 rounded-xl p-10">
<div class="mb-5 flex items-baseline gap-3">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-motherboard" viewBox="0 0 16 16">
<path
d="M11.5 2a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5Zm2 0a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5Zm-10 8a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1h-6Zm0 2a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1h-6ZM5 3a1 1 0 0 0-1 1h-.5a.5.5 0 0 0 0 1H4v1h-.5a.5.5 0 0 0 0 1H4a1 1 0 0 0 1 1v.5a.5.5 0 0 0 1 0V8h1v.5a.5.5 0 0 0 1 0V8a1 1 0 0 0 1-1h.5a.5.5 0 0 0 0-1H9V5h.5a.5.5 0 0 0 0-1H9a1 1 0 0 0-1-1v-.5a.5.5 0 0 0-1 0V3H6v-.5a.5.5 0 0 0-1 0V3Zm0 1h3v3H5V4Zm6.5 7a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h2a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-2Z"
/>
<path
d="M1 2a2 2 0 0 1 2-2h11a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-2H.5a.5.5 0 0 1-.5-.5v-1A.5.5 0 0 1 .5 9H1V8H.5a.5.5 0 0 1-.5-.5v-1A.5.5 0 0 1 .5 6H1V5H.5a.5.5 0 0 1-.5-.5v-2A.5.5 0 0 1 .5 2H1Zm1 11a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v11Z"
/>
</svg>
<!-- ram layout -->
<div class="transparent-800 w-2/5 rounded-xl p-8 sm:w-full sm:p-4">
<div class="mb-5 flex items-center gap-3">
<div class="transparent-900 flex aspect-square items-center justify-center rounded-lg p-3 sm:p-2">
<Motherboard width={24} height={24} />
</div>
<h2>RAM Layout</h2>
</div>
{#each $hardwareInfo.ram.layout as { manufacturerName, partNumber, size, deviceLocator, bankLocator }}
Expand All @@ -51,27 +44,21 @@
{/each}
</div>
</div>
</div>

<div class="mx-10 flex justify-evenly gap-5 pb-10 pt-5 sm:mx-3 sm:flex-wrap">
<div class="flex w-full flex-row justify-start gap-5 sm:flex-wrap">
<!-- ram usage -->
<div class="transparent-800 w-1/2 rounded-xl p-10 text-left sm:w-full">
<div class="mb-5 flex items-baseline justify-between">
<div class="flex items-baseline gap-3">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"><path d="M3 3v18h18" /><path d="m19 9-5 5-4-4-3 3" /></svg
>
<h2>RAM usage</h2>
<div class="transparent-800 w-1/2 rounded-xl p-8 sm:w-full sm:p-4">
<div class="flex items-baseline justify-between">
<div class="mb-5 flex items-center gap-3">
<div class="transparent-900 flex aspect-square items-center justify-center rounded-lg p-3 sm:p-2">
<Memory width={24} height={24} />
</div>
<h2>RAM Usage</h2>
</div>
<div>
<h5 class="cursor-pointer" on:click={() => (minutes = !minutes)}>{minutes ? "Last 60 minutes" : "Last 60 seconds"}</h5>
<ToggleButton selected={minutes} on:click={() => (minutes = !minutes)} />
</div>
</div>
<div>
Expand All @@ -87,24 +74,16 @@
</div>

<!-- virtual ram usage -->
<div class="transparent-800 w-1/2 rounded-xl p-10 text-left sm:w-full">
<div class="mb-5 flex items-baseline justify-between">
<div class="flex items-baseline gap-3">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"><path d="M3 3v18h18" /><path d="m19 9-5 5-4-4-3 3" /></svg
>
<h2>Virtual RAM usage</h2>
<div class="transparent-800 w-1/2 rounded-xl p-8 sm:w-full sm:p-4">
<div class="flex items-baseline justify-between">
<div class="mb-5 flex items-center gap-3">
<div class="transparent-900 flex aspect-square items-center justify-center rounded-lg p-3 sm:p-2">
<HardDrive />
</div>
<h2>Virtual RAM Usage</h2>
</div>
<div>
<h5 class="cursor-pointer" on:click={() => (minutes = !minutes)}>{minutes ? "Last 60 minutes" : "Last 60 seconds"}</h5>
<ToggleButton selected={minutes} on:click={() => (minutes = !minutes)} />
</div>
</div>
<div>
Expand All @@ -123,11 +102,12 @@
</div>

<script lang="ts">
import TemperatureChart from "../components/multiLineChart.svelte"
import LineChart from "../components/lineChart.svelte"
import UsageChart from "../components/usageChart.svelte"
import { hardwareStatistics } from "../stores/hardwareStatistics"
import { hardwareInfo } from "../stores/hardwareInfo"
import ToggleButton from "@components/toggleButton.svelte"
import { Memory, Motherboard } from "svelte-bootstrap-icons"
import { HardDrive, LineChart } from "lucide-svelte"
let minutes = false
</script>

0 comments on commit daf02e6

Please sign in to comment.