Tagging using JS using Partials
This commit is contained in:
parent
66581a9d2d
commit
e4cd8bb301
53
lostplaces/lostplaces_app/templates/partials/tagging.html
Normal file
53
lostplaces/lostplaces_app/templates/partials/tagging.html
Normal 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>
|
@ -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">
|
||||
|
@ -13,6 +13,8 @@ from lostplaces_app.models import Place, PlaceImage
|
||||
from lostplaces_app.views import IsAuthenticated, IsPlaceSubmitter
|
||||
from lostplaces_app.forms import PlaceForm, PlaceImageCreateForm, TagSubmitForm
|
||||
|
||||
from taggit.models import Tag
|
||||
|
||||
class PlaceListView(IsAuthenticated, ListView):
|
||||
paginate_by = 5
|
||||
model = Place
|
||||
@ -31,7 +33,8 @@ class PlaceDetailView(IsAuthenticated, View):
|
||||
'place': place,
|
||||
'place_list': [ place ],
|
||||
'place_map_center': [ place.latitude, place.longitude ],
|
||||
'tagging_form': TagSubmitForm()
|
||||
'tagging_form': TagSubmitForm(),
|
||||
'all_tags': Tag.objects.all()
|
||||
}
|
||||
return render(request, 'place/place_detail.html', context)
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user