1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
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>
|
