🚀 v0.7.1 ! Bug fixes and QOL improvements

### Features * ✨ Changing deluge/qbittorent to use href instead of origin by @VinnyVynce in https://github.com/ajnart/homarr/pull/178 * ✨ Transmission Integration by @ajnart in https://github.com/ajnart/homarr/pull/181 * ✨ Add different URL for API calls by @ajnart in https://github.com/ajnart/homarr/pull/180 * ✨Password / Login Page by @ajnart in https://github.com/ajnart/homarr/pull/179 * ✨ Ability to toggle categories by @ajnart in https://github.com/ajnart/homarr/pull/177 * ✨ Add settings to change title and icons by @Aimsucks in https://github.com/ajnart/homarr/pull/184 * ✨ Color, shade, app opacity, and background customizations by @Aimsucks in https://github.com/ajnart/homarr/pull/188 * ✨ Calendar indication about date and w-e with secondary color by @Darkham42 in https://github.com/ajnart/homarr/pull/193 * ✨ More Information in Torrents Module by @LarveyOfficial in https://github.com/ajnart/homarr/pull/195 * ✨ Could position widgets at left by @Darkham42 in https://github.com/ajnart/homarr/pull/197 * ✨ Configure calendar widget to show Sunday first by @ajnart in https://github.com/ajnart/homarr/pull/224 * ✨Service Addition Overhaul by @LarveyOfficial in https://github.com/ajnart/homarr/pull/229 * ✨ Slidable service span in customizations by @Aimsucks in https://github.com/ajnart/homarr/pull/222 ### Tweaks 🔧 Make credentials non-required for torrents by @ajnart in https://github.com/ajnart/homarr/pull/223 ### Bug fixes * 🐛Fix completed torrents progress color by @LarveyOfficial in https://github.com/ajnart/homarr/pull/227 * 🐛Tiles could be moved accidentally on mobiles by @ajnart in https://github.com/ajnart/homarr/pull/226 * 🐛 Cannot open "New Tab URL" on mobile by @ajnart in https://github.com/ajnart/homarr/pull/225 * 🐛 Fix Calendar Item Duplication by @LarveyOfficial in https://github.com/ajnart/homarr/pull/249 * 🐛Fix URL for Radarr and other services by @LarveyOfficial in https://github.com/ajnart/homarr/pull/250 * 🐛 Fix Calendar not loading content when a service fails by @LarveyOfficial in https://github.com/ajnart/homarr/pull/230 * 🐛 Calendar current day for light theme by @Darkham42 in https://github.com/ajnart/homarr/pull/194 * 🐛 Fix for timezone issues by @LarveyOfficial in https://github.com/ajnart/homarr/pull/186 * 🐛 Fix Sonarr Incorrect Dates by @LarveyOfficial in https://github.com/ajnart/homarr/pull/189 * 🐛 Fix for origin URL not containing path in API request URL by @Aimsucks in https://github.com/ajnart/homarr/pull/221
2026-01-09 09:02:14 +01:00 · 2022-06-20 22:09:25 +02:00
parent 778988de58 91a249d953
commit 7dc205fa66
17 changed files with 333 additions and 160 deletions
--- a/data/constants.ts
+++ b/data/constants.ts
@@ -1,2 +1,2 @@
 export const REPO_URL = 'ajnart/homarr';
-export const CURRENT_VERSION = 'v0.7.0';
+export const CURRENT_VERSION = 'v0.7.1';
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "homarr",
-	"version": "0.7.0",
+	"version": "0.7.1",
 	"description": "Homarr - A homepage for your server.",
 	"repository": {
 		"type": "git",
--- a/src/components/AppShelf/AddAppShelfItem.tsx
+++ b/src/components/AppShelf/AddAppShelfItem.tsx
@@ -12,6 +12,10 @@ import {
  Title,
  Anchor,
  Text,
+  Tabs,
+  MultiSelect,
+  ScrollArea,
+  Switch,
 } from '@mantine/core';
 import { useForm } from '@mantine/form';
 import { useEffect, useState } from 'react';
@@ -19,7 +23,7 @@ import { IconApps as Apps } from '@tabler/icons';
 import { v4 as uuidv4 } from 'uuid';
 import { useDebouncedValue } from '@mantine/hooks';
 import { useConfig } from '../../tools/state';
-import { ServiceTypeList } from '../../tools/types';
+import { ServiceTypeList, StatusCodes } from '../../tools/types';

 export function AddItemShelfButton(props: any) {
  const [opened, setOpened] = useState(false);
@@ -113,6 +117,8 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
      username: props.username ?? (undefined as unknown as string),
      password: props.password ?? (undefined as unknown as string),
      openedUrl: props.openedUrl ?? (undefined as unknown as string),
+      status: props.status ?? ['200'],
+      newTab: props.newTab ?? true,
    },
    validate: {
      apiKey: () => null,
@@ -133,6 +139,12 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
        }
        return null;
      },
