Lint and bug fixes. (#158)

frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "toolbarr",
   "private": true,
-  "version": "0.1.0",
+  "version": "0.1.1",
   "type": "module",
   "scripts": {
     "dev": "vite",

frontend/package.json.md5

@@ -1 +1 @@
-72cdc17b0ff549d7d10e1eaaa2ceed8a
+f802a390cff90365a158552cd02aa3eb

frontend/src/About.svelte

@@ -29,7 +29,7 @@
   let progress = 0.0
   let msg = $_("aboutPage.justWaitin")
 
-  function checkUpdate(e) {
+  function checkUpdate(e: MouseEvent) {
     e.preventDefault()
     update.Downloading = $_("aboutPage.Checkingforupdate")
 
@@ -48,20 +48,20 @@
     })
   }
 
-  function installUpdate(e) {
+  function installUpdate(e: MouseEvent) {
     e.preventDefault()
     update.Downloading = $_("aboutPage.Launchinginstaller")
     LaunchInstaller(release.FilePath).then(result => {
       update.Downloading = result
     })
   }
 
-  function openFolder(e) {
+  function openFolder(e: MouseEvent) {
     e.preventDefault()
     OpenFolder(release.FilePath).then(msg => (toast("info", msg)))
   }
 
-  function downloadUpdate(e) {
+  function downloadUpdate(e: MouseEvent) {
     e.preventDefault()
     update.Downloading = $_("aboutPage.Downloadingtheupdate")
 
@@ -85,8 +85,8 @@
     })
   }
 
-  $: timer = (new Date()).getTime()/1000-$app.StartTime
-  onInterval(() => { timer = (new Date()).getTime()/1000-$app.StartTime }, 1)
+  $: timer = (new Date()).getTime()/1000-($app.StartTime?$app.StartTime:0)
+  onInterval(() => { timer = (new Date()).getTime()/1000-($app.StartTime?$app.StartTime:0)}, 1)
   /* All of this is to create a "running" timer. */
   $: days = Math.floor(timer / 86400);
   $: hours = Math.floor((timer - (days * 86400)) / 3600);
@@ -133,7 +133,7 @@
     <Col md="6">
       <h3>{$_("aboutPage.AppInfo")}</h3><!-- following line shows an error but actually works. -->
       <Card color={$conf.Dark ? "secondary" : "light"} body>
-        <Table dark={$conf.Dark} responsive>
+        <Table responsive>
           <tr><td>{$_("words.Version")}</td><td>v{$app.Version}-{$app.Revision} ({$app.GoVersion})</td></tr>
           <tr><td>{$_("words.Branch")}</td><td>{$app.Branch}</td></tr>
           <tr><td>{$_("words.Created")}</td><td>{$app.BuildDate} {$_("words.by")} {$app.BuildUser}</td></tr>

frontend/src/Navbar.svelte

@@ -34,7 +34,7 @@
   import icons from "/src/assets/bootstrap-icons.css?url"
 
   let isOpen = false // nav open/closer tracker (mobile)
-  $: pageName = $app.Title
+  $: pageName = $app.Title ? $app.Title : "Unknown"
   // Keep dark-mode class up to date with dark config setting.
   $: $conf.Dark ? window.document.body.classList.add("dark-mode") : window.document.body.classList.remove("dark-mode")
 
@@ -50,7 +50,7 @@
   })
 
   /* Prevent right-click when dev mode is disabled. */
-  function blockRightClick(e) { if (!$conf.DevMode) e.preventDefault() }
+  function blockRightClick(e: MouseEvent) { if (!$conf.DevMode) e.preventDefault() }
   document.removeEventListener("contextmenu", blockRightClick)
   document.addEventListener("contextmenu", blockRightClick)
 </script>
