dave/rfd-fyi
1
0
Fork 0
mirror of https://github.com/davegallant/rfd-fyi.git synced 2025-08-06 07:13:39 +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

19390
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

4
package.json
View File

@@ -13,7 +13,9 @@
"bootstrap": "^5.2.0", "bootstrap": "^5.2.0",
"core-js": "^3.8.3", "core-js": "^3.8.3",
"jquery": "^3.6.0", "jquery": "^3.6.0",
"vue": "^3.2.13" "moment": "^2.29.4",
"vue": "^3.2.13",
"vue-loading-overlay": "^5.0.3"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.12.16", "@babel/core": "^7.12.16",

91
src/App.vue
View File

@@ -1,47 +1,75 @@
<template> <template>
<body>
<body> <table class="table table-dark table-hover">
<table class="table table-striped table-dark"> <thead>
<thead> <tr>
<tr> <th scope="col">Deal</th>
<td scope="col">Deal</td> <th scope="col">Views</th>
<td scope="col">Views</td> <th scope="col">Last Post</th>
<td scope="col">Last Post</td> </tr>
</tr> </thead>
</thead> <tbody>
<tbody> <loading
<tr scope="row" v-for="topic in topics" :key="topic.topic_id"> v-model:active="isLoading"
<td scope="col">{{ topic.title }}</td> color="#ccc"
<td scope="col">{{ topic.total_views }}</td> opacity="0"
<td scope="col">{{ topic.last_post_time }}</td> loader="bars"
</tr> :is-full-page="false"
</tbody> >
</table> </loading>
<tr scope="row" v-for="topic in topics" :key="topic.topic_id">
</body> <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> </template>
<script> <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 { export default {
data() { data() {
return { return {
topics: [] topics: [],
} isLoading: false,
};
}, },
mounted() { mounted() {
this.isLoading = true;
axios axios
.get('http://localhost:8081/api/v1/topics') .get("http://localhost:8081/api/v1/topics")
.then((response) => { .then((response) => {
this.topics = response.data this.topics = response.data;
}).catch(err => { this.isLoading = false;
console.log(err.response);
}) })
} .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> </script>
<style> <style>
@@ -51,6 +79,5 @@ export default {
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
text-align: center; text-align: center;
color: #2c3e50; color: #2c3e50;
margin-top: 60px;
} }
</style> </style>

9
src/main.js
View File

@@ -1,7 +1,10 @@
import { createApp } from 'vue' import { createApp } from "vue";
import App from './App.vue' import App from "./App.vue";
import "bootstrap/dist/css/bootstrap.min.css"; import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.min.js"; 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
View File

@@ -0,0 +1,3 @@
body {
background-color: black;
}

86
src/xess.css Normal file
View 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;
}
}

1680
yarn.lock
View File

File diff suppressed because it is too large Load Diff