summaryrefslogtreecommitdiff
path: root/components/ModelForm.vue
diff options
context:
space:
mode:
Diffstat (limited to 'components/ModelForm.vue')
-rw-r--r--components/ModelForm.vue135
1 files changed, 135 insertions, 0 deletions
diff --git a/components/ModelForm.vue b/components/ModelForm.vue
new file mode 100644
index 0000000..12821df
--- /dev/null
+++ b/components/ModelForm.vue
@@ -0,0 +1,135 @@
+<template lang="pug">
+ 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': true, 'opacity-25 cursor-default': isLoading}"
+ :disabled="isLoading"
+ :readonly="isLoading"
+ @click="save"
+ )
+ <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" v-if="isLoading">
+ <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+ <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+ </svg>
+ | Save
+ p.text-sm.text-gray-700.mt-2(v-if="!form.id") You will add assets like images and STL/OBJ later.
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+
+export default {
+ name: "ModelForm",
+ props: ["data"],
+ data() {
+ return {
+ form: {},
+ };
+ },
+ computed: {
+ ...mapGetters(["isLoading"]),
+ },
+ created() {
+ if (this.data) this.form = { ...this.data };
+ },
+ methods: {
+ save(event) {
+ const f = this.form;
+
+ if (f.name && f.duration && f.height && f.weight) {
+ const action = this.form.id ? "models/editModel" : "models/createModel";
+ this.$store.dispatch(action, this.form).then((response) => {
+ if (response.status == 201 || response.status == 200) {
+ this.$toast.success("Model has been saved");
+ setTimeout(() => {
+ window.location.href = "/models/" + response.data.id;
+ }, 1000);
+ } else {
+ this.$toast.error(response.data.error);
+ }
+ });
+ }
+ event.preventDefault();
+ },
+ },
+};
+</script>