2023-05-23 13:19:28 +02:00
<!DOCTYPE html>
< html lang = "de" xmlns = "http://www.w3.org/1999/html" data-theme = "dark" >
2023-06-06 00:54:35 +02:00
2023-05-23 13:19:28 +02:00
< head >
< title > FabLab Bottle Clip Generator< / title >
2023-06-06 00:54:35 +02:00
< link rel = "stylesheet" href = "{{ url_for('static', filename='css/pico.css') }}" >
2023-05-29 23:19:32 +02:00
< style >
.error {
background-color: rgb(183, 28, 28);
border-radius: 8px;
padding: 8px;
margin-top: 12px;
margin-bottom: 24px;
}
< / style >
2023-05-23 13:19:28 +02:00
< / head >
< body >
2023-05-29 23:19:32 +02:00
2023-06-06 00:54:35 +02:00
< script src = "{{ url_for('static', filename='js/download.js') }}" > < / script >
2023-05-29 23:19:32 +02:00
< script type = "module" >
2023-06-06 00:54:35 +02:00
import {createApp} from '{{ url_for("static", filename="js/vue.esm-browser.js") }}'
2023-05-29 23:19:32 +02:00
createApp({
data() {
return {
name: "",
2024-09-25 01:29:15 +02:00
logo: "fablab",
2023-05-29 23:19:32 +02:00
fetching: false,
error: false,
}
},
mounted() {
// disable classic non-JS submission if JavaScript is available
this.$refs.form.onsubmit = function(event) {
event.preventDefault()
}
},
methods: {
async generate() {
console.log("generate")
this.fetching = true
this.error = false
const response = await fetch("{{ url_for('generate') }}", {
mode: "cors",
method: "post",
body: JSON.stringify({
"name": this.name,
2024-09-25 01:29:15 +02:00
"logo": this.logo,
2023-05-29 23:19:32 +02:00
}),
headers: {
"Content-Type": "application/json",
},
})
let contentType = response.headers.get("content-type")
let downloadFilename = response.headers.get("download-filename")
if (response.status !== 200 || contentType !== "model/stl" || downloadFilename === "") {
this.error = true
} else {
// for now, we'll just download the file
// in the future, we'll be adding a 3D viewer to allow users to preview the file directly
download(await response.text(), downloadFilename, contentType)
}
this.fetching = false
}
},
}).mount('#app')
< / script >
2023-05-23 13:19:28 +02:00
< main class = "container" >
< center >
2023-06-06 00:54:35 +02:00
< img src = "{{ url_for('static', filename='img/logo.svg') }}" style = "max-width: 350px; margin-bottom: 30px;" >
2023-05-29 23:19:32 +02:00
2023-05-23 13:19:28 +02:00
< h1 > FabLab Bottle Clip Generator< / h1 >
2023-05-29 23:19:32 +02:00
< div id = "app" >
<!-- JS free alternative, less pretty but gets the job done -->
< p > Bitte gib deinen Namen in das Formular ein und drücke auf < b > < i > Generieren< / i > < / b > , um eine STL-Datei zu erhalten.< / p >
{# hidden is used in a noscript situation, but as it also is the default state due to #}
< div ref = "errorMessage" v-show = "error" style = "display: none" v-show = "true" class = "error" > Fehler beim Generieren der Datei, bitte Namen prüfen und erneut versuchen.< / div >
< form ref = "form" action = "{{ url_for('generate') }}" method = "post" >
< label for = "name" > Name:< / label >
< input type = "text" id = "name" name = "name" style = "text-align: center;" placeholder = "Name" v-model = "name" :disabled = "fetching" :aria-invalid = "name === ''" >
2024-09-25 01:29:15 +02:00
< select id = "logo" name = "logo" v-model = "logo" :disabled = "fetching" aria-label = "Logo auswählen" required >
< option value = "fablab" > FabLab< / option >
< option value = "thw" > THW< / option >
< / select >
2023-05-29 23:19:32 +02:00
< button v-if = "!fetching" ref = "submitButton" type = "submit" @ click = "generate" :disabled = "name === ''" > Generieren< / button >
< button v-if = "fetching" style = "display: none" v-show = "true" type = "button" disabled = "true" aria-busy = "true" > Generiere...< / button >
< / form >
< p style = "font-size: 85%" > Bitte beachte, dass das Generieren einige Sekunden in Anspruch nimmt! < i > Geduld ist eine Tugend!< / i > < / p >
< / div >
2023-05-23 13:19:28 +02:00
< / center >
< / main >
2023-05-29 23:19:32 +02:00
2023-05-23 13:19:28 +02:00
< / body >
2023-06-06 00:54:35 +02:00
2023-05-23 13:19:28 +02:00
< / html >
