corbz/PYRSS-Website
corbz/PYRSS-Website
1
0
Fork 0
Code Issues 21 Pull Requests Actions Releases 1 Wiki Activity

move for async javascript

Browse Source
This commit is contained in:
Corban-Lee Jones 2024-04-02 23:41:53 +01:00
parent 05e90c64e4
commit 050567b50f
5 changed files with 267 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
apps/home/migrations/0010_alter_savedguilds_guild_id.py Normal file
View File

@ -0,0 +1,18 @@
# Generated by Django 5.0.1 on 2024-04-02 21:25
from django.db import migrations, models
class Migration(migrations.Migration):
dependencies = [
('home', '0009_alter_savedguilds_guild_id'),
]
operations = [
migrations.AlterField(
model_name='savedguilds',
name='guild_id',
field=models.CharField(max_length=128, unique=True),
),
]

3
apps/home/models.py
View File

@ -49,7 +49,8 @@ class SavedGuilds(models.Model):
)
guild_id = models.CharField(
max_length=128
max_length=128,
unique=True
)
name = models.CharField(

150
apps/static/js/api.js
View File

@ -1,60 +1,108 @@
function getSavedGuilds() {
return new Promise(function(resolve, reject) {
$.ajax({
url: "/api/saved-guilds/",
type: "GET",
beforeSend: function(xhr) {
xhr.setRequestHeader("X-CSRFToken", CSRF_MiddlewareToken);
},
success: function(response) {
resolve(response);
},
error: function(response) {
reject(response);
}
});
});
async function ajaxRequest(url, method, data) {
const options = {
url: url,
method: method,
beforeSend: function(xhr) {
xhr.setRequestHeader("X-CSRFToken", CSRF_MiddlewareToken);
}
}
if (data) {
options.data = data;
options.processData = false;
options.contentType = false;
}
try {
const response = await $.ajax(options);
return response
}
catch (error) {
return error
}
}
function getSavedGuild(id) {
return new Promise(function(resolve, reject) {
$.ajax({
url: `/api/saved-guilds/${id}/`,
type: "GET",
beforeSend: function(xhr) {
xhr.setRequestHeader("X-CSRFToken", CSRF_MiddlewareToken);
},
success: function(response) {
resolve(response);
},
error: function(response) {
reject(response);
}
});
});
async function getSavedGuilds() {
return await ajaxRequest("/api/saved-guilds/", "GET");
}
function newSavedGuild(formData) {
return new Promise(function(resolve, reject) {
$.ajax({
url: "/api/saved-guilds/",
type: "POST",
data: formData,
processData: false,
contentType: false,
beforeSend: function(xhr) {
xhr.setRequestHeader("X-CSRFToken", CSRF_MiddlewareToken);
},
success: function(response) {
resolve(response);
},
error: function(response) {
reject(response);
}
});
});
async function getSavedGuild(id) {
return await ajaxRequest(`/api/saved-guilds/${id}/`, "GET");
}
async function newSavedGuild(formData) {
return await ajaxRequest("/api/saved-guilds/", "POST", formData);
}
async function loadGuilds() {
return await ajaxRequest("/guilds", "GET");
}
// Old functions
// Rewrite above
// function getSavedGuilds() {
// return new Promise(function(resolve, reject) {
// $.ajax({
// url: "/api/saved-guilds/",
// type: "GET",
// beforeSend: function(xhr) {
// xhr.setRequestHeader("X-CSRFToken", CSRF_MiddlewareToken);
// },
// success: function(response) {
// resolve(response);
// },
// error: function(response) {
// reject(response);
// }
// });
// });
// }
// function getSavedGuild(id) {
// return new Promise(function(resolve, reject) {
// $.ajax({
// url: `/api/saved-guilds/${id}/`,
// type: "GET",
// beforeSend: function(xhr) {
// xhr.setRequestHeader("X-CSRFToken", CSRF_MiddlewareToken);
// },
// success: function(response) {
// resolve(response);
// },
// error: function(response) {
// reject(response);
// }
// });
// });
// }
// function newSavedGuild(formData) {
// return new Promise(function(resolve, reject) {
// $.ajax({
// url: "/api/saved-guilds/",
// type: "POST",
// data: formData,
// processData: false,
// contentType: false,
// beforeSend: function(xhr) {
// xhr.setRequestHeader("X-CSRFToken", CSRF_MiddlewareToken);
// },
// success: function(response) {
// resolve(response);
// },
// error: function(response) {
// reject(response);
// }
// });
// });
// }
function getSubscriptions() {
return new Promise(function(resolve, reject) {
$.ajax({

137
apps/static/js/home.js Normal file
View File

@ -0,0 +1,137 @@
$(document).ready(async function() {
await loadServerOptions();
await loadSavedGuilds();
});
async function loadServerOptions() {
// Remove existing options
$("#serverOptions").empty();
// Deselect any selected option
$("#serverOptions").val(null).trigger("change");
// Fetch and append the server options
try {
const servers = await loadGuilds();
servers.forEach(server => {
$("#serverOptions").append($("<option>", {
value: server.id,
text: server.name,
"data-icon": server.icon
}));
});
}
catch (error) {
alert(error);
}
}
async function loadSavedGuilds() {
try {
const servers = await getSavedGuilds();
servers.forEach(server => {
addServerTemplate(server.guild_id, server.name, server.icon);
});
}
catch (error) {
alert(error);
}
}
function openServerModal() {
$("#serverForm .modal").modal("show");
};
$("#deleteSelectedServerBtn").on("click", function() {
alert("not implemented");
});
function selectServer(sideElem) {
var name = sideElem.attr("data-name");
guildId = sideElem.attr("data-guild-id");
icon = sideElem.attr("data-icon");
$("#selectedServerContainer .selected-server-name").text(name);
$("#selectedServerContainer .selected-server-id").text(guildId);
$("#selectedServerContainer .selected-server-icon").attr("src", `https://cdn.discordapp.com/icons/${guildId}/${icon}.webp?size=80`);
}
function addServer(serverName, serverId, serverIconHash) {
var formData = new FormData();
formData.append("name", serverName);
formData.append("guild_id", serverId);
formData.append("icon", serverIconHash);
newSavedGuild(formData)
.then(resp => {
addServerTemplate(serverId, serverName, serverIconHash);
console.log(JSON.stringify(resp, null, 4));
})
.catch(err => {
alert(err);
// alert(JSON.stringify(err, null, 4));
})
}
$(document).ready(async function() {
// getSavedGuilds()
// .then(resp => {
// console.log(JSON.stringify(resp, null, 4));
// for (i=0; i < resp.length; i++) {
// var guild = resp[i];
// addServerTemplate(guild.guild_id, guild.name, guild.icon);
// }
// })
// .catch(err => {
// alert(err);
// })
// $.ajax({
// url: "/guilds",
// type: "GET",
// success: function(response) {
// for (i = 1; i < response.length; i++) {
// var guild = response[i];
// $("#serverOptions").append($("<option>", {
// value: guild.id,
// text: guild.name,
// "data-icon": guild.icon
// }));
// }
// },
// error: function(response) {
// alert(JSON.stringify(response, null, 4));
// }
// });
});
function addServerTemplate(serverId, serverName, serverIconHash) {
template = $($("#serverItemTemplate").html());
template.find("img").attr("src", `https://cdn.discordapp.com/icons/${serverId}/${serverIconHash}.webp?size=80`);
template.attr("data-guild-id", serverId);
template.attr("data-name", serverName);
template.attr("data-icon", serverIconHash);
$("#serverList").prepend(template);
}
$("#serverForm").on("submit", function(event) {
event.preventDefault();
var selectedOption = $("#serverOptions option:selected");
serverName = selectedOption.text();
serverId = selectedOption.val();
serverIconHash = selectedOption.attr("data-icon");
addServer(serverName, serverId, serverIconHash);
$("#serverForm .modal").modal("hide");
// alert(`${serverName} ${serverId} ${serverIconHash}`);
});

111
apps/templates/home/index.html
View File

@ -21,7 +21,7 @@
<div class="peer bg-body-secondary">
<div id="serverList" class="p-2 layers border-end h-100">
<div class="layer mb-2">
<button type="button" id="newServerBtn" class="btn btn-secondary rounded-3 p-1 bd" onclick="javascript: openServerModal();">
<button type="button" id="newServerBtn" class="btn bg-body rounded-circle p-1 bd" onclick="javascript: openServerModal();">
<span class="d-flex jc-c ai-c" style="width: 50px; height: 50px;">
<i class="bi bi-plus-lg fs-4"></i>
</span>
@ -29,22 +29,25 @@
</div>
</div>
</div>
<div class="peer-greed">
<div id="selectedServerContainer" class="peer-greed" data-guild-id="">
<header class="px-4 py-3 border-bottom">
<div class="peers">
<div class="peer-greed">
<div class="peers ai-c">
<div class="peer">
<img src="https://cdn.discordapp.com/icons/136501320340209664/bc41eb01d667196c17e05c045f357268.webp?size=80" alt="" width="80">
<img class="selected-server-icon rounded-3" src="" alt="server icon" width="80">
</div>
<div class="peer-greed ms-4">
<h3 class="mb-1">Project Zomboid</h3>
<h6 class="mb-0">1039201459188805692</h6>
<h3 class="selected-server-name mb-1">none</h3>
<h6 class="selected-server-id mb-0">none</h6>
</div>
</div>
</div>
<div class="peer d-flex as-s ai-c">
<button type="button" id="newSubscriptionBtn" class="btn btn-primary">New Subscription</button>
<button type="button" id="deleteSelectedServerBtn" class="btn btn-danger ms-2">
<i class="bi bi-trash3"></i>
</button>
</div>
</div>
</header>
@ -98,106 +101,14 @@
{% block javascripts %}
<script id="serverItemTemplate" type="text/template">
<div class="layer mb-2">
<button type="button" class="rounded-3 p-1 bg-body bd">
<div class="server-item layer mb-2" data-guild-id="" data-name="" data-icon="">
<button type="button" class="rounded-3 p-1 bg-body bd" onclick="javascript: selectServer($(this).parent());">
<img src="" class="rounded-3" alt="" width="50" height="50">
<!-- https://cdn.discordapp.com/icons/136501320340209664/bc41eb01d667196c17e05c045f357268.webp?size=80 -->
</button>
</div>
</script>
<script src="{% static 'js/api.js' %}"></script>
<script>
function openServerModal() {
<script src="{% static 'js/home.js' %}"></script>
$("#newServerBtn").prop("disabled", true);
$('#serverOptions').val(null).trigger('change');
$("#serverOptions").empty();
$.ajax({
url: "/guilds",
type: "GET",
success: function(response) {
for (i = 1; i < response.length; i++) {
var guild = response[i];
$("#serverOptions").append($("<option>", {
value: guild.id,
text: guild.name,
"data-icon": guild.icon
}));
}
$("#newServerBtn").prop("disabled", false);
$("#serverForm .modal").modal("show");
},
error: function(response) {
$("#newServerBtn").prop("disabled", false);
alert(JSON.stringify(response, null, 4));
}
});
};
function addServer(serverName, serverId, serverIconHash) {
var formData = new FormData();
formData.append("name", serverName);
formData.append("guild_id", serverId);
formData.append("icon", serverIconHash);
newSavedGuild(formData)
.then(resp => {
alert(JSON.stringify(resp, null, 4));
})
.catch(err => {
alert(JSON.stringify(err, null, 4));
})
addServerTemplate(serverId, serverIconHash);
}
$(document).ready(function() {
getSavedGuilds()
.then(resp => {
alert(JSON.stringify(resp, null, 4));
for (i=0; i < resp.length; i++) {
var guild = resp[i];
addServerTemplate(guild.guild_id, guild.icon);
}
})
.catch(err => {
alert(JSON.stringify(err, null, 4));
})
});
function addServerTemplate(serverId, serverIconHash) {
template = $($("#serverItemTemplate").html());
template.find("img").attr("src", `https://cdn.discordapp.com/icons/${serverId}/${serverIconHash}.webp?size=80`);
$("#serverList").prepend(template);
}
$("#serverForm").on("submit", function(event) {
event.preventDefault();
var selectedOption = $("#serverOptions option:selected");
serverName = selectedOption.text();
serverId = selectedOption.val();
serverIconHash = selectedOption.attr("data-icon");
addServer(serverName, serverId, serverIconHash);
// $.ajax({
// url: "",
// type: "GET",
// success: function(response) {
// alert(JSON.stringify(response, null, 4));
// },
// error: function(response) {
// alert(JSON.stringify(response, null, 4));
// }
// });
$("#serverForm .modal").modal("hide");
alert(`${serverName} ${serverId} ${serverIconHash}`);
});
</script>
{% endblock javascripts %}