basic custom media working

cookbook/forms.py

@@ -1,6 +1,17 @@
 from django.utils.translation import gettext as _
 from django import forms
 from .models import *
+from django.forms import widgets, TextInput, DateField
+
+
+class MultiSelectWidget(widgets.SelectMultiple):
+    class Media:
+        js = ('custom/js/from_multiselect.js',)
+
+
+class EmojiWidget(forms.TextInput):
+    class Media:
+        js = 'custom/js/form_emoji.js'
 
 
 class EditRecipeForm(forms.ModelForm):
@@ -16,6 +27,15 @@ class EditRecipeForm(forms.ModelForm):
         }
 
 
+class EditCategoryForm(forms.ModelForm):
+    class Media:
+        js = ('custom/js/form_emoji.js',)
+
+    class Meta:
+        model = Category
+        fields = ('name', 'icon', 'description')
+
+
 class MonitorForm(forms.Form):
     path = forms.CharField(label=_('Path'))
 

cookbook/static/custom/js/form_emoji.js

@@ -0,0 +1,3 @@
+$(document).ready(function () {
+    $('#id_icon').emojioneArea();
+});

cookbook/static/custom/js/form_multiselect.js

@@ -0,0 +1,3 @@
+$(document).ready(function () {
+    $('#id_keywords').select2();
+});

cookbook/templates/base.html

@@ -26,6 +26,9 @@
     <link rel="stylesheet" href="{% static "emojionearea/emojionearea.min.css" %}">
     <script type="text/javascript" src="{% static "emojionearea/emojionearea.min.js" %}"></script>
 
+    {% block extra_head %} <!-- block for templates to put stuff into header -->
+    {% endblock %}
+
     <style>
         @media (max-width: 1025px) {
             .container {

cookbook/templates/generic/edit_template.html

@@ -4,6 +4,10 @@
 
 {% block title %}{% trans 'Edit' %} - {{ title }}{% endblock %}
 
+{% block extra_head %}
+    {{ form.media }}
+{% endblock %}
+
 {% block content %}
 
     <h3>{% trans 'Edit' %} {{ title }}</h3>
@@ -14,14 +18,4 @@
         <input type="submit" value="Submit" class="btn btn-success">
     </form>
 
-
-    <script>
-        //TODO clean this up
-        //converts multiselct in recipe edit to searchable multiselect
-        //shitty solution that needs to be redone at some point
-        $(document).ready(function () {
-            $('#id_keywords').select2();
-            $('#id_icon').emojioneArea();
-        });
-    </script>
 {% endblock %}

cookbook/views/edit.py

@@ -4,7 +4,7 @@ from django.urls import reverse_lazy, reverse
 from django.utils.translation import gettext as _
 from django.views.generic import UpdateView, DeleteView
 
-from cookbook.forms import EditRecipeForm
+from cookbook.forms import EditRecipeForm, EditCategoryForm
 from cookbook.models import Recipe, Category, Sync, Keyword, RecipeImport
 
 
@@ -27,7 +27,7 @@ class MonitorUpdate(LoginRequiredMixin, UpdateView):
 class CategoryUpdate(LoginRequiredMixin, UpdateView):
     template_name = "generic\edit_template.html"
     model = Category
-    fields = ['name', 'icon', 'description']
+    form_class = EditCategoryForm
 
     # TODO add msg box