Plugin Base

- Started building a weather plugin as an example - realized that it won't work witout an API key - so bailing for now.

.gitignore

@@ -2,3 +2,4 @@
 node_modules
 public/bundle.*
 package-lock.json
+plugins/*/*

src/App.svelte

@@ -22,6 +22,7 @@
   import StatsRoute from "./routes/stats.svelte";
   import BoardEditorRoute from "./routes/board-editor.svelte";
   import FAQRoute from "./routes/faq.svelte";
+  import PluginsRoute from "./routes/plugins.svelte";
   // Testing Routes
   import TestStatsRoute from "./routes/test/stats.svelte";
 
@@ -106,6 +107,9 @@
       <Route path="/board/:id" component={BoardEditorRoute} />
       <Route path="/faq" component={FAQRoute} />
       <Route path="/test/stats" component={TestStatsRoute} />
+      <Route path="/plugins" component={PluginsRoute} />
+      <Route path="/plugins/settings/:pluginId" component={PluginsRoute} />
+      <Route path="/plugins/:pluginId" component={PluginsRoute} />
     </div>
   </Router>
 {:else if $UserStore.signedIn == undefined}

src/components/back-button/back-button.svelte

@@ -0,0 +1,19 @@
+<script>
+  import { createEventDispatcher } from "svelte";
+  import { navigate } from "svelte-routing";
+
+  export let to = undefined;
+
+  const dispatch = createEventDispatcher();
+  const onClick = event => {
+    if (to) {
+      navigate(to);
+    }
+    dispatch("click", event);
+  };
+</script>
+
+<button class="btn btn-clear text-faded" on:click={onClick}>
+  <i class="zmdi zmdi-chevron-left mr-2 " />
+  Back
+</button>

src/plugins/plugins.js

@@ -0,0 +1,19 @@
+/**
+ * Plugins - extending Nomie
+ * export default {
+        emoji: '⛅️',
+        name: 'Weather',
+        id: 'nomie-weather',
+        pages: {
+            settings: WeatherSettings, 
+            default: WeatherMainPage, //svelte component /plugins/nomie-weather
+        },
+    };
+ */
+
+// Import the plugins
+import WeatherPlugin from './weather/weather';
+
+let plugins = [WeatherPlugin];
+
+export default plugins;

src/plugins/weather/default.svelte

