From 16444db81c9bd0c18b0f80ed0f80beff9c9e3abb Mon Sep 17 00:00:00 2001
From: rxdn <29165304+rxdn@users.noreply.github.com>
Date: Thu, 16 Jun 2022 17:08:16 +0100
Subject: [PATCH] WIP

---
 app/http/endpoints/api/panel/panelcreate.go   |  9 ++-
 frontend/src/components/form/Slider.svelte    | 70 +++++++++++++++++++
 .../manage/PanelCreationForm.svelte           |  4 +-
 go.sum                                        |  2 -
 4 files changed, 76 insertions(+), 9 deletions(-)
 create mode 100644 frontend/src/components/form/Slider.svelte

diff --git a/app/http/endpoints/api/panel/panelcreate.go b/app/http/endpoints/api/panel/panelcreate.go
index 3c375fc..2a12696 100644
--- a/app/http/endpoints/api/panel/panelcreate.go
+++ b/app/http/endpoints/api/panel/panelcreate.go
@@ -2,6 +2,7 @@ package api
 
 import (
 	"errors"
+	"fmt"
 	"github.com/TicketsBot/GoPanel/botcontext"
 	dbclient "github.com/TicketsBot/GoPanel/database"
 	"github.com/TicketsBot/GoPanel/rpc"
@@ -76,10 +77,7 @@ func CreatePanel(ctx *gin.Context) {
 	var data panelBody
 
 	if err := ctx.BindJSON(&data); err != nil {
-		ctx.AbortWithStatusJSON(400, gin.H{
-			"success": false,
-			"error":   err.Error(),
-		})
+		ctx.JSON(400, utils.ErrorJson(err))
 		return
 	}
 
@@ -284,6 +282,7 @@ func (p *panelBody) doValidations(ctx *gin.Context, guildId uint64) bool {
 		return false
 	}
 
+	fmt.Printf("label: %s\n", p.ButtonLabel)
 	{
 		valid, err := p.verifyTeams(guildId)
 		if err != nil {
@@ -394,7 +393,7 @@ func (p *panelBody) verifyButtonLabel() bool {
 		p.ButtonLabel = p.Title // Title already checked for 80 char max
 	}
 
-	return len(p.ButtonLabel) <= 80
+	return len(p.ButtonLabel) > 0 && len(p.ButtonLabel) <= 80
 }
 
 func (p *panelBody) verifyFormId(guildId uint64) (bool, error) {
diff --git a/frontend/src/components/form/Slider.svelte b/frontend/src/components/form/Slider.svelte
new file mode 100644
index 0000000..55486c0
--- /dev/null
+++ b/frontend/src/components/form/Slider.svelte
@@ -0,0 +1,70 @@
+<div class:col-1={col1} class:col-2={col2} class:col-3={col3} class:col-4={col4} class="switch">
+    <label for="input" class="form-label">{label}</label>
+    <input id="input" type="checkbox" bind:checked={value} on:change />
+    <span class="slider" />
+</div>
+
+<script>
+    export let value;
+    export let label;
+
+    export let col1 = false;
+    export let col2 = false;
+    export let col3 = false;
+    export let col4 = false;
+</script>
+
+<style>
+    .switch {
+        position: relative;
+        display: inline-block;
+        width: 60px;
+        height: 34px;
+    }
+
+    .switch input {
+        opacity: 0;
+        width: 0;
+        height: 0;
+    }
+
+    .slider {
+        position: absolute;
+        cursor: pointer;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: #ccc;
+        -webkit-transition: 0.4s;
+        transition: 0.4s;
+        border-radius: 34px;
+    }
+
+    .slider:before {
+        position: absolute;
+        content: "";
+        height: 26px;
+        width: 26px;
+        left: 4px;
+        bottom: 4px;
+        background-color: white;
+        -webkit-transition: 0.4s;
+        transition: 0.4s;
+        border-radius: 50%;
+    }
+
+    input:checked + .slider {
+        background-color: #2196f3;
+    }
+
+    input:checked + .slider {
+        box-shadow: 0 0 1px #2196f3;
+    }
+
+    input:checked + .slider:before {
+        -webkit-transform: translateX(26px);
+        -ms-transform: translateX(26px);
+        transform: translateX(26px);
+    }
+</style>
diff --git a/frontend/src/components/manage/PanelCreationForm.svelte b/frontend/src/components/manage/PanelCreationForm.svelte
index 1dbec80..76c7f4a 100644
--- a/frontend/src/components/manage/PanelCreationForm.svelte
+++ b/frontend/src/components/manage/PanelCreationForm.svelte
@@ -33,8 +33,7 @@
             <label for="emoji-pick-wrapper" class="form-label">Button Emoji</label>
             <div id="emoji-pick-wrapper" class="row">
                 <div class="col-2">
-                    <label for="use-custom-emoji" class="form-label">Custom Emoji</label>
-                    <input id="use-custom-emoji" class="form-checkbox" type=checkbox bind:checked={data.use_custom_emoji} on:change={() => console.log('a')}>
+                    <Slider label="Custom Emoji" bind:value={data.use_custom_emoji} />
                 </div>
                 {#if data.use_custom_emoji}
                     <!--bind:selectedValue={selectedMentions}
@@ -119,6 +118,7 @@
     import Select from 'svelte-select';
     import Dropdown from "../form/Dropdown.svelte";
     import Checkbox from "../form/Checkbox.svelte";
+    import Slider from "../form/Slider.svelte";
 
     export let guildId;
     export let seedDefault = true;
diff --git a/go.sum b/go.sum
index 57de3b6..3fe72cd 100644
--- a/go.sum
+++ b/go.sum
@@ -5,8 +5,6 @@ github.com/TicketsBot/archiverclient v0.0.0-20220326163414-558fd52746dc h1:n15W8
 github.com/TicketsBot/archiverclient v0.0.0-20220326163414-558fd52746dc/go.mod h1:2KcfHS0JnSsgcxZBs3NyWMXNQzEo67mBSGOyzHPWOCc=
 github.com/TicketsBot/common v0.0.0-20220609182514-8d43f86e8253 h1:HbL0OBZHmU0TbB/lAQ9RY0TqxhAKRO8JNh2XUe0NH8c=
 github.com/TicketsBot/common v0.0.0-20220609182514-8d43f86e8253/go.mod h1:ZAoYcDD7SQLTsZT7dbo/X0J256+pogVRAReunCGng+U=
-github.com/TicketsBot/database v0.0.0-20220616133502-42690a5719dd h1:tcPXP5Jd/K3/lavUyZYZDCFRNrPCtbgh6JlVTi9nIzQ=
-github.com/TicketsBot/database v0.0.0-20220616133502-42690a5719dd/go.mod h1:F57cywrZsnper1cy56Bx0c/HEsxQBLHz3Pl98WXblWw=
 github.com/TicketsBot/database v0.0.0-20220616145240-1b6207291ca6 h1:lq5+CXNCQRUyd3ODq1Y6tUsEY7Y0e1YfLQr50C0Nuis=
 github.com/TicketsBot/database v0.0.0-20220616145240-1b6207291ca6/go.mod h1:F57cywrZsnper1cy56Bx0c/HEsxQBLHz3Pl98WXblWw=
 github.com/TicketsBot/logarchiver v0.0.0-20220326162808-cdf0310f5e1c h1:OqGjFH6mbE6gd+NqI2ARJdtH3UUvhiAkD0r0fhGJK2s=