From f3cfab6b912a202acdb763694543b94688196a5b Mon Sep 17 00:00:00 2001 From: Peter Sefton <peter.sefton@uts.edu.au> Date: Tue, 22 Jan 2019 18:37:29 +1100 Subject: [PATCH] Got some basic linked data stuff happening - can create context items and use them as values --- views/index.ejs | 78 +++++++++++++++++++++++++++++-------------------- 1 file changed, 46 insertions(+), 32 deletions(-) diff --git a/views/index.ejs b/views/index.ejs index 8285a65..b578b56 100644 --- a/views/index.ejs +++ b/views/index.ejs @@ -12,36 +12,43 @@ <!-- Vue app element --> <div id="app"> + {{context}} {{changed}} <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> + <template v-for="(item, id) in context"> <table> - <tr v-for="(value, name) in item"> + <tr><th>ID</th><th>{{ id }}</tr> + <tr v-for="(values, 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> + <tr v-for="(val, i_index) in values"> + <td> + <template v-if="val.id"> + <b>{{ context[val.id].name[0].value }} ({{ val.id }})</b> + </template> + <template v-else> + <input v-model="val.value" type="text" size="45"/> + </template> + </td> + <td> + <template v-if="!['name','type', 'description'].includes(name) " > + <form v-on:submit.prevent="linkProp(val)"> + <select v-model="link_to_id" > + <template v-for="(link_item, link_id) in context"> + <template v-for="name in link_item.name"> + <option v-if="link_id != val.id" v-bind:value="link_id">{{ name.value }}</select> + </template> + </template> + </select> + <button type="submit">Link</button> + </form> + </template> + </td> + </tr> </table> + </td> </tr> </table> @@ -49,7 +56,6 @@ <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> @@ -141,7 +147,8 @@ prop: {"name":"nom", "value": "val"}, type: "Person", prop_name: "", - link_name: "" + link_to_id: "", + changed: 0 }, methods: { "save": function save() { @@ -152,15 +159,22 @@ "addContextProp": function addContextProp(item){ var prop_name = this.prop_name; if (item[prop_name]) { - item[prop_name].push(""); + item[prop_name].push({"value": "", "id": ""}); } else { - item[prop_name] = [""]; + item[prop_name] = [{"value": "", "id": ""}]; } - context.push(""); - context.pop(); + this.changed += 1; + + }, + "linkProp": function linkProp(val) { + console.log("ID", this.link_to_id) + console.log("VAL", val.value) + val.value = context[this.link_to_id].name[0].value + val.id = this.link_to_id + this.changed += 1; + }, "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); @@ -168,7 +182,7 @@ }); } var id = "_b" + uuid4() - context.push({"@id": [id], "@type": [this.type]}); + context[id] = { "@type": [{"value": this.type}], "name": [{"value" : id}]}; } } }); -- GitLab