+      status: (value: string[]) => {
+        if (!value.length) {
+          return 'Please select a status code';
+        }
+        return null;
+      },
    },
  });

@@ -167,6 +179,12 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
      </Center>
      <form
        onSubmit={form.onSubmit(() => {
+          if (JSON.stringify(form.values.status) === JSON.stringify(['200'])) {
+            form.values.status = undefined;
+          }
+          if (form.values.newTab === true) {
+            form.values.newTab = undefined;
+          }
          // If service already exists, update it.
          if (config.services && config.services.find((s) => s.id === form.values.id)) {
            setConfig({
@@ -191,131 +209,167 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
          form.reset();
        })}
      >
-        <Group direction="column" grow>
-          <TextInput
-            required
-            label="Service name"
-            placeholder="Plex"
-            {...form.getInputProps('name')}
-          />
+        <Tabs grow>
+          <Tabs.Tab label="Options">
+            <ScrollArea style={{ height: 500 }} scrollbarSize={4}>
+              <Group direction="column" grow>
+                <TextInput
+                  required
+                  label="Service name"
+                  placeholder="Plex"
+                  {...form.getInputProps('name')}
+                />

-          <TextInput
-            required
-            label="Icon URL"
-            placeholder="/favicon.svg"
-            {...form.getInputProps('icon')}
-          />
-          <TextInput
-            required
-            label="Service URL"
-            placeholder="http://localhost:7575"
-            {...form.getInputProps('url')}
-          />
-          <TextInput
-            label="New tab URL"
-            placeholder="http://sonarr.example.com"
-            {...form.getInputProps('openedUrl')}
-          />
-          <Select
-            label="Service type"
-            defaultValue="Other"
-            placeholder="Pick one"
-            required
-            searchable
-            data={ServiceTypeList}
-            {...form.getInputProps('type')}
-          />
-          <Select
-            label="Category"
-            data={categoryList}
-            placeholder="Select a category or create a new one"
-            nothingFound="Nothing found"
-            searchable
-            clearable
-            creatable
-            onClick={(e) => {
-              e.preventDefault();
-            }}
-            getCreateLabel={(query) => `+ Create "${query}"`}
-            onCreate={(query) => {}}
-            {...form.getInputProps('category')}
-          />
-          <LoadingOverlay visible={isLoading} />
-          {(form.values.type === 'Sonarr' ||
-            form.values.type === 'Radarr' ||
-            form.values.type === 'Lidarr' ||
-            form.values.type === 'Readarr') && (
-            <>
-              <TextInput
+                <TextInput
+                  required
+                  label="Icon URL"
+                  placeholder="/favicon.svg"
+                  {...form.getInputProps('icon')}
+                />
+                <TextInput
+                  required
+                  label="Service URL"
+                  placeholder="http://localhost:7575"
+                  {...form.getInputProps('url')}
+                />
+                <TextInput
+                  label="On Click URL"
+                  placeholder="http://sonarr.example.com"
+                  {...form.getInputProps('openedUrl')}
+                />
+                <Select
+                  label="Service type"
+                  defaultValue="Other"
+                  placeholder="Pick one"
+                  required
+                  searchable
+                  data={ServiceTypeList}
+                  {...form.getInputProps('type')}
+                />
+                <Select
+                  label="Category"
+                  data={categoryList}
+                  placeholder="Select a category or create a new one"
+                  nothingFound="Nothing found"
+                  searchable
+                  clearable
+                  creatable
+                  onClick={(e) => {
+                    e.preventDefault();
+                  }}
+                  getCreateLabel={(query) => `+ Create "${query}"`}
+                  onCreate={(query) => {}}
+                  {...form.getInputProps('category')}
+                />
+                <LoadingOverlay visible={isLoading} />
+                {(form.values.type === 'Sonarr' ||
+                  form.values.type === 'Radarr' ||
+                  form.values.type === 'Lidarr' ||
+                  form.values.type === 'Readarr') && (
+                  <>
+                    <TextInput
+                      required
+                      label="API key"
+                      placeholder="Your API key"
+                      value={form.values.apiKey}
+                      onChange={(event) => {
+                        form.setFieldValue('apiKey', event.currentTarget.value);
+                      }}
+                      error={form.errors.apiKey && 'Invalid API key'}
+                    />
+                    <Text
+                      style={{
+                        alignSelf: 'center',
+                        fontSize: '0.75rem',
+                        textAlign: 'center',
+                        color: 'gray',
+                      }}
+                    >
+                      Tip: Get your API key{' '}
+                      <Anchor
+                        target="_blank"
+                        weight="bold"
+                        style={{ fontStyle: 'inherit', fontSize: 'inherit' }}
+                        href={`${hostname}/settings/general`}
+                      >
+                        here.
+                      </Anchor>
+                    </Text>
+                  </>
+                )}
+                {form.values.type === 'qBittorrent' && (
+                  <>
+                    <TextInput
+                      required
+                      label="Username"
+                      placeholder="admin"
+                      value={form.values.username}
+                      onChange={(event) => {
+                        form.setFieldValue('username', event.currentTarget.value);
+                      }}
+                      error={form.errors.username && 'Invalid username'}
+                    />
+                    <TextInput
+                      required
+                      label="Password"
+                      placeholder="adminadmin"
+                      value={form.values.password}
+                      onChange={(event) => {
+                        form.setFieldValue('password', event.currentTarget.value);
+                      }}
+                      error={form.errors.password && 'Invalid password'}
+                    />
+                  </>
+                )}
+                {(form.values.type === 'Deluge' ||
+                  form.values.type === 'Transmission' ||
+                  form.values.type === 'qBittorrent') && (
+                  <>
+                    <TextInput
+                      label="Username"
+                      placeholder="admin"
+                      value={form.values.username}
+                      onChange={(event) => {
+                        form.setFieldValue('username', event.currentTarget.value);
+                      }}
+                      error={form.errors.username && 'Invalid username'}
+                    />
+                    <TextInput
+                      label="Password"
+                      placeholder="password"
+                      value={form.values.password}
+                      onChange={(event) => {
+                        form.setFieldValue('password', event.currentTarget.value);
+                      }}
+                      error={form.errors.password && 'Invalid password'}
+                    />
+                  </>
+                )}
+              </Group>
+            </ScrollArea>
+          </Tabs.Tab>
+          <Tabs.Tab label="Advanced Options">
+            <Group direction="column" grow>
+              <MultiSelect
                required
-                label="API key"
-                placeholder="Your API key"
-                value={form.values.apiKey}
-                onChange={(event) => {
-                  form.setFieldValue('apiKey', event.currentTarget.value);
-                }}
-                error={form.errors.apiKey && 'Invalid API key'}
+                label="HTTP Status Codes"
+                data={StatusCodes}
+                placeholder="Select valid status codes"
+                clearButtonLabel="Clear selection"
+                nothingFound="Nothing found"
+                defaultValue={['200']}
+                clearable
+                searchable
+                {...form.getInputProps('status')}
              />
-              <Text
-                style={{
-                  alignSelf: 'center',
-                  fontSize: '0.75rem',
-                  textAlign: 'center',
-                  color: 'gray',
-                }}
-              >
-                Tip: Get your API key{' '}
-                <Anchor
-                  target="_blank"
-                  weight="bold"
-                  style={{ fontStyle: 'inherit', fontSize: 'inherit' }}
-                  href={`${hostname}/settings/general`}
-                >
-                  here.
-                </Anchor>
-              </Text>
-            </>
-          )}
-          {form.values.type === 'qBittorrent' && (
-            <>
-              <TextInput
-                required
-                label="Username"
-                placeholder="admin"
-                value={form.values.username}
-                onChange={(event) => {
-                  form.setFieldValue('username', event.currentTarget.value);
-                }}
-                error={form.errors.username && 'Invalid username'}
+              <Switch
+                label="Open service in new tab"
+                defaultChecked={form.values.newTab}
+                {...form.getInputProps('newTab')}
              />
-              <TextInput
-                required
-                label="Password"
-                placeholder="adminadmin"
-                value={form.values.password}
-                onChange={(event) => {
-                  form.setFieldValue('password', event.currentTarget.value);
-                }}
-                error={form.errors.password && 'Invalid password'}
-              />
-            </>
-          )}
-          {(form.values.type === 'Deluge' || form.values.type === 'Transmission') && (
-            <>
-              <TextInput
-                required
-                label="Password"
-                placeholder="password"
-                value={form.values.password}
-                onChange={(event) => {
-                  form.setFieldValue('password', event.currentTarget.value);
-                }}
-                error={form.errors.password && 'Invalid password'}
-              />
-            </>
-          )}
-        </Group>
-
+            </Group>
+          </Tabs.Tab>
+        </Tabs>
        <Group grow position="center" mt="xl">
          <Button type="submit">{props.message ?? 'Add service'}</Button>
        </Group>
--- a/src/components/AppShelf/AppShelf.tsx
+++ b/src/components/AppShelf/AppShelf.tsx
@@ -44,11 +44,16 @@ const AppShelf = (props: any) => {
  const { colorScheme } = useMantineColorScheme();

  const sensors = useSensors(
-    useSensor(TouchSensor, {}),
+    useSensor(TouchSensor, {
+      activationConstraint: {
+        delay: 500,
+        tolerance: 5,
+      },
+    }),
    useSensor(MouseSensor, {
      // Require the mouse to move by 10 pixels before activating
      activationConstraint: {
-        delay: 250,
+        delay: 500,
        tolerance: 5,
      },
    })
@@ -101,7 +106,14 @@ const AppShelf = (props: any) => {
        <SortableContext items={config.services}>
          <Grid gutter="xl" align="center">
            {filtered.map((service) => (
-              <Grid.Col key={service.id} span={6} xl={2} xs={4} sm={3} md={3}>
+              <Grid.Col
+                key={service.id}
+                span={6}
+                xl={config.settings.appCardWidth || 2}
+                xs={4}
+                sm={3}
+                md={3}
+              >
                <SortableAppShelfItem service={service} key={service.id} id={service.id} />
              </Grid.Col>
            ))}
--- a/src/components/AppShelf/AppShelfItem.tsx
+++ b/src/components/AppShelf/AppShelfItem.tsx
@@ -83,8 +83,8 @@ export function AppShelfItem(props: any) {
      >
        <Card.Section>
          <Anchor
-            target="_blank"
-            href={service.url}
+            target={service.newTab === false ? '_top' : '_blank'}
+            href={service.openedUrl ? service.openedUrl : service.url}
            style={{ color: 'inherit', fontStyle: 'inherit', fontSize: 'inherit' }}
          >
            <Text mt="sm" align="center" lineClamp={1} weight={550}>
@@ -127,13 +127,14 @@ export function AppShelfItem(props: any) {
                  src={service.icon}
                  fit="contain"
                  onClick={() => {
-                    if (service.openedUrl) window.open(service.openedUrl, '_blank');
-                    else window.open(service.url);
+                    if (service.openedUrl) {
+                      window.open(service.openedUrl, service.newTab === false ? '_top' : '_blank');
+                    } else window.open(service.url, service.newTab === false ? '_top' : '_blank');
                  }}
                />
              </motion.i>
            </AspectRatio>
-            <PingComponent url={service.url} />
+            <PingComponent url={service.url} status={service.status} />
          </Card.Section>
        </Center>
      </Card>
--- a/src/components/AppShelf/AppShelfMenu.tsx
+++ b/src/components/AppShelf/AppShelfMenu.tsx
@@ -22,16 +22,7 @@ export default function AppShelfMenu(props: any) {
      >
        <AddAppShelfItemForm
          setOpened={setOpened}
-          name={service.name}
-          id={service.id}
-          category={service.category}
-          type={service.type}
-          url={service.url}
-          icon={service.icon}
-          apiKey={service.apiKey}
-          username={service.username}
-          password={service.password}
-          openedUrl={service.openedUrl}
+          {...service}
          message="Save service"
        />
      </Modal>
--- a/src/components/Settings/AdvancedSettings.tsx
+++ b/src/components/Settings/AdvancedSettings.tsx
@@ -3,6 +3,7 @@ import { useForm } from '@mantine/form';
 import { useConfig } from '../../tools/state';
 import { ColorSelector } from './ColorSelector';
 import { OpacitySelector } from './OpacitySelector';
+import { AppCardWidthSelector } from './AppCardWidthSelector';
 import { ShadeSelector } from './ShadeSelector';

 export default function TitleChanger() {
@@ -58,6 +59,7 @@ export default function TitleChanger() {
      <ColorSelector type="secondary" />
      <ShadeSelector />
      <OpacitySelector />
+      <AppCardWidthSelector />
    </Group>
  );
 }
--- a/src/components/Settings/AppCardWidthSelector.tsx
+++ b/src/components/Settings/AppCardWidthSelector.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { Group, Text, Slider } from '@mantine/core';
+import { useConfig } from '../../tools/state';
+
+export function AppCardWidthSelector() {
+  const { config, setConfig } = useConfig();
+
+  const setappCardWidth = (appCardWidth: number) => {
+    setConfig({
+      ...config,
+      settings: {
+        ...config.settings,
+        appCardWidth,
+      },
+    });
+  };
+
+  return (
+    <Group direction="column" spacing="xs" grow>
+      <Text>App Width</Text>
+      <Slider
+        label={null}
+        defaultValue={config.settings.appCardWidth}
+        step={0.2}
+        min={0.8}
+        max={2}
+        styles={{ markLabel: { fontSize: 'xx-small' } }}
+        onChange={(value) => setappCardWidth(value)}
+      />
+    </Group>
+  );
+}
--- a/src/components/modules/calendar/CalendarModule.tsx
+++ b/src/components/modules/calendar/CalendarModule.tsx
@@ -29,6 +29,12 @@ export const CalendarModule: IModule = {
    'A calendar module for displaying upcoming releases. It interacts with the Sonarr and Radarr API.',
  icon: CalendarIcon,
  component: CalendarComponent,
+  options: {
+    sundaystart: {
+      name: 'Start the week on Sunday',
+      value: false,
+    },
+  },
 };

 export default function CalendarComponent(props: any) {
@@ -62,41 +68,49 @@ export default function CalendarComponent(props: any) {

  useEffect(() => {
    // Create each Sonarr service and get the medias
-    const currentSonarrMedias: any[] = [...sonarrMedias];
+    const currentSonarrMedias: any[] = [];
    Promise.all(
      sonarrServices.map((service) =>
        getMedias(service, 'sonarr').then((res) => {
          currentSonarrMedias.push(...res.data);
+        }).catch(() => {
+          currentSonarrMedias.push([]);
        })
      )
    ).then(() => {
      setSonarrMedias(currentSonarrMedias);
    });
-    const currentRadarrMedias: any[] = [...radarrMedias];
+    const currentRadarrMedias: any[] = [];
    Promise.all(
      radarrServices.map((service) =>
        getMedias(service, 'radarr').then((res) => {
          currentRadarrMedias.push(...res.data);
+        }).catch(() => {
+          currentRadarrMedias.push([]);
        })
      )
    ).then(() => {
      setRadarrMedias(currentRadarrMedias);
    });
-    const currentLidarrMedias: any[] = [...lidarrMedias];
+    const currentLidarrMedias: any[] = [];
    Promise.all(
      lidarrServices.map((service) =>
        getMedias(service, 'lidarr').then((res) => {
          currentLidarrMedias.push(...res.data);
+        }).catch(() => {
+          currentLidarrMedias.push([]);
        })
      )
    ).then(() => {
      setLidarrMedias(currentLidarrMedias);
    });
-    const currentReadarrMedias: any[] = [...readarrMedias];
+    const currentReadarrMedias: any[] = [];
    Promise.all(
      readarrServices.map((service) =>
        getMedias(service, 'readarr').then((res) => {
          currentReadarrMedias.push(...res.data);
+        }).catch(() => {
+          currentReadarrMedias.push([]);
        })
      )
    ).then(() => {
@@ -104,8 +118,11 @@ export default function CalendarComponent(props: any) {
    });
  }, [config.services]);

+  const weekStartsAtSunday =
+    (config?.modules?.[CalendarModule.title]?.options?.sundaystart?.value as boolean) ?? false;
  return (
    <Calendar
+      firstDayOfWeek={weekStartsAtSunday ? 'sunday' : 'monday'}
      onChange={(day: any) => {}}
      dayStyle={(date) =>
        date.getDay() === today.getDay() && date.getDate() === today.getDate()
@@ -115,6 +132,13 @@ export default function CalendarComponent(props: any) {
            }
          : {}
      }
+      styles={{
+        calendarHeader: {
+          marginRight: 15,
+          marginLeft: 15,
+        },
+      }}
+      allowLevelChange={false}
      dayClassName={(date, modifiers) => cx({ [classes.weekend]: modifiers.weekend })}
      renderDay={(renderdate) => (
        <DayComponent
--- a/src/components/modules/downloads/DownloadsModule.tsx
+++ b/src/components/modules/downloads/DownloadsModule.tsx
@@ -158,7 +158,7 @@ export default function DownloadComponent() {
            <Progress
              radius="lg"
              color={
-                torrent.state === 'paused' ? 'yellow' : torrent.progress === 1 ? 'green' : 'blue'
+                torrent.progress === 1 ? 'green' : torrent.state === 'paused' ? 'yellow' : 'blue'
              }
              value={torrent.progress * 100}
              size="lg"
--- a/src/components/modules/moduleWrapper.tsx
+++ b/src/components/modules/moduleWrapper.tsx
@@ -120,8 +120,8 @@ export function ModuleWrapper(props: any) {
        styles={{
          root: {
            position: 'absolute',
-            top: 15,
-            right: 15,
+            top: 12,
+            right: 12,
          },
        }}
      />
--- a/src/components/modules/ping/PingModule.story.tsx
+++ b/src/components/modules/ping/PingModule.story.tsx
@@ -11,6 +11,8 @@ const service: serviceItem = {
  name: 'YouTube',
  icon: 'https://cdn.jsdelivr.net/gh/walkxhub/dashboard-icons/png/youtube.png',
  url: 'https://youtube.com/',
+  status: ['200'],
+  newTab: false,
 };

 export const Default = (args: any) => <PingComponent service={service} />;
--- a/src/components/modules/ping/PingModule.tsx
+++ b/src/components/modules/ping/PingModule.tsx
@@ -1,5 +1,5 @@
 import { Indicator, Tooltip } from '@mantine/core';
-import axios from 'axios';
+import axios, { AxiosResponse } from 'axios';
 import { motion } from 'framer-motion';
 import { useEffect, useState } from 'react';
 import { IconPlug as Plug } from '@tabler/icons';
@@ -19,18 +19,37 @@ export default function PingComponent(props: any) {

  const { url }: { url: string } = props;
  const [isOnline, setOnline] = useState<State>('loading');
+  const [response, setResponse] = useState(500);
  const exists = config.modules?.[PingModule.title]?.enabled ?? false;
+
+  function statusCheck(response: AxiosResponse) {
+    const { status }: {status: string[]} = props;
+    //Default Status
+    let acceptableStatus = ['200'];
+    if (status !== undefined && status.length) {
+      acceptableStatus = status;
+    }
+    // Checks if reported status is in acceptable status array
+    if (acceptableStatus.indexOf((response.status).toString()) >= 0) {
+      setOnline('online');
+      setResponse(response.status);
+    } else {
+      setOnline('down');
+      setResponse(response.status)
+    }
+  }
+
  useEffect(() => {
    if (!exists) {
      return;
    }
    axios
      .get('/api/modules/ping', { params: { url } })
-      .then(() => {
-        setOnline('online');
+      .then((response) => {
+        statusCheck(response);
      })
-      .catch(() => {
-        setOnline('down');
+      .catch((error) => {
+        statusCheck(error.response);
      });
  }, [config.modules?.[PingModule.title]?.enabled]);
  if (!exists) {
@@ -40,7 +59,7 @@ export default function PingComponent(props: any) {
    <Tooltip
      radius="lg"
      style={{ position: 'absolute', bottom: 20, right: 20 }}
-      label={isOnline === 'loading' ? 'Loading...' : isOnline === 'online' ? 'Online' : 'Offline'}
+      label={isOnline === 'loading' ? 'Loading...' : isOnline === 'online' ? `Online - ${response}` : `Offline - ${response}`}
    >
      <motion.div
        animate={{
--- a/src/pages/api/modules/calendar.ts
+++ b/src/pages/api/modules/calendar.ts
@@ -44,7 +44,10 @@ async function Post(req: NextApiRequest, res: NextApiResponse) {
    });
  }
  // Get the origin URL
-  const { origin } = new URL(service.url);
+  var { href: origin } = new URL(service.url);
+  if (origin.endsWith("/")) {
+    origin = origin.slice(0, -1)
+  }
  const pined = `${origin}${url?.url}?apiKey=${service.apiKey}&end=${nextMonth}&start=${lastMonth}`;
  const data = await axios.get(
    `${origin}${url?.url}?apiKey=${service.apiKey}&end=${nextMonth}&start=${lastMonth}`
--- a/src/pages/api/modules/downloads.ts
+++ b/src/pages/api/modules/downloads.ts
@@ -38,7 +38,7 @@ async function Post(req: NextApiRequest, res: NextApiResponse) {
      ...(
        await new Deluge({
          baseUrl: delugeService.url,
-          password: delugeService.password,
+          password: 'password' in delugeService ? delugeService.password : '',
        }).getAllData()
      ).torrents
    );
@@ -49,7 +49,7 @@ async function Post(req: NextApiRequest, res: NextApiResponse) {
        await new Transmission({
          baseUrl: transmissionService.url,
          username: transmissionService.username,
-          password: transmissionService.password,
+          password: 'password' in transmissionService ? transmissionService.password : '',
        }).getAllData()
      ).torrents
    );
--- a/src/pages/api/modules/ping.ts
+++ b/src/pages/api/modules/ping.ts
@@ -7,10 +7,14 @@ async function Get(req: NextApiRequest, res: NextApiResponse) {
  await axios
    .get(url as string)
    .then((response) => {
-      res.status(200).json(response.data);
+      res.status(response.status).json(response.statusText);
    })
    .catch((error) => {
-      res.status(500).json(error);
+      if (error.response) {
+        res.status(error.response.status).json(error.response.statusText);
+      } else {
+        res.status(500).json('Server Error');
+      }
    });
  // // Make a request to the URL
  // const response = await axios.get(url);
--- a/src/tools/types.ts
+++ b/src/tools/types.ts
@@ -12,6 +12,7 @@ export interface Settings {
  background?: string;
  appOpacity?: number;
  widgetPosition?: string;
+  appCardWidth?: number;
 }

 export interface Config {
@@ -31,6 +32,32 @@ interface ConfigModule {
  };
 }

+export const StatusCodes = [
+  {value: '200', label: '200 - OK', group:'Sucessful responses'}, 
+  {value: '204', label: '204 - No Content', group:'Sucessful responses'},
+  {value: '301', label: '301 - Moved Permanently', group:'Redirection responses'},
+  {value: '302', label: '302 - Found / Moved Temporarily', group:'Redirection responses'},
+  {value: '304', label: '304 - Not Modified', group:'Redirection responses'},
+  {value: '307', label: '307 - Temporary Redirect', group:'Redirection responses'},
+  {value: '308', label: '308 - Permanent Redirect', group:'Redirection responses'},
+  {value: '400', label: '400 - Bad Request', group:'Client error responses'},
+  {value: '401', label: '401 - Unauthorized', group:'Client error responses'},
+  {value: '403', label: '403 - Forbidden', group:'Client error responses'},
+  {value: '404', label: '404 - Not Found', group:'Client error responses'},
+  {value: '408', label: '408 - Request Timeout', group:'Client error responses'},
+  {value: '410', label: '410 - Gone', group:'Client error responses'},
+  {value: '429', label: '429 - Too Many Requests', group:'Client error responses'},
+  {value: '500', label: '500 - Internal Server Error', group:'Server error responses'},
+  {value: '502', label: '502 - Bad Gateway', group:'Server error responses'},
+  {value: '503', label: '503 - Service Unavailable', group:'Server error responses'},
+  {value: '054', label: '504 - Gateway Timeout Error', group:'Server error responses'},
+  ];
+
+export const Targets = [
+  {value: '_blank', label: 'New Tab'},
+  {value: '_top', label: 'Same Window'}
+]
+
 export const ServiceTypeList = [
  'Other',
  'Emby',
@@ -66,4 +93,6 @@ export interface serviceItem {
  password?: string;
  username?: string;
  openedUrl?: string;
+  newTab?: boolean;
+  status?: string[];
 }