Skip to content
Snippets Groups Projects
index.ejs 5.46 KiB
Newer Older
Moises Sacal's avatar
Moises Sacal committed
<!DOCTYPE html>
<html>
<head>
  <title><%= title %></title>
  <link rel='stylesheet' href='/stylesheets/style.css' />
Mike Lynch's avatar
Mike Lynch committed
  <script src="https://unpkg.com/vue"></script>
Moises Sacal's avatar
Moises Sacal committed
</head>
<body>
  <h1><%= title %></h1>
  <div id="files"></div>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
Mike Lynch's avatar
Mike Lynch committed

  <!-- Vue app element -->
PTSEFTON's avatar
PTSEFTON committed
    <div id="app">
PTSEFTON's avatar
PTSEFTON committed
        <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>


         
      
PTSEFTON's avatar
PTSEFTON committed

     <div id="filelist" border="1">
PTSEFTON's avatar
PTSEFTON committed
       <div v-for="(file, path) in files.files">
         <hr>
PTSEFTON's avatar
PTSEFTON committed
         <h1>{{ file.filename }}</h1>
PTSEFTON's avatar
PTSEFTON committed
         <img width="50%" v-bind:src='file.img'>
PTSEFTON's avatar
PTSEFTON committed
         <table>
            <tr>
                <th>Name:</th>
             <td><input v-model="file.name" type="text" size="45"/></td>
            </tr>
          <tr>
            <th>Description:</th>
PTSEFTON's avatar
PTSEFTON committed
         <td><input v-model="file.description" type="text" size="45"/></td> 
         <td>  <button v-on:click="save()">Save</button>
         </td>
PTSEFTON's avatar
PTSEFTON committed
        </tr>
PTSEFTON's avatar
PTSEFTON committed
        </table>
PTSEFTON's avatar
PTSEFTON committed
       </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>

      
PTSEFTON's avatar
PTSEFTON committed
    </div>
Mike Lynch's avatar
Mike Lynch committed
  </div>
Mike Lynch's avatar
Mike Lynch committed
  <!-- end Vue app element -->


Moises Sacal's avatar
Moises Sacal committed
  <script>
Mike Lynch's avatar
Mike Lynch committed

PTSEFTON's avatar
PTSEFTON committed
  var save = function save() {
    console.log(data);
  }
Mike Lynch's avatar
Mike Lynch committed

PTSEFTON's avatar
PTSEFTON committed
  var vue;
  
  var files = {};
  var context = [];
Moises Sacal's avatar
Moises Sacal committed
  document.addEventListener("DOMContentLoaded", function(event) {
PTSEFTON's avatar
PTSEFTON committed
    const urlParams = new URLSearchParams(window.location.search);
     const path = urlParams.get('path');
    axios.get('/files?path=' + path)
Moises Sacal's avatar
Moises Sacal committed
    .then(function (response) {
PTSEFTON's avatar
PTSEFTON committed
      files =  response['data'];
      axios.get("/context_entities").then(function(response){
      context = response.data;
Moises Sacal's avatar
Moises Sacal committed
      // handle success
PTSEFTON's avatar
PTSEFTON committed
      vue = new Vue({
Mike Lynch's avatar
Mike Lynch committed
        el: "#app",
        data: {
PTSEFTON's avatar
PTSEFTON committed
          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]});
            }
          }
Mike Lynch's avatar
Mike Lynch committed
      });
      //document.getElementById("files").innerHTML = response['data'].model;
Moises Sacal's avatar
Moises Sacal committed
    })
    .catch(function (error) {
      // handle error
      console.log(error);
    })
    .then(function () {
PTSEFTON's avatar
PTSEFTON committed
      console.log("done")
Moises Sacal's avatar
Moises Sacal committed
      // always executed
    });
PTSEFTON's avatar
PTSEFTON committed
  })});
Moises Sacal's avatar
Moises Sacal committed
  </script>
</body>

</html>