scout_ante/dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

loading screen2

Browse Source
This commit is contained in:
rxdn 2020-06-18 15:11:51 +01:00
parent 0a274ac0c4
commit 7cf76c1591
16 changed files with 136 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/http/server.go
View File

@ -155,6 +155,7 @@ func addMainTemplate(renderer multitemplate.Renderer, name string) multitemplate
"./public/templates/layouts/main.tmpl", "./public/templates/layouts/main.tmpl",
"./public/templates/includes/head.tmpl", "./public/templates/includes/head.tmpl",
"./public/templates/includes/sidebar.tmpl", "./public/templates/includes/sidebar.tmpl",
"./public/templates/includes/loadingscreen.tmpl",
fmt.Sprintf("./public/templates/views/%s.tmpl", name), fmt.Sprintf("./public/templates/views/%s.tmpl", name),
) )
return renderer return renderer
@ -167,6 +168,7 @@ func addManageTemplate(renderer multitemplate.Renderer, name string) multitempla
"./public/templates/includes/sidebar.tmpl", "./public/templates/includes/sidebar.tmpl",
"./public/templates/includes/navbar.tmpl", "./public/templates/includes/navbar.tmpl",
"./public/templates/includes/substitutionmodal.tmpl", "./public/templates/includes/substitutionmodal.tmpl",
"./public/templates/includes/loadingscreen.tmpl",
fmt.Sprintf("./public/templates/views/%s.tmpl", name), fmt.Sprintf("./public/templates/views/%s.tmpl", name),
) )
return renderer return renderer

23
public/static/css/style.css
View File

@ -134,3 +134,26 @@ body {
.modal-footer, .modal-header { .modal-footer, .modal-header {
border-color: #2e3136 !important; border-color: #2e3136 !important;
} }
.vertical-center {
margin: 0;
position: absolute;
top: 50%;
}
.fade-in {
opacity: 1;
animation-name: fadeInOpacity;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 0.5s;
}
@keyframes fadeInOpacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

27
public/templates/includes/head.tmpl
View File

@ -63,6 +63,33 @@
setDefaultHeader(); setDefaultHeader();
</script> </script>
<script>
function showLoadingScreen() {
const content = document.getElementsByClassName('content')[0];
content.style.display = 'none';
document.getElementById('loading-container').style.display = 'block';
}
function hideLoadingScreen() {
document.getElementById('loading-container').style.display = 'none';
const content = document.getElementsByClassName('content')[0];
content.style.display = 'block';
content.classList.add('fade-in');
}
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function withLoadingScreen(func) {
showLoadingScreen();
await func();
await sleep(200);
hideLoadingScreen();
}
</script>
<!-- Bootstrap --> <!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

9
public/templates/includes/loadingscreen.tmpl Normal file
View File

@ -0,0 +1,9 @@
{{define "loadingscreen"}}
<div id="loading-container" class="container-fluid" style="display: none;">
<div class="d-flex justify-content-center">
<div class="spinner-border text-primary vertical-center" role="status" style="width: 5rem; height: 5rem;">
<span class="sr-only" style="color: white !important;">Loading...</span>
</div>
</div>
</div>
{{end}}

1
public/templates/layouts/main.tmpl
View File

@ -7,6 +7,7 @@
<div class="wrapper"> <div class="wrapper">
{{template "sidebar" .}} {{template "sidebar" .}}
<div class="main-panel"> <div class="main-panel">
{{template "loadingscreen" .}}
{{template "content" .}} {{template "content" .}}
</div> </div>
</div> </div>

1
public/templates/layouts/manage.tmpl
View File

@ -8,6 +8,7 @@
{{template "substitutions" .}} <!-- Has to be here for some reason --> {{template "substitutions" .}} <!-- Has to be here for some reason -->
<div class="main-panel" style="width: 100% !important;"> <div class="main-panel" style="width: 100% !important;">
{{template "navbar" .}} {{template "navbar" .}}
{{template "loadingscreen" .}}
{{template "content" .}} {{template "content" .}}
</div> </div>
</div> </div>

2
public/templates/views/blacklist.tmpl
View File

@ -135,7 +135,7 @@
}); });
} }
loadData(); withLoadingScreen(loadData);
</script> </script>
</div> </div>
{{end}} {{end}}

2
public/templates/views/index.tmpl
View File

@ -56,6 +56,6 @@
} }
} }
loadData(); withLoadingScreen(loadData);
</script> </script>
{{end}} {{end}}

2
public/templates/views/logs.tmpl
View File

@ -139,7 +139,7 @@
document.getElementById('page-number').innerText = currentPage; document.getElementById('page-number').innerText = currentPage;
} }
loadData(); withLoadingScreen(loadData);
</script> </script>
<script> <script>

2
public/templates/views/modmaillogs.tmpl
View File

@ -138,7 +138,7 @@
return true; return true;
} }
loadData(); withLoadingScreen(loadData);
</script> </script>
<script> <script>

2
public/templates/views/panels.tmpl
View File

