<!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" > {{ changed }} <h1><a v-bind:href="'?path=' + files.up + '&dataset_path=' + dataset_path">.. </a></h1> <template v-if="context && context.entities"> <template v-for="(item, id) in context.entities"> <h2 v-bind:id="id"> <form v-on:submit.prevent="removeItem(id)"> <button type="submit">-</button> {{ id }} </form> <form v-if="id === context.root" v-on:submit.prevent="crate(item)"> <button type="submit" title="Make / Update a DataCrate here (generate CATALOG.json and CATALOG.html)">[crate]</button> <a v-if="item.crate_href" v-bind:href="item.crate_href">View CATALOG.html</a> </form> </h2> <img width="60%" v-bind:src='item._img'> <table width="100%" > <tr v-for="(values, name) in item.properties"> <td> <form v-on:submit.prevent="removeProp(item.properties, name)" style='display:inline;'> <button type="submit">-</button> </form> {{ name }} </td> <td> <form v-on:submit.prevent="addProp(item.properties, name)" style='display:inline;'> <button type="submit">+</button> </form> </td> <td> <div v-for="(val, i_index) in values"> <!-- TODO - make sure it's deletable --> <form v-on:submit.prevent="unlinkProp(val)" style='display:inline;'> <button type="submit" title="Delete this property">-</button> </form> <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.entities[val.id] && context.entities[val.id].properties.name"> <a v-bind:href="'#' + val.id">{{ context.entities[val.id].properties.name[0].value }}</b></a> <form v-on:submit.prevent="unlinkProp(val)" style='display:inline;'> <button type="submit">unlink</button> </form> </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;' v-if="!val.id"> <button type="submit"> -> </button> <select v-model="val.selection" > <template v-for="(link_item, link_id) in context.entities"> <template v-for="other_name in link_item.properties.name"> <option v-if="(!val.id || link_id != val.id) && schema.properties[name] && link_item.properties.type && schema.properties[name].type.includes(link_item.properties.type[0].value)" v-bind:value="link_id">{{ other_name.value }}</select> </template> </template> </select> </select> </form> <form v-on:submit.prevent="linkToNew(val)" style='display:inline;' v-if="!val.id && schema.properties[name].type.filter(type => {return (schema.types[type] && schema.types[type].create)}).length > 0"> ... or ... <button type="submit" text="Link to a new contextual item"> -> New -> </button> <select v-model="val.new_type" > <template v-for="type in schema.properties[name].type.filter(type => {return (schema.types[type] && schema.types[type].create)})"> <option> {{ type }} </option> </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.properties[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_name in Object.getOwnPropertyNames(schema.types).filter(type => {return schema.types[type].create})" v-bind:value="type_name"> {{ type_name }} </option> </select> <button type="submit">Add contextual item</button> </form> </template> <h1> <a v-bind:href="'/?path=' + display_path + '&dataset_path=' + dataset_path"> <template v-if="files.existing_describo"> Edit existing data package </template> <template v-else> Package a dataset here </template> </a> </h1> <table> <tr> <tr> <th>Directories</th> <th>Files</th> </tr> <tr> <td> <div id="dirlist"> <ul v-for="dir in files.dirs"> <li><a v-bind:href="'?path=' + dir.absolute + '&dataset_path=' + dataset_path">{{ dir.name }}</a> <form v-if="context.entities" v-on:submit.prevent="addDir(dir)" style="display:inline;"> <button type="submit" title="Add directory to package">+</button> </form></li> </ul> </div> </td> <td> <div id="filelist"> <div v-for="(file, path) in files.files"> <template v-if="!(context.entities[file.id])"> <h4>{{ file.filename }} <form v-if="context.entities" v-on:submit.prevent="addFile(file)" style="display:inline;"> <button type="submit" title="Add file to package">+</button></h4> <img width="50%" v-bind:src='file._img'> </form> </template> </div> </div> </td> </div> </tr> </table> </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 display_path = urlParams.get('path'); const dataset_path = urlParams.get('dataset_path'); const addRootDir = function addRootDir(context) { if (!context.entities[dataset_path]) { var new_item = JSON.parse(JSON.stringify(schema.types.Dataset.template)); new_item.properties.name[0].value = "Untitled"; new_item.properties.hasPart = []; context.entities[dataset_path] = new_item; } } axios.get('/files?path=' + display_path) .then(function (response) { files = response.data; var params = dataset_path ? '?dataset_path=' + dataset_path : ""; axios.get("/schema").then(function(response){ schema = response.data; axios.get("/context_entities" + params).then(function(response){ var context = response.data; context.root = dataset_path; addRootDir(context); // 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, display_path: display_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 () { } ) }, "crate": function crate(item) { var params = '?dataset_path=' + this.dataset_path; var href = "/preview?path=" + this.dataset_path + "/CATALOG.html" var save = this.save_context; axios.get('/crate' + params).then( function () { item.crate_href = href; save(); } ) }, "addContextProp": function addContextProp(item){ // Warning! Repetition! var prop_name = this.prop_name; if (item.properties[prop_name]) { item.properties[prop_name].push({"value": "", "id": ""}); } else { item.properties[prop_name] = [{"value": "", "id": ""}]; } this.changed += 1; this.save_context(); }, "addProp": function addProp(item, prop_name){ if (item.properties[prop_name]) { item.properties[prop_name].push({"value": "", "id": ""}); } else { item.properties[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.entities[val.selection].properties.name[0].value; val.id = val.selection; this.changed += 1; this.save_context(); }, "unlinkProp": function unlinkProp(val) { val.value = ""; val.id = ""; this.changed += 1; this.save_context(); }, "directory_path" : function directory(file) { var container_dir_array = file.id.split("/"); container_dir_array.pop(); var container_dir = container_dir_array.join("/"); var dir_name = container_dir_array.pop(); return({"dir_name": dir_name, dir_path: container_dir }) }, "addParentDataset": function addParentDataset(file) { var dir_details = this.directory_path(file); var diff = dir_details.dir_path.replace(context.root, ""); // Don't make dirs outside of the package if (diff != dir_details.dir_path && !context.entities[dir_details.dir_path]) { var dir = {"id": dir_details.dir_path, "name": dir_details.dir_name}; this.addDir(dir); context.entities[dir_details.dir_path].properties.hasPart = []; } context.entities[dir_details.dir_path].properties.hasPart.push({"id": file.id}); this.changed += 1; this.save_context(); }, "addFile": function addFile(file) { if (!context.entities[file.id]) { var new_item = JSON.parse(JSON.stringify(schema.types.File.template)); new_item.properties.name[0].value = file.name; new_item._img = file._img; context.entities[file.id] = new_item; this.addParentDataset(file); } }, "addRootDir": addRootDir, "addDir": function addDir(file) { if (!context.entities[file.id]) { var new_item = JSON.parse(JSON.stringify(schema.types.Dataset.template)); new_item.properties.name[0].value = file.name; new_item.properties.hasPart = []; context.entities[file.id] = new_item; this.addParentDataset(file); this.changed += 1; this.save_context(); } else { alert("Already got that directory"); //Should never fire but you never know } }, "removeItem": function remove_item(id) { delete context.entities[id]; this.changed += 1; this.save_context(); }, "linkToNew" : function linkToNew(val) { this.type = val.new_type; val.id = this.addContext(context); this.save_context(); }, "addContext": function addContext(context){ while (context.entities[this.latest_id.toString()]) { this.latest_id += 1; } var id = this.latest_id.toString(); context.entities[id] = JSON.parse(JSON.stringify(schema.types[this.type].template)); context.entities[id].properties.name=[{"value": this.type + "(" + id + ")"}] this.changed += 1; this.save_context(); return(id); } } }); //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>