put a plain background on images

This commit is contained in:
jude 2022-03-24 21:36:22 +00:00
parent afb2fbe4ff
commit abfe492192
5 changed files with 136 additions and 73 deletions

View File

@ -41,14 +41,15 @@ pub async fn get_guild_channels(
) -> JsonValue { ) -> JsonValue {
check_authorization!(cookies, ctx.inner(), id); check_authorization!(cookies, ctx.inner(), id);
let channels_res = GuildId(id).channels(ctx.inner()).await; match GuildId(id).to_guild_cached(ctx.inner()) {
Some(guild) => {
match channels_res {
Ok(channels) => {
let mut channel_info = vec![]; let mut channel_info = vec![];
for (channel_id, channel) in for (channel_id, channel) in guild
channels.iter().filter(|(_, channel)| channel.is_text_based()) .channels
.iter()
.filter_map(|(id, channel)| channel.to_owned().guild().map(|c| (id, c)))
.filter(|(_, channel)| channel.is_text_based())
{ {
let mut ch = ChannelInfo { let mut ch = ChannelInfo {
name: channel.name.to_string(), name: channel.name.to_string(),
@ -85,10 +86,9 @@ pub async fn get_guild_channels(
json!(channel_info) json!(channel_info)
} }
Err(e) => {
warn!("Could not fetch channels from {}: {:?}", id, e);
json!({"error": "Could not get channels"}) None => {
json!({"error": "Bot not in guild"})
} }
} }
} }

BIN
web/static/img/bg.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 762 B

View File

@ -7,6 +7,7 @@ const $deleteReminderBtn = document.querySelector("#delete-reminder-confirm");
let channels; let channels;
let roles; let roles;
let guild_id;
function colorToInt(r, g, b) { function colorToInt(r, g, b) {
return (r << 16) + (g << 8) + b; return (r << 16) + (g << 8) + b;
@ -75,6 +76,29 @@ function fetch_roles(guild_id) {
}); });
} }
async function fetch_channels(guild_id) {
const event = new Event("channelsLoading");
document.dispatchEvent(event);
await fetch(`/dashboard/api/guild/${guild_id}/channels`)
.then((response) => response.json())
.then((data) => {
if (data.error) {
if (data.error === "Bot not in guild") {
switch_pane("guild-error");
} else {
show_error(data.error);
}
} else {
channels = data;
}
})
.then(() => {
const event = new Event("channelsLoaded");
document.dispatchEvent(event);
});
}
async function fetch_reminders(guild_id) { async function fetch_reminders(guild_id) {
document.dispatchEvent(new Event("remindersLoading")); document.dispatchEvent(new Event("remindersLoading"));
@ -84,7 +108,7 @@ async function fetch_reminders(guild_id) {
$reminderBox.innerHTML = ""; $reminderBox.innerHTML = "";
// fetch reminders // fetch reminders
await fetch(`dashboard/api/guild/${guild_id}/reminders`) await fetch(`/dashboard/api/guild/${guild_id}/reminders`)
.then((response) => response.json()) .then((response) => response.json())
.then((data) => { .then((data) => {
if (data.error) { if (data.error) {
@ -140,6 +164,40 @@ async function fetch_reminders(guild_id) {
}); });
} }
document.addEventListener("guildSwitched", async (e) => {
$loader.classList.remove("is-hidden");
let $anchor = document.querySelector(
`.switch-pane[data-guild="${e.detail.guild_id}"]`
);
switch_pane($anchor.dataset["pane"]);
$anchor.classList.add("is-active");
reset_guild_pane();
fetch_roles(e.detail.guild_id);
await fetch_channels(e.detail.guild_id);
fetch_reminders(e.detail.guild_id);
document.querySelectorAll("p.pageTitle").forEach((el) => {
el.textContent = `${e.detail.guild_name} Reminders`;
});
document.querySelectorAll("select.channel-selector").forEach((el) => {
el.addEventListener("change", (e) => {
update_select(e.target);
});
});
resize_textareas();
$loader.classList.add("is-hidden");
});
document.addEventListener("channelsLoaded", () => {
document.querySelectorAll("select.channel-selector").forEach(set_channels);
});
document.addEventListener("remindersLoaded", (event) => { document.addEventListener("remindersLoaded", (event) => {
const guild = document.querySelector(".guildList a.is-active").dataset["guild"]; const guild = document.querySelector(".guildList a.is-active").dataset["guild"];
@ -180,7 +238,13 @@ document.addEventListener("remindersLoaded", (event) => {
$deleteReminderBtn.closest(".modal").classList.toggle("is-active"); $deleteReminderBtn.closest(".modal").classList.toggle("is-active");
}); });
node.querySelector("button.save-btn").addEventListener("click", (event) => { const $saveBtn = node.querySelector("button.save-btn");
$saveBtn.addEventListener("click", (event) => {
$saveBtn.querySelector("span.icon > i").classList = [
"fas fa-spinner fa-spin",
];
let seconds = let seconds =
parseInt(node.querySelector('input[name="interval_seconds"]').value) || parseInt(node.querySelector('input[name="interval_seconds"]').value) ||
null; null;
@ -200,19 +264,27 @@ document.addEventListener("remindersLoaded", (event) => {
let reminder = { let reminder = {
uid: node.closest(".reminderContent").dataset["uid"], uid: node.closest(".reminderContent").dataset["uid"],
avatar: node.querySelector("img.discord-avatar").src, avatar: has_source(node.querySelector("img.discord-avatar").src),
channel: node.querySelector("select.channel-selector").value, channel: node.querySelector("select.channel-selector").value,
content: node.querySelector('textarea[name="content"]').value, content: node.querySelector('textarea[name="content"]').value,
embed_author_url: node.querySelector("img.embed_author_url").src, embed_author_url: has_source(
node.querySelector("img.embed_author_url").src
),
embed_author: node.querySelector('textarea[name="embed_author"]').value, embed_author: node.querySelector('textarea[name="embed_author"]').value,
embed_color: color, embed_color: color,
embed_description: node.querySelector( embed_description: node.querySelector(
'textarea[name="embed_description"]' 'textarea[name="embed_description"]'
).value, ).value,
embed_footer: node.querySelector('textarea[name="embed_footer"]').value, embed_footer: node.querySelector('textarea[name="embed_footer"]').value,
embed_footer_url: node.querySelector("img.embed_footer_url").src, embed_footer_url: has_source(
embed_image_url: node.querySelector("img.embed_image_url").src, node.querySelector("img.embed_footer_url").src
embed_thumbnail_url: node.querySelector("img.embed_thumbnail_url").src, ),
embed_image_url: has_source(
node.querySelector("img.embed_image_url").src
),
embed_thumbnail_url: has_source(
node.querySelector("img.embed_thumbnail_url").src
),
embed_title: node.querySelector('textarea[name="embed_title"]').value, embed_title: node.querySelector('textarea[name="embed_title"]').value,
expires: null, expires: null,
interval_seconds: seconds, interval_seconds: seconds,
@ -236,6 +308,12 @@ document.addEventListener("remindersLoaded", (event) => {
}) })
.then((response) => response.json()) .then((response) => response.json())
.then((data) => console.log(data)); .then((data) => console.log(data));
$saveBtn.querySelector("span.icon > i").classList = ["fas fa-check"];
window.setTimeout(() => {
$saveBtn.querySelector("span.icon > i").classList = ["fas fa-save"];
}, 1500);
}); });
} }
}); });
@ -314,7 +392,7 @@ document.addEventListener("DOMContentLoaded", () => {
show_error(data.error); show_error(data.error);
} else { } else {
document.querySelectorAll("a.switch-pane").forEach((element) => { document.querySelectorAll("a.switch-pane").forEach((element) => {
element.innerHTML = element.innerHTML.replace( element.textContent = element.textContent.replace(
"%username%", "%username%",
data.name data.name
); );
@ -353,59 +431,28 @@ document.addEventListener("DOMContentLoaded", () => {
const $clone = $template.content.cloneNode(true); const $clone = $template.content.cloneNode(true);
const $anchor = $clone.querySelector("a"); const $anchor = $clone.querySelector("a");
$anchor.innerHTML = $clone let $span = $clone.querySelector("a > span.guild-name");
.querySelector("a")
.innerHTML.replace("%guildname%", guild.name); $span.textContent = $span.textContent.replace(
"%guildname%",
guild.name
);
$anchor.dataset["guild"] = guild.id; $anchor.dataset["guild"] = guild.id;
$anchor.dataset["name"] = guild.name; $anchor.dataset["name"] = guild.name;
$anchor.addEventListener("click", async (e) => { $anchor.addEventListener("click", async (e) => {
e.preventDefault(); e.preventDefault();
$loader.classList.remove("is-hidden"); guild_id = guild.id;
switch_pane($anchor.dataset["pane"]); const event = new CustomEvent("guildSwitched", {
detail: {
reset_guild_pane(); guild_name: guild.name,
guild_id: guild.id,
fetch_roles($anchor.dataset["guild"]); },
await fetch(
`/dashboard/api/guild/${$anchor.dataset["guild"]}/channels`
)
.then((response) => response.json())
.then((data) => {
if (data.error) {
if (data.error === "Bot not in guild") {
switch_pane("guild-error");
} else {
show_error(data.error);
}
} else {
channels = data;
document
.querySelectorAll("select.channel-selector")
.forEach(set_channels);
}
}); });
fetch_reminders($anchor.dataset["guild"]); document.dispatchEvent(event);
document.querySelectorAll("p.pageTitle").forEach((el) => {
el.textContent = $anchor.dataset["name"] + " Reminders";
});
document
.querySelectorAll("select.channel-selector")
.forEach((el) => {
el.addEventListener("change", (e) => {
update_select(e.target);
});
});
$anchor.classList.add("is-active");
resize_textareas();
$loader.classList.add("is-hidden");
}); });
element.append($clone); element.append($clone);
@ -436,6 +483,14 @@ function set_channels(element) {
update_select(element); update_select(element);
} }
function has_source(string) {
if (string.startsWith(`https://${window.location.hostname}`)) {
return null;
} else {
return string;
}
}
let $createReminder = document.querySelector("#reminderCreator"); let $createReminder = document.querySelector("#reminderCreator");
$createReminder.querySelector("button#createReminder").addEventListener("click", () => { $createReminder.querySelector("button#createReminder").addEventListener("click", () => {
@ -458,18 +513,26 @@ $createReminder.querySelector("button#createReminder").addEventListener("click",
).setZone("UTC"); ).setZone("UTC");
let reminder = { let reminder = {
avatar: $createReminder.querySelector("img.discord-avatar").src, avatar: has_source($createReminder.querySelector("img.discord-avatar").src),
channel: $createReminder.querySelector("select.channel-selector").value, channel: $createReminder.querySelector("select.channel-selector").value,
content: $createReminder.querySelector("textarea#messageContent").value, content: $createReminder.querySelector("textarea#messageContent").value,
embed_author_url: $createReminder.querySelector("img.embed_author_url").src, embed_author_url: has_source(
$createReminder.querySelector("img.embed_author_url").src
),
embed_author: $createReminder.querySelector("textarea#embedAuthor").value, embed_author: $createReminder.querySelector("textarea#embedAuthor").value,
embed_color: color, embed_color: color,
embed_description: $createReminder.querySelector("textarea#embedDescription") embed_description: $createReminder.querySelector("textarea#embedDescription")
.value, .value,
embed_footer: $createReminder.querySelector("textarea#embedFooter").value, embed_footer: $createReminder.querySelector("textarea#embedFooter").value,
embed_footer_url: $createReminder.querySelector("img.embed_footer_url").src, embed_footer_url: has_source(
embed_image_url: $createReminder.querySelector("img.embed_image_url").src, $createReminder.querySelector("img.embed_footer_url").src
embed_thumbnail_url: $createReminder.querySelector("img.embed_thumbnail_url").src, ),
embed_image_url: has_source(
$createReminder.querySelector("img.embed_image_url").src
),
embed_thumbnail_url: has_source(
$createReminder.querySelector("img.embed_thumbnail_url").src
),
embed_title: $createReminder.querySelector("textarea#embedTitle").value, embed_title: $createReminder.querySelector("textarea#embedTitle").value,
enabled: true, enabled: true,
expires: null, expires: null,

View File

@ -308,7 +308,7 @@
<template id="guildListEntry"> <template id="guildListEntry">
<li> <li>
<a class="switch-pane" data-pane="guild"> <a class="switch-pane" data-pane="guild">
<span class="icon"><i class="fas fa-map-pin"></i></span> %guildname% <span class="icon"><i class="fas fa-map-pin"></i></span> <span class="guild-name">%guildname%</span>
</a> </a>
</li> </li>
</template> </template>

View File

@ -4,7 +4,7 @@
<figure class="media-left"> <figure class="media-left">
<p class="image is-32x32 customizable"> <p class="image is-32x32 customizable">
<a> <a>
<img class="is-rounded discord-avatar" src=""> <img class="is-rounded discord-avatar" src="/static/img/bg.webp">
</a> </a>
</p> </p>
</figure> </figure>
@ -30,7 +30,7 @@
<div class="a"> <div class="a">
<p class="image is-24x24 customizable"> <p class="image is-24x24 customizable">
<a> <a>
<img class="is-rounded embed_author_url" src=""> <img class="is-rounded embed_author_url" src="/static/img/bg.webp">
</a> </a>
</p> </p>
</div> </div>
@ -79,7 +79,7 @@
<div class="b"> <div class="b">
<p class="image thumbnail customizable"> <p class="image thumbnail customizable">
<a> <a>
<img class="embed_thumbnail_url" src="" alt="Square thumbnail embedded image"> <img class="embed_thumbnail_url" src="/static/img/bg.webp" alt="Square thumbnail embedded image">
</a> </a>
</p> </p>
</div> </div>
@ -87,14 +87,14 @@
<p class="image is-400x300 customizable"> <p class="image is-400x300 customizable">
<a> <a>
<img class="embed_image_url" src="" alt="Large embedded image"> <img class="embed_image_url" src="/static/img/bg.webp" alt="Large embedded image">
</a> </a>
</p> </p>
<div class="embed-footer-box"> <div class="embed-footer-box">
<p class="image is-20x20 customizable"> <p class="image is-20x20 customizable">
<a> <a>
<img class="is-rounded embed_footer_url" src="" alt="Footer profile-like image"> <img class="is-rounded embed_footer_url" src="/static/img/bg.webp" alt="Footer profile-like image">
</a> </a>
</p> </p>
@ -212,7 +212,7 @@
</button> </button>
{% else %} {% else %}
<button class="button is-primary save-btn"> <button class="button is-primary save-btn">
Save <span>Save</span> <span class="icon"><i class="fas fa-save"></i></span>
</button> </button>
<button class="button is-warning disable-enable"> <button class="button is-warning disable-enable">
</button> </button>