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