New xanalink page uses vue.js

sourcing/static/js/new_xanalink.js

@@ -1,11 +1,62 @@
-$(function () {
+new Vue({
-  $('#custom-field').hide();
+  el: '#app',
+  data: {
+    link_types: ['untyped', 'comment', 'title', 'author'],
+    address_types: ['xanapage', 'link', 'sourcedoc', 'span'],
+    link_type: "",
+    facets: []
+  },
+  methods: {
+    suggest_link_type(item) {
+      this.link_type = item != 'untyped' ? item : '';
+    },
+    suggest_address_type(item, facet_index, leg_index) {
+      console.log(item, facet_index, leg_index);
+      Vue.set(this.facets[facet_index], leg_index, item + ': ');
+    },
+    new_facet(e) {
+      this.facets.push(['']);
+    },
+    new_leg(facet) {
+      facet.push('');
+    },
+    delete_leg(facet_index, leg_index) {
+      var facet = this.facets[facet_index];
+      facet.splice(leg_index, 1);
+      if (facet.length == 0) {
+        this.facets.splice(facet_index, 1);
+      }
+    },
+    delete_facet(facet_index) {
+      this.facets.splice(facet_index, 1);
+    },
+    save(e) {
+      var post_data = {
+        'link_type': this.link_type,
+        'facets': this.facets,
+      }
+      fetch(window.location.href, {
+        method: 'POST',
+        headers: {
+          "Content-Type": "application/json; charset=utf-8",
+        },
+        body: JSON.stringify(post_data)
+      })
+      .then(response => response.json())
+      .then(json => {
+        window.location.href = json.url;
+      });
+    },
+  },
+  computed: {
+    disable_save() {
+      return !(this.facets.length && this.facets[0][0] != '');
+    },
+    link_text() {
+      var text = 'type=' + this.link_type;
+
+      return text;
 
-  $('.link-type-radio').click(function() {
-    if (this.id == 'btn-custom') {
-      $('#custom-field').show();
-    } else {
-      $('#custom-field').hide();
     }
-  });
+  },
 });

sourcing/templates/new_xanalink.html

@@ -1,34 +1,85 @@
 {% extends "base.html" %}
 
 {% block title %}New xanalink {% endblock %}
-{% set link_types = ['untyped', 'title', 'author', 'custom'] %}
 
 {% block content %}
   <h1 class="mt-3">{{ self.title() }}</h1>
 
-
+  {% raw %}
-  <p>This is an empty link. You should add some facets.</p>
+  <div id="app">
-
+  <div class="row">
+  <div class="col">
+  <form>
   <h4>link type</h4>
-<div class="btn-group btn-group-toggle" data-toggle="buttons">
-  {% for link_type in link_types %}
-    <label class="btn btn-info{% if loop.index == 1 %} active{% endif %} link-type-radio" id="btn-{{ link_type }}">
-      <input type="radio" class="link-type-radio2" id="radio-{{ link_type }}" autocomplete="off"{% if loop.index == 1 %} checked{% endif %}> {{ link_type }}
-    </label>
-  {% endfor %}
-</div>
-  <p id="custom-field" class="mt-2">custom link type: <input type="text"></p>
 
-  <h4>new facet</h4>
+  link type:
 
+  <span v-for="(item, index) in link_types">
+    <span v-if="index != 0">&nbsp;|&nbsp;</span>
+    <a href="#" @click.prevent="suggest_link_type(item)">{{ item }}</a>
+  </span>
 
+  <p class="mt-2">
+    <input type="text" class="form-control" v-model="link_type"/>
+  </p>
 
-  <button class="btn btn-primary">add a facet</button>
+  <h4>facets</h4>
 
-  <button class="btn btn-primary">save</button>
+  <div v-for="(facet, facet_index) in facets">
+    <div>facet {{ facet_index + 1 }}
+      <a href="#" @click.prevent="delete_facet(facet_index)">delete</a>
+      <div v-for="(leg, leg_index) in facet">
+        leg:
+        <span v-for="(item, index) in address_types">
+          <span v-if="index != 0">&nbsp;|&nbsp;</span>
+          <a href="#" @click.prevent="suggest_address_type(item, facet_index, leg_index)">{{ item }}</a>
+        </span>
+      <div class="form-row align-items-center">
+        <div class="col">
+          <input type="text" class="form-control" v-model="facets[facet_index][leg_index]" />
+        </div>
+        <div class="col-auto">
+          <a href="#" @click.prevent="delete_leg(facet_index, leg_index)">delete</a>
+        </div>
+      </div>
+      </div>
+      <p><a href="#" @click.prevent="new_leg(facet)">new leg</a></p>
+    </div>
+  </div>
+
+  <p><a href="#" @click.prevent="new_facet">new facet</a></p>
+
+  <button class="btn btn-primary" @click.prevent="save" :disabled="disable_save">save</button>
+  </form>
+
+  </div>
+  <div class="col">
+    <div class="card">
+      <div class="card-header">
+        Link source code preview
+      </div>
+      <div class="card-body">
+        <div id="text">
+        type={{ link_type }}<br/>
+        <span v-for="facet in facets">
+          <span v-if="facet && facet[0] != ''">
+            facet=<br>
+            <span v-for="leg in facet">
+              {{ leg }}<br/>
+            </span>
+          </span>
+        </span>
+        </div>
+      </div>
+    </div>
+  </div>
+  </div>
+  </div>
+  {% endraw %}
 
 {% endblock %}
 
 {% block scripts %}
+<script src="{{ url_for('static', filename='js/vue.js') }}"></script>
 <script src="{{ url_for('static', filename='js/new_xanalink.js') }}"></script>
 {% endblock %}

sourcing/view.py

@@ -373,9 +373,9 @@ def new_sourcedoc():
         return redirect(doc.url)
     return render_template('new.html', form=form, item_type='source document')
 
-@bp.route('/new/xanalink', methods=['GET', 'POST'])
+@bp.route('/new/xanalink/raw', methods=['GET', 'POST'])
 @login_required
-def new_xanalink():
+def new_xanalink_raw():
     form = ItemForm()
     if form.validate_on_submit():
         obj = XanaLink(user=current_user)
@@ -386,6 +386,24 @@ def new_xanalink():
         return redirect(obj.url)
     return render_template('new.html', form=form, item_type='xanalink')
 
+@bp.route('/new/xanalink', methods=['GET', 'POST'])
+@login_required
+def new_xanalink():
+    if request.method != 'POST':
+        return render_template('new_xanalink.html')
+
+    data = request.get_json()
+    lines = ['type=' + data['link_type']]
+    for facet in data['facets']:
+        lines += ['facet='] + facet
+    text = ''.join(line + '\n' for line in lines)
+    print(text)
+    obj = XanaLink(user=current_user, text=text)
+    session.add(obj)
+    session.commit()
+    flash('New xanalink saved.')
+    return jsonify(url=obj.url)
+
 @bp.route('/new/xanadoc', methods=['GET', 'POST'])
 @login_required
 def new_xanadoc():