From 21328163f79efb362ebb383fccbd61a22cacaffd Mon Sep 17 00:00:00 2001
From: Pat Hartl <pat@pathar.tl>
Date: Wed, 11 Jan 2023 21:24:57 -0600
Subject: [PATCH] Put select JS code in a class

---
 LANCommander/Views/Games/Add.cshtml           | 58 ++-----------------
 LANCommander/Views/Games/Edit.cshtml          | 58 ++-----------------
 LANCommander/Views/Shared/_Layout.cshtml      |  1 +
 LANCommander/Views/Shared/_LayoutBasic.cshtml |  2 +
 LANCommander/wwwroot/js/Select.js             | 53 +++++++++++++++++
 5 files changed, 64 insertions(+), 108 deletions(-)
 create mode 100644 LANCommander/wwwroot/js/Select.js

diff --git a/LANCommander/Views/Games/Add.cshtml b/LANCommander/Views/Games/Add.cshtml
index b2732df..cf9ccae 100644
--- a/LANCommander/Views/Games/Add.cshtml
+++ b/LANCommander/Views/Games/Add.cshtml
@@ -92,59 +92,9 @@
     @{ await Html.RenderPartialAsync("_ValidationScriptsPartial"); }
 
     <script>
-        var developers = @Html.Raw(Json.Serialize(Model.Developers));
-        var publishers = @Html.Raw(Json.Serialize(Model.Publishers));
-        var genres = @Html.Raw(Json.Serialize(Model.Genres));
-        var tags = @Html.Raw(Json.Serialize(Model.Tags));
-
-        function selectize(selector, options) {
-            var selected = [];
-
-            for (let option of options) {
-                if (option.selected)
-                    selected.push(option.value);
-            }
-
-            $(selector).val(selected.join('|'));
-
-            $(selector).selectize({
-                delimiter: '|',
-                plugins: ['remove_button'],
-                create: true,
-                valueField: 'value',
-                labelField: 'text',
-                searchField: 'text',
-                options: options,
-                onItemAdd: function(value) {
-                    for (let option of Object.values(this.options)) {
-                        if (option.value == value)
-                        {
-                            this.$input.siblings('select').append(`<option value="${option.value}" selected>${option.text}</option>`);
-                        }
-                    }
-                },
-                onItemRemove: function(value) {
-                    for (let option of Object.values(this.options)) {
-                        if (option.value == value)
-                        {
-                            this.$input.siblings('select').find(`option[value="${option.value}"]`).remove();
-                        }
-                    }
-                },
-                onInitialize: function() {
-                    for (let option of Object.values(this.options)) {
-                        if (option.selected)
-                        {
-                            this.$input.siblings('select').append(`<option value="${option.value}" selected>${option.text}</option>`);
-                        }
-                    }
-                }
-            });
-        }
-
-        selectize('.developer-select', developers);
-        selectize('.publisher-select', publishers);
-        selectize('.genre-select', genres);
-        selectize('.tag-select', tags);
+        new Select('.developer-select', @Html.Raw(Json.Serialize(Model.Developers)));
+        new Select('.publisher-select', @Html.Raw(Json.Serialize(Model.Publishers)));
+        new Select('.genre-select', @Html.Raw(Json.Serialize(Model.Genres)));
+        new Select('.tag-select', @Html.Raw(Json.Serialize(Model.Tags)));
     </script>
 }
diff --git a/LANCommander/Views/Games/Edit.cshtml b/LANCommander/Views/Games/Edit.cshtml
index 1ad428a..22c5653 100644
--- a/LANCommander/Views/Games/Edit.cshtml
+++ b/LANCommander/Views/Games/Edit.cshtml
@@ -209,59 +209,9 @@
     @{ await Html.RenderPartialAsync("_ValidationScriptsPartial"); }
 
     <script>