@ -265,7 +265,7 @@
await fillCategories(channels); await fillCategories(channels);
} }
loadData(); withLoadingScreen(loadData);
</script> </script>
</div> </div>

113
public/templates/views/settings.tmpl
View File

@ -39,7 +39,8 @@
<div class="form-group"> <div class="form-group">
<label>Ping @everyone on ticket open</label> <label>Ping @everyone on ticket open</label>
<div class="form-check"> <div class="form-check">
<input class="form-check-input" type="checkbox" name="pingeveryone" value="on" id="ping_everyone" style="width:30px;height:30px;"> <input class="form-check-input" type="checkbox" name="pingeveryone" value="on"
id="ping_everyone" style="width:30px;height:30px;">
</div> </div>
</div> </div>
</div> </div>
@ -147,7 +148,8 @@
<div class="form-group"> <div class="form-group">
<label>Support Reps Can View Claimed Tickets</label> <label>Support Reps Can View Claimed Tickets</label>
<div class="form-check"> <div class="form-check">
<input class="form-check-input" type="checkbox" name="can_view" value="on" id="can_view" style="width:30px;height:30px;" onclick="canViewChanged();"> <input class="form-check-input" type="checkbox" name="can_view" value="on" id="can_view"
style="width:30px;height:30px;" onclick="canViewChanged();">
</div> </div>
</div> </div>
</div> </div>
@ -155,7 +157,8 @@
<div class="form-group"> <div class="form-group">
<label>Support Reps Can Type In Claimed Tickets</label> <label>Support Reps Can Type In Claimed Tickets</label>
<div class="form-check"> <div class="form-check">
<input class="form-check-input" type="checkbox" name="can_type" value="on" id="can_type" style="width:30px;height:30px;"> <input class="form-check-input" type="checkbox" name="can_type" value="on" id="can_type"
style="width:30px;height:30px;">
</div> </div>
</div> </div>
</div> </div>
@ -195,7 +198,8 @@
<div class="form-group"> <div class="form-group">
<label>Enabled</label> <label>Enabled</label>
<div class="form-check"> <div class="form-check">
<input class="form-check-input" type="checkbox" name="enabled" value="on" id="autoclose_enabled" style="width:30px;height:30px;"> <input class="form-check-input" type="checkbox" name="enabled" value="on" id="autoclose_enabled"
style="width:30px;height:30px;">
</div> </div>
</div> </div>
</div> </div>
@ -203,7 +207,8 @@
<div class="form-group"> <div class="form-group">
<label>Close on user leave</label> <label>Close on user leave</label>
<div class="form-check"> <div class="form-check">
<input class="form-check-input" type="checkbox" name="enabled" value="on" id="autoclose_on_user_leave" style="width:30px;height:30px;"> <input class="form-check-input" type="checkbox" name="enabled" value="on"
id="autoclose_on_user_leave" style="width:30px;height:30px;">
</div> </div>
</div> </div>
</div> </div>
@ -343,8 +348,6 @@
await fillArchiveChannels(channels, settings.archive_channel); await fillArchiveChannels(channels, settings.archive_channel);
await fillCategories(channels, settings.category); await fillCategories(channels, settings.category);
} }
loadData();
</script> </script>
<script> <script>
@ -359,8 +362,6 @@
document.getElementById('can_type').checked = settings.support_can_type; document.getElementById('can_type').checked = settings.support_can_type;
} }
loadClaimSettings();
async function updateClaimSettings() { async function updateClaimSettings() {
const data = { const data = {
support_can_view: document.getElementById('can_view').checked, support_can_view: document.getElementById('can_view').checked,
@ -387,62 +388,60 @@
</script> </script>
<script> <script>
const minuteNanos = 60 * 1000 * 1000 * 1000; const minuteNanos = 60 * 1000 * 1000 * 1000;
const hourNanos = 60 * minuteNanos; const hourNanos = 60 * minuteNanos;
const dayNanos = 24 * hourNanos; const dayNanos = 24 * hourNanos;
function fromNanoSeconds(nanoseconds) { function fromNanoSeconds(nanoseconds) {
const days = Math.floor(nanoseconds / dayNanos); const days = Math.floor(nanoseconds / dayNanos);
nanoseconds -= (days * dayNanos); nanoseconds -= (days * dayNanos);
const hours = Math.floor(nanoseconds / hourNanos); const hours = Math.floor(nanoseconds / hourNanos);
nanoseconds -= (hours * hourNanos); nanoseconds -= (hours * hourNanos);
const minutes = Math.floor(nanoseconds / minuteNanos); const minutes = Math.floor(nanoseconds / minuteNanos);
return [days, hours, minutes]; return [days, hours, minutes];
} }
async function loadAutoCloseSettings() { async function loadAutoCloseSettings() {
const res = await axios.get('/api/{{.guildId}}/autoclose'); const res = await axios.get('/api/{{.guildId}}/autoclose');
const settings = res.data; const settings = res.data;
document.getElementById('autoclose_enabled').checked = settings.enabled; document.getElementById('autoclose_enabled').checked = settings.enabled;
document.getElementById('autoclose_on_user_leave').checked = settings.on_user_leave; document.getElementById('autoclose_on_user_leave').checked = settings.on_user_leave;
const sinceOpen = fromNanoSeconds(settings.since_open_with_no_response); const sinceOpen = fromNanoSeconds(settings.since_open_with_no_response);
document.getElementById('sinceopen_days').value = sinceOpen[0]; document.getElementById('sinceopen_days').value = sinceOpen[0];
document.getElementById('sinceopen_hours').value = sinceOpen[1]; document.getElementById('sinceopen_hours').value = sinceOpen[1];
document.getElementById('sinceopen_minutes').value = sinceOpen[2]; document.getElementById('sinceopen_minutes').value = sinceOpen[2];
const sinceLast = fromNanoSeconds(settings.since_last_message); const sinceLast = fromNanoSeconds(settings.since_last_message);
document.getElementById('sincelast_days').value = sinceLast[0]; document.getElementById('sincelast_days').value = sinceLast[0];
document.getElementById('sincelast_hours').value = sinceLast[1]; document.getElementById('sincelast_hours').value = sinceLast[1];
document.getElementById('sincelast_minutes').value = sinceLast[2]; document.getElementById('sincelast_minutes').value = sinceLast[2];
} }
function toNanoSeconds(days, hours, minutes) { function toNanoSeconds(days, hours, minutes) {
return days * dayNanos + hours * hourNanos + minutes * minuteNanos; return days * dayNanos + hours * hourNanos + minutes * minuteNanos;
} }
async function updateAutoCloseSettings() { async function updateAutoCloseSettings() {
const data = { const data = {
enabled: document.getElementById('autoclose_enabled').checked, enabled: document.getElementById('autoclose_enabled').checked,
on_user_leave: document.getElementById('autoclose_on_user_leave').checked, on_user_leave: document.getElementById('autoclose_on_user_leave').checked,
since_open_with_no_response: toNanoSeconds(document.getElementById('sinceopen_days').value, document.getElementById('sinceopen_hours').value, document.getElementById('sinceopen_minutes').value), since_open_with_no_response: toNanoSeconds(document.getElementById('sinceopen_days').value, document.getElementById('sinceopen_hours').value, document.getElementById('sinceopen_minutes').value),
since_last_message: toNanoSeconds(document.getElementById('sincelast_days').value, document.getElementById('sincelast_hours').value, document.getElementById('sincelast_minutes').value), since_last_message: toNanoSeconds(document.getElementById('sincelast_days').value, document.getElementById('sincelast_hours').value, document.getElementById('sincelast_minutes').value),
}; };
const res = await axios.post('/api/{{.guildId}}/autoclose', data); const res = await axios.post('/api/{{.guildId}}/autoclose', data);
if (res.status !== 200 || !res.data.success) { if (res.status !== 200 || !res.data.success) {
showToast('Error', res.data.error); showToast('Error', res.data.error);
return; return;
} }
showToast('Success', 'Auto close settings updated'); showToast('Success', 'Auto close settings updated');
} }
loadAutoCloseSettings();
</script> </script>
<script> <script>
@ -508,5 +507,13 @@
return success; return success;
} }
</script> </script>
<script>
withLoadingScreen(() => {
loadData();
loadClaimSettings();
loadAutoCloseSettings();
});
</script>
</div> </div>
{{end}} {{end}}

2
public/templates/views/tags.tmpl
View File

@ -118,7 +118,7 @@
} }
} }
loadData(); withLoadingScreen(loadData);
</script> </script>
</div> </div>
{{end}} {{end}}