@@ -69,7 +69,7 @@
 <!-- This if statement prevents the app from loading until the config and locale is retrieved from the backend. -->
 {#if Object.keys($conf).length > 0 && $isReady == true}
 <Navbar color="secondary" dark={$conf.Dark} expand="md py-0">
-  <NavbarBrand on:click={(e) => (pageName = $app.Title,e.preventDefault())}>
+  <NavbarBrand on:click={(e) => (pageName =$app.Title ? $app.Title : "Unknown",e.preventDefault())}>
     <Applogo size="25px" app={pageName} />
     {$_("words."+pageName) == "words."+pageName ? pageName : $_("words."+pageName)}
   </NavbarBrand>
@@ -92,7 +92,7 @@
         <DropdownToggle nav>
           <Applogo size="20px" app="Settings" /> <span class="d-md-none">{$_("words.Configuration")}</span>
         </DropdownToggle>
-        <DropdownMenu dark={$conf.Dark} end>
+        <DropdownMenu end>
           <DropdownItem active={pageName=="Settings"} on:click={()=>nav("Settings")}>
             <Fa primaryColor="sienna" icon={faGear} /> {$_("words.Settings")}
           </DropdownItem>

frontend/src/Starr/Actions/DownloadClients.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
   export let tab: Tab
-  export let info
-  export let instance
+  export let info: any
+  export let instance: Instance
   export let updating: boolean
 
+  import type { Instance } from "/src/libs/config"
   import type { Tab } from "./fragments/tabs.svelte"
   import { _ } from "/src/libs/Translate.svelte"
   import Footer from "./fragments/footer.svelte"

frontend/src/Starr/Actions/ImportLists.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  export let info
+  export let info: any
   export let instance: Instance
   export let tab: Tab
   export let updating: boolean

frontend/src/Starr/Actions/Index.svelte

@@ -2,7 +2,7 @@
   export let starrApp: StarrApp
   export let hidden: boolean // Avoid querying backends if hidden.
 
-  import type { StarrApp, Instance } from "/src/libs/config"
+  import type { StarrApp } from "/src/libs/config"
   import Applogo from "/src/libs/Applogo.svelte"
   import { conf } from "/src/libs/config"
   import T, { _ } from "/src/libs/Translate.svelte"
@@ -28,9 +28,12 @@
   let menuOpen = true
   let showTitle = true
   let tab = startTab
+
   let idx = $conf.Instance[starrApp] // Start with default instance.
-  let instance: Instance
-  $: instance = $conf.Instances[starrApp] ? $conf.Instances[starrApp][idx] : undefined
+  let instance = $conf.Instances[starrApp][idx]
+  $: if (!$conf.Instances[starrApp].includes(instance)) {
+    instance = $conf.Instances[starrApp][0]
+  }
 
   let width: number
   $: small = width < 1200
@@ -54,15 +57,11 @@
      <FormGroup>
       <InputGroup>
         <InputGroupText class="setting-name">{$_("words.Instance")}</InputGroupText>
-        <Input invalid={!instance} type="select" bind:value={idx}>
-        {#if $conf.Instances[starrApp] != null}
-          {#each $conf.Instances[starrApp] as val, index}
-            <option value={index}>{val.Name}: {val.URL}</option>
-          {/each}
-          {#if $conf.Instances[starrApp].length == 0}
-            <option disabled>- {$_("instances.noInstancesConfigured")} -</option>
-          {/if}
-        {:else}
+        <Input invalid={!instance||!instance.URL} type="select" bind:value={instance}>
+        {#each $conf.Instances[starrApp] as i}
+          <option value={i}>{i.Name}: {i.URL}</option>
+        {/each}
+        {#if $conf.Instances[starrApp].length < 1}
           <option disabled>- {$_("instances.noInstancesConfigured")} -</option>
         {/if}
         </Input>

frontend/src/Starr/Actions/Indexers.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   export let tab: Tab
-  export let info
-  export let instance
+  export let info: any
+  export let instance: Instance
   export let updating: boolean
 
   import type { Tab } from "./fragments/tabs.svelte"
@@ -16,6 +16,7 @@
   import SelectRow from "./fragments/selectAllRow.svelte"
   import { fixFieldValues } from "./methods"
   import { Table, Tooltip, Icon } from "@sveltestrap/sveltestrap"
+  import type { Instance } from "/src/libs/config"
 
   let isOpen: any = {}       // Modal toggle control.
   let all = false       // Toggle for select-all link.

frontend/src/Starr/Actions/fragments/configModal.svelte

@@ -11,29 +11,28 @@
   import { _ } from "/src/libs/Translate.svelte"
   import { Badge, Button, Modal, ModalBody, ModalFooter, ModalHeader } from "@sveltestrap/sveltestrap"
 
-  function reset(e) {
+  function reset(e: MouseEvent) {
     e.preventDefault()
     form[idx] = JSON.parse(JSON.stringify(info[idx]))
   }
 
-  function toggle(e?: any) {
-    e?.preventDefault()
+  function toggle() {
     isOpen = false
   }
 
-  function onkeydown(e) {
+  function onkeydown(e: KeyboardEvent) {
     if (e.key == "Escape") if (isOpen) e.preventDefault()
   }
 
-  function onkeyup(e) {
+  function onkeyup(e: KeyboardEvent) {
     if (e.key == "Escape") isOpen = false
   }
 </script>
 
 <svelte:window on:keyup={onkeyup} on:keydown={onkeydown}/>
 
 <Modal body size="lg" scrollable isOpen={isOpen}>
-  <ModalHeader {toggle}>
+  <ModalHeader toggle={toggle}>
     <Badge color="info">{id}</Badge> {name}
   </ModalHeader>
 

frontend/src/Starr/Actions/fragments/footer.svelte

@@ -22,13 +22,13 @@
   let goodMsg = ""
   $: selectedCount = count(selected)        // How many items are selected.
   $: unSaved = JSON.stringify(form) !== str // True when something changed.
-  let button
+  let button: any
 
-  function showMsg(idx, msg, data) {
+  function showMsg(idx: number, msg: string, data) {
     goodMsg += `<li>${$_("instances.SuccessMsg", {values:{"msg": msg}})}</li>`
     let kind = "update"
 
-    if (data) { // update client (repalce in place)
+    if (data) { // update client (replace in place)
       form[idx] = JSON.parse(JSON.stringify(data))
     } else {   // delete list item (remove in place)
       form.splice(idx, 1)
@@ -40,12 +40,12 @@
     dispatch(kind)
   }
 
-  function showError(idx, err) {
+  function showError(idx: number, err: string) {
     form[idx] = JSON.parse(JSON.stringify(info[idx]))
     badMsg += `<li>${$_("instances.ErrorMsg", {values:{"msg": err}})}</li>`
   }
 
-  async function updateItems(force) {
+  async function updateItems(force: boolean) {
     toast("info", $_("instances.Updating"+tab.id))
     goodMsg = badMsg = ""
     updating = true

frontend/src/Starr/Actions/fragments/modalInput.svelte

@@ -13,7 +13,7 @@
   import Fa from "svelte-fa"
   import { faGroupArrowsRotate } from "@fortawesome/free-solid-svg-icons"
   import { Button, Input, InputGroup, InputGroupText, Tooltip } from "@sveltestrap/sveltestrap"
-  import type { InputType } from "sveltestrap/src/Input"
+  import type { InputType } from "@sveltestrap/sveltestrap"
 
   const vals = { values:{"starrApp": starrApp} }
   $: tooltip = desc ? $_(desc, vals) : $_(`instances.${field}Desc`, vals)

frontend/src/Starr/Actions/fragments/selectAllHeader.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { Color } from "sveltestrap/src/shared"
+  import type { Color } from "@sveltestrap/sveltestrap/src/shared"
   import { _ } from "/src/libs/Translate.svelte"
   import { Icon } from "@sveltestrap/sveltestrap"
   import { onOnce } from "/src/libs/funcs"

frontend/src/Starr/Actions/fragments/selectAllRow.svelte

@@ -4,9 +4,9 @@
   export let updating: boolean
   export let id: string
   export let selected: {[key: string]: boolean}
-  export let item = undefined
+  export let item: any = undefined
 
-  let link
+  let link: any
 </script>
 
 <tr class={selected[id]?"bg-secondary":""}>

frontend/src/Starr/Actions/fragments/tableInput.svelte

@@ -10,7 +10,7 @@
 
   import { _ } from "/src/libs/Translate.svelte"
   import { Button, Input, InputGroup, Tooltip } from "@sveltestrap/sveltestrap"
-  import type { InputType } from "sveltestrap/src/Input"
+  import type { InputType } from "@sveltestrap/sveltestrap"
 
   function edit(editable: boolean) {
     plaintext = !editable

frontend/src/Starr/Actions/fragments/tabs.svelte

@@ -63,7 +63,7 @@
   import T, { _ } from "../../../libs/Translate.svelte"
   import { Fade, Nav, NavItem, NavLink } from "@sveltestrap/sveltestrap"
 
-  function changeTab(e, newTab) {
+  function changeTab(e: MouseEvent, newTab: Tab) {
     e.preventDefault()
     if (!updating) tab = newTab
   }

frontend/src/Starr/Database/Index.svelte

@@ -4,7 +4,7 @@
 
   import Applogo from "/src/libs/Applogo.svelte"
   import { Accordion, AccordionItem, Badge, Input, InputGroup, InputGroupText } from "@sveltestrap/sveltestrap"
-  import type { Instance, StarrApp } from "/src/libs/config"
+  import type { StarrApp } from "/src/libs/config"
   import { conf } from "/src/libs/config"
   import T, { _ } from "/src/libs/Translate.svelte"
   import Inspector from "./Inspector.svelte"
@@ -16,9 +16,13 @@
   if (starrApp != "Prowlarr") tabs.push({title: "instances.FilesystemPathsMigrator", target: Migrator})
   tabs.push({title: "instances.SQLite3DatabaseInspector", target: Inspector})
    // Start with default instance.
-  let instance: Instance = $conf.Instances[starrApp] ? $conf.Instances[starrApp][$conf.Instance[starrApp]] : undefined
   let activeTab = tabs[0]
   let showTitle = true
+
+  let instance = $conf.Instances[starrApp][$conf.Instance[starrApp]]
+  $: if (!$conf.Instances[starrApp].includes(instance)) {
+    instance = $conf.Instances[starrApp][0]
+  }
 </script>
 
 <Accordion>
@@ -44,15 +48,11 @@
     <!-- Instance selector menu. -->
     <InputGroup>
       <InputGroupText class="setting-name">{$_("words.Instance")}</InputGroupText>
-      <Input type="select" id="instance" invalid={!instance} bind:value={instance}>
-        {#if $conf.Instances[starrApp] != null}
-          {#each $conf.Instances[starrApp] as instance}
-            <option value={instance}>{instance.Name}: {instance.URL}</option>
-          {/each}
-          {#if $conf.Instances[starrApp].length == 0}
-            <option disabled>- {$_("instances.noInstancesConfigured")} -</option>
-          {/if}
-        {:else}
+      <Input type="select" id="instance" invalid={!instance||!instance.DBPath} bind:value={instance}>
+        {#each $conf.Instances[starrApp] as i}
+          <option value={i}>{i.Name}: {i.URL}</option>
+        {/each}
+        {#if $conf.Instances[starrApp].length < 1}
           <option disabled>- {$_("instances.noInstancesConfigured")} -</option>
         {/if}
       </Input>