<!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></h1>
<template v-if="context">
{{this.changed}}
<template v-for="(item, id) in context">
<h2 v-bind:id="id">
<form v-on:submit.prevent="removeItem(id)">
<button type="submit">-</button> {{ id }}
</form>
</h2>
<img width="60%" v-bind:src='item.img'>
<table width="100%" >
<tr v-for="(values, name) in item">
<td>
<form v-on:submit.prevent="removeProp(item, name)" style='display:inline;'>
<button type="submit">-</button>
</form>
{{ name }}
</td>
<td>
<form v-on:submit.prevent="addProp(item, name)" style='display:inline;'>
<button type="submit">+</button>
</form>
</td>
<td>
<div v-for="(val, i_index) in values">
<template v-if="schema.properties[name] && schema.properties[name].input === 'text'">
<input v-model="val.value" type="text" size="45" v-on:keyup="trigger_change_on_enter"/>
</template>
<template v-else-if="val && val.id && context[val.id] && context[val.id].name">
<form v-on:submit.prevent="unlinkProp(val)" style='display:inline;'>
<button type="submit">-</button>
</form>
<a v-bind:href="'#' + val.id">{{ context[val.id].name[0].value }}</b></a>
</template>
<b v-else>
{{ val.value }}
</b>
<template v-if="schema.properties[name] && schema.properties[name].input === 'link' " >
<form v-on:submit.prevent="linkProp(val)" style='display:inline;'>
<button type="submit"> -> </button>
<select v-model="link_to_id" >
<template v-for="(link_item, link_id) in context">
<template v-for="other_name in link_item.name">
<option v-if="(!val.id || link_id != val.id) && schema.properties[name] && link_item.type && schema.properties[name].type.includes(link_item.type[0].value)" v-bind:value="link_id">{{ other_name.value }}</select>
</template>
</template>
</select>
</select>
</form>
</template>
</div>
</td>
</tr>
</table>
<form v-on:submit.prevent="addContextProp(item)">
<select v-model="prop_name" >
<template v-for="(prop, prop_name) in schema.properties">
<option v-if="!item[prop_name]">{{prop_name}}</option>
</template>
</select>
<button type="submit">+</button>
</form>
<br><br>
</template>
<form v-on:submit.prevent="addContext(context)">
<select v-model="type" >
<option v-for="(type, type_name) in schema.types" v-bind:value="type_name"> {{ type_name }} </option>
</select>
<button type="submit">Add contextual item</button>
</form>
</template>
<h1>
<a v-bind:href="'/?path=' + path + '&dataset_path=' + path">
<template v-if="files.existing_describo">
Edit existing data package
</template>
<template v-else>
Package a dataset here
</template>
</a> </h1>
<div id="filelist" border="1">
<div v-for="(file, path) in files.files">
<template v-if="!(context[file.id])">
<h1>{{ file.filename }}</h1>
<img width="50%" v-bind:src='file.img'>
<form v-if="context" v-on:submit.prevent="addFile(file)">
<button type="submit">Add file to package</button>
</form>
</template>
</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 vue;
var files = {};
var context = {};
var schema = {};
document.addEventListener("DOMContentLoaded", function(event) {
const urlParams = new URLSearchParams(window.location.search);
const path = urlParams.get('path');
const dataset_path = urlParams.get('dataset_path');
axios.get('/files?path=' + path)
.then(function (response) {
files = response.data;
var params = dataset_path ? '?dataset_path=' + dataset_path : ""
axios.get("/context_entities" + params).then(function(response){
context = response.data;
axios.get("/schema").then(function(response){
schema = response.data;
// handle success
vue = new Vue({
el: "#app",
data: {
files: files,
context: context,
schema: schema,
prop: {"name":"nom", "value": "val"},
type: "Person",
prop_name: "",
link_to_id: "",
link_id: "",
changed: 0,
latest_id: 0,
path: path,
dataset_path: dataset_path
},
methods: {
"save_context": function save_context() {
var params = '?dataset_path=' + this.dataset_path;
axios.post('/context_entities' + params, this.context).then(
function () {
}
)
},
"addContextProp": function addContextProp(item){
// Warning! Repetition!
var prop_name = this.prop_name;
if (item[prop_name]) {
item[prop_name].push({"value": "", "id": ""});
} else {
item[prop_name] = [{"value": "", "id": ""}];
}
this.changed += 1;
this.save_context();
},
"addProp": function addProp(item, prop_name){
if (item[prop_name]) {
item[prop_name].push({"value": "", "id": ""});
} else {
item[prop_name] = [{"value": "", "id": ""}];
}
this.changed += 1;
this.save_context();
},
"removeProp": function removeProp(item, prop_name){
delete item[prop_name];
this.changed += 1;
this.save_context();
},
trigger_change_on_enter: function(e) {
if (e.keyCode === 13) {
this.changed += 1;
this.save_context();
}
},
"linkProp": function linkProp(val) {
val.value = context[this.link_to_id].name[0].value
val.id = this.link_to_id
this.changed += 1;
this.save_context();
},
"unlinkProp": function unlinkProp(val) {
val.value = ""
val.id = ""
this.changed += 1;
this.save_context();
},
"addFile": function addFile(file) {
if (!context[file.id]) {
var new_item = JSON.parse(JSON.stringify(schema.types.File.template));
new_item.name[0].value = file.id;
new_item.img = file.img;
context[file.id] = new_item;
this.changed += 1;
this.save_context();
}
else {
alert("Already got that file"); //Should never fire but you never know
}
},
"removeItem": function remove_item(id) {
delete context[id];
this.changed += 1;
this.save_context();
},
"addContext": function addContext(context){
while (context[this.latest_id.toString()]) {
this.latest_id += 1;
}
var id = this.latest_id.toString();
context[id] = JSON.parse(JSON.stringify(schema.types[this.type].template));
context[id].name=[{"value": this.id}]
this.changed += 1;
this.save_context();
}
}
});
//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>