add time filter.

svelte-ui/src/components/DateRangeSelect.svelte

@@ -14,6 +14,8 @@ import EveryMinute from "./EveryMinute.svelte";
   export let toValue: string;
   export let disabled: boolean;
   export let styled: boolean;
+  export let noFuture: boolean;
+  export let label: string = "Time Period";
 
   let selected: string = "custom";
   let options: DateOption[] = [];
@@ -39,12 +41,14 @@ import EveryMinute from "./EveryMinute.svelte";
         from: startOfWeek(now),
         to: endOfWeek(now),
       });
-      options.push({
-        id: "next_week",
-        label: "Next Week",
-        from: startOfWeek(nextWeek),
-        to: endOfWeek(nextWeek),
-      });
+      if (!noFuture) {
+        options.push({
+          id: "next_week",
+          label: "Next Week",
+          from: startOfWeek(nextWeek),
+          to: endOfWeek(nextWeek),
+        });
+      }
       options.push({
         id: "last_week",
         label: "Last Week",
@@ -58,12 +62,14 @@ import EveryMinute from "./EveryMinute.svelte";
         from: current,
         to: endOfMonth(current),
       });
-      options.push({
-        id: "next_month",
-        label: "Next Month",
-        from: nextMonth(current),
-        to: endOfMonth(nextMonth(current)),
-      });
+      if (!noFuture) {
+        options.push({
+          id: "next_month",
+          label: "Next Month",
+          from: nextMonth(current),
+          to: endOfMonth(nextMonth(current)),
+        });
+      }
       options.push({
         id: "last_month",
         label: "Last Month",
@@ -77,12 +83,14 @@ import EveryMinute from "./EveryMinute.svelte";
         from: startOfYear(now),
         to: endOfYear(now),
       });
-      options.push({
-        id: "next_year",
-        label: "Next Year",
-        from: startOfYear(new Date(Date.now() + (366.25 * 86400000))),
-        to: endOfYear(new Date(Date.now() + (365.25 * 86400000))),
-      });
+      if (!noFuture) {
+        options.push({
+          id: "next_year",
+          label: "Next Year",
+          from: startOfYear(new Date(Date.now() + (366.25 * 86400000))),
+          to: endOfYear(new Date(Date.now() + (365.25 * 86400000))),
+        });
+      }
       options.push({
         id: "last_year",
         label: "Last Year",
@@ -112,16 +120,73 @@ import EveryMinute from "./EveryMinute.svelte";
 
 <EveryMinute bind:now={now} />
 <div class:styled>
-  <label for="timeRange">Time Period</label>
-  <select name="timeRange" disabled={disabled} bind:value={selected}>
-    {#each options as option (option.id)}
-      <option value={option.id}>{option.label}</option>
-    {/each}
-  </select>
+  <div>
+    <label for="timeRange">{label}</label>
+    <select name="timeRange" disabled={disabled} bind:value={selected}>
+      {#each options as option (option.id)}
+        <option value={option.id}>{option.label}</option>
+      {/each}
+    </select>
+  </div>
   {#if selected === "custom"}
-    <label for="startTime">Start Time</label>
-    <input disabled={disabled} name="startTime" type="datetime-local" bind:value={fromValue} />
-    <label for="endTime">End Time</label>
-    <input disabled={disabled} name="endTime" type="datetime-local" bind:value={toValue} />
+    <div>
+      <label for="startTime">Start Time</label>
+      <input disabled={disabled} name="startTime" type="datetime-local" bind:value={fromValue} />
+    </div>
+    <div>
+      <label for="endTime">End Time</label>
+      <input disabled={disabled} name="endTime" type="datetime-local" bind:value={toValue} />
+    </div>
   {/if}
-</div>
+</div>
+
+<style>
+div.styled {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+}
+
+div.styled > div:first {
+  width: 20%;
+}
+
+div.styled > div {
+  padding: 0.5em;
+  margin: 0 auto;
+  width: 35%;
+}
+
+div.styled select, div.styled input {
+  width: 100%;
+  margin-bottom: 0.5em;
+
+  background: #222;
+  color: #777;
+  border: none;
+  outline: none;
+  resize: vertical;
+}
+div.styled select {
+  padding: 0.46em 0.5ch;
+}
+
+div.styled input:focus, div.styled select:focus {
+  background: #191919;
+  color: #CCC;
+  border: none;
+  outline: none;
+}
+
+@media screen and (max-width: 900px) {
+  div.styled {
+    flex-direction: column;
+    margin-bottom: 1em;
+  }
+
+  div.styled > div {
+    width: 90%;
+  }
+}
+
+</style>

svelte-ui/src/components/Markdown.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
   import marked from "marked";
+  import insane from "insane";
   export let source = "";
 
   let outputHtml: string;
 
-  $: outputHtml = marked(source, {sanitize: true, smartypants: true});
+  $: outputHtml = insane(marked(source, {smartypants: true}));
 </script>
 
 <div class="markdown">{@html outputHtml}</div>