Add import page

1 files changed, 143 insertions, 0 deletions

diff --git a/pages/import.vue b/pages/import.vue
new file mode 100644
index 0000000..31d344d
--- /dev/null
+++ b/pages/import.vue
@@ -0,0 +1,143 @@
+<script setup lang="ts">
+import LoaderDiscardSessionModal from '~/components/loader/LoaderDiscardSessionModal.vue';
+
+definePageMeta({
+  layout: 'default'
+})
+
+const session = useSessionStore();
+
+const { canUseFsApi } = getBrowserCapabilities();
+const sessionType = computed(() => session.getSessionType());
+
+const discardSessionModal = ref<InstanceType<typeof LoaderDiscardSessionModal> | null>(null);
+</script>
+
+<template>
+  <div id="welcome-container">
+    <div id="welcome">
+      <b id="title">Import quest data</b>
+      <p>Use one of the options below to load quest configuration data.</p>
+      <div id="import-options">
+        <div class="row-container import-row">
+          <div id="description">
+            <p id="subtitle">Load from File System</p>
+            <p>Select the Quests plugin data directory to load data from.</p>
+            <p class="error" v-if="!canUseFsApi">
+              <font-awesome-icon :icon="['fas', 'xmark']" />
+              Your browser is not capable of using this mode.
+            </p>
+          </div>
+
+          <div id="button-group">
+            <LoaderFileSystemButton />
+          </div>
+        </div>
+        <div class="row-container import-row">
+          <div id="description">
+            <p id="subtitle">Retrieve from In-Game</p>
+            <p>Download quest data uploaded from in-game.</p>
+          </div>
+
+          <div id="button-group">
+            <LoaderNetworkButton />
+          </div>
+        </div>
+        <div class="row-container import-row">
+          <div id="description">
+            <p id="subtitle">Load Test Data</p>
+            <p>Get familiar with the Quests Web Editor by using test data.</p>
+          </div>
+
+          <div id="button-group">
+            <LoaderTestDataButton />
+          </div>
+        </div>
+        <div class="row-container" v-if="sessionType !== 'none'">
+          <div id="description">
+            <p>You are currently in a session.</p>
+            <p>Session type: {{ sessionType }}</p>
+          </div>
+
+          <div id="button-group">
+            <Button :icon="['fas', 'arrow-left']" label="Return to Session" @click="navigateToEditorPane(null)" />
+            <Button accent="danger" :icon="['fas', 'trash']" label="Discard" @click="discardSessionModal?.open" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <LoaderDiscardSessionModal ref="discardSessionModal" />
+</template>
+
+<style lang="scss" scoped>
+#welcome-container {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+#import-options {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.row-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  padding: 1rem 0;
+
+  #button-group {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+  }
+}
+
+.import-row {
+  border-bottom: 1px solid var(--color-border-soft);
+}
+
+.import-row:first-child {
+  border-top: 1px solid var(--color-border-soft);
+}
+
+.error {
+  color: var(--color-false);
+}
+
+#welcome {
+  display: flex;
+  flex-direction: column;
+  margin: 3rem 0;
+  gap: 1.5rem;
+  align-items: flex-start;
+  justify-content: flex-start;
+  max-width: 600px;
+  width: 100%;
+
+  #title {
+    font-weight: bold;
+    font-size: 1.5rem;
+  }
+
+  #subtitle {
+    font-weight: bold;
+    font-size: 1.1rem;
+  }
+
+  b {
+    font-weight: bold;
+  }
+}
+
+hr {
+  width: 100%;
+}
+</style>
\ No newline at end of file