76 lines
2.6 KiB
HTML
76 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>DB640 Betriebsstellen</title>
|
|
|
|
<script src="/static/vue.js"></script>
|
|
<script src="/static/db640.js"></script>
|
|
<link rel="stylesheet" type="text/css" href="/static/db640.css">
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="description" content="App zur Abfrage von DB640 Betriebsstellencodes">
|
|
<meta name="theme-color" content="#C1121C">
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<h1>DB640 Betriebsstellen</h1>
|
|
|
|
<form @submit.prevent="handleSubmit">
|
|
<label>DB640 Code</label>
|
|
<div class="field-button-group">
|
|
<input @search="handleSearch" autofocus type="search" v-model="infraCode" spellcheck="false" results="5" placeholder="Wbf" />
|
|
<button v-show="!loadingState" type="submit"><img src="/static/img/search.svg" alt="Search"></button>
|
|
<img v-show="loadingState" alt="Loading..." class="loading-spinner" src="/static/img/loading.svg" />
|
|
</div>
|
|
</form>
|
|
<p v-show="infraName">{{ infraName }}</p>
|
|
|
|
<div v-if="error" class="error-box">
|
|
<h3>Oh nein!</h3>
|
|
<p>
|
|
Ein Fehler bei der Abfrage ist aufgetreten:<br />
|
|
{{ error }}
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
<script type="text/javascript">
|
|
var app = new Vue({
|
|
el: '#app',
|
|
data: {
|
|
infraCode: null,
|
|
infraName: null,
|
|
loadingState: false,
|
|
error: null
|
|
},
|
|
methods: {
|
|
handleSubmit() {
|
|
let timer = setTimeout(() => {
|
|
app.loadingState = true;
|
|
}, 250);
|
|
|
|
RailwayInfra.lookup(app.infraCode)
|
|
.then(obj => {
|
|
app.infraName = obj.name;
|
|
})
|
|
.catch(err => {
|
|
if (err instanceof RailwayInfraLookupError) {
|
|
app.infraName = null;
|
|
} else {
|
|
console.error(err);
|
|
app.error = err.message;
|
|
}
|
|
})
|
|
.finally(() => {
|
|
clearTimeout(timer);
|
|
app.loadingState = false;
|
|
});
|
|
},
|
|
handleSearch(e) {
|
|
app.infraCode = e.target.value;
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
</body>
|
|
</html> |