Default Embed Colour control & abstracted colour inputs

apps/api/serializers.py

@@ -172,7 +172,7 @@ class SavedGuildSerializer(DynamicModelSerializer):
 
     class Meta:
         model = SavedGuilds
-        fields = ("id", "guild_id", "name", "icon", "added_by", "permissions", "owner")
+        fields = ("id", "guild_id", "name", "icon", "added_by", "permissions", "default_embed_colour", "owner")
 
 
 class TrackedContentSerializer_GET(DynamicModelSerializer):

apps/home/migrations/0019_savedguilds_default_embed_colour.py

@@ -0,0 +1,18 @@
+# Generated by Django 5.0.4 on 2024-07-23 14:28
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('home', '0018_subchannel_channel_name'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='savedguilds',
+            name='default_embed_colour',
+            field=models.CharField(blank=True, default='3498db', max_length=6),
+        ),
+    ]

apps/home/models.py

@@ -56,6 +56,12 @@ class SavedGuilds(models.Model):
         help_text=_("Does the 'added by' user own this guild?")
     )
 
+    default_embed_colour = models.CharField(
+        max_length=6,
+        default="3498db",
+        blank=True
+    )
+
     class Meta:
         """
         Metadata for the SavedGuilds Model.

apps/static/css/home/index.css

@@ -70,3 +70,7 @@ td {
         height: 100%;
     }
 }
+
+#serverTabs .nav-link {
+  border-radius: 0;
+}

apps/static/js/home/index.js

@@ -11,11 +11,11 @@ $(document).ready(async function() {
     handleDiscordChannelNames();
 });
 
-$('#serverTabs [data-bs-toggle="tab"]').on("show.bs.tab", function(event) {
+// $('#serverTabs [data-bs-toggle="tab"]').on("show.bs.tab", function(event) {
-    const activeTab = $(event.target);
+//     const activeTab = $(event.target);
-    $(".tab-pane-buttons .tab-pane-buttons-item").hide();
+//     $(".tab-pane-buttons .tab-pane-buttons-item").hide();
-    $(`.tab-pane-buttons .tab-pane-buttons-item[data-tab="${activeTab.attr("id")}"]`).show();
+//     $(`.tab-pane-buttons .tab-pane-buttons-item[data-tab="${activeTab.attr("id")}"]`).show();
-});
+// });
 
 $(document).on("selectedServerChange", function() {
     $("#subscriptionsTab").click();
@@ -63,4 +63,63 @@ function genHexString(len) {
         output += (Math.floor(Math.random() * 16)).toString(16);
     }
     return output;
-}
+}
+
+// #region Colour Controls
+$(".colour-control-picker").on("change", function() {
+    $(this).closest(".colour-control-group").find(".colour-control-text").val($(this).val());
+});
+
+$(".colour-control-text").on("change", function() {
+    $(this).closest(".colour-control-group").find(".colour-control-picker").val($(this).val());
+});
+
+function updateColourInput(id, hexString) {
+    hexString = hexString.toUpperCase();
+    $(`#${id} .colour-picker`).val(hexString);
+    $(`#${id} .colour-text`).val(hexString);
+}
+
+$(document).ready(function() {
+    $(".colour-input").each(function() {
+        let id = $(this).attr("data-id")
+            label = $(this).attr("data-label");
+            helpText = $(this).attr("data-helptext");
+            defaultColour = $(this).attr("data-defaultcolour");
+            defaultColour = defaultColour ? defaultColour : "#3498db"
+
+        $(this).replaceWith(`
+            <label for="${id}Picker" class="form-label">${label}</label>
+            <div id="${id}" class="input-group">
+                <input type="color" name="${id}Picker" id="${id}Picker" class="form-control-color input-group-text colour-picker">
+                <input type="text" name="${id}Text" id="${id}Text" class="form-control colour-text">
+                <button type="button" class="btn btn-secondary colour-reset" data-bs-toggle="tooltip" data-bs-title="Reset Colour" data-defaultcolour="${defaultColour}">
+                    <i class="bi bi-arrow-clockwise"></i>
+                </button>
+                <button type="button" class="btn btn-secondary colour-random" data-bs-toggle="tooltip" data-bs-title="Random Colour">
+                    <i class="bi bi-dice-5"></i>
+                </button>
+            </div>
+            <div class="form-text">${helpText}</div>
+        `);
+
+        $(`#${id} .colour-picker`).on("change", function() {
+            updateColourInput(id, $(this).val());
+        });
+
+        $(`#${id} .colour-text`).on("change", function() {
+            updateColourInput(id, $(this).val());
+        });
+
+        $(`#${id} .colour-reset`).on("click", function() {
+            updateColourInput(id, $(this).attr("data-defaultcolour"));
+        });
+
+        $(`#${id} .colour-random`).on("click", function() {
+            updateColourInput(id, "#" + genHexString(6));
+        });
+
+        updateColourInput(id, defaultColour)
+        $(`#${id} [data-bs-toggle="tooltip"]`).tooltip();
+    });
+});

apps/static/js/home/subscriptions.js

@@ -200,7 +200,7 @@ async function showEditSubModal(subId) {
         $("#subDescMutators").val("").change();
         $("#subActive").prop("checked", true);
 
-        $("#subResetEmbedColour").click();
+        $("#subEmbedColour .colour-reset").click();
         $("#subArticleFetchImage").prop("checked", true);
 
         $("#subPubThreshold").val(getCurrentDateTime());
@@ -231,7 +231,7 @@ async function showEditSubModal(subId) {
         $("#subFilters").val("").change();
         $("#subFilters").val(subscription.filters).change();
 
-        subSetHexColour(`#${subscription.embed_colour}`);
+        updateColourInput("subEmbedColour", `#${subscription.embed_colour}`);
         $("#subArticleFetchImage").prop("checked", subscription.article_fetch_image);
 
         $("#subPubThreshold").val(subscription.published_threshold.split('+')[0]);
@@ -255,7 +255,7 @@ $("#subForm").on("submit", async function(event) {
             title: $("#subTitleMutators option:selected").toArray().map(mutator => parseInt(mutator.value)),
             desc: $("#subDescMutators option:selected").toArray().map(mutator => parseInt(mutator.value))
         }
-        subEmbedColour = $("#subEmbedColour").val().split("#")[1];
+        subEmbedColour = $("#subEmbedColour .colour-text").val().split("#")[1];
         articleFetchImage = $("#subArticleFetchImage").prop("checked")
         publishedThreshold = $("#subPubThreshold").val();
         active = $("#subActive").prop("checked");
@@ -382,6 +382,9 @@ $(document).on("selectedServerChange", async function() {
     updateBotInviteLink();
 
     const activeServer = getCurrentlyActiveServer();
+
+    $("#subEmbedColour .colour-reset").attr("data-defaultcolour", "#" + activeServer.default_embed_colour);
+
     await loadSubscriptions(activeServer.guild_id);
     await loadChannelOptions(activeServer.guild_id);
     await loadFilterOptions(activeServer.guild_id);
@@ -622,31 +625,3 @@ function updateBotInviteLink() {
 
     $("#invitePyrssToServerBtn").attr("href", inviteUrl);
 }
-
-// #region Colour Controls
-$("#subEmbedColour").on("change", function() {
-    $("#subEmbedColourText").val($(this).val());
-});
-
-$("#subEmbedColourText").on("change", function() {
-    $("#subEmbedColour").val($(this).val());
-});
-
-function subSetHexColour(hexString) {
-    hexString = hexString.toUpperCase();
-    $("#subEmbedColour").val(hexString);
-    $("#subEmbedColourText").val(hexString);
-}
-
-$(document).ready(async () => {$("#subResetEmbedColour").click() });
-    // let options = await getSubscriptionOptions();
-    // console.log(JSON.stringify(options.actions.GET.creation_datetime));
-
-$("#subResetEmbedColour").on("click", function() {
-    subSetHexColour("#3498db");
-});
-
-$("#subRandomEmbedColour").on("click", function() {
-    subSetHexColour(`#${genHexString(6)}`);
-});
-// #endregion

apps/templates/home/includes/settingstab.html

@@ -0,0 +1,12 @@
+<form id="serverSettingsForm" novalidate>
+    <div class="row px-3">
+        <div class="col-lg-4">
+            <div class="colour-input"
+                data-id="defaultEmbedColour"
+                data-label="Default Embed Colour"
+                data-helptext="Default colour of each embed in Discord."
+                data-defaultcolour="#3498db">
+            </div>
+        </div>
+    </div>
+</form>

apps/templates/home/includes/submodal.html

@@ -118,18 +118,11 @@
                         </div>
                         <div class="col-lg-6 pe-lg-4">
                             <div class="mb-4">
-                                <label for="subEmbedColour" class="form-label">Embed Colour</label>
+                                <div class="colour-input"
-                                <div class="input-group">
+                                    data-id="subEmbedColour"
-                                    <input type="color" name="subEmbedColour" id="subEmbedColour" class="form-control-color input-group-text">
+                                    data-label="Embed Colour"
-                                    <input type="text" name="subEmbedColourText" id="subEmbedColourText" class="form-control">
+                                    data-helptext="Colour of each embed in Discord.">
-                                    <button type="button" id="subResetEmbedColour" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-title="Reset Colour">
-                                        <i class="bi bi-arrow-clockwise"></i>
-                                    </button>
-                                    <button type="button" id="subRandomEmbedColour" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-title="Random Colour">
-                                        <i class="bi bi-dice-5"></i>
-                                    </button>
                                 </div>
-                                <div class="form-text">Colour of each embed in Discord.</div>
                             </div>
                         </div>
                         <div class="col-lg-6 ps-lg-4">

apps/templates/home/index.html

@@ -56,34 +56,29 @@
                     </div>
                 </div>
 
-                <div class="col-12">
+                <div class="col-12 border-bottom">
-                    <div class="d-flex px-3 pt-4 pb-2">
+                    <ul id="serverTabs" class="nav nav-pills px-3" role="tablist">
-                        <ul id="serverTabs" class="nav nav-pills me-auto" role="tablist">
+                        <li class="nav-item" role="presentation">
-                            <li class="nav-item" role="presentation">
+                            <button id="subscriptionsTab" class="nav-link" data-bs-toggle="tab" data-bs-target="#subscriptionsTabPane" type="button" aria-controls="subscriptionsTabPane" aria-selected="false">Subscriptions</button>
-                                <button id="subscriptionsTab" class="nav-link rounded-1" data-bs-toggle="tab" data-bs-target="#subscriptionsTabPane" type="button" aria-controls="subscriptionsTabPane" aria-selected="false">Subscriptions</button>
+                        </li>
-                            </li>
+                        <li class="nav-item" role="presentation">
-                            <li class="nav-item" role="presentation">
+                            <button id="filtersTab" class="nav-link" data-bs-toggle="tab" data-bs-target="#filtersTabPane" type="button" aria-controls="filtersTabPane" aria-selected="false">Content Filters</button>
-                                <button id="filtersTab" class="nav-link rounded-1" data-bs-toggle="tab" data-bs-target="#filtersTabPane" type="button" aria-controls="filtersTabPane" aria-selected="false">Content Filters</button>
+                        </li>
-                            </li>
+                        <li class="nav-item" role="presentation">
-                            <li class="nav-item" role="presentation">
+                            <button id="contentTab" class="nav-link" data-bs-toggle="tab" data-bs-target="#contentTabPane" type="button" aria-controls="contentTabPane" aria-selected="false">Tracked Content</button>
-                                <button id="contentTab" class="nav-link rounded-1" data-bs-toggle="tab" data-bs-target="#contentTabPane" type="button" aria-controls="contentTabPane" aria-selected="false">Tracked Content</button>
+                        </li>
-                            </li>
+                        <li class="nav-item ms-auto" role="presentation">
-                        </ul>
+                            <button id="settingsTab" class="nav-link" data-bs-toggle="tab" data-bs-target="#settingsTabPane" type="button" aria-controls="settingsTabPane" aria-selected="false">Settings</button>
-                        <div class="tab-pane-buttons">
+                        </li>
-                            <div class="tab-pane-buttons-item" data-tab="subscriptionsTab">
+                    </ul>
-                            </div>
-                            <div class="tab-pane-buttons-item" data-tab="filtersTab">
-                            </div>
-                            <div class="tab-pane-buttons-item" data-tab="contentTab">
-                            </div>
-                        </div>
-                    </div>
                 </div>
+
                 <div class="col-12">
-                    <div id="serverTabContent" class="tab-content">
+                    <div id="serverTabContent" class="tab-content mt-4">
                         <div id="subscriptionsTabPane" class="tab-pane fade" role="tabpanel" aria-labelledby="subscriptionsTab" tabindex="0"></div>
                         <div id="filtersTabPane" class="tab-pane fade includes-table includes-table-controls includes-table-search" role="tabpanel" aria-labelledby="filtersTab" tabindex="0">  </div>
                         <div id="contentTabPane" class="tab-pane fade" role="tabpanel" aria-labelledby="contentTab" tabindex="0"></div>
+                        <div id="settingsTabPane" class="tab-pane fade" role="tabpanel" aria-labelledby="settingsTab" tabindex=0>{% include "home/includes/settingstab.html" %}</div>
                     </div>
                 </div>
             </div>