adding emoji support

src/webpage/guild.ts

@@ -6,9 +6,10 @@ import{ Member }from"./member.js";
 import{ Dialog, Options, Settings }from"./settings.js";
 import{ Permissions }from"./permissions.js";
 import{ SnowFlake }from"./snowflake.js";
-import{channeljson,guildjson,emojijson,memberjson,invitejson,rolesjson,}from"./jsontypes.js";
+import{channeljson,guildjson,emojijson,memberjson,invitejson,rolesjson, emojipjson,}from"./jsontypes.js";
 import{ User }from"./user.js";
 import { I18n } from "./i18n.js";
+import { Emoji } from "./emoji.js";
 
 class Guild extends SnowFlake{
 	owner!: Localuser;
@@ -26,7 +27,7 @@ class Guild extends SnowFlake{
 	parent_id!: string;
 	member!: Member;
 	html!: HTMLElement;
-	emojis!: emojijson[];
+	emojis!: emojipjson[];
 	large!: boolean;
 	members=new Set<Member>();
 	static contextmenu = new Contextmenu<Guild, undefined>("guild menu");
@@ -178,6 +179,75 @@ class Guild extends SnowFlake{
 		s1.options.push(
 			new RoleList(permlist, this, this.updateRolePermissions.bind(this),false)
 		);
+		{
+			const emoji=settings.addButton("Emojis");
+			emoji.addButtonInput("","Upload Emoji",()=>{
+				const popup=new Dialog("Upload emoji");
+				const form=popup.options.addForm("",()=>{
+					popup.hide();
+				},{
+					fetchURL:`${this.info.api}/guilds/${this.id}/emojis`,
+					method:"POST",
+					headers:this.headers
+				});
+				form.addFileInput("Image:","image",{required:true});
+				form.addTextInput("Name:","name",{required:true});
+				popup.show();
+			});
+			const containdiv=document.createElement("div");
+			const genDiv=()=>{
+				containdiv.innerHTML="";
+				for(const emoji of this.emojis){
+					const div=document.createElement("div");
+					div.classList.add("flexltr","emojiOption");
+					const emojic=new Emoji(emoji,this);
+
+					const text=document.createElement("input");
+					text.type="text";
+					text.value=emoji.name;
+					text.addEventListener("change",()=>{
+						fetch(`${this.info.api}/guilds/${this.id}/emojis/${emoji.id}`,{
+							method:"PATCH",
+							headers:this.headers,
+							body:JSON.stringify({name:text.value})
+						}).then(e=>{if(!e.ok)text.value=emoji.name;})//if not ok, undo
+					});
+
+					const del=document.createElement("span");
+					del.classList.add("svgicon", "svg-x","deleteEmoji");
+					del.onclick=()=>{
+						const diaolog=new Dialog("");
+						diaolog.options.addTitle("Are you sure you want to delete this emoji?");
+						const options=diaolog.options.addOptions("",{ltr:true});
+						options.addButtonInput("",I18n.getTranslation("yes"),()=>{
+							fetch(`${this.info.api}/guilds/${this.id}/emojis/${emoji.id}`,{
+								method:"DELETE",
+								headers:this.headers
+							})
+							diaolog.hide();
+						});
+						options.addButtonInput("",I18n.getTranslation("no"),()=>{
+							diaolog.hide();
+						})
+						diaolog.show();
+					}
+
+
+					div.append(emojic.getHTML(true),":",text,":",del);
+
+					containdiv.append(div);
+				}
+			}
+			this.onEmojiUpdate=()=>{
+				if(!document.body.contains(containdiv)){
+					this.onEmojiUpdate=()=>{};
+					return;
+				}
+				genDiv();
+			}
+			genDiv();
+			emoji.addHTMLArea(containdiv);
+		}
 		settings.show();
 	}
 	makeInviteMenu(options:Options,valid:void|(Channel[])){
@@ -303,6 +373,7 @@ class Guild extends SnowFlake{
 		this.roles.splice(this.roles.indexOf(role),1);
 		this.roleUpdate(role,-1);
 	}
+	onEmojiUpdate=(_:emojipjson[])=>{};
 	constructor(
 		json: guildjson | -1,
 		owner: Localuser,