Adds content for PiHole

src/lib/components/CircularProgressBar.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	export let ratio: number;
+
+	const radius = 40;
+	$: circumference = 2.0 * radius * Math.PI;
+	$: offset = (1.0 - Math.min(Math.max(ratio, 0.0), 1.0)) * circumference;
+	$: console.log(offset);
+	$: console.log(circumference);
+</script>
+
+<svg
+	class="fill-none stroke-neutral-800 align-top dark:stroke-neutral-400"
+	viewBox="0 0 100 100"
+	style="display:inline"
+>
+	<circle
+		r={radius}
+		cx="50"
+		cy="50"
+		class="stroke-neutral-500 stroke-[20%] dark:stroke-neutral-700"
+	/>
+	<circle
+		r="40"
+		cx="50"
+		cy="50"
+		class="stroke-[20%]"
+		style="stroke-dasharray: {circumference} {circumference}; stroke-dashoffset: {offset}; transform: rotate(-90deg); transform-origin:50% 50%"
+	/>
+</svg>

src/lib/components/ServiceCard.svelte

@@ -16,6 +16,10 @@
 		return service;
 	}
 
+	function subtitle(): string {
+		return service.subtitle || data.subtitle || '';
+	}
+
 	function computeClasses(): string {
 		switch (data.status) {
 			case 'offline':
@@ -41,14 +45,14 @@
 		<div>
 			<p class="text-xl">{service.title}</p>
 			<p class="text-md">
-				{service.subtitle}
+				{subtitle()}
 			</p>
 		</div>
 	</div>
-	<div class="mt-2 h-8 w-full px-6">
+	<div class="mr-6 mt-2 h-7 overflow-hidden pl-20">
 		{#if component != undefined}
 			<svelte:component this={component} {data} />
 		{/if}
 	</div>
-	<div class={'h-0.5 w-full ' + statusClasses} />
+	<div class="h-0.5 w-full opacity-70 {statusClasses}" />
 </a>

src/lib/server/config.test.ts

@@ -66,6 +66,8 @@ describe('Config', () => {
 					items: [
 						{
 							title: 'top service',
+							logo: 'foo',
+
 							url: 'somewhere',
 							secret: 'secret',
 							type: 'foo'

src/lib/server/config.ts

@@ -91,34 +91,8 @@ export function mergeConfig(a: Config, b: SPOJO): Config {
 }
 
 const defaultLightConfig: ColorConfig = {};
-defaultLightConfig['highlight-primary'] = '#3367d6';
-defaultLightConfig['highlight-secondary'] = '#4285f4';
-defaultLightConfig['highlight-hover'] = '#5a95f5';
-defaultLightConfig['background'] = '#f5f5f5';
-defaultLightConfig['card-background'] = '#ffffff';
-defaultLightConfig['text'] = '#363636';
-defaultLightConfig['text-header'] = '#ffffff';
-defaultLightConfig['text-title'] = '#303030';
-defaultLightConfig['text-subtitle'] = '#424242';
-defaultLightConfig['card-shadow'] = 'rgba(0, 0, 0, 0.1)';
-defaultLightConfig['link'] = '#3273dc';
-defaultLightConfig['link-hover'] = '#363636';
-defaultLightConfig['background-image'] = '';
 
 const defaultDarkConfig: ColorConfig = {};
-defaultDarkConfig['highlight-primary'] = '#3367d6';
-defaultDarkConfig['highlight-secondary'] = '#4285f4';
-defaultDarkConfig['highlight-hover'] = '#5a95f5';
-defaultDarkConfig['background'] = '#131313';
-defaultDarkConfig['card-background'] = '#2b2b2b';
-defaultDarkConfig['text'] = '#eaeaea';
-defaultDarkConfig['text-header'] = '#ffffff';
-defaultDarkConfig['text-title'] = '#fafafa';
-defaultDarkConfig['text-subtitle'] = '#f5f5f5';
-defaultDarkConfig['card-shadow'] = 'rgba(0, 0, 0, 0.4)';
-defaultDarkConfig['link'] = '#3273dc';
-defaultDarkConfig['link-hover'] = '#ffdd57';
-defaultDarkConfig['background-image'] = '';
 
 export const defaultConfig: Config = {
 	title: 'Flanders',

src/lib/services/pihole/+content.svelte

@@ -1,5 +1,35 @@
 <script lang="ts">
-	export let data;
+	import CircularProgressBar from '$lib/components/CircularProgressBar.svelte';
+	import type { ServiceData } from '../service';
+
+	export let data: ServiceData;
+	console.log(data.data);
+	$: missingClasses = data.data == undefined ? 'animate-pulse' : '';
 </script>
 
-pihole status
+<div class="flex flex-row justify-start gap-4 {missingClasses} whitespace-nowrap">
+	<span class="">
+		{#if data.data?.status == 'enabled'}
+			<i class="fa fa-play text-success-400 opacity-70" />
+		{:else if data.data?.status == 'disabled'}
+			<i class="fa fa-stop text-error-400 opacity-70" />
+		{:else}
+			<i class="fa fa-question" />
+			N.A.
+		{/if}
+	</span>
+	<span>
+		<span class="m-0 inline-block h-5 w-5 p-0 align-text-bottom">
+			<CircularProgressBar ratio={(data.data?.ads_percentage || 0) / 100.0} />
+		</span>
+		{data.data?.ads_percentage?.toFixed(1) || 'N.A.'}%
+	</span>
+	<span>
+		<i class="fa-solid fa-globe" />
+		{data.data?.queries_today || 'N.A.'}
+	</span>
+	<span>
+		<i class="fa fa-dharmachakra" />
+		{data.data?.client || 'N.A.'}
+	</span>
+</div>

src/lib/services/pihole/+service.ts

@@ -3,7 +3,8 @@ import { type ServiceData, type ServiceHandler } from '../service';
 
 export const handle: ServiceHandler = async (config: ServiceConfig) => {
 	const res: ServiceData = {
-		logo: 'https://cdn.rawgit.com/pi-hole/graphics/master/Vortex/Vortex.svg'
+		logo: 'https://cdn.rawgit.com/pi-hole/graphics/master/Vortex/Vortex.svg',
+		subtitle: 'Sends ads into a black hole'
 	};
 
 	try {