adds support for role settings and various fixes
This commit is contained in:
MathMan05
parent
96b2dbb21c
commit
8fe0c9f46b
20 changed files with 1199 additions and 183 deletions
|
|
@ -7,7 +7,9 @@ import {markdown} from "./markdown.js";
|
|||
import {Guild} from "./guild.js";
|
||||
import { Localuser } from "./localuser.js";
|
||||
import { Permissions } from "./permissions.js";
|
||||
|
||||
import { Settings, RoleList } from "./settings.js";
|
||||
import { Role } from "./role.js";
|
||||
Settings;
|
||||
declare global {
|
||||
interface NotificationOptions {
|
||||
image?: string
|
||||
|
|
@ -27,6 +29,7 @@ class Channel{
|
|||
guild_id:string;
|
||||
messageids:{[key : string]:Message};
|
||||
permission_overwrites:{[key:string]:Permissions};
|
||||
permission_overwritesar:[string,Permissions][]
|
||||
topic:string;
|
||||
nsfw:boolean;
|
||||
position:number;
|
||||
|
|
@ -41,25 +44,44 @@ class Channel{
|
|||
static contextmenu=new Contextmenu("channel menu");
|
||||
replyingto:Message;
|
||||
static setupcontextmenu(){
|
||||
Channel.contextmenu.addbutton("Copy channel id",function(){
|
||||
this.contextmenu.addbutton("Copy channel id",function(){
|
||||
console.log(this)
|
||||
navigator.clipboard.writeText(this.id);
|
||||
});
|
||||
|
||||
Channel.contextmenu.addbutton("Mark as read",function(){
|
||||
this.contextmenu.addbutton("Mark as read",function(){
|
||||
console.log(this)
|
||||
this.readbottom();
|
||||
});
|
||||
|
||||
Channel.contextmenu.addbutton("Delete channel",function(){
|
||||
this.contextmenu.addbutton("Settings[temp]",function(){
|
||||
this.generateSettings();
|
||||
});
|
||||
|
||||
this.contextmenu.addbutton("Delete channel",function(){
|
||||
console.log(this)
|
||||
this.deleteChannel();
|
||||
},null,_=>{console.log(_);return _.isAdmin()});
|
||||
|
||||
Channel.contextmenu.addbutton("Edit channel",function(){
|
||||
this.contextmenu.addbutton("Edit channel",function(){
|
||||
this.editChannel(this);
|
||||
},null,_=>{return _.isAdmin()});
|
||||
}
|
||||
generateSettings(){
|
||||
this.sortPerms();
|
||||
const settings=new Settings("Settings for "+this.name);
|
||||
|
||||
const s1=settings.addButton("roles");
|
||||
|
||||
s1.options.push(new RoleList(this.permission_overwritesar,this.guild,this.updateRolePermissions.bind(this),true))
|
||||
settings.show();
|
||||
}
|
||||
sortPerms(){
|
||||
this.permission_overwritesar.sort((a,b)=>{
|
||||
const order=this.guild.roles.findIndex(_=>_.id===a[0])-this.guild.roles.findIndex(_=>_.id===b[0]);
|
||||
return order;
|
||||
})
|
||||
}
|
||||
constructor(JSON,owner:Guild){
|
||||
|
||||
if(JSON===-1){
|
||||
|
|
@ -78,9 +100,14 @@ class Channel{
|
|||
this.guild_id=JSON.guild_id;
|
||||
this.messageids={};
|
||||
this.permission_overwrites={};
|
||||
this.permission_overwritesar=[];
|
||||
for(const thing of JSON.permission_overwrites){
|
||||
console.log(thing);
|
||||
if(thing.id==="1182819038095799904"||thing.id==="1182820803700625444"){continue;};
|
||||
this.permission_overwrites[thing.id]=new Permissions(thing.allow,thing.deny);
|
||||
this.permission_overwritesar.push([thing.id,this.permission_overwrites[thing.id]]);
|
||||
}
|
||||
|
||||
this.topic=JSON.topic;
|
||||
this.nsfw=JSON.nsfw;
|
||||
this.position=JSON.position;
|
||||
|
|
@ -127,6 +154,9 @@ class Channel{
|
|||
return false;
|
||||
}
|
||||
get canMessage():boolean{
|
||||
if((0===this.permission_overwritesar.length)&&this.hasPermission("MANAGE_CHANNELS")){
|
||||
this.addRoleToPerms(this.guild.roles.find(_=>_.name==="@everyone"));
|
||||
}
|
||||
return this.hasPermission("SEND_MESSAGES");
|
||||
}
|
||||
sortchildren(){
|
||||
|
|
@ -717,6 +747,36 @@ class Channel{
|
|||
});
|
||||
}
|
||||
}
|
||||
async addRoleToPerms(role:Role){
|
||||
await fetch(this.info.api.toString()+"/channels/"+this.id+"/permissions/"+role.id,{
|
||||
method:"PUT",
|
||||
headers:this.headers,
|
||||
body:JSON.stringify({
|
||||
allow:"0",
|
||||
deny:"0",
|
||||
id:role.id,
|
||||
type:0
|
||||
})
|
||||
})
|
||||
const perm=new Permissions("0","0");
|
||||
this.permission_overwrites[role.id]=perm;
|
||||
this.permission_overwritesar.push([role.id,perm]);
|
||||
}
|
||||
async updateRolePermissions(id:string,perms:Permissions){
|
||||
const permision=this.permission_overwrites[id];
|
||||
permision.allow=perms.allow;
|
||||
permision.deny=perms.deny;
|
||||
await fetch(this.info.api.toString()+"/channels/"+this.id+"/permissions/"+id,{
|
||||
method:"PUT",
|
||||
headers:this.headers,
|
||||
body:JSON.stringify({
|
||||
allow:permision.allow.toString(),
|
||||
deny:permision.deny.toString(),
|
||||
id:id,
|
||||
type:0
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
Channel.setupcontextmenu();
|
||||
export {Channel};
|
||||
|
|
|
|||
|
|
@ -4,7 +4,8 @@ import {Contextmenu} from "./contextmenu.js";
|
|||
import {Role} from "./role.js";
|
||||
import {Fullscreen} from "./fullscreen.js";
|
||||
import {Member} from "./member.js";
|
||||
|
||||
import {Settings,RoleList} from "./settings.js";
|
||||
import {Permissions} from "./permissions.js";
|
||||
class Guild{
|
||||
owner:Localuser;
|
||||
headers:Localuser["headers"];
|
||||
|
|
@ -49,6 +50,9 @@ class Guild{
|
|||
Guild.contextmenu.addbutton("Create invite",function(){
|
||||
console.log(this);
|
||||
},null,_=>true,_=>false);
|
||||
Guild.contextmenu.addbutton("Settings[temp]",function(){
|
||||
this.generateSettings();
|
||||
});
|
||||
/* -----things left for later-----
|
||||
guild.contextmenu.addbutton("Leave Guild",function(){
|
||||
console.log(this)
|
||||
|
|
@ -60,6 +64,17 @@ class Guild{
|
|||
},null,_=>{return thisuser.isAdmin()})
|
||||
*/
|
||||
}
|
||||
generateSettings(){
|
||||
const settings=new Settings("Settings for "+this.properties.name);
|
||||
|
||||
const s1=settings.addButton("roles");
|
||||
const permlist=[];
|
||||
for(const thing of this.roles){
|
||||
permlist.push([thing.id,thing.permissions]);
|
||||
}
|
||||
s1.options.push(new RoleList(permlist,this,this.updateRolePermissions.bind(this)));
|
||||
settings.show();
|
||||
}
|
||||
constructor(JSON,owner:Localuser,member){
|
||||
|
||||
if(JSON===-1){
|
||||
|
|
@ -92,6 +107,7 @@ class Guild{
|
|||
this.headchannels.push(thing);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
notisetting(settings){
|
||||
this.message_notifications=settings.message_notifications;
|
||||
|
|
@ -489,6 +505,41 @@ class Guild{
|
|||
body:JSON.stringify({name: name, type: type})
|
||||
})
|
||||
}
|
||||
async createRole(name:string){
|
||||
const fetched=await fetch(this.info.api.toString()+"/guilds/"+this.id+"roles",{
|
||||
method:"POST",
|
||||
headers:this.headers,
|
||||
body:JSON.stringify({
|
||||
name:name,
|
||||
color:0,
|
||||
permissions:"0"
|
||||
})
|
||||
})
|
||||
const json=await fetched.json();
|
||||
const role=new Role(json,this);
|
||||
this.roleids[role.id]=role;
|
||||
this.roles.push(role);
|
||||
return role;
|
||||
}
|
||||
async updateRolePermissions(id:string,perms:Permissions){
|
||||
const role=this.roleids[id];
|
||||
role.permissions.allow=perms.allow;
|
||||
role.permissions.deny=perms.deny;
|
||||
|
||||
await fetch(this.info.api.toString()+"/guilds/"+this.id+"/roles/"+this.id,{
|
||||
method:"PATCH",
|
||||
headers:this.headers,
|
||||
body:JSON.stringify({
|
||||
color:role.color,
|
||||
hoist:role.hoist,
|
||||
icon:role.icon,
|
||||
mentionable:role.mentionable,
|
||||
name:role.name,
|
||||
permissions:role.permissions.allow.toString(),
|
||||
unicode_emoji:role.unicode_emoji,
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
Guild.setupcontextmenu();
|
||||
export { Guild };
|
||||
|
|
|
|||
|
|
@ -13,51 +13,40 @@
|
|||
<script src="/index.js" type="module"></script>
|
||||
|
||||
<div id="loading" class="loading"><div id="centerdiv"><img src="/bitmap.svg" width="1in" height="1in"><h1>Jank Client is loading</h1><h2>This shouldn't take long</h2></div></div>
|
||||
<table id="page" cellspacing="0" cellpadding="0">
|
||||
<tr>
|
||||
<td rowspan="2" id="neunence">
|
||||
<div id="servers"></div>
|
||||
</td>
|
||||
<td class="servertd" id="servertd">
|
||||
<div class="flexltr" id="page">
|
||||
<div id="neunence">
|
||||
<div id="servers"></div>
|
||||
</div>
|
||||
<div class="flexttb channelflex">
|
||||
<div class="servertd" id="servertd">
|
||||
<h2 id="serverName">Server Name</h2>
|
||||
</td>
|
||||
<td colspan="2" class="servertd servernamediv">
|
||||
<span id="mobileback" hidden=true></span><span id="channelname">Channel</span>
|
||||
</td>
|
||||
</div>
|
||||
<div id="channels"></div>
|
||||
<div class="flexltr" id="userdock">
|
||||
<div class="flexltr" id="userinfo">
|
||||
<img id="userpfp" class="pfp">
|
||||
|
||||
</tr>
|
||||
<tr>
|
||||
<td id="channels-td">
|
||||
<div id="channels"></div>
|
||||
<table id="userdock">
|
||||
<tr>
|
||||
<td>
|
||||
<table id="userinfo"><tr>
|
||||
<td>
|
||||
<img id="userpfp" class="pfp">
|
||||
</td>
|
||||
<td>
|
||||
<div>
|
||||
<p id="username">USERNAME</p>
|
||||
<p id="status">SATUS</p>
|
||||
</div>
|
||||
</td>
|
||||
</tr></table></td>
|
||||
<td>
|
||||
<h2 id="settings">⚙</h2>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="userflex">
|
||||
<p id="username">USERNAME</p>
|
||||
<p id="status">SATUS</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td id="channelw">
|
||||
<h2 id="settings">⚙</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flexttb messageflex">
|
||||
<div class="servertd servernamediv">
|
||||
<span id="mobileback" hidden=true></span><span id="channelname">Channel</span>
|
||||
</div>
|
||||
<div id="channelw">
|
||||
<div id="messagecontainer">
|
||||
<div id="messages">
|
||||
</div>
|
||||
</div>
|
||||
<div id="pasteimage"></div>
|
||||
<div id="typediv">
|
||||
<div id="replybox" class="hideReplyBox"></div>
|
||||
</div>
|
||||
<div id="pasteimage"></div>
|
||||
<div id="replybox" class="hideReplyBox"></div>
|
||||
<div id="typediv">
|
||||
<textarea id="typebox"></textarea>
|
||||
<div id="typing" class="hidden">
|
||||
<p id="typingtext">typing</p>
|
||||
|
|
@ -67,11 +56,8 @@
|
|||
<span class="dot">.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td id="extra">
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import { Localuser } from "./localuser.js";
|
||||
import {Contextmenu} from "./contextmenu.js";
|
||||
import {mobile, getBulkUsers,setTheme, Specialuser} from "./login.js";
|
||||
|
||||
async function waitforload(){
|
||||
let res
|
||||
new Promise(r=>{res=r});
|
||||
|
|
@ -11,17 +12,7 @@ async function waitforload(){
|
|||
}
|
||||
await waitforload();
|
||||
|
||||
function setDynamicHeight() {
|
||||
var servertdHeight = document.getElementById('servertd').offsetHeight+document.getElementById('typediv').offsetHeight+document.getElementById('pasteimage').offsetHeight;
|
||||
document.documentElement.style.setProperty('--servertd-height', servertdHeight + 'px');
|
||||
}
|
||||
const resizeObserver = new ResizeObserver(() => {
|
||||
setDynamicHeight();
|
||||
});
|
||||
resizeObserver.observe(document.getElementById('servertd'));
|
||||
resizeObserver.observe(document.getElementById('replybox'));
|
||||
resizeObserver.observe(document.getElementById('pasteimage'));
|
||||
setDynamicHeight();
|
||||
|
||||
|
||||
const users=getBulkUsers();
|
||||
if(!users.currentuser){
|
||||
|
|
@ -109,7 +100,7 @@ thisuser.initwebsocket().then(_=>{
|
|||
}
|
||||
Contextmenu.currentmenu=table;
|
||||
console.log(table);
|
||||
userdock.append(table);
|
||||
userdock.before(table);
|
||||
event.stopImmediatePropagation();
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,27 @@
|
|||
import {User} from "./user.js";
|
||||
import {Role} from "./role.js";
|
||||
import {Guild} from "./guild.js";
|
||||
import { Contextmenu } from "./contextmenu.js";
|
||||
|
||||
class Member{
|
||||
static already={};
|
||||
owner:Guild;
|
||||
user:User;
|
||||
roles:Role[];
|
||||
error:boolean;
|
||||
static contextmenu:Contextmenu=new Contextmenu("User Menu");
|
||||
static setUpContextMenu(){
|
||||
this.contextmenu.addbutton("Copy user id",function(){
|
||||
navigator.clipboard.writeText(this.id);
|
||||
});
|
||||
this.contextmenu.addbutton("Message user",function(){
|
||||
fetch(this.info.api.toString()+"/v9/users/@me/channels",
|
||||
{method:"POST",
|
||||
body:JSON.stringify({"recipients":[this.id]}),
|
||||
headers: this.headers
|
||||
});
|
||||
});
|
||||
}
|
||||
constructor(memberjson,owner:Guild,error=false){
|
||||
this.error=error;
|
||||
this.owner=owner;
|
||||
|
|
@ -45,38 +60,42 @@ class Member{
|
|||
get info(){
|
||||
return this.owner.info;
|
||||
}
|
||||
static async resolve(unkown:User|object,guild:Guild):Promise<Member>{
|
||||
static async resolve(unkown:User|object|string,guild:Guild):Promise<Member>{
|
||||
if(!(guild instanceof Guild)){
|
||||
console.error(guild)
|
||||
}
|
||||
let user:User;
|
||||
let id="";
|
||||
if(unkown instanceof User){
|
||||
user=unkown as User;
|
||||
id=user.id;
|
||||
}else if(typeof unkown===typeof ""){
|
||||
id=unkown as string;
|
||||
}else{
|
||||
return new Member(unkown,guild);
|
||||
}
|
||||
if(guild.id==="@me"){return null}
|
||||
if(!Member.already[guild.id]){
|
||||
Member.already[guild.id]={};
|
||||
}else if(Member.already[guild.id][user.id]){
|
||||
const memb=Member.already[guild.id][user.id]
|
||||
}else if(Member.already[guild.id][id]){
|
||||
const memb=Member.already[guild.id][id]
|
||||
if(memb instanceof Promise){
|
||||
return await memb;
|
||||
}
|
||||
return memb;
|
||||
}
|
||||
const promoise= fetch(guild.info.api.toString()+"/v9/users/"+user.id+"/profile?with_mutual_guilds=true&with_mutual_friends_count=true&guild_id="+guild.id,{headers:guild.headers}).then(_=>_.json()).then(json=>{
|
||||
const promoise= fetch(guild.info.api.toString()+"/v9/users/"+id+"/profile?with_mutual_guilds=true&with_mutual_friends_count=true&guild_id="+guild.id,{headers:guild.headers}).then(_=>_.json()).then(json=>{
|
||||
const memb=new Member(json,guild);
|
||||
Member.already[guild.id][user.id]=memb;
|
||||
Member.already[guild.id][id]=memb;
|
||||
console.log("resolved")
|
||||
return memb
|
||||
})
|
||||
Member.already[guild.id][user.id]=promoise;
|
||||
Member.already[guild.id][id]=promoise;
|
||||
try{
|
||||
return await promoise
|
||||
}catch(_){
|
||||
const memb=new Member(user,guild,true);
|
||||
Member.already[guild.id][user.id]=memb;
|
||||
Member.already[guild.id][id]=memb;
|
||||
return memb;
|
||||
}
|
||||
}
|
||||
|
|
@ -105,7 +124,27 @@ class Member{
|
|||
}
|
||||
}
|
||||
return this.guild.properties.owner_id===this.user.id;
|
||||
}
|
||||
bind(html:HTMLElement){
|
||||
if(html.tagName==="SPAN"){
|
||||
if(!this) {return};
|
||||
console.log(this.error);
|
||||
if(this.error){
|
||||
const error=document.createElement("span");
|
||||
error.textContent="!";
|
||||
error.classList.add("membererror");
|
||||
html.after(error);
|
||||
return;
|
||||
}
|
||||
html.style.color=this.getColor();
|
||||
}
|
||||
|
||||
this.profileclick(html);
|
||||
Member.contextmenu.bind(html);
|
||||
}
|
||||
profileclick(html:HTMLElement){
|
||||
//to be implemented
|
||||
}
|
||||
}
|
||||
Member.setUpContextMenu();
|
||||
export {Member};
|
||||
|
|
|
|||
|
|
@ -46,16 +46,6 @@ class Message{
|
|||
Message.contextmenu.addbutton("Copy message id",function(){
|
||||
navigator.clipboard.writeText(this.id);
|
||||
});
|
||||
Message.contextmenu.addbutton("Copy user id",function(){
|
||||
navigator.clipboard.writeText(this.author.id);
|
||||
});
|
||||
Message.contextmenu.addbutton("Message user",function(){
|
||||
fetch(this.info.api.toString()+"/v9/users/@me/channels",
|
||||
{method:"POST",
|
||||
body:JSON.stringify({"recipients":[this.author.id]}),
|
||||
headers: this.headers
|
||||
});
|
||||
})
|
||||
Message.contextmenu.addbutton("Edit",function(){
|
||||
this.channel.editing=this;
|
||||
(document.getElementById("typebox") as HTMLInputElement).value=this.content;
|
||||
|
|
@ -179,7 +169,9 @@ class Message{
|
|||
replyline.appendChild(username);
|
||||
const reply=document.createElement("div");
|
||||
username.classList.add("username");
|
||||
this.author.bind(username,this.guild);
|
||||
|
||||
/*
|
||||
Member.resolve(this.author,this.guild).then(_=>{
|
||||
if(!_) {return};
|
||||
console.log(_.error);
|
||||
|
|
@ -197,6 +189,7 @@ class Message{
|
|||
}).catch(_=>{
|
||||
console.log(_)
|
||||
});
|
||||
*/
|
||||
|
||||
reply.classList.add("replytext");
|
||||
replyline.appendChild(reply);
|
||||
|
|
@ -209,9 +202,9 @@ class Message{
|
|||
const author=message.author;
|
||||
reply.appendChild(markdown(message.content,{stdsize:true}));
|
||||
minipfp.src=author.getpfpsrc()
|
||||
author.profileclick(minipfp)
|
||||
author.bind(minipfp);
|
||||
username.textContent=author.username;
|
||||
author.profileclick(username)
|
||||
author.bind(username);
|
||||
});
|
||||
div.appendChild(replyline);
|
||||
}
|
||||
|
|
@ -234,7 +227,7 @@ class Message{
|
|||
const combine=(premessage?.author?.id!=this.author.id)||(current)||this.message_reference
|
||||
if(combine){
|
||||
const pfp=this.author.buildpfp();
|
||||
this.author.profileclick(pfp);
|
||||
this.author.bind(pfp);
|
||||
pfpRow.appendChild(pfp);
|
||||
}else{
|
||||
div["pfpparent"]=pfpparent;
|
||||
|
|
@ -249,19 +242,8 @@ class Message{
|
|||
if(combine){
|
||||
const username=document.createElement("span");
|
||||
username.classList.add("username")
|
||||
this.author.profileclick(username);
|
||||
Member.resolve(this.author,this.guild).then(_=>{
|
||||
if(!_) {return};
|
||||
if(_.error){
|
||||
const error=document.createElement("span");
|
||||
error.textContent="!";
|
||||
error.classList.add("membererror");
|
||||
username.after(error);
|
||||
this.author.bind(username,this.guild);
|
||||
|
||||
return;
|
||||
}
|
||||
username.style.color=_.getColor();
|
||||
})
|
||||
username.textContent=this.author.username;
|
||||
const userwrap=document.createElement("tr")
|
||||
userwrap.appendChild(username)
|
||||
|
|
|
|||
|
|
@ -2,7 +2,9 @@ export {Permissions};
|
|||
class Permissions{
|
||||
allow:bigint;
|
||||
deny:bigint;
|
||||
readonly hasDeny:boolean;
|
||||
constructor(allow:string,deny:string=""){
|
||||
this.hasDeny=!!deny;
|
||||
this.allow=BigInt(allow);
|
||||
this.deny=BigInt(deny);
|
||||
}
|
||||
|
|
@ -86,7 +88,7 @@ class Permissions{
|
|||
},
|
||||
{
|
||||
name:"MANAGE_MESSAGES",
|
||||
readableName:"Manager messages",
|
||||
readableName:"Manage messages",
|
||||
description:"Allows the user to delete messages that aren't their own"
|
||||
},
|
||||
{
|
||||
|
|
@ -242,5 +244,22 @@ class Permissions{
|
|||
return 0;
|
||||
}
|
||||
}
|
||||
setPermision(name:string,setto:number):void{
|
||||
const bit=Permissions.map[name] as number;
|
||||
if(setto===0){
|
||||
this.deny=this.setPermisionbit(bit,false,this.deny);
|
||||
this.allow=this.setPermisionbit(bit,false,this.allow);
|
||||
}else if(setto===1){
|
||||
|
||||
this.deny=this.setPermisionbit(bit,false,this.deny);
|
||||
this.allow=this.setPermisionbit(bit,true,this.allow);
|
||||
}else if(setto===-1){
|
||||
|
||||
this.deny=this.setPermisionbit(bit,true,this.deny);
|
||||
this.allow=this.setPermisionbit(bit,false,this.allow);
|
||||
}else{
|
||||
console.error("invalid number entered:"+setto);
|
||||
}
|
||||
}
|
||||
}
|
||||
Permissions.makeMap();
|
||||
|
|
|
|||
|
|
@ -7,7 +7,16 @@ class Role{
|
|||
owner:Guild;
|
||||
color:number;
|
||||
id:string;
|
||||
name:string;
|
||||
info:Guild["info"];
|
||||
hoist:boolean;
|
||||
icon:string;
|
||||
mentionable:boolean;
|
||||
unicode_emoji:string;
|
||||
headers:Guild["headers"];
|
||||
constructor(JSON, owner:Guild){
|
||||
this.headers=owner.headers;
|
||||
this.info=owner.info;
|
||||
for(const thing of Object.keys(JSON)){
|
||||
this[thing]=JSON[thing];
|
||||
}
|
||||
|
|
@ -24,5 +33,4 @@ class Role{
|
|||
if(this.color===0){return null};
|
||||
return `#${this.color.toString(16)}`;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
263
webpage/settings.ts
Normal file
263
webpage/settings.ts
Normal file
|
|
@ -0,0 +1,263 @@
|
|||
import { Permissions } from "./permissions.js";
|
||||
import { Guild } from "./guild.js";
|
||||
|
||||
class Buttons{
|
||||
readonly name:string;
|
||||
readonly buttons:[string,Options|string][];
|
||||
bigtable:HTMLDivElement;
|
||||
warndiv:HTMLElement;
|
||||
constructor(name:string){
|
||||
this.buttons=[];
|
||||
this.name=name;
|
||||
}
|
||||
add(name:string,thing:Options=undefined){
|
||||
if(!thing){thing=new Options(name,this)}
|
||||
this.buttons.push([name,thing]);
|
||||
return thing;
|
||||
}
|
||||
generateHTML(){
|
||||
const bigtable=document.createElement("div");
|
||||
bigtable.classList.add("Buttons");
|
||||
bigtable.classList.add("flexltr");
|
||||
this.bigtable=bigtable;
|
||||
const htmlarea=document.createElement("div");
|
||||
|
||||
const buttonTable=document.createElement("div");
|
||||
buttonTable.classList.add("flexttb","settingbuttons");
|
||||
for(const thing of this.buttons){
|
||||
const button=document.createElement("button");
|
||||
button.classList.add("SettingsButton");
|
||||
button.textContent=thing[0];
|
||||
button.onclick=_=>{
|
||||
this.generateHTMLArea(thing[1],htmlarea);
|
||||
if(this.warndiv){
|
||||
this.warndiv.remove();
|
||||
}
|
||||
}
|
||||
buttonTable.append(button);
|
||||
}
|
||||
this.generateHTMLArea(this.buttons[0][1],htmlarea);
|
||||
bigtable.append(buttonTable);
|
||||
bigtable.append(htmlarea);
|
||||
return bigtable;
|
||||
}
|
||||
handleString(str:string):HTMLElement{
|
||||
const div=document.createElement("div");
|
||||
div.textContent=str;
|
||||
return div;
|
||||
}
|
||||
private generateHTMLArea(genation:Options|string,htmlarea:HTMLElement){
|
||||
let html:HTMLElement;
|
||||
if(genation instanceof Options){
|
||||
html=genation.generateHTML();
|
||||
}else{
|
||||
html=this.handleString(genation);
|
||||
}
|
||||
htmlarea.innerHTML="";
|
||||
htmlarea.append(html);
|
||||
}
|
||||
changed(html:HTMLElement){
|
||||
this.warndiv=html;
|
||||
this.bigtable.append(html);
|
||||
}
|
||||
save(){}
|
||||
}
|
||||
|
||||
class PermisionToggle{
|
||||
readonly rolejson:{name:string,readableName:string,description:string};
|
||||
permissions:Permissions;
|
||||
owner:Options;
|
||||
constructor(roleJSON:PermisionToggle["rolejson"],permissions:Permissions,owner:Options){
|
||||
this.rolejson=roleJSON;
|
||||
this.permissions=permissions;
|
||||
this.owner=owner;
|
||||
}
|
||||
generateHTML():HTMLElement{
|
||||
const div=document.createElement("div");
|
||||
div.classList.add("setting");
|
||||
const name=document.createElement("span");
|
||||
name.textContent=this.rolejson.readableName;
|
||||
name.classList.add("settingsname");
|
||||
div.append(name);
|
||||
|
||||
|
||||
div.append(this.generateCheckbox());
|
||||
const p=document.createElement("p");
|
||||
p.innerText=this.rolejson.description;
|
||||
div.appendChild(p);
|
||||
return div;
|
||||
}
|
||||
generateCheckbox():HTMLElement{
|
||||
const div=document.createElement("div");
|
||||
div.classList.add("tritoggle");
|
||||
const state=this.permissions.getPermision(this.rolejson.name);
|
||||
|
||||
const on=document.createElement("input");
|
||||
on.type="radio";
|
||||
on.name=this.rolejson.name;
|
||||
div.append(on);
|
||||
if(state===1){on.checked=true;};
|
||||
on.onclick=_=>{
|
||||
this.permissions.setPermision(this.rolejson.name,1);
|
||||
this.owner.changed();
|
||||
}
|
||||
|
||||
const no=document.createElement("input");
|
||||
no.type="radio";
|
||||
no.name=this.rolejson.name;
|
||||
div.append(no);
|
||||
if(state===0){no.checked=true;};
|
||||
no.onclick=_=>{
|
||||
this.permissions.setPermision(this.rolejson.name,0);
|
||||
this.owner.changed();
|
||||
}
|
||||
if(this.permissions.hasDeny){
|
||||
const off=document.createElement("input");
|
||||
off.type="radio";
|
||||
off.name=this.rolejson.name;
|
||||
div.append(off);
|
||||
if(state===-1){off.checked=true;};
|
||||
off.onclick=_=>{
|
||||
this.permissions.setPermision(this.rolejson.name,-1);
|
||||
this.owner.changed();
|
||||
}
|
||||
}
|
||||
return div;
|
||||
}
|
||||
}
|
||||
class RoleList extends Buttons{
|
||||
readonly permissions:[string,Permissions][];
|
||||
permission:Permissions;
|
||||
readonly guild:Guild;
|
||||
readonly channel:boolean;
|
||||
readonly declare buttons:[string,string][];
|
||||
readonly options:Options;
|
||||
onchange:Function;
|
||||
curid:string;
|
||||
constructor(permissions:[string,Permissions][],guild:Guild,onchange:Function,channel=false){
|
||||
super("Roles");
|
||||
this.guild=guild;
|
||||
this.permissions=permissions;
|
||||
this.channel=channel;
|
||||
this.onchange=onchange;
|
||||
const options=new Options("",this);
|
||||
if(channel){
|
||||
this.permission=new Permissions("0","0");
|
||||
}else{
|
||||
this.permission=new Permissions("0");
|
||||
}
|
||||
for(const thing of Permissions.info){
|
||||
options.addPermisionToggle(thing,this.permission);//
|
||||
}
|
||||
for(const i of permissions){
|
||||
this.buttons.push([guild.getRole(i[0]).name,i[0]])//
|
||||
}
|
||||
this.options=options;
|
||||
}
|
||||
handleString(str:string):HTMLElement{
|
||||
this.curid=str;
|
||||
const perm=this.permissions.find(_=>_[0]===str)[1];
|
||||
this.permission.deny=perm.deny;
|
||||
this.permission.allow=perm.allow;
|
||||
this.options.name=this.guild.getRole(str).name;
|
||||
this.options.haschanged=false;
|
||||
return this.options.generateHTML();
|
||||
}
|
||||
save(){
|
||||
this.onchange(this.curid,this.permission);
|
||||
}
|
||||
}
|
||||
class Options{
|
||||
name:string;
|
||||
haschanged=false;
|
||||
readonly options:(PermisionToggle|Buttons|RoleList)[];
|
||||
readonly owner:Buttons;
|
||||
|
||||
constructor(name:string,owner:Buttons){
|
||||
this.name=name;
|
||||
this.options=[];
|
||||
this.owner=owner;
|
||||
|
||||
}
|
||||
addPermisionToggle(roleJSON:PermisionToggle["rolejson"],permissions:Permissions){
|
||||
this.options.push(new PermisionToggle(roleJSON,permissions,this));
|
||||
}
|
||||
generateHTML():HTMLElement{
|
||||
const div=document.createElement("div");
|
||||
div.classList.add("titlediv");
|
||||
const title=document.createElement("h2");
|
||||
title.textContent=this.name;
|
||||
div.append(title);
|
||||
title.classList.add("settingstitle")
|
||||
const table=document.createElement("div");
|
||||
table.classList.add("flexttb","flexspace");
|
||||
for(const thing of this.options){
|
||||
table.append(thing.generateHTML());
|
||||
}
|
||||
div.append(table);
|
||||
return div;
|
||||
}
|
||||
changed(){
|
||||
|
||||
if(!this.haschanged){
|
||||
const div=document.createElement("div");
|
||||
div.classList.add("flexltr","savediv");
|
||||
const span=document.createElement("span");
|
||||
div.append(span);
|
||||
span.textContent="Careful, you have unsaved changes";
|
||||
const button=document.createElement("button");
|
||||
button.textContent="Save changes";
|
||||
div.append(button);
|
||||
this.haschanged=true;
|
||||
this.owner.changed(div);
|
||||
|
||||
button.onclick=_=>{
|
||||
this.owner.save();
|
||||
div.remove();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
class Settings extends Buttons{
|
||||
static readonly Buttons=Buttons;
|
||||
static readonly Options=Options;
|
||||
html:HTMLElement;
|
||||
constructor(name:string){
|
||||
super(name);
|
||||
}
|
||||
addButton(name:string):Options{
|
||||
const options=new Options(name,this);
|
||||
this.add(name,options);
|
||||
return options;
|
||||
}
|
||||
show(){
|
||||
const background=document.createElement("div");
|
||||
background.classList.add("background");
|
||||
|
||||
const title=document.createElement("h2");
|
||||
title.textContent=this.name;
|
||||
title.classList.add("settingstitle")
|
||||
background.append(title);
|
||||
|
||||
background.append(this.generateHTML());
|
||||
|
||||
|
||||
|
||||
const exit=document.createElement("span");
|
||||
exit.textContent="✖";
|
||||
exit.classList.add("exitsettings");
|
||||
background.append(exit);
|
||||
exit.onclick=_=>{this.hide();};
|
||||
document.body.append(background);
|
||||
this.html=background;
|
||||
}
|
||||
hide(){
|
||||
this.html.remove();
|
||||
this.html=null;
|
||||
}
|
||||
}
|
||||
export {Settings,RoleList}
|
||||
|
||||
|
|
@ -5,6 +5,7 @@ body {
|
|||
color: var(--primary-text);
|
||||
overflow-y: hidden;
|
||||
overflow-x: hidden;
|
||||
height:100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
|
@ -52,10 +53,13 @@ th {
|
|||
.background {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
height: 100vh;
|
||||
top: 0;
|
||||
background-color: #000000bf;
|
||||
z-index: 11;
|
||||
max-height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.messagediv:hover {
|
||||
|
|
@ -177,7 +181,7 @@ h2 {
|
|||
#neunence {
|
||||
vertical-align: top;
|
||||
overflow: auto;
|
||||
height: 9dvh;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
#servers {
|
||||
|
|
@ -235,14 +239,16 @@ img {
|
|||
|
||||
#messagecontainer {
|
||||
overflow: auto;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
display: flex;
|
||||
max-width: 100%;
|
||||
flex-shrink: 1;
|
||||
width: 100%;
|
||||
/* flex-grow: 1; */
|
||||
}
|
||||
|
||||
#messages {
|
||||
max-width: 100%;
|
||||
/* height: 100%; */
|
||||
}
|
||||
|
||||
p {
|
||||
|
|
@ -253,14 +259,17 @@ p {
|
|||
}
|
||||
|
||||
#channels {
|
||||
--top-height: 28px;
|
||||
background-color: var(--channels-bg);
|
||||
position: absolute;
|
||||
top: var(--top-height);
|
||||
height: calc(100dvh - 53px - var(--top-height));
|
||||
width: 2.5in;
|
||||
overflow: auto;
|
||||
user-select: none;
|
||||
flex-grow: 1;
|
||||
/* display: flex; */
|
||||
flex-shrink: 1;
|
||||
min-height: 0px;
|
||||
min-width: 0px;
|
||||
width: 2.5in;
|
||||
/* height: 100%; */
|
||||
}
|
||||
|
||||
#userdock {
|
||||
|
|
@ -308,10 +317,12 @@ div {
|
|||
font-size: 16px;
|
||||
padding: 3px;
|
||||
border-radius: .25cm;
|
||||
width: 99%;
|
||||
width: 100%;
|
||||
height: .5in;
|
||||
z-index: -100;
|
||||
max-width: 99%;
|
||||
display: flex;
|
||||
max-height: fit-content;
|
||||
}
|
||||
|
||||
p {
|
||||
|
|
@ -369,6 +380,7 @@ p {
|
|||
|
||||
#typediv {
|
||||
position: relative;
|
||||
/* display: flex; */
|
||||
}
|
||||
|
||||
.loading-indicator {
|
||||
|
|
@ -451,10 +463,14 @@ p {
|
|||
}
|
||||
#channelw {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
display: flex;
|
||||
grid-template-rows: auto 1fr;
|
||||
height: calc(100dvh - .1in - var(--servertd-height));
|
||||
max-width: 100%;
|
||||
flex-direction: column;
|
||||
flex-shrink: 1;
|
||||
min-height: 0;
|
||||
height: 100%;
|
||||
/* width: 100%; */
|
||||
}
|
||||
|
||||
.timestamp {
|
||||
|
|
@ -586,7 +602,11 @@ textarea {
|
|||
border-color: var(--server-border);
|
||||
border-width: .1cm;
|
||||
border-style: solid;
|
||||
height: .2in;
|
||||
height: .4in;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.channeleffects {
|
||||
|
|
@ -628,13 +648,24 @@ textarea {
|
|||
#userdock {
|
||||
background-color: var(--user-dock-bg);
|
||||
width: 2.5in;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
/* position: absolute; */
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
height: .6in;
|
||||
display: flex;
|
||||
align-content: stretch;
|
||||
/* flex-direction: row; */
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-top: .02in;
|
||||
}
|
||||
|
||||
#channels-td {
|
||||
padding-right: 240px;
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
#settings {
|
||||
|
|
@ -646,6 +677,7 @@ textarea {
|
|||
font-size: .25in;
|
||||
width: .3in;
|
||||
height: .3in;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
#settings:hover {
|
||||
|
|
@ -659,11 +691,13 @@ textarea {
|
|||
background-color: var(--user-info-bg);
|
||||
border-radius: .1in;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
padding: .03in;
|
||||
}
|
||||
|
||||
.servernamediv {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
/* width: 100%; */
|
||||
/* max-width: 100%; */
|
||||
}
|
||||
|
||||
button {
|
||||
|
|
@ -908,13 +942,14 @@ span {
|
|||
.accountSwitcher{
|
||||
background:var(--profile-bg);
|
||||
cursor:pointer;
|
||||
position:absolute;
|
||||
top:0px;
|
||||
transform: translate(0, -100%);
|
||||
/* width:100%; */
|
||||
box-shadow: .00in -.5in 1in #0000006b;
|
||||
border-radius: .05in .05in .0in.0in;
|
||||
/* max-width: 100%; */
|
||||
flex-grow: 0;
|
||||
align-self: center;
|
||||
flex-shrink: 1;
|
||||
min-width: 0px;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
.accountSwitcher tr{
|
||||
transition: background .3s;
|
||||
|
|
@ -932,6 +967,7 @@ span {
|
|||
word-break: normal;
|
||||
white-space: nowrap;
|
||||
font-size: .125in;
|
||||
min-width: 0px;
|
||||
}
|
||||
.title{
|
||||
font-size:.25in;
|
||||
|
|
@ -941,6 +977,7 @@ span {
|
|||
#channelname{
|
||||
font-size:.2in;
|
||||
font-weight:bold;
|
||||
display: flex;
|
||||
}
|
||||
#mobileback{
|
||||
/* display:inline-block; */
|
||||
|
|
@ -1051,9 +1088,10 @@ span {
|
|||
right:0px;
|
||||
}
|
||||
.containedFile{
|
||||
position:relative !important;
|
||||
position: relative;
|
||||
width: fit-content;
|
||||
box-shadow:.02in .02in .05in black;
|
||||
display: inline-block;
|
||||
}
|
||||
#replybox{
|
||||
display:flex;
|
||||
|
|
@ -1083,3 +1121,124 @@ span {
|
|||
height: 0in;
|
||||
padding: 0in;
|
||||
}
|
||||
.Buttons{
|
||||
background:var(--primary-bg);
|
||||
position: relative;
|
||||
}
|
||||
.flexltr{
|
||||
display:flex;
|
||||
flex-wrap: nowrap;
|
||||
flex-direction: row;
|
||||
max-height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
.flexttb{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: 100vh;
|
||||
overflow: auto;
|
||||
/* margin-bottom: 1in; */
|
||||
/* padding-bottom: .1in; */
|
||||
}
|
||||
.settingbuttons{
|
||||
padding-top:.075in;
|
||||
width: 4in;
|
||||
border-right: solid var(--message-bg-hover);
|
||||
gap:.04in;
|
||||
}
|
||||
.setting{
|
||||
background:var(--user-info-bg);
|
||||
padding:.075in;
|
||||
border-radius:.075in;
|
||||
box-shadow:0in 0in .1in var(--message-bg-hover);
|
||||
}
|
||||
.settingsname{
|
||||
font-size:.25in;
|
||||
font-weight:bold;
|
||||
margin-right:.1in;
|
||||
}
|
||||
.flexspace{
|
||||
gap:.1in;
|
||||
}
|
||||
.titlediv{
|
||||
height:100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.settingstitle{
|
||||
font-weight:900;
|
||||
font-size:.25in;
|
||||
border-bottom:solid var(--message-bg-hover);
|
||||
background: var(--primary-bg);
|
||||
padding: .02in .1in;
|
||||
}
|
||||
.exitsettings{
|
||||
position:absolute;
|
||||
top:.05in;
|
||||
right:.05in;
|
||||
background:var(--channel-hover);
|
||||
width:.3in;
|
||||
height:.3in;
|
||||
display:flex;
|
||||
border-radius:1in;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
font-size:.2in;
|
||||
cursor:pointer;
|
||||
border:solid .04in black;
|
||||
}
|
||||
|
||||
.tritoggle{
|
||||
display:inline-block;
|
||||
input{
|
||||
height:.15in;
|
||||
width:.15in;
|
||||
margin:.015in;
|
||||
}
|
||||
:first-child{
|
||||
accent-color:green;
|
||||
}
|
||||
:last-child{
|
||||
accent-color:red;
|
||||
}
|
||||
}
|
||||
|
||||
.channelflex{
|
||||
flex-shrink:0;
|
||||
flex-grow:0;
|
||||
width:2.5in;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
align-content: stretch;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
.messageflex{
|
||||
display:flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
.userflex{
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.savediv{
|
||||
position:absolute;
|
||||
background:var(--message-bg-hover);
|
||||
border:solid black;
|
||||
border-radius:.075in;
|
||||
padding:.05in .2in;
|
||||
display:flex;
|
||||
align-items: center;
|
||||
right:50%;
|
||||
transform:translate(50%,0);
|
||||
bottom:.1in;
|
||||
font-weight:bold;
|
||||
font-size:.2in;
|
||||
width:5in;
|
||||
height:.5in;
|
||||
button{
|
||||
background:green;
|
||||
}
|
||||
}
|
||||
|
|
@ -4,6 +4,7 @@ import {markdown} from "./markdown.js";
|
|||
import {Contextmenu} from "./contextmenu.js";
|
||||
import {Localuser} from "./localuser.js";
|
||||
import {Guild} from "./guild.js";
|
||||
|
||||
class User{
|
||||
static userids={};
|
||||
owner:Localuser;
|
||||
|
|
@ -15,6 +16,19 @@ class User{
|
|||
discriminator:string;
|
||||
pronouns:string;
|
||||
bot:boolean;
|
||||
static contextmenu:Contextmenu=new Contextmenu("User Menu");
|
||||
static setUpContextMenu(){
|
||||
this.contextmenu.addbutton("Copy user id",function(){
|
||||
navigator.clipboard.writeText(this.id);
|
||||
});
|
||||
this.contextmenu.addbutton("Message user",function(){
|
||||
fetch(this.info.api.toString()+"/v9/users/@me/channels",
|
||||
{method:"POST",
|
||||
body:JSON.stringify({"recipients":[this.id]}),
|
||||
headers: this.headers
|
||||
});
|
||||
})
|
||||
}
|
||||
static checkuser(userjson,owner:Localuser){
|
||||
if(User.userids[userjson.id]){
|
||||
return User.userids[userjson.id];
|
||||
|
|
@ -58,6 +72,23 @@ class User{
|
|||
this.changepfp(json.avatar);
|
||||
}
|
||||
}
|
||||
bind(html:HTMLElement,guild:Guild=null){
|
||||
if(guild&&guild.id!=="@me"){
|
||||
Member.resolve(this,guild).then(_=>{
|
||||
_.bind(html);
|
||||
}).catch(_=>{
|
||||
console.log(_)
|
||||
});
|
||||
}
|
||||
this.profileclick(html);
|
||||
User.contextmenu.bind(html,this);
|
||||
}
|
||||
static async resolve(id:string,localuser:Localuser){
|
||||
const json=await fetch(localuser.info.api.toString()+"/v9/users/"+id+"/profile",
|
||||
{headers:localuser.headers}
|
||||
).then(_=>_.json());
|
||||
return new User(json,localuser);
|
||||
}
|
||||
changepfp(update:string){
|
||||
this.avatar=update;
|
||||
this.hypotheticalpfp=false;
|
||||
|
|
@ -140,4 +171,5 @@ class User{
|
|||
}
|
||||
}
|
||||
}
|
||||
User.setUpContextMenu();
|
||||
export {User};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue