0ct0pu5/DweebUI
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fixed apps.js pagnation and learn more modal

Browse source
This commit is contained in:
lllllllillllllillll 2024-05-16 18:36:16 -07:00
parent 1558d61dcd
commit fbe26cd0ed
4 changed files with 22 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
controllers/apps.js
View file

@ -35,6 +35,13 @@ export const Apps = async (req, res) => {
let list_end = (page * 28);
let last_page = '';
let pages = `<li class="page-item"><a class="page-link" href="/apps/1/${template_param}">1</a></li>
<li class="page-item"><a class="page-link" href="/apps/2/${template_param}">2</a></li>
<li class="page-item"><a class="page-link" href="/apps/3/${template_param}">3</a></li>
<li class="page-item"><a class="page-link" href="/apps/4/${template_param}">4</a></li>
<li class="page-item"><a class="page-link" href="/apps/5/${template_param}">5</a></li>`
let prev = '/apps/' + (page - 1) + '/' + template_param;
let next = '/apps/' + (page + 1) + '/' + template_param;
if (page == 1) { prev = '/apps/' + (page) + '/' + template_param; }
@ -76,6 +83,7 @@ export const Apps = async (req, res) => {
for (let i = list_start; i < list_end && i < templates.length; i++) {
let appCard = readFileSync('./views/partials/appCard.html', 'utf8');
let name = templates[i].name || templates[i].title.toLowerCase();
let title = templates[i].title || templates[i].name;
let desc = templates[i].description.slice(0, 60) + "...";
let description = templates[i].description.replaceAll(". ", ".\n") || "no description available";
let note = templates[i].note ? templates[i].note.replaceAll(". ", ".\n") : "no notes available";
@ -91,6 +99,7 @@ export const Apps = async (req, res) => {
categories += CatagoryColor(templates[i].categories[j]);
}
appCard = appCard.replace(/AppName/g, name);
appCard = appCard.replace(/AppTitle/g, title);
appCard = appCard.replace(/AppShortName/g, name);
appCard = appCard.replace(/AppDesc/g, desc);
appCard = appCard.replace(/AppLogo/g, logo);
@ -117,6 +126,7 @@ export const Apps = async (req, res) => {
alert: alert,
template_list: '',
json_templates: json_templates,
pages: pages,
});
alert = '';
}
@ -459,8 +469,12 @@ export const InstallModal = async (req, res) => {
export const LearnMore = async (req, res) => {
let name = req.header('hx-trigger-name');
let id = req.header('hx-trigger');
let result = templates_global.find(t => t.name == name);
let modal = readFileSync('./views/modals/learnmore.html', 'utf8');
modal = modal.replace(/AppName/g, result.title);
modal = modal.replace(/AppDesc/g, result.description);
res.send(modal);
}

49
views/apps.html
View file

@ -140,11 +140,9 @@
prev
</a>
</li>
<li class="page-item"><a class="page-link" href="/apps/1">1</a></li>
<li class="page-item"><a class="page-link" href="/apps/2">2</a></li>
<li class="page-item"><a class="page-link" href="/apps/3">3</a></li>
<li class="page-item"><a class="page-link" href="/apps/4">4</a></li>
<li class="page-item"><a class="page-link" href="/apps/5">5</a></li>
<%- pages %>
<li class="page-item">
<a class="page-link" href="<%- next %>">
next <!-- Download SVG icon from http://tabler-icons.io/i/chevron-right -->
@ -160,48 +158,9 @@
</div>
</div>
<!-- Libs JS -->
<!-- Tabler Core -->
<script src="/js/tabler.min.js" defer></script>
<script src="/js/demo.min.js" defer></script>
<!-- <script>
async function sendData(form) {
const formData = new FormData(form);
const jsonData = {};
for (let [key, value] of formData.entries()) {
jsonData[key] = value;
}
try {
const response = await fetch("/install", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(jsonData),
});
console.log(await response.json());
} catch (e) {
console.error(e);
}
}
document.addEventListener("submit", (event) => {
event.preventDefault();
const buttonId = event.target.id;
console.log(buttonId);
const form = document.querySelector(`#${buttonId}`);
if (form) {
sendData(form);
} else {
console.error(`Form not found for button with ID: ${buttonId}`);
}
});
</script> -->
</body>
</html>

4
views/modals/learnmore.html
View file

@ -2,8 +2,8 @@
<div class="modal-dialog modal-sm modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="modal-title">${data.title}</div>
<div>${description}</div>
<div class="modal-title">AppName</div>
<div>AppDesc</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-link link-secondary me-auto" data-bs-dismiss="modal">Cancel</button>

2
views/partials/appCard.html
View file

@ -9,7 +9,7 @@
</div>
</div>
<div class="d-flex">
<a href="#" class="card-btn" data-hx-get="/learn_more" data-hx-target="#modals-here" hx-swap="innerHTML" data-hx-trigger="click" data-bs-toggle="modal" data-bs-target="#modals-here">
<a href="#" class="card-btn" name="AppName" id="AppType" data-hx-get="/learn_more" data-hx-target="#modals-here" hx-swap="innerHTML" data-hx-trigger="click" data-bs-toggle="modal" data-bs-target="#modals-here">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-article" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path d="M3 4m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z"></path> <path d="M7 8h10"></path> <path d="M7 12h10"></path> <path d="M7 16h10"></path></svg>
  Learn More
</a>