edward/sourcing
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

New xanalink page uses vue.js

Browse source
This commit is contained in:
Edward Betts 2018-10-11 21:17:51 +01:00
parent b6f3075ba4
commit 93438ecbd8
3 changed files with 145 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

67
sourcing/static/js/new_xanalink.js
View file

@ -1,11 +1,62 @@
$(function () {
$('#custom-field').hide();
new Vue({
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();
}
});
},
});

81
sourcing/templates/new_xanalink.html
View file

@ -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>
<p>This is an empty link. You should add some facets.</p>
{% raw %}
<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 %}

22
sourcing/view.py
View file

@ -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():