mirror of
https://github.com/davegallant/rfd-fyi.git
synced 2025-08-05 23:03:39 +00:00
Add loader
This commit is contained in:
Dave Gallant
19390
package-lock.json
generated
Normal file
19390
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
@@ -13,7 +13,9 @@
|
||||
"bootstrap": "^5.2.0",
|
||||
"core-js": "^3.8.3",
|
||||
"jquery": "^3.6.0",
|
||||
"vue": "^3.2.13"
|
||||
"moment": "^2.29.4",
|
||||
"vue": "^3.2.13",
|
||||
"vue-loading-overlay": "^5.0.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.12.16",
|
||||
|
||||
91
src/App.vue
91
src/App.vue
@@ -1,47 +1,75 @@
|
||||
<template>
|
||||
|
||||
<body>
|
||||
<table class="table table-striped table-dark">
|
||||
<thead>
|
||||
<tr>
|
||||
<td scope="col">Deal</td>
|
||||
<td scope="col">Views</td>
|
||||
<td scope="col">Last Post</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr scope="row" v-for="topic in topics" :key="topic.topic_id">
|
||||
<td scope="col">{{ topic.title }}</td>
|
||||
<td scope="col">{{ topic.total_views }}</td>
|
||||
<td scope="col">{{ topic.last_post_time }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
|
||||
<body>
|
||||
<table class="table table-dark table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Deal</th>
|
||||
<th scope="col">Views</th>
|
||||
<th scope="col">Last Post</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<loading
|
||||
v-model:active="isLoading"
|
||||
color="#ccc"
|
||||
opacity="0"
|
||||
loader="bars"
|
||||
:is-full-page="false"
|
||||
>
|
||||
</loading>
|
||||
<tr scope="row" v-for="topic in topics" :key="topic.topic_id">
|
||||
<td scope="col">
|
||||
<a
|
||||
:href="'https://forums.redflagdeals.com' + topic.web_path"
|
||||
target="_blank"
|
||||
>{{ topic.title }}</a
|
||||
>
|
||||
</td>
|
||||
<td scope="col">{{ topic.total_views }}</td>
|
||||
<td scope="col">{{ formatDate(topic.last_post_time) }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</body>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
import axios from "axios";
|
||||
import moment from "moment";
|
||||
import Loading from "vue-loading-overlay";
|
||||
import "vue-loading-overlay/dist/vue-loading.css";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
topics: []
|
||||
}
|
||||
topics: [],
|
||||
isLoading: false,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.isLoading = true;
|
||||
axios
|
||||
.get('http://localhost:8081/api/v1/topics')
|
||||
.get("http://localhost:8081/api/v1/topics")
|
||||
.then((response) => {
|
||||
this.topics = response.data
|
||||
}).catch(err => {
|
||||
console.log(err.response);
|
||||
this.topics = response.data;
|
||||
this.isLoading = false;
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
.catch((err) => {
|
||||
console.log(err.response);
|
||||
});
|
||||
},
|
||||
props: ["date"],
|
||||
computed: {
|
||||
formatDate() {
|
||||
return (v) => {
|
||||
return moment(String(v)).format("hh:mm A z (MM/DD)");
|
||||
};
|
||||
},
|
||||
},
|
||||
components: {
|
||||
Loading,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@@ -51,6 +79,5 @@ export default {
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
color: #2c3e50;
|
||||
margin-top: 60px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,10 @@
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import { createApp } from "vue";
|
||||
import App from "./App.vue";
|
||||
|
||||
import "bootstrap/dist/css/bootstrap.min.css";
|
||||
import "bootstrap/dist/js/bootstrap.min.js";
|
||||
|
||||
createApp(App).mount('#app')
|
||||
import "./style.css";
|
||||
import "./xess.css";
|
||||
|
||||
createApp(App).mount("#app");
|
||||
|
||||
3
src/style.css
Normal file
3
src/style.css
Normal file
@@ -0,0 +1,3 @@
|
||||
body {
|
||||
background-color: black;
|
||||
}
|
||||
86
src/xess.css
Normal file
86
src/xess.css
Normal file
@@ -0,0 +1,86 @@
|
||||
main {
|
||||
font-family: monospace, monospace;
|
||||
max-width: 38rem;
|
||||
padding: 2rem;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
@media only screen and (max-device-width: 736px) {
|
||||
main {
|
||||
padding: 0rem;
|
||||
}
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: #d3869b;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #282828;
|
||||
color: #ebdbb2;
|
||||
}
|
||||
|
||||
pre {
|
||||
background-color: #3c3836;
|
||||
padding: 1em;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
a,
|
||||
a:active,
|
||||
a:visited {
|
||||
color: #b16286;
|
||||
background-color: #1d2021;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5 {
|
||||
margin-bottom: 0.1rem;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 1px solid #bdae93;
|
||||
margin: 0.5em 10px;
|
||||
padding: 0.5em 10px;
|
||||
}
|
||||
|
||||
footer {
|
||||
align: center;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
body {
|
||||
background: #fbf1c7;
|
||||
color: #3c3836;
|
||||
}
|
||||
|
||||
pre {
|
||||
background-color: #ebdbb2;
|
||||
padding: 1em;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
a,
|
||||
a:active,
|
||||
a:visited {
|
||||
color: #b16286;
|
||||
background-color: #f9f5d7;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5 {
|
||||
margin-bottom: 0.1rem;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 1px solid #655c54;
|
||||
margin: 0.5em 10px;
|
||||
padding: 0.5em 10px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user