@spectric/ui 0.0.20 → 0.0.22

package/src/components/query_bar/dateTimePopup.ts

@@ -0,0 +1,54 @@
+import { html } from "lit";
+import { DialogElement } from "../dialog/dialog";
+import { createRef, ref } from "lit/directives/ref.js";
+import { SpectricButton } from "../Button";
+import { LabelValuesOrStrings, toLabelValue } from "./QueryBar";
+
+export const DateTimePopup = async (values: LabelValuesOrStrings) => {
+  let value: string | undefined;
+  let buttonRef = createRef<SpectricButton>();
+
+  await new Promise((resolve) => {
+    let dialog = DialogElement.display(
+      {},
+      html`
+        <div class="query-bar-date-quick-select">
+          ${values.map((v) => {
+            let labelValue = toLabelValue(v);
+            return html`<a
+              href="#"
+              @click=${(e: MouseEvent) => {
+                e.preventDefault();
+                value = `"${labelValue.label}"`;
+                resolve(value);
+                dialog.open = false;
+              }}
+              >${labelValue.value}</a
+            >`;
+          })}
+        </div>
+        <spectric-input
+          variant="datetime-local"
+          @change=${(e: any) => {
+            if (!e.target) {
+              return;
+            }
+            let date = new Date(e.target.value + ":00.000Z").toISOString();
+            value = `"${date}"`;
+            buttonRef.value!.disabled = value === undefined;
+          }}
+        ></spectric-input>
+        <spectric-button
+          ${ref(buttonRef)}
+          .disabled=${true}
+          @click=${() => {
+            resolve(value);
+            dialog.open = false;
+          }}
+          >Submit</spectric-button
+        >
+      `
+    );
+  });
+  return value;
+};

package/src/components/query_bar/geojsonPopup.ts

@@ -0,0 +1,44 @@
+import { html } from "lit";
+import { DialogElement } from "../dialog/dialog";
+import { createRef, ref } from "lit/directives/ref.js";
+import { SpectricButton } from "../Button";
+import { LabelValuesOrStrings, toLabelValue } from "./QueryBar";
+
+export const GeoJSONPopup = async (values: LabelValuesOrStrings) => {
+  let value: string | undefined;
+  let buttonRef = createRef<SpectricButton>();
+
+  await new Promise((resolve) => {
+    let dialog = DialogElement.display(
+      {},
+      html`
+        <div class="query-bar-date-quick-select">
+          ${values.map((v) => {
+            let labelValue = toLabelValue(v);
+            return html`<a
+              href="#"
+              @click=${(e: MouseEvent) => {
+                e.preventDefault();
+                value = `"${labelValue.value}"`;
+                resolve(value);
+                dialog.open = false;
+              }}
+              >${labelValue.label}</a
+            >`;
+          })}
+        </div>
+        <div>TODO DISPLAY MAP with drawing tools HERE!!</div>
+        <spectric-button
+          ${ref(buttonRef)}
+          .disabled=${true}
+          @click=${() => {
+            resolve(value);
+            dialog.open = false;
+          }}
+          >Submit</spectric-button
+        >
+      `
+    );
+  });
+  return value;
+};