Multipanel images

app/http/endpoints/api/panel/multipanelcreate.go

@@ -17,22 +17,26 @@ import (
 )
 
 type multiPanelCreateData struct {
-	Title      string `json:"title"`
+	Title        string  `json:"title"`
-	Content    string `json:"content"`
+	Content      string  `json:"content"`
-	Colour     int32  `json:"colour"`
+	Colour       int32   `json:"colour"`
-	ChannelId  uint64 `json:"channel_id,string"`
+	ChannelId    uint64  `json:"channel_id,string"`
-	SelectMenu bool   `json:"select_menu"`
+	SelectMenu   bool    `json:"select_menu"`
-	Panels     []int  `json:"panels"`
+	Panels       []int   `json:"panels"`
+	ImageUrl     *string `json:"image_url,omitempty"`
+	ThumbnailUrl *string `json:"thumbnail_url,omitempty"`
 }
 
 func (d *multiPanelCreateData) IntoMessageData(isPremium bool) multiPanelMessageData {
 	return multiPanelMessageData{
-		ChannelId:  d.ChannelId,
+		ChannelId:    d.ChannelId,
-		Title:      d.Title,
+		Title:        d.Title,
-		Content:    d.Content,
+		Content:      d.Content,
-		Colour:     int(d.Colour),
+		Colour:       int(d.Colour),
-		SelectMenu: d.SelectMenu,
+		SelectMenu:   d.SelectMenu,
-		IsPremium:  isPremium,
+		IsPremium:    isPremium,
+		ImageUrl:     d.ImageUrl,
+		ThumbnailUrl: d.ThumbnailUrl,
 	}
 }
 

app/http/endpoints/api/panel/multipanelmessagedata.go

