scout_ante/dashboard-v2
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/includes/head.tmpl",
"./public/templates/includes/sidebar.tmpl",
"./public/templates/includes/loadingscreen.tmpl",
fmt.Sprintf("./public/templates/views/%s.tmpl", name),
)
return renderer
@ -167,6 +168,7 @@ func addManageTemplate(renderer multitemplate.Renderer, name string) multitempla
"./public/templates/includes/sidebar.tmpl",
"./public/templates/includes/navbar.tmpl",
"./public/templates/includes/substitutionmodal.tmpl",
"./public/templates/includes/loadingscreen.tmpl",
fmt.Sprintf("./public/templates/views/%s.tmpl", name),
)
return renderer

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

@ -134,3 +134,26 @@ body {
.modal-footer, .modal-header {
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();
</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 -->
<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">

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">
{{template "sidebar" .}}
<div class="main-panel">
{{template "loadingscreen" .}}
{{template "content" .}}
</div>
</div>

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -39,7 +39,8 @@
<div class="form-group">
<label>Ping @everyone on ticket open</label>
<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>
@ -147,7 +148,8 @@
<div class="form-group">
<label>Support Reps Can View Claimed Tickets</label>
<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>
@ -155,7 +157,8 @@
<div class="form-group">
<label>Support Reps Can Type In Claimed Tickets</label>
<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>
@ -195,7 +198,8 @@
<div class="form-group">
<label>Enabled</label>
<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>
@ -203,7 +207,8 @@
<div class="form-group">
<label>Close on user leave</label>
<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>
@ -343,8 +348,6 @@
await fillArchiveChannels(channels, settings.archive_channel);
await fillCategories(channels, settings.category);
}
loadData();
</script>
<script>
@ -359,8 +362,6 @@
document.getElementById('can_type').checked = settings.support_can_type;
}
loadClaimSettings();
async function updateClaimSettings() {
const data = {
support_can_view: document.getElementById('can_view').checked,
@ -441,8 +442,6 @@
showToast('Success', 'Auto close settings updated');
}
loadAutoCloseSettings();
</script>
<script>
@ -508,5 +507,13 @@
return success;
}
</script>
<script>
withLoadingScreen(() => {
loadData();
loadClaimSettings();
loadAutoCloseSettings();
});
</script>
</div>
{{end}}

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

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

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

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

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

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

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

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