Create model

4 files changed, 164 insertions, 2 deletions

diff --git a/assets/sass/main.sass b/assets/sass/main.sass
index fc8c6bf..04466c1 100644
--- a/assets/sass/main.sass
+++ b/assets/sass/main.sass
@@ -7,3 +7,6 @@ body
 @media (max-width: 768px)
   .w-90p
     max-width: 90%
+
+.border-1
+  border-width: 1px
diff --git a/pages/create.vue b/pages/create.vue
new file mode 100644
index 0000000..dd59ffc
--- /dev/null
+++ b/pages/create.vue
@@ -0,0 +1,128 @@
+<template lang="pug">
+  .mx-auto.w-90p.py-6(class="sm:px-6 lg:px-8 md:max-w-7xl")
+    h1.text-3xl.font-bold Create a new model
+    p Fill all the required fieds to upload your 3D model into Verden!
+    form.mt-3
+      .shadow(class="sm:overflow-hidden sm:rounded-md")
+        .space-y-6.bg-white.px-4.py-5(class="sm:p-6")
+          div
+            label.block.text-sm.font-medium.text-gray-700(for="name") Name
+            .mt-1
+              input#name.mt-1.block.w-full.rounded-md.border-gray-300.border-1.px-2.py-1(
+                name="name"
+                class="focus:border-green-500 focus:ring-green-500 sm:text-sm"
+                placeholder="My super project"
+                required
+                v-model="form.name"
+              )
+          div
+            label.block.text-sm.font-medium.text-gray-700(for="description") Description 
+              span.text-gray-300 (Optional)
+            .mt-1
+              textarea#description.mt-1.block.w-full.rounded-md.border-gray-300.border-1.px-2.py-1(
+                name="description" rows="3"
+                class="focus:border-green-500 focus:ring-green-500 sm:text-sm"
+                placeholder="Now this is the story all about how, My life got flipped-turned upside down... "
+                v-model="form.description"
+              )
+          div
+            label.block.text-sm.font-medium.text-gray-700(for="duration") Duration
+            .mt-1
+              input#duration.mt-1.block.w-full.rounded-md.border-gray-300.border-1.px-2.py-1(
+                name="duration"
+                type="number"
+                step="0.01"
+                class="focus:border-green-500 focus:ring-green-500 sm:text-sm"
+                required
+                v-model="form.duration"
+              )
+            p.text-sm.text-gray-500 Print duration in minutes
+          div
+            label.block.text-sm.font-medium.text-gray-700(for="height") Height
+            .mt-1
+              input#height.mt-1.block.w-full.rounded-md.border-gray-300.border-1.px-2.py-1(
+                name="height"
+                type="number"
+                step="0.01"
+                class="focus:border-green-500 focus:ring-green-500 sm:text-sm"
+                required
+                v-model="form.height"
+              )
+            p.text-sm.text-gray-500 Height in mm
+          div
+            label.block.text-sm.font-medium.text-gray-700(for="weight") Weight
+            .mt-1
+              input#weight.mt-1.block.w-full.rounded-md.border-gray-300.border-1.px-2.py-1(
+                name="weight"
+                type="number"
+                step="0.01"
+                class="focus:border-green-500 focus:ring-green-500 sm:text-sm"
+                required
+                v-model="form.weight"
+              )
+            p.text-sm.text-gray-500 Weight in g
+          div
+            label.block.text-sm.font-medium.text-gray-700(for="printer") Printer 
+              span.text-gray-300 (Optional)
+            .mt-1
+              input#printer.mt-1.block.w-full.rounded-md.border-gray-300.border-1.px-2.py-1(
+                name="printer"
+                class="focus:border-green-500 focus:ring-green-500 sm:text-sm"
+                placeholder="Formlabs Form 3BL"
+                v-model="form.printer"
+              )
+          div
+            label.block.text-sm.font-medium.text-gray-700(for="material") Material 
+              span.text-gray-300 (Optional)
+            .mt-1
+              input#material.mt-1.block.w-full.rounded-md.border-gray-300.border-1.px-2.py-1(
+                name="material"
+                class="focus:border-green-500 focus:ring-green-500 sm:text-sm"
+                placeholder="PLA"
+                v-model="form.material"
+              )
+        .py-3.text-right(class="sm:px-6")
+          button.inline-flex.justify-center.rounded-md.border.border-transparent.bg-green-600.py-2.px-4.text-sm.font-medium.text-white.shadow-sm(type="submit", class="hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2" @click="save") Save
+          p.text-sm.text-gray-700.mt-2 You will add assets like images and STL/OBJ later.
+</template>
+
+<script>
+import ModelLoading from "@/components/ModelLoading.vue";
+import ModelBoxCard from "@/components/ModelBoxCard.vue";
+
+import { mapGetters } from "vuex";
+
+export default {
+  name: "CreateModelView",
+  layout: "default",
+  head: {
+    title: "Create a new model · Verden",
+  },
+  computed: {
+    ...mapGetters(["isLoading"]),
+    ...mapGetters("auth", ["isLogged"]),
+  },
+  data() {
+    return {
+      form: {},
+    };
+  },
+  created() {
+    if (!this.isLogged) window.location.href = "/signin?ref=/create";
+  },
+  methods: {
+    save(event) {
+      const f = this.form;
+
+      if (f.name && f.duration && f.height && f.weight) {
+        this.$store
+          .dispatch("models/createModel", this.form)
+          .then((response) => {
+            console.log(response);
+          });
+      }
+      event.preventDefault();
+    },
+  },
+};
+</script>
diff --git a/pages/models/_id.vue b/pages/models/_id.vue
index 48ff0eb..1017032 100644
--- a/pages/models/_id.vue
+++ b/pages/models/_id.vue
@@ -139,6 +139,11 @@ export default {
       boxFilesToDownload: false,
     };
   },
+  head() {
+    return {
+      title: this.model.name + " · Verden",
+    };
+  },
   components: {
     ModelStl,
     ModelObj,
@@ -148,7 +153,7 @@ export default {
     this.id = this.$route.params.id;
     this.baseAPI = this.$config.api;
 
-    this.$store.dispatch("models/findModal", this.id).then((response) => {
+    this.$store.dispatch("models/findModel", this.id).then((response) => {
       if (response.status != 200) {
         window.location.href = "/models";
       } else {
diff --git a/store/models.js b/store/models.js
index 23c612e..47f14b1 100644
--- a/store/models.js
+++ b/store/models.js
@@ -50,7 +50,7 @@ export const actions = {
     return res;
   },
   // Find a model by its id
-  async findModal({ commit }, id) {
+  async findModel({ commit }, id) {
     commit("loadingStatus", true, { root: true });
     let res = { status: 0, data: null };
     let api = this.$config.api;
@@ -72,4 +72,30 @@ export const actions = {
 
     return res;
   },
+  // Create a new model
+  async createModel({ commit, rootGetters }, payload) {
+    commit("loadingStatus", true, { root: true });
+    let res = { status: 0, data: null };
+    let api = this.$config.api;
+
+    await fetch(`${api}/v1/models`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${rootGetters["auth/accessToken"]}`,
+      },
+      body: JSON.stringify(payload),
+    })
+      .then(async (response) => {
+        res.data = await response.json();
+        res.status = response.status;
+      })
+      .catch((e) => {
+        res.status = e.status;
+      });
+
+    commit("loadingStatus", false, { root: true });
+
+    return res;
+  },
 };