-        var developers = @Html.Raw(Json.Serialize(Model.Developers));
-        var publishers = @Html.Raw(Json.Serialize(Model.Publishers));
-        var genres = @Html.Raw(Json.Serialize(Model.Genres));
-        var tags = @Html.Raw(Json.Serialize(Model.Tags));
-
-        function selectize(selector, options) {
-            var selected = [];
-
-            for (let option of options) {
-                if (option.selected)
-                    selected.push(option.value);
-            }
-
-            $(selector).val(selected.join('|'));
-
-            $(selector).selectize({
-                delimiter: '|',
-                plugins: ['remove_button'],
-                create: true,
-                valueField: 'value',
-                labelField: 'text',
-                searchField: 'text',
-                options: options,
-                onItemAdd: function(value) {
-                    for (let option of Object.values(this.options)) {
-                        if (option.value == value)
-                        {
-                            this.$input.siblings('select').append(`<option value="${option.value}" selected>${option.text}</option>`);
-                        }
-                    }
-                },
-                onItemRemove: function(value) {
-                    for (let option of Object.values(this.options)) {
-                        if (option.value == value)
-                        {
-                            this.$input.siblings('select').find(`option[value="${option.value}"]`).remove();
-                        }
-                    }
-                },
-                onInitialize: function() {
-                    for (let option of Object.values(this.options)) {
-                        if (option.selected)
-                        {
-                            this.$input.siblings('select').append(`<option value="${option.value}" selected>${option.text}</option>`);
-                        }
-                    }
-                }
-            });
-        }
-
-        selectize('.developer-select', developers);
-        selectize('.publisher-select', publishers);
-        selectize('.genre-select', genres);
-        selectize('.tag-select', tags);
+        new Select('.developer-select', @Html.Raw(Json.Serialize(Model.Developers)));
+        new Select('.publisher-select', @Html.Raw(Json.Serialize(Model.Publishers)));
+        new Select('.genre-select', @Html.Raw(Json.Serialize(Model.Genres)));
+        new Select('.tag-select', @Html.Raw(Json.Serialize(Model.Tags)));
     </script>
 }
diff --git a/LANCommander/Views/Shared/_Layout.cshtml b/LANCommander/Views/Shared/_Layout.cshtml
index 238f50f..6da2064 100644
--- a/LANCommander/Views/Shared/_Layout.cshtml
+++ b/LANCommander/Views/Shared/_Layout.cshtml
@@ -91,6 +91,7 @@
     <script src="~/lib/selectize.js/js/selectize.min.js"></script>
     <script src="~/lib/tabler/core/dist/js/tabler.min.js"></script>
     <script src="~/js/Modal.js"></script>
+    <script src="~/js/Select.js"></script>
 
     @await RenderSectionAsync("Scripts", required: false)
 </body>
diff --git a/LANCommander/Views/Shared/_LayoutBasic.cshtml b/LANCommander/Views/Shared/_LayoutBasic.cshtml
index 0b3f06f..5c8ff47 100644
--- a/LANCommander/Views/Shared/_LayoutBasic.cshtml
+++ b/LANCommander/Views/Shared/_LayoutBasic.cshtml
@@ -14,6 +14,8 @@
     <script src="~/lib/selectize.js/js/selectize.min.js"></script>
     <script src="~/lib/tabler/core/dist/js/tabler.min.js"></script>
     <script src="~/js/Modal.js"></script>
+    <script src="~/js/Select.js"></script>
+
     @await RenderSectionAsync("Scripts", required: false)
 </body>
 </html>
diff --git a/LANCommander/wwwroot/js/Select.js b/LANCommander/wwwroot/js/Select.js
new file mode 100644
index 0000000..63528a7
--- /dev/null
+++ b/LANCommander/wwwroot/js/Select.js
@@ -0,0 +1,53 @@
+class Select {
+    Element;
+    Options;
+
+    constructor(selector, options) {
+        this.Options = options;
+        this.Element = $(selector).get(0);
+
+        this.Initialize();
+    }
+
+    Initialize() {
+        let selected = [];
+
+        for (let option of this.Options) {
+            if (option.selected)
+                selected.push(option.value);
+        }
+
+        $(this.Element).val(selected.join('|'));
+
+        $(this.Element).selectize({
+            delimiter: '|',
+            plugins: ['remove_button'],
+            create: true,
+            valueField: 'value',
+            labelField: 'text',
+            searchField: 'text',
+            options: this.Options,
+            onItemAdd: function (value) {
+                for (let option of Object.keys(this.options)) {
+                    if (option.value == value) {
+                        this.$input.siblings('select').append(`<option value="${option.value}" selected>${option.text}</option>`);
+                    }
+                }
+            },
+            onItemRemove: function (value) {
+                for (let option of Object.keys(this.options)) {
+                    if (option.value == value) {
+                        this.$input.siblings('select').find(`option[value="${option.value}"]`).remove();
+                    }
+                }
+            },
+            onInitialize: function () {
+                for (let option of Object.keys(this.options)) {
+                    if (option.selected) {
+                        this.$input.siblings('select').append(`<option value="${option.value}" selected>${option.text}</option>`);
+                    }
+                }
+            }
+        });
+    }
+}
\ No newline at end of file