gaiety/basking-dashboard
gaiety/basking-dashboard
1
0
Fork 0
Code Activity

Time header, branding in footer, auto-refreshing

Browse source
This commit is contained in:
Ava Gaiety Wroten 2019-12-25 22:36:18 -06:00
parent 02d6cda706
commit d265303a94
9 changed files with 69 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.gitignore vendored
View file

@ -1,6 +1,8 @@
public public
data/raw/real data/raw/real
data/json data/json
.DS_Store
src/DS_Store
# Logs # Logs
logs logs
*.log *.log

1
copyAssets.sh
View file

@ -4,3 +4,4 @@ cp -R src/assets public
cp node_modules/vital-css/dist/css/vital.min.css public/assets cp node_modules/vital-css/dist/css/vital.min.css public/assets
cp node_modules/vue/dist/vue.min.js public/assets cp node_modules/vue/dist/vue.min.js public/assets
cp node_modules/axios/dist/axios.min.js public/assets cp node_modules/axios/dist/axios.min.js public/assets
cp node_modules/moment/min/moment.min.js public/assets

3
package.json
View file

@ -29,5 +29,6 @@
"moment": "^2.24.0", "moment": "^2.24.0",
"vital-css": "^2.2.1", "vital-css": "^2.2.1",
"vue": "^2.6.10" "vue": "^2.6.10"
} },
"dependencies": {}
} }

BIN
src/.DS_Store vendored
View file

Binary file not shown.

BIN
src/assets/.DS_Store vendored
View file

Binary file not shown.

38
src/assets/app.js
View file

@ -15,24 +15,38 @@ new Vue({
fetchingUptime: true, fetchingUptime: true,
uptime: '', uptime: '',
time: '',
date: '',
}, },
created() { created() {
this.fetchLastBuildDate(); this.fetchStats(true);
this.fetchDiskSpace(); this.updateTimeAndDate();
this.fetchCPUUsage(); setInterval(this.updateTimeAndDate, 1000); // 1 Second
this.fetchUptime(); setInterval(this.fetchStats, 600000); // 10 Minutes
}, },
methods: { methods: {
async fetchLastBuildDate() { fetchStats(showAsFetching = false) {
this.fetchingLastBuildDate = true; this.fetchLastBuildDate(showAsFetching);
this.fetchDiskSpace(showAsFetching);
this.fetchCPUUsage(showAsFetching);
this.fetchUptime(showAsFetching);
},
updateTimeAndDate() {
let currentTime = moment();
this.time = currentTime.format('h:mm');
this.date = currentTime.format('dddd, MMMM Do');
},
async fetchLastBuildDate(showAsFetching) {
this.fetchingLastBuildDate = showAsFetching;
try { try {
let { data } = await axios.get('/api/builddate'); let { data } = await axios.get('/api/builddate');
this.lastBuildDate = data.pretty; this.lastBuildDate = data.pretty;
this.fetchingLastBuildDate = false; this.fetchingLastBuildDate = false;
} catch (err) { throw new Error(err); } } catch (err) { throw new Error(err); }
}, },
async fetchDiskSpace() { async fetchDiskSpace(showAsFetching) {
this.fetchingDiskSpace = true; this.fetchingDiskSpace = showAsFetching;
try { try {
let { data } = await axios.get('/api/diskspace'); let { data } = await axios.get('/api/diskspace');
this.diskSize = data.size; this.diskSize = data.size;
@ -41,8 +55,8 @@ new Vue({
this.fetchingDiskSpace = false; this.fetchingDiskSpace = false;
} catch (err) { throw new Error(err); } } catch (err) { throw new Error(err); }
}, },
async fetchCPUUsage() { async fetchCPUUsage(showAsFetching) {
this.fetchingCPUUsage = true; this.fetchingCPUUsage = showAsFetching;
try { try {
let { data } = await axios.get('/api/cpuusage'); let { data } = await axios.get('/api/cpuusage');
this.cpuUsageNum = data.num; this.cpuUsageNum = data.num;
@ -50,8 +64,8 @@ new Vue({
this.fetchingCPUUsage = false; this.fetchingCPUUsage = false;
} catch (err) { throw new Error(err); } } catch (err) { throw new Error(err); }
}, },
async fetchUptime() { async fetchUptime(showAsFetching) {
this.fetchingUptime = true; this.fetchingUptime = showAsFetching;
try { try {
let { data } = await axios.get('/api/uptime'); let { data } = await axios.get('/api/uptime');
this.uptime = data.uptime; this.uptime = data.uptime;

BIN
src/assets/header.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 28 KiB

39
src/assets/styles.css
View file

@ -5,30 +5,49 @@ body {
header { header {
position: relative; position: relative;
color: white; color: white;
height: 3rem; height: 15rem;
text-align: center;
padding-top: 3rem;
background: url('./header.jpg');
background-size: cover;
background-position: bottom;
}
header:after {
content: '';
background: linear-gradient(180deg, rgba(2,0,36,0) 0%, rgba(40,42,54,1) 100%);
height: 4rem;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
footer {
text-align: center;
color: #f1fa8c;
}
.branding {
line-height: 2.5rem;
display: inline-block;
margin-right: 2rem;
} }
.logo { .logo {
height: 2rem; height: 2rem;
vertical-align: bottom;
margin: .5rem; margin: .5rem;
} }
.name { .name {
position: absolute;
top: 0;
left: 3rem;
line-height: 3rem;
color: #6272a4; color: #6272a4;
margin: 0;
}
footer {
color: #f1fa8c;
} }
.feed-card { .feed-card {
background: #44475a; background: #44475a;
color: #f8f8f2; color: #f8f8f2;
border-radius: .5rem;
} }
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {

12
src/index.html
View file

@ -18,11 +18,12 @@
<body> <body>
<script src="./assets/axios.min.js"></script> <script src="./assets/axios.min.js"></script>
<script src="./assets/vue.min.js"></script> <script src="./assets/vue.min.js"></script>
<script src="./assets/moment.min.js"></script>
<div id="app"> <div id="app">
<header class="nav"> <header class="time fadein">
<img src="./assets/logo.svg" alt="" class="logo" /> <h1>{{time}}</h1>
<h1 class="name">Basking</h1> <h2>{{date}}</h2>
</header> </header>
<main> <main>
<div class="autogrid"> <div class="autogrid">
@ -67,6 +68,11 @@
<footer class="row"> <footer class="row">
<section class="section"> <section class="section">
<span class="branding">
<img src="./assets/logo.svg" alt="" class="logo" />
<span class="name">Basking</span>
</span>
<small class="small"> <small class="small">
Dashboard Built: Dashboard Built:
<span v-if="fetchingLastBuildDate" class="load smallest"></span> <span v-if="fetchingLastBuildDate" class="load smallest"></span>