Commander1024/lostplaces-backend
1
0
Fork 0
Code Issues 14 Pull Requests Releases Wiki Activity

Tagging using JS using Partials

Browse Source
This commit is contained in:
reverend
2020-08-31 18:18:24 +02:00
parent 66581a9d2d
commit e4cd8bb301
3 changed files with 59 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
lostplaces/lostplaces_app/templates/partials/tagging.html Normal file
View File

@@ -0,0 +1,53 @@
<div class="LP-TagList">
<ul class="LP-TagList__List">
{% for tag in tag_list %}
<li class="LP-TagList__Item">
<div class="LP-Tag">
<p class="LP-Paragraph">{{tag}}</p>
</div>
</li>
{% endfor %}
</ul>
</div>
<form id="id_tag_submit_form" class="LP-Form LP-Form--inline" method="POST" action="{{url}}">
<fieldset class="LP-Form__Fieldset">
<legend class="LP-Form__Legend">Tags hinzufügen</legend>
{% csrf_token %}
<div class="LP-Form__Composition LP-Form__Composition--breakable">
<div class="LP-Form__Field">
{% include 'partials/form/inputField.html' with field=input_field %}
</div>
<div class="LP-Form__Field LP-Form__Button LP-Input">
<button id="id_tag_submit_button" class="LP-Button">hinzufügen</button>
</div>
</div>
</fieldset>
</form>
<script>
const input = document.getElementById('{{input_field.auto_id}}')
const submit_form = document.getElementById('id_tag_submit_form')
const submit_button = document.getElementById('id_tag_submit_button')
submit_form.onsubmit = () => false
const tagify = new Tagify(input, {
'whitelist': [
{% for tag in all_tags %}
'{{tag}}',
{% endfor %}
]
})
const on_form_submit = function() {
concat_value = ''
console.log(tagify)
concat_value = tagify.value.map(value => value.value).join(',')
console.log(concat_value)
input.value = concat_value
submit_form.submit()
}
submit_button.onclick = on_form_submit
</script>

39
lostplaces/lostplaces_app/templates/place/place_detail.html
View File

@@ -38,45 +38,10 @@
</div>
<section class="LP-Section">
<!--
<input name='basic' value='tag1, tag2'>
<script>
// The DOM element you wish to replace with Tagify
var input = document.querySelector('input[name=basic]');
// initialize Tagify on the above input node reference
new Tagify(input, {
'whitelist': ['wurstwasser']
})
</script>-->
{% url 'place_tag_submit' place_id=place.id as tag_submit_url%}
{% include 'partials/tagging.html' with tag_list=place.tags.all url=tag_submit_url input_field=tagging_form.tag_list%}
<div class="LP-TagList">
<ul class="LP-TagList__List">
{% for tag in place.tags.all %}
<li class="LP-TagList__Item">
<div class="LP-Tag">
<p class="LP-Paragraph">{{tag}}</p>
</div>
</li>
{% endfor %}
</ul>
</div>
<form class="LP-Form LP-Form--inline" method="POST" action="{% url 'place_tag_submit' place_id=place.id %}">
<fieldset class="LP-Form__Fieldset">
<legend class="LP-Form__Legend">Tags hinzufügen</legend>
{% csrf_token %}
<div class="LP-Form__Composition LP-Form__Composition--breakable">
<div class="LP-Form__Field">
{% include 'partials/form/inputField.html' with field=tagging_form.tag_list %}
</div>
<div class="LP-Form__Field LP-Form__Button LP-Input">
<button class="LP-Button">hinzufügen</button>
</div>
</div>
</fieldset>
</form>
</section>
<section class="LP-Section">