Time header, branding in footer, auto-refreshing
This commit is contained in:
Ava Gaiety Wroten
parent
02d6cda706
commit
d265303a94
9 changed files with 69 additions and 26 deletions
2
.gitignore
vendored
2
.gitignore
vendored
|
|
@ -1,6 +1,8 @@
|
|||
public
|
||||
data/raw/real
|
||||
data/json
|
||||
.DS_Store
|
||||
src/DS_Store
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
|
|
|
|||
|
|
@ -4,3 +4,4 @@ cp -R src/assets public
|
|||
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/axios/dist/axios.min.js public/assets
|
||||
cp node_modules/moment/min/moment.min.js public/assets
|
||||
|
|
|
|||
|
|
@ -29,5 +29,6 @@
|
|||
"moment": "^2.24.0",
|
||||
"vital-css": "^2.2.1",
|
||||
"vue": "^2.6.10"
|
||||
}
|
||||
},
|
||||
"dependencies": {}
|
||||
}
|
||||
|
|
|
|||
BIN
src/.DS_Store
vendored
BIN
src/.DS_Store
vendored
Binary file not shown.
BIN
src/assets/.DS_Store
vendored
BIN
src/assets/.DS_Store
vendored
Binary file not shown.
|
|
@ -15,24 +15,38 @@ new Vue({
|
|||
|
||||
fetchingUptime: true,
|
||||
uptime: '',
|
||||
|
||||
time: '',
|
||||
date: '',
|
||||
},
|
||||
created() {
|
||||
this.fetchLastBuildDate();
|
||||
this.fetchDiskSpace();
|
||||
this.fetchCPUUsage();
|
||||
this.fetchUptime();
|
||||
this.fetchStats(true);
|
||||
this.updateTimeAndDate();
|
||||
setInterval(this.updateTimeAndDate, 1000); // 1 Second
|
||||
setInterval(this.fetchStats, 600000); // 10 Minutes
|
||||
},
|
||||
methods: {
|
||||
async fetchLastBuildDate() {
|
||||
this.fetchingLastBuildDate = true;
|
||||
fetchStats(showAsFetching = false) {
|
||||
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 {
|
||||
let { data } = await axios.get('/api/builddate');
|
||||
this.lastBuildDate = data.pretty;
|
||||
this.fetchingLastBuildDate = false;
|
||||
} catch (err) { throw new Error(err); }
|
||||
},
|
||||
async fetchDiskSpace() {
|
||||
this.fetchingDiskSpace = true;
|
||||
async fetchDiskSpace(showAsFetching) {
|
||||
this.fetchingDiskSpace = showAsFetching;
|
||||
try {
|
||||
let { data } = await axios.get('/api/diskspace');
|
||||
this.diskSize = data.size;
|
||||
|
|
@ -41,8 +55,8 @@ new Vue({
|
|||
this.fetchingDiskSpace = false;
|
||||
} catch (err) { throw new Error(err); }
|
||||
},
|
||||
async fetchCPUUsage() {
|
||||
this.fetchingCPUUsage = true;
|
||||
async fetchCPUUsage(showAsFetching) {
|
||||
this.fetchingCPUUsage = showAsFetching;
|
||||
try {
|
||||
let { data } = await axios.get('/api/cpuusage');
|
||||
this.cpuUsageNum = data.num;
|
||||
|
|
@ -50,8 +64,8 @@ new Vue({
|
|||
this.fetchingCPUUsage = false;
|
||||
} catch (err) { throw new Error(err); }
|
||||
},
|
||||
async fetchUptime() {
|
||||
this.fetchingUptime = true;
|
||||
async fetchUptime(showAsFetching) {
|
||||
this.fetchingUptime = showAsFetching;
|
||||
try {
|
||||
let { data } = await axios.get('/api/uptime');
|
||||
this.uptime = data.uptime;
|
||||
|
|
|
|||
BIN
src/assets/header.jpg
Normal file
BIN
src/assets/header.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
|
|
@ -5,30 +5,49 @@ body {
|
|||
header {
|
||||
position: relative;
|
||||
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 {
|
||||
height: 2rem;
|
||||
vertical-align: bottom;
|
||||
margin: .5rem;
|
||||
}
|
||||
|
||||
.name {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 3rem;
|
||||
line-height: 3rem;
|
||||
color: #6272a4;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
footer {
|
||||
color: #f1fa8c;
|
||||
}
|
||||
|
||||
.feed-card {
|
||||
background: #44475a;
|
||||
color: #f8f8f2;
|
||||
border-radius: .5rem;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
|
|
|
|||
|
|
@ -18,11 +18,12 @@
|
|||
<body>
|
||||
<script src="./assets/axios.min.js"></script>
|
||||
<script src="./assets/vue.min.js"></script>
|
||||
<script src="./assets/moment.min.js"></script>
|
||||
|
||||
<div id="app">
|
||||
<header class="nav">
|
||||
<img src="./assets/logo.svg" alt="" class="logo" />
|
||||
<h1 class="name">Basking</h1>
|
||||
<header class="time fadein">
|
||||
<h1>{{time}}</h1>
|
||||
<h2>{{date}}</h2>
|
||||
</header>
|
||||
<main>
|
||||
<div class="autogrid">
|
||||
|
|
@ -67,6 +68,11 @@
|
|||
|
||||
<footer class="row">
|
||||
<section class="section">
|
||||
<span class="branding">
|
||||
<img src="./assets/logo.svg" alt="" class="logo" />
|
||||
<span class="name">Basking</span>
|
||||
</span>
|
||||
|
||||
<small class="small">
|
||||
Dashboard Built:
|
||||
<span v-if="fetchingLastBuildDate" class="load smallest"></span>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue