160 lines
4.4 KiB
HTML
160 lines
4.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
<title>Service Information</title>
|
|
<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet">
|
|
<link href="static/vuetify.min.css" rel="stylesheet">
|
|
<style>
|
|
.v-treeview-node__content,
|
|
.v-treeview-node__label{flex-shrink:1;font-size:0.9rem;}
|
|
.v-treeview-node__root{height:auto;}
|
|
[class="1-column-portrait"]{float:right;max-width:330px;}
|
|
.dtwarning{color:red;}
|
|
.dtnote{color:blue;}
|
|
.dtcaution{color:goldenrod;}
|
|
@media print {.v-content{padding:0 !important;}}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<v-app>
|
|
<v-toolbar app clipped-left class="hidden-print-only">
|
|
<v-spacer></v-spacer>
|
|
<v-flex xs3 d-flex>
|
|
<v-select
|
|
v-model="year"
|
|
:items="yearitems"
|
|
label="Year"
|
|
outline
|
|
height=18
|
|
v-on:input="changeYear"
|
|
></v-select>
|
|
</v-flex>
|
|
<v-flex xs3 d-flex>
|
|
<v-select
|
|
v-model="model"
|
|
:items="modelitems"
|
|
label="Model"
|
|
outline
|
|
height=18
|
|
v-on:input="changeEngine"
|
|
></v-select>
|
|
</v-flex>
|
|
<v-flex xs3 d-flex>
|
|
<v-select
|
|
v-model="engine"
|
|
:items="engineitems"
|
|
label="Engine"
|
|
outline
|
|
height=18
|
|
v-on:input="changeCar"
|
|
></v-select>
|
|
</v-flex>
|
|
</v-toolbar>
|
|
<v-navigation-drawer permanent app fixed clipped class="hidden-print-only">
|
|
<v-text-field
|
|
v-model="search"
|
|
label="Search Manuals"
|
|
flat
|
|
solo-inverted
|
|
hide-details
|
|
clearable
|
|
></v-text-field>
|
|
<v-treeview
|
|
:open.sync="listactive"
|
|
:items="sidebar"
|
|
:search="search"
|
|
item-key="id"
|
|
open-on-click>
|
|
<template v-slot:label="{ item }">
|
|
<a v-if="item.file" @click="index(item.file)">{{item.name}}</a>
|
|
<span v-else :id="item.id">{{item.name}}</span>
|
|
</template>
|
|
</v-treeview>
|
|
</v-navigation-drawer>
|
|
<v-content>
|
|
<v-container fluid>
|
|
<div :is="dynamicHtml"></div>
|
|
</v-container>
|
|
</v-content>
|
|
</v-app>
|
|
</div>
|
|
<script src="static/vue.min.js"></script>
|
|
<script src="static/vuetify.min.js"></script>
|
|
<script>
|
|
var app = new Vue({
|
|
el: '#app',
|
|
data: {
|
|
listactive: [],
|
|
body: "",
|
|
sidebar: [],
|
|
search:"",
|
|
items: [],
|
|
yearitems: [],
|
|
year:" ",
|
|
modelitems: [],
|
|
model:" ",
|
|
engineitems: [],
|
|
engine:" "
|
|
},
|
|
computed: {
|
|
dynamicHtml() {
|
|
return {
|
|
template: this.body
|
|
}
|
|
}
|
|
},
|
|
created: function() {
|
|
fetch('cars')
|
|
.then(res => res.json())
|
|
.then(json => {
|
|
this.items = json;
|
|
this.yearitems = Object.keys(json);
|
|
})
|
|
},
|
|
updated: function() {
|
|
const refs = document.querySelectorAll('.intxref');
|
|
refs.forEach(refitem => {
|
|
var pointedAt = document.querySelector(refitem.getAttribute('href'));
|
|
refitem.innerText = pointedAt.getElementsByTagName("em")[0].innerText;
|
|
})
|
|
},
|
|
methods: {
|
|
changeYear() {
|
|
this.modelitems = Object.keys(this.items[this.year])
|
|
},
|
|
changeEngine() {
|
|
this.engineitems = Object.keys(this.items[this.year][this.model])
|
|
},
|
|
changeCar() {
|
|
document.title = [this.year, this.model, this.engine].join(" ");
|
|
fetch(this.items[this.year][this.model][this.engine])
|
|
.then(res => res.json())
|
|
.then(json => {
|
|
this.sidebar=json;
|
|
})
|
|
},
|
|
switchToc(list) {
|
|
var temp = JSON.parse(list);
|
|
temp.forEach(item => this.listactive.push(item));
|
|
var element = document.getElementById(temp[0]);
|
|
element.scrollIntoView({block: "start"});
|
|
},
|
|
index (folder) {
|
|
fetch("file/" + folder)
|
|
.then(res => res.text())
|
|
.then(json => {
|
|
this.$set(this, 'body', json);
|
|
console.log(this.body);
|
|
window.scrollTo(0, 0);
|
|
})
|
|
.catch(err => console.warn(err))
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
</body>
|
|
</html>
|