@@ -14,21 +14,24 @@ import (
 type multiPanelMessageData struct {
 	ChannelId uint64
 
-	Title      string
+	Title                  string
-	Content    string
+	Content                string
-	Colour     int
+	Colour                 int
-	SelectMenu bool
+	SelectMenu             bool
-	IsPremium  bool
+	IsPremium              bool
+	ImageUrl, ThumbnailUrl *string
 }
 
 func multiPanelIntoMessageData(panel database.MultiPanel, isPremium bool) multiPanelMessageData {
 	return multiPanelMessageData{
-		ChannelId:  panel.ChannelId,
+		ChannelId:    panel.ChannelId,
-		Title:      panel.Title,
+		Title:        panel.Title,
-		Content:    panel.Content,
+		Content:      panel.Content,
-		Colour:     panel.Colour,
+		Colour:       panel.Colour,
-		SelectMenu: panel.SelectMenu,
+		SelectMenu:   panel.SelectMenu,
-		IsPremium:  isPremium,
+		IsPremium:    isPremium,
+		ImageUrl:     panel.ImageUrl,
+		ThumbnailUrl: panel.ThumbnailUrl,
 	}
 }
 
@@ -38,6 +41,14 @@ func (d *multiPanelMessageData) send(ctx *botcontext.BotContext, panels []databa
 		SetDescription(d.Content).
 		SetColor(d.Colour)
 
+	if d.ImageUrl != nil {
+		e.SetImage(*d.ImageUrl)
+	}
+
+	if d.ThumbnailUrl != nil {
+		e.SetThumbnail(*d.ThumbnailUrl)
+	}
+
 	if !d.IsPremium {
 		// TODO: Don't harcode
 		e.SetFooter("Powered by ticketsbot.net", "https://ticketsbot.net/assets/img/logo.png")

app/http/endpoints/api/panel/multipanelupdate.go

@@ -78,7 +78,7 @@ func MultiPanelUpdate(ctx *gin.Context) {
 
 	// delete old message
 	var unwrapped request.RestError
-	if err := rest.DeleteMessage(botContext.Token, botContext.RateLimiter, multiPanel.ChannelId, multiPanel.MessageId); err != nil && !(errors.As(err, &unwrapped) && unwrapped.IsClientError())  {
+	if err := rest.DeleteMessage(botContext.Token, botContext.RateLimiter, multiPanel.ChannelId, multiPanel.MessageId); err != nil && !(errors.As(err, &unwrapped) && unwrapped.IsClientError()) {
 		ctx.JSON(500, utils.ErrorJson(err))
 		return
 	}
@@ -106,13 +106,16 @@ func MultiPanelUpdate(ctx *gin.Context) {
 
 	// update DB
 	updated := database.MultiPanel{
-		Id:        multiPanel.Id,
+		Id:           multiPanel.Id,
-		MessageId: messageId,
+		MessageId:    messageId,
-		ChannelId: data.ChannelId,
+		ChannelId:    data.ChannelId,
-		GuildId:   guildId,
+		GuildId:      guildId,
-		Title:     data.Title,
+		Title:        data.Title,
-		Content:   data.Content,
+		Content:      data.Content,
-		Colour:    int(data.Colour),
+		Colour:       int(data.Colour),
+		SelectMenu:   data.SelectMenu,
+		ImageUrl:     data.ImageUrl,
+		ThumbnailUrl: data.ThumbnailUrl,
 	}
 
 	if err = dbclient.Client.MultiPanels.Update(multiPanel.Id, updated); err != nil {

frontend/src/components/manage/MultiPanelCreationForm.svelte

@@ -23,6 +23,25 @@
       <Checkbox label="Use Select Menu" bind:value={data.select_menu} />
     </div>
   </div>
+
+  <div class="row" style="justify-content: center">
+    <div class="col-1">
+      <Button icon="fas fa-sliders-h" fullWidth=true type="button"
+              on:click={toggleAdvancedSettings}>Toggle Advanced Settings
+      </Button>
+    </div>
+  </div>
+  <div class="row advanced-settings" class:advanced-settings-show={advancedSettings}
+       class:advanced-settings-hide={!advancedSettings} class:show-overflow={overflowShow}>
+    <div class="inner" class:inner-show={advancedSettings}>
+      <div class="row">
+        <Input col1={true} label="Large Image URL" bind:value={data.image_url}/>
+      </div>
+      <div class="row">
+        <Input col1={true} label="Small Image URL" bind:value={data.thumbnail_url}/>
+      </div>
+    </div>
+  </div>
 </form>
 
 <script>
@@ -34,6 +53,7 @@
     import PanelDropdown from "../PanelDropdown.svelte";
     import {onMount} from "svelte";
     import Checkbox from "../form/Checkbox.svelte";
+    import Button from "../Button.svelte";
 
     export let data = {};
 
@@ -50,6 +70,20 @@
         }
     }
 
+    let advancedSettings = false;
+    let overflowShow = false;
+
+    function toggleAdvancedSettings() {
+      advancedSettings = !advancedSettings;
+      if (advancedSettings) {
+        setTimeout(() => {
+          overflowShow = true;
+        }, 300);
+      } else {
+        overflowShow = false;
+      }
+    }
+
     let tempColour = '#7289da';
 
     function updateColour() {
@@ -80,7 +114,6 @@
         flex-direction: row;
         justify-content: space-between;
         width: 100%;
-        height: 100%;
     }
 
     @media only screen and (max-width: 950px) {
@@ -104,4 +137,21 @@
       width: 75%;
       height: 100%;
     }
+
+    .inner {
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      align-items: flex-start;
+      position: absolute;
+      height: 100%;
+      width: 100%;
+
+      margin-top: 10px;
+    }
+
+    .advanced-settings-show {
+      visibility: visible;
+      min-height: 142px;
+    }
 </style>

frontend/src/components/manage/PanelCreationForm.svelte

@@ -235,13 +235,13 @@
         }
     }
 
-    .advanced-settings {
+    :global(.advanced-settings) {
         transition: min-height .3s ease-in-out, margin-top .3s ease-in-out, margin-bottom .3s ease-in-out;
         position: relative;
         overflow: hidden;
     }
 
-    .advanced-settings-hide {
+    :global(.advanced-settings-hide) {
         height: 0;
         visibility: hidden;
 
@@ -256,7 +256,7 @@
         margin-bottom: 10px;
     }
 
-    .show-overflow {
+    :global(.show-overflow) {
         overflow: visible;
     }
 

go.mod

@@ -6,7 +6,7 @@ require (
 	github.com/BurntSushi/toml v0.3.1
 	github.com/TicketsBot/archiverclient v0.0.0-20210220155137-a562b2f1bbbb
 	github.com/TicketsBot/common v0.0.0-20210910205523-7ce93fba6fa5
-	github.com/TicketsBot/database v0.0.0-20211025113505-f55f17ff5d69
+	github.com/TicketsBot/database v0.0.0-20211029152712-e9861d66f2d6
 	github.com/TicketsBot/worker v0.0.0-20210910205947-89f7bd5ccf67
 	github.com/apex/log v1.1.2
 	github.com/boj/redistore v0.0.0-20180917114910-cd5dcc76aeff // indirect

go.sum

@@ -14,14 +14,8 @@ github.com/TicketsBot/common v0.0.0-20210910205523-7ce93fba6fa5/go.mod h1:SVwX6g
 github.com/TicketsBot/database v0.0.0-20200516170158-fd8a949aec2c/go.mod h1:eky4tBL+IZ0svPgTT0N/9i6j7ygHDQH3784DW+HgfcA=
 github.com/TicketsBot/database v0.0.0-20210902172951-4e1f8ced84b7/go.mod h1:A4T2uQFIWC/ttCYpfgv7AkPjR09mMRgzG13lgoV/+aI=
 github.com/TicketsBot/database v0.0.0-20210906215136-2d0c54bd1109/go.mod h1:A4T2uQFIWC/ttCYpfgv7AkPjR09mMRgzG13lgoV/+aI=
-github.com/TicketsBot/database v0.0.0-20211024191932-85d9cf1d71a8 h1:TROAdrUeCjxRI0xpOd3MaoeQq/xjGPb2kIh7a3+8Ev4=
+github.com/TicketsBot/database v0.0.0-20211029152712-e9861d66f2d6 h1:vb+Ia5kBlW3AwQBX384GH4tgGUFmuVNazNXoGEezGrI=
-github.com/TicketsBot/database v0.0.0-20211024191932-85d9cf1d71a8/go.mod h1:72oWvH/Gq1iKeXCZhVRZn1JFbNVC5iAgERZWTrEarEo=
+github.com/TicketsBot/database v0.0.0-20211029152712-e9861d66f2d6/go.mod h1:72oWvH/Gq1iKeXCZhVRZn1JFbNVC5iAgERZWTrEarEo=
-github.com/TicketsBot/database v0.0.0-20211025101648-1c5a53942cbe h1:SImaEnLPwW18P016eBpE+kyneb1Nw8qjJfuTn05v34A=
-github.com/TicketsBot/database v0.0.0-20211025101648-1c5a53942cbe/go.mod h1:72oWvH/Gq1iKeXCZhVRZn1JFbNVC5iAgERZWTrEarEo=
-github.com/TicketsBot/database v0.0.0-20211025111926-e4c1ec293983 h1:VNP6gNgxQHvHJmVNOk8aQTUtgwDDOLsXgFlQrYc0AgY=
-github.com/TicketsBot/database v0.0.0-20211025111926-e4c1ec293983/go.mod h1:72oWvH/Gq1iKeXCZhVRZn1JFbNVC5iAgERZWTrEarEo=
-github.com/TicketsBot/database v0.0.0-20211025113505-f55f17ff5d69 h1:X2Cq29IQ6GEk3zZ1Fn6mgv9+gK4lZuSorp1d/DCw8N0=
-github.com/TicketsBot/database v0.0.0-20211025113505-f55f17ff5d69/go.mod h1:72oWvH/Gq1iKeXCZhVRZn1JFbNVC5iAgERZWTrEarEo=
 github.com/TicketsBot/logarchiver v0.0.0-20200423221245-a3f92edf8c14/go.mod h1:whts8TRxrAF4WuDuEAMllkWA/inKem0NhDEFeyuoOvE=
 github.com/TicketsBot/ttlcache v1.6.1-0.20200405150101-acc18e37b261 h1:NHD5GB6cjlkpZFjC76Yli2S63/J2nhr8MuE6KlYJpQM=
 github.com/TicketsBot/ttlcache v1.6.1-0.20200405150101-acc18e37b261/go.mod h1:2zPxDAN2TAPpxUPjxszjs3QFKreKrQh5al/R3cMXmYk=