update assets

aircox/forms/episode.py

@@ -14,15 +14,27 @@ class EpisodeForm(ChildPageForm):
         fields = ChildPageForm.Meta.fields
 
 
+class EpisodeSoundForm(forms.ModelForm):
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+        if "instance" in kwargs:
+            """Limit available sounds."""
+            episode_sounds = kwargs["instance"].episode.episodesound_set.all()
+            self.fields["sound"].queryset = models.Sound.objects.filter(id__in=[x.sound.id for x in episode_sounds])
+
+
 EpisodeSoundFormSet = modelformset_factory(
     models.EpisodeSound,
+    form=EpisodeSoundForm,
     fields=(
+        "id",
         "position",
         "episode",
         "sound",
         "broadcast",
     ),
     widgets={
+        "id": forms.HiddenInput(),
         "broadcast": forms.CheckboxInput(),
         "episode": forms.HiddenInput(),
         # "sound": forms.HiddenInput(),

aircox/views/episode.py

@@ -5,7 +5,7 @@ from django.urls import reverse
 from django.utils.translation import gettext_lazy as _
 from django.views.generic.base import View
 
-from aircox.models import Episode, Program, StaticPage, Track
+from aircox.models import Episode, Program, StaticPage, Sound, Track
 from aircox import forms, filters, permissions
 
 from .mixins import VueFormDataMixin
@@ -144,6 +144,14 @@ class EpisodeUpdateView(UserPassesTestMixin, VueFormDataMixin, PageUpdateView):
         for key in ("soundlist_formset", "tracklist_formset"):
             formset = kwargs[key]
             kwargs[f"{key}_data"] = self.get_formset_data(formset, {"episode": self.object.id})
+
+        for i, episode_sound in enumerate(kwargs["soundlist_formset_data"]["initials"]):
+            # annotate sound properties for vuejs
+            sound = Sound.objects.get(id=episode_sound["sound"])
+            kwargs["soundlist_formset_data"]["initials"][i]["name"] = sound.name
+            kwargs["soundlist_formset_data"]["initials"][i]["url"] = sound.file.url
+            kwargs["soundlist_formset_data"]["initials"][i]["delete_attr_name"] = f"sounds-{i}-DELETE"
+
         return super().get_context_data(**kwargs)
 
     def post(self, request, *args, **kwargs):

radiocampus/assets/src/backgroundLoad.js

@@ -1,27 +0,0 @@
-// Enable styling body background while using vue hotreload
-// Tags with side effect (<script> and <style>) are ignored in client component templates.
-
-const backgrounds = new Map();
-backgrounds.set('default', "linear-gradient(#738ef2, white)");
-backgrounds.set('/', "url(/static/radiocampus/backgrounds/photo-04-20.jpg) no-repeat center center fixed");
-
-
-export default class BackgroundLoad {
-    constructor () {
-        let url = new URL(document.location)
-        this.path = url.pathname
-        this.update()
-        document.addEventListener("pageLoaded", this.handlePageLoad.bind(this), false)
-    }
-
-    handlePageLoad (e) {
-        this.path = e.detail
-        this.update()
-    }
-
-    update () {
-        let background = backgrounds.get(this.path) || backgrounds.get("default")
-        document.body.style.background = background;
-        document.body.style.backgroundSize = "cover";
-    }
-}

radiocampus/assets/src/components/AFormSet.vue

@@ -108,6 +108,7 @@
 
             //! If provided call this function instead of adding an item to rows on "+" button click.
             actionAdd: Function,
+            actionRemove: Function,
 
             //! If True, columns can be reordered
             columnsOrderable: Boolean,
@@ -161,14 +162,12 @@
                 this.$emit('move', {...event, seŧ: set_})
             },
 
-            removeItem(row) {
-                const item = this.items[row]
-                if(item.id) {
-                    // TODO
-                }
-                else {
-                    this.items.splice(row,1)
+            removeItem(row, item) {
+                if(this.actionRemove) {
+                    this.actionRemove(row, item);
+                    return
                 }
+                this.items.splice(row,1)
             },
 
             //! Load items into set

radiocampus/assets/src/components/ASoundListEditor.vue

@@ -24,7 +24,9 @@
         <a-form-set ref="formset" :form-data="formData" :labels="labels"
                 :initials="initData.items"
                 order-by="position"
-                :action-add="actionAdd">
+                :action-add="actionAdd"
+                :action-remove="actionRemove"
+                >
             <template v-for="[name,slot] of rowsSlots" :key="slot"
                     v-slot:[slot]="data">
                 <slot v-if="name != 'row-tail'" :name="name" v-bind="data"/>
@@ -34,6 +36,7 @@
                 <label>{{ item.data.name }}</label><br>
                 <audio controls :src="item.data.url"/>
                 <input type="hidden" :name="inputName" :value="item.data.sound"/>
+                <input type="checkbox" :name="item.data.delete_attr_name" :id="item.data.delete_attr_name" style="display:none;">
             </template>
         </a-form-set>
     </div>
@@ -78,6 +81,12 @@ export default {
             }
             this.$refs.formset.set.push(data)
          },
+
+        actionRemove(row, item) {
+            var ckbox = document.getElementById(item.data.delete_attr_name);
+            ckbox.checked = true;
+            ckbox.parentNode.parentNode.style["display"] = "none";
+        },
     },
 }
 </script>

radiocampus/assets/src/vueLoader.js

@@ -1,7 +1,6 @@
 import {createApp} from 'vue'
 
 import PageLoad from './pageLoad'
-import BackgroundLoad from './backgroundLoad'
 
 
 /**

static/assets/public.js

@@ -0,0 +1,2 @@
+import{A as p}from"./index.js";import"vue";window.App=p;
+//# sourceMappingURL=public.js.map

static/assets/public.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"public.js","sources":["../../radiocampus/assets/src/public.js"],"sourcesContent":["import \"./styles/public.scss\"\nimport './index.js'\nimport App from './app.js'\n\nwindow.App = App\n"],"names":["App"],"mappings":"2CAIA,OAAO,IAAMA"}