summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--assets/sass/main.sass3
-rw-r--r--pages/create.vue128
-rw-r--r--pages/models/_id.vue7
-rw-r--r--store/models.js28
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;
+ },
};