99 lines
3.7 KiB
HTML
99 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de" xmlns="http://www.w3.org/1999/html" data-theme="dark">
|
|
<head>
|
|
<title>FabLab Bottle Clip Generator</title>
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='pico.css') }}">
|
|
<style>
|
|
.error {
|
|
background-color: rgb(183, 28, 28);
|
|
border-radius: 8px;
|
|
padding: 8px;
|
|
margin-top: 12px;
|
|
margin-bottom: 24px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<script src="{{ url_for('static', filename='download.js') }}"></script>
|
|
|
|
<script type="module">
|
|
import {createApp} from '{{ url_for("static", filename="vue.esm-browser.js") }}'
|
|
|
|
createApp({
|
|
data() {
|
|
return {
|
|
name: "",
|
|
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,
|
|
}),
|
|
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>
|
|
|
|
<main class="container">
|
|
<center>
|
|
<img src="{{ url_for('static', filename='logo.svg') }}" style="max-width: 350px; margin-bottom: 30px;">
|
|
|
|
<h1>FabLab Bottle Clip Generator</h1>
|
|
|
|
<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 === ''">
|
|
<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>
|
|
</center>
|
|
</main>
|
|
|
|
</body>
|
|
</html>
|