Skip to content
Snippets Groups Projects
index.ejs 7.93 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 -->
      {{this.changed}}
        <h1><a v-bind:href="'?path=' + files.up">.. </a></h1>
          <h2 v-bind:id="id">
            <form v-on:submit.prevent="removeItem(id)">
              {{ id }} 
              <button type="submit">Delete</button>
          </form>
        </h2>
          <img width="60%" v-bind:src='item.img'>
          <table width="100%" >
            
PTSEFTON's avatar
PTSEFTON committed
              <td>{{ name }} </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.id && context[val.id]">
                            <a v-bind:href="'#' + val.id">{{ context[val.id].name[0].value }}</b>
                          </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;'>                     
                              <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="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>
                                </select>
                                <button type="submit">Link</button>
                              </form>
                            </template>
                           


                        
                          </div>
               
PTSEFTON's avatar
PTSEFTON committed
              </td>
            </tr>
          </table>


          <form v-on:submit.prevent="addContextProp(item)">
              <select  v-model="prop_name"  >
                  <option v-for="(prop, prop_name) in schema.properties">{{prop_name}}</option>
                 
PTSEFTON's avatar
PTSEFTON committed
                </select>
              <button type="submit">Add prop</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>
PTSEFTON's avatar
PTSEFTON committed
              </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">
         <template v-if="!(context[file.id])">
PTSEFTON's avatar
PTSEFTON committed
         <h1>{{ file.filename }}</h1>
PTSEFTON's avatar
PTSEFTON committed
         <img width="50%" v-bind:src='file.img'>
         <form v-on:submit.prevent="addFile(file)">
            <button type="submit">Add file to package</button>
        </form>
      </template>
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 = {};
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
      axios.get("/context_entities").then(function(response){
      context = response.data;
      axios.get("/schema").then(function(response){
      schema = 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,
PTSEFTON's avatar
PTSEFTON committed
          prop: {"name":"nom", "value": "val"},
          type: "Person",
          prop_name: "",
          link_id: "",
          changed: 0,
          latest_id: 0

PTSEFTON's avatar
PTSEFTON committed
        },
        methods: {
            "save": function save() {
                  axios.post('/files?path=' + path, this.$data.files.files).then(
                  )
                },
            "save_context": function save_context() {
                  
                  axios.post('/context_entities?path=.', this.context).then(
                    function () {

                    }
PTSEFTON's avatar
PTSEFTON committed
                  )
                },
            "addContextProp": function addContextProp(item){
              var prop_name = this.prop_name;
               if (item[prop_name]) {
                   item[prop_name].push({"value": "", "id": ""});
PTSEFTON's avatar
PTSEFTON committed
               } else {
            },
            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();     
            },

            "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;
                alert(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();
PTSEFTON's avatar
PTSEFTON committed
            },
            "addContext": function addContext(context){
              while (context[this.latest_id.toString()]) {
                this.latest_id += 1;
              var id = this.latest_id.toString();
              context[id] = schema.types[this.type].template;
              console.log('NEW ONE', schema.types[this.type].template )
              context[id].name=[{"value": this.id}]
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
    });
Moises Sacal's avatar
Moises Sacal committed
  </script>
</body>

</html>