@@ -0,0 +1,40 @@
+<script>
+  import { onMount } from "svelte";
+  import locate from "../../modules/locate/locate";
+
+  let location = null;
+  let locating = false;
+  let lookingUpWeather = false;
+  let weather = null;
+
+  onMount(async () => {
+    console.log("Mounted");
+    locating = true;
+    location = await locate();
+    locating = false;
+    if (location) {
+      let forecastAPI = `https://api.openweathermap.org/data/2.5/weather?lat=${location.latitude}&lon=${location.longitude}`;
+      let weatherData;
+      fetch(forecastAPI)
+        .then(res => {
+          return res.json();
+        })
+        .then(json => {
+          weather = json;
+        });
+    }
+  });
+</script>
+
+<div class="plugin-page plugin-weather p-3">
+  {#if locating === true}
+    Locating...
+  {:else if location}
+    Got your location {location.latitude}, {location.longitude}
+    {#if lookingUpWeather}
+      Looking up Weather
+    {:else if weather}
+      Got weather {JSON.stringify(weather)}
+    {:else}Could not get weather{/if}
+  {:else}Unable to get your location{/if}
+</div>

src/plugins/weather/settings.svelte

@@ -0,0 +1,5 @@
+<script>
+
+</script>
+
+<div class="plugin-settings nomie-weather-settings">SETTINGS!</div>

src/plugins/weather/weather.js

@@ -0,0 +1,12 @@
+import WeatherSettings from './settings.svelte';
+import WeatherMainPage from './default.svelte';
+
+export default {
+	emoji: '⛅️',
+	name: 'Weather',
+	id: 'nomie-weather',
+	pages: {
+		settings: WeatherSettings,
+		default: WeatherMainPage,
+	},
+};

src/routes/plugins.svelte

@@ -0,0 +1,120 @@
+<script>
+  //Vendors
+  import { navigate, Route } from "svelte-routing";
+
+  // Components
+  import NItem from "../components/list-item/list-item.svelte";
+  import NText from "../components/text/text.svelte";
+  import NToggle from "../components/toggle-switch/toggle-switch.svelte";
+  import NToolbar from "../components/toolbar/toolbar.svelte";
+  import NBackButton from "../components/back-button/back-button.svelte";
+
+  // Vendors
+  import dayjs from "dayjs";
+
+  // Stores
+  import { UserStore } from "../store/user";
+  import { LedgerStore } from "../store/ledger";
+  import { Interact } from "../store/interact";
+  import { TrackerStore } from "../store/trackers";
+  import { BoardStore } from "../store/boards";
+  // Config
+  import config from "../../config/global";
+
+  import Plugins from "../plugins/plugins";
+
+  // consts
+  const path = window.location.href.split("/");
+  const slashes = path.splice(3, path.length - 1);
+
+  let state = {
+    mode: "list", // detail, settings
+    plugin: null
+  };
+
+  $: if (slashes) {
+    let id = slashes[1];
+    state.plugin = Plugins.find(p => p.id == id);
+    if (slashes.length === 2) {
+      state.mode = "detail";
+    } else if (slashes[2] == "settings") {
+      state.mode = "settings";
+    }
+    console.log("selected", state.plugin);
+    if (state.plugin) {
+      state.plugin.emoji = state.plugin.emoji || "🔌";
+    }
+  }
+
+  let methods = {};
+</script>
+
+<NToolbar pinTop>
+  {#if state.mode == 'list'}
+    <NBackButton to="/" />
+    <h2>Plugins</h2>
+  {:else if state.mode == 'detail'}
+    <NBackButton to="/plugins" />
+    <h2>{state.plugin.emoji} {state.plugin.name}</h2>
+  {:else if state.mode == 'settings'}
+    <NBackButton to="/plugins/{state.plugin.id}" />
+    <h2>{state.plugin.emoji} {state.plugin.name} Settings</h2>
+  {/if}
+  <div class="filler" />
+  <!-- <button on:click={methods.faq} class="btn btn-clear text-primary">FAQ</button> -->
+</NToolbar>
+
+<div class="page page-plugins with-header">
+
+  <div class="container p-0 n-list">
+
+    {#if state.mode == 'list'}
+      <div class="n-pop my-3">
+        <NItem className="n-item-divider" borderBottom title="Plugins" />
+        {#each Plugins as plugin, index}
+          <NItem
+            on:click={() => {
+              navigate(`/plugins/${plugin.id}`);
+            }}
+            title={`${plugin.emoji || '🔌'} ${plugin.name}`}
+            className="clickable" />
+        {/each}
+      </div>
+    {:else if state.mode == 'detail' && state.plugin.pages.default}
+      <svelte:component this={state.plugin.pages.default}>
+        <!-- contents go here -->
+      </svelte:component>
+    {:else if state.mode == 'settings'}
+      <h2>{state.plugin.name} Settings</h2>
+    {/if}
+
+    <!-- <div class="n-pop my-3">
+        <NItem title="Data" borderBottom className="n-item-divider" />
+        <NItem title="Import Nomie Backup">
+          <button
+            class="btn btn-clear text-primary"
+            slot="right"
+            on:click={() => {
+              showImporter = true;
+            }}>
+            Import
+          </button>
+          <input
+            slot="right"
+            class="d-none"
+            type="file"
+            bind:this={fileInput}
+            on:change={methods.onImportFile} />
+        </NItem>
+        <NItem title="Export Data">
+          <button
+            class="btn-clear btn text-primary"
+            on:click={methods.export}
+            slot="right">
+            Export
+          </button>
+        </NItem>
+      </div> -->
+
+  </div>
+</div>