dave/rfd-fyi
1
0
Fork 0
mirror of https://github.com/davegallant/rfd-fyi.git synced 2025-08-10 01:52:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add loader

Browse Source
This commit is contained in:
Dave Gallant
2022-08-08 02:15:13 +00:00
parent 3173b47951
commit 4ed267df0b
7 changed files with 20392 additions and 871 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
src/App.vue
View File

@@ -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>