<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<h1><%= title %></h1>
<div id="files"></div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- Vue app element -->
<div id="app">
<h1><a v-bind:href="'?path=' + files.up">.. </a>(Get me outa here!)</h1>
<template v-for="(item, index) in context">
<h2>Context item</h2>
<table>
<tr v-for="(value, name) in item">
<td>{{ name }} </td>
<td>
<table>
<tr v-for="(i, i_index) in value">
<td>
<input v-model="context[index][name][i_index]" type="text" size="45"/>
</td>
<td>
<form v-on:submit.prevent="linkProp(item)">
<select v-model="link_name" >
<template v-for="item in context">
<template v-for="name in item.name">
<option v-bind:value="item['@id']">{{ name }}</select>
</template>
</template>
</select>
<button type="submit">Link</button>
</form>
</td>
</tr>
</table>
</td>
</tr>
</table>
<form v-on:submit.prevent="addContextProp(item)">
<select v-model="prop_name" >
<option value="name">Name</option>
<option value="url">URL</option>
<option value="affiliation">Affiliation</option>
<option value="identifier">Identifier</option>
<option value="creator">Creator</option>
</select>
<button type="submit">Add prop</button>
</form>
<br><br>
</template>
<form v-on:submit.prevent="addContext(context)">
<select v-model="type" >
<option value="Person">Person</option>
<option value="Organization">Organization</option>
<option value="Place">Place</option>
</select>
<button type="submit">Add contextual item</button>
</form>
<div id="filelist" border="1">
<div v-for="(file, path) in files.files">
<hr>
<h1>{{ file.filename }}</h1>
<img width="50%" v-bind:src='file.img'>
<table>
<tr>
<th>Name:</th>
<td><input v-model="file.name" type="text" size="45"/></td>
</tr>
<tr>
<th>Description:</th>
<td><input v-model="file.description" type="text" size="45"/></td>
<td> <button v-on:click="save()">Save</button>
</td>
</tr>
</table>
</div>
</div>
<div id="filelist" border="1">
<ul v-for="dir in files.dirs">
<li><a v-bind:href="'?path=' + dir.absolute">{{ dir.name }}</a></li>
</ul>
</div>
</div>
</div>
<!-- end Vue app element -->
<script>
var save = function save() {
console.log(data);
}
var vue;
var files = {};
var context = [];
document.addEventListener("DOMContentLoaded", function(event) {
const urlParams = new URLSearchParams(window.location.search);
const path = urlParams.get('path');
axios.get('/files?path=' + path)
.then(function (response) {
files = response['data'];
axios.get("/context_entities").then(function(response){
context = response.data;
// handle success
vue = new Vue({
el: "#app",
data: {
files: files,
context: context,
prop: {"name":"nom", "value": "val"},
type: "Person",
prop_name: "",
link_name: ""
},
methods: {
"save": function save() {
axios.post('/files?path=' + path, this.$data.files.files).then(
console.log("Posted")
)
},
"addContextProp": function addContextProp(item){
var prop_name = this.prop_name;
if (item[prop_name]) {
item[prop_name].push("");
} else {
item[prop_name] = [""];
}
context.push("");
context.pop();
},
"addContext": function addContext(context){
console.log(context)
var uuid4 = function uuidv4() {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
return v.toString(16);
});
}
var id = "_b" + uuid4()
context.push({"@id": [id], "@type": [this.type]});
}
}
});
//document.getElementById("files").innerHTML = response['data'].model;
})
.catch(function (error) {
// handle error
console.log(error);
})
.then(function () {
console.log("done")
// always executed
});
})});
</script>
</body>
</html>