2
public/templates/views/ticketlist.tmpl
View File

@ -52,7 +52,7 @@
} }
} }
loadData(); withLoadingScreen(loadData);
</script> </script>
</div> </div>
{{end}} {{end}}

2
public/templates/views/ticketview.tmpl
View File

@ -106,7 +106,7 @@
} }
} }
loadData(); withLoadingScreen(loadData);
</script> </script>
<script> <script>

10
public/templates/views/whitelabel.tmpl
View File

@ -214,8 +214,6 @@
document.getElementById('status').value = res.data.status; document.getElementById('status').value = res.data.status;
} }
loadStatus();
async function loadErrors() { async function loadErrors() {
const res = await axios.get('/user/whitelabel/errors'); const res = await axios.get('/user/whitelabel/errors');
if (res.status !== 200 || !res.data.success) { if (res.status !== 200 || !res.data.success) {
@ -235,8 +233,6 @@
} }
} }
loadErrors();
async function loadGuilds() { async function loadGuilds() {
// get selected guild // get selected guild
const settingsRes = await axios.get('/user/whitelabel'); const settingsRes = await axios.get('/user/whitelabel');
@ -271,6 +267,10 @@
} }
} }
loadGuilds(); withLoadingScreen(() => {
loadStatus();
loadErrors();
loadGuilds();
});
</script> </script>
{{end}} {{end}}