Setup rack when clicked show unit information w/ buttons to ssh & admin

src/components/Rack.svelte

@@ -0,0 +1,28 @@
+<script context="module" lang="ts">
+  import type { IRack } from '$interface/IRack';
+  import Rackunit from './Rackunit.svelte'
+  import * as rackData from '$lib/rack/data.json';
+
+  let rackunits: IRack[] = rackData.default;
+</script>
+
+<div class="cage">
+  {#each rackunits as unit}
+    <Rackunit {unit} />
+  {/each}
+</div>
+
+
+<style lang="scss">
+.cage {
+  width: 100%;
+  max-width: 500px;
+  height: 100%;
+  border: 2px solid black;
+
+  border-radius: 0.5rem;
+
+  margin-left: 2rem;
+  margin-right: 3rem;
+}
+</style>

src/components/Rackunit.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import type { IRack } from '$interface/IRack';
+  import { goto, prefetchRoutes } from '$app/navigation';
+
+  export let unit: IRack;
+
+  function unitSelect() {
+    if (window.location.href.indexOf(unit.hostname) == -1) {
+      goto(`/unit/${unit.hostname}`);
+    } else {
+      goto('/unit')
+    }
+  }
+
+  onMount(() => {
+    const { element } = unit;
+
+    if (element) {
+      element.style.height = `${element.clientHeight * unit.size}px`;
+    }
+  })
+</script>
+
+ <div class="unit" on:click={unitSelect}>
+  {#if unit?.image}
+    <img src={unit.image} alt={unit?.hostname} />
+  {:else}
+    <div class="blank" bind:this={unit['element']}></div>
+  {/if}
+</div>
+
+<style lang="scss">
+
+  .unit {
+    position: relative;
+    display: grid;
+    width: 108%;
+    margin-left: -4%;
+    background-color: randomBgr();
+
+    &:hover:before {
+      $borderWidth: 4px;
+
+      content: "";
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: -$borderWidth;
+      left: -$borderWidth;
+      z-index: 10;
+
+      border: $borderWidth solid pink;
+    }
+
+    .blank {
+      width: 100%;
+      height: 48px;
+    }
+
+    img {
+      width: 100%;
+    }
+  }
+</style>

src/interface/IRack.ts

@@ -0,0 +1,9 @@
+export interface IRack {
+  hostname: string;
+  ip_address?: string;
+  proxmox?: boolean;
+  admin_address?: string;
+  image?: string;
+  size?: number;
+  element?: string;
+}

src/lib/rack/data.json

@@ -0,0 +1,49 @@
+[
+  {
+    "hostname": "switch",
+    "image": "/images/dlink-switch.jpg"
+  },
+  {
+    "hostname": "usg",
+    "image": "/images/usg.png",
+    "admin_address": "https://unifi.schleppe:8443"
+  },
+  {
+    "hostname": "toscadas",
+    "size": 3
+  },
+  {
+    "hostname": "anna",
+    "image": "/images/supermicro-1u.png",
+    "ip_address": "10.0.0.40",
+    "proxmox": true
+  },
+  {
+    "hostname": "pve",
+    "image": "/images/supermicro-2u.png",
+    "ip_address": "10.0.0.60",
+    "proxmox": true
+  },
+  {
+    "hostname": "cerberus",
+    "image": "/images/ibm-x3620.jpeg",
+    "ip_address": "10.0.0.80",
+    "proxmox": true
+  },
+  {
+    "hostname": "ambrosia",
+    "image": "/images/xserve-storage.png",
+    "ip_address": "10.0.0.50",
+    "proxmox": true
+  },
+  {
+    "hostname": "adam",
+    "image": "/images/xserve-compute.png",
+    "admin_address": "vnc://kevin@10.0.0.78",
+    "ip_address": "10.0.0.78"
+  },
+  {
+    "hostname": "third",
+    "image": "/images/apc-ups.png"
+  }
+]

src/routes/index.svelte

@@ -0,0 +1,7 @@
+<script context="module" lang="ts">
+  import Rack from './unit/__layout.svelte'
+
+  export const prerender = true;
+</script>
+
+<Rack />

src/routes/unit/[hostname].svelte

@@ -0,0 +1,70 @@
+<script lang="ts" context="module">
+  import type { IRack } from '$interface/IRack';
+  import type { IRaiderIO } from 'src/interface/IRaiderIO';
+  import * as rackData from '$lib/rack/data.json';
+
+  const rackunits: IRack[] = rackData.default;
+  function getUnitFromHostname(hostname) {
+    return rackunits.find(unit => unit.hostname === hostname)
+  }
+
+  let unit = undefined;
+
+  export async function load({ page: { params }, fetch }) {
+    const { hostname } = params;
+
+    unit = getUnitFromHostname(hostname)
+
+    return {
+      props: {
+        unit
+      }
+    };
+  }
+</script>
+
+<script lang="ts">
+  export let unit: IRack;
+</script>
+
+<div>
+  {#if unit}
+    <h2>{ unit.hostname }</h2>
+
+    {#each JSON.stringify(unit).split(",") as segment}
+      <p>{ segment }</p>
+    {/each}
+
+    <div>
+      <h2>Actions</h2>
+  
+      <a href={`ssh://${unit?.proxmox ? 'root' : 'kevin'}@${unit.hostname}.schleppe`}>
+        <button>Open ssh terminal</button>
+      </a>
+
+      {#if unit?.proxmox == true}
+        <a href={`https://${unit.hostname}.schleppe:8006`} target="_blank">
+          <button>Open proxmox</button>
+        </a>
+
+      {:else if unit?.admin_address}
+        <a href={unit.admin_address} target="_blank">
+          <button>Open admin</button>
+        </a>
+      {/if}
+    </div>
+  {/if}
+</div>
+
+<style lang="scss">
+  @import '../../sass/button.scss';
+
+  a {
+    color: black;
+  }
+
+  h2 {
+    display: flex;
+    align-items: center;
+  }
+</style>

src/routes/unit/__layout.svelte

@@ -0,0 +1,22 @@
+<script context="module" lang="ts">
+  import Rack from '../../components/Rack.svelte'
+
+  // export const router = browser;
+  export const prerender = true;
+</script>
+
+<div>
+  <h3>Menu</h3>
+
+  <div class="flex">
+    <Rack />
+
+    <slot />
+  </div>
+</div>
+
+<style lang="scss">
+  .flex {
+    display: flex;
+  }
+</style>

src/routes/unit/index.svelte

@@ -0,0 +1,49 @@
+<script context="module" lang="ts">
+  import Rack from '../../components/Rack.svelte'
+
+  // export const router = browser;
+  export const prerender = true;
+</script>
+
+<svelte:head>
+  <title>kasperrt</title>
+</svelte:head>
+
+<section>
+  <h1>👋 hi</h1>
+
+  <p>
+    my name is kasper, and i am a lead developer at aller media norway. i have worked with a range
+    of technologies, all from episerver, c# and .net, to golang, svelte, react, vue.js, and mongodb,
+    and a bunch more.
+  </p>
+
+  <p>programming is one of my hobbies, so i made this to showcase some of my stuff.</p>
+  <p>
+    want to get to know me?
+    <br />
+    <a href="mailto:kasper@rynning-toennesen.no"> kasper@rynning-toennesen.no </a>
+  </p>
+</section>
+
+<style lang="scss">
+  @import '../../sass/breakpoints.scss';
+
+  @function randomBgr(){
+    @return rgb(random(255), random(255), random(255));
+  }
+
+  section {
+    margin: 0 auto;
+    width: 60vw;
+    max-width: 700px;
+    // width: 40vw;
+
+    @include small {
+      width: 95vw;
+      height: auto;
+      margin-top: 0px;
+      max-width: 90vw;
+    }
+  }
+</style>

src/sass/breakpoints.scss

@@ -0,0 +1,5 @@
+@mixin small {
+  @media screen and (max-width: 860px) {
+    @content;
+  }
+}

src/sass/button.scss

@@ -0,0 +1,11 @@
+
+button {
+  padding: 0.85rem;
+  background-color: teal;
+  color: white;
+  text-transform: uppercase;
+  border-width: 0px;
+  border-radius: 6px;
+  font-size: 1rem;
+  font-weight: 600;
+}