Skip to content

Commit d79009e

Browse files
treboryxtreboryx
authored
Merge pull request #201 from fttx-gr/revert-200-revert-199-master
Revert "Revert "feat: cache slow pages that aren't updated frequently anyway""
2 parents 347d282 + 8efbae5 commit d79009e

File tree

7 files changed

+9919
-10711
lines changed

7 files changed

+9919
-10711
lines changed

‎assets/css/main.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;

‎nuxt.config.js‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -108,11 +108,14 @@ export default {
108108
/*
109109
** Global CSS
110110
*/
111-
css: [],
111+
css: [
112+
"@/assets/css/main.css",
113+
],
112114

113115
loading: {
114116
color: "#109E92"
115117
},
118+
116119

117120
/*
118121
** Plugins to load before mounting the App
@@ -133,8 +136,8 @@ export default {
133136
** Nuxt.js dev-modules
134137
*/
135138
buildModules: [
139+
"@nuxt/postcss8",
136140
// Doc: https://github.com/nuxt-community/eslint-module
137-
"@nuxtjs/tailwindcss",
138141
"@nuxtjs/pwa"
139142
],
140143

@@ -193,7 +196,15 @@ export default {
193196
** Build configuration
194197
** See https://nuxtjs.org/api/configuration-build/
195198
*/
196-
build: { transpile: [/^vue2-google-maps($|\/)/] },
199+
build: {
200+
transpile: [/^vue2-google-maps($|\/)/],
201+
postcss: {
202+
plugins: {
203+
tailwindcss: {},
204+
autoprefixer: {}
205+
}
206+
}
207+
},
197208
env: {
198209
VUE_APP_GOOGLE_MAPS_API_KEY:
199210
process.env.NODE_ENV === "development"

‎package.json‎

Lines changed: 31 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -9,34 +9,39 @@
99
"generate": "nuxt generate"
1010
},
1111
"dependencies": {
12-
"@nuxtjs/axios": "^5.13.6",
13-
"@nuxtjs/sitemap": "^2.4.0",
14-
"@supabase/supabase-js": "^1.35.4",
15-
"animated-number-vue": "^1.0.0",
16-
"cookie-parser": "^1.4.6",
17-
"discord.js": "^12.5.3",
18-
"dotenv": "^16.0.1",
19-
"express": "^4.18.1",
20-
"express-rate-limit": "^6.4.0",
21-
"helmet": "^5.1.0",
22-
"hpp": "^0.2.3",
23-
"marker-clusterer-plus": "^2.1.4",
24-
"morgan": "^1.10.0",
25-
"node-geocoder": "^4.1.0",
26-
"nuxt": "^2.15.8",
27-
"shrink-ray-current": "^4.1.3",
28-
"vue-browser-geolocation": "^1.8.0",
29-
"vue-toastification": "^1.7.14",
30-
"vue2-google-maps": "^0.10.7",
31-
"xss-clean": "^0.1.1"
12+
"@nuxtjs/axios": "5.13.6",
13+
"@nuxtjs/sitemap": "2.4.0",
14+
"@supabase/supabase-js": "1.35.4",
15+
"animated-number-vue": "1.0.0",
16+
"cookie-parser": "1.4.6",
17+
"discord.js": "12.5.3",
18+
"dotenv": "16.0.1",
19+
"express": "4.18.1",
20+
"express-rate-limit": "6.4.0",
21+
"helmet": "5.1.0",
22+
"hpp": "0.2.3",
23+
"lru-cache": "7.14.0",
24+
"marker-clusterer-plus": "2.1.4",
25+
"morgan": "1.10.0",
26+
"node-geocoder": "4.1.0",
27+
"nuxt": "2.15.8",
28+
"shrink-ray-current": "4.1.3",
29+
"vue-browser-geolocation": "1.8.0",
30+
"vue-toastification": "1.7.14",
31+
"vue2-google-maps": "0.10.7",
32+
"xss-clean": "0.1.1"
3233
},
3334
"devDependencies": {
34-
"@nuxtjs/dotenv": "^1.4.1",
35-
"@nuxtjs/pwa": "^3.3.5",
36-
"@nuxtjs/tailwindcss": "^5.1.3",
37-
"postcss": "^8.4.14",
38-
"sass": "^1.53.0",
39-
"sass-loader": "^13.0.2"
35+
"@nuxtjs/dotenv": "1.4.1",
36+
"@nuxt/postcss8": "^1.1.3",
37+
"autoprefixer": "^10.4.5",
38+
"@nuxtjs/pwa": "3.3.5",
39+
"prettier": "^2.6.2",
40+
"prettier-plugin-tailwindcss": "^0.1.10",
41+
"tailwindcss": "^3.0.24",
42+
"postcss": "8.4.14",
43+
"sass": "1.53.0",
44+
"sass-loader": "13.0.2"
4045
},
4146
"optionalDependencies": {
4247
"iltorb": "~2.4.5",

‎pages/index.vue‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,38 @@
11
<template>
2+
23
<Map :cabinets="cabinets" :dslam="dslam" />
4+
35
</template>
46

57
<script>
68
import { supabase } from "../utils/supabase-client";
9+
import LRU from "lru-cache";
10+
11+
const options = {
12+
max: 500,
13+
ttl: 1000 * 60 * 60 * 2
14+
};
15+
16+
const cache = new LRU(options);
17+
718
export default {
819
async asyncData() {
9-
// DSLAM LOADING
20+
const check = cache.get("index");
21+
if (check) return check;
1022
const { data: dslam } = await supabase.from("centers").select("*");
1123
12-
// Cabinets
1324
const { data: cabinets } = await supabase
1425
.from("cabinets")
1526
.select("*")
1627
.neq("type", "DSLAM");
1728
29+
cache.set("index", { dslam, cabinets });
30+
1831
return {
1932
dslam,
2033
cabinets
2134
};
2235
}
2336
};
2437
</script>
38+

‎pages/stats.vue‎

Lines changed: 94 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,115 +1,173 @@
11
<template>
2-
<div v-if="data.vf" class="max-w-4xl mx-8 mt-4 md:mx-auto">
3-
<h1 class="my-4 text-4xl font-semibold text-center">
4-
Stats of the FTTx.gr Database
2+
3+
<div v-if="data.vf" class="mx-8 mt-4 max-w-4xl md:mx-auto">
4+
5+
<h1 class="my-4 text-center text-4xl font-semibold">
6+
Stats of the FTTx.gr Database
57
</h1>
6-
<div class="grid max-w-md grid-cols-1 gap-4 mx-auto md:grid-cols-2">
8+
9+
<div class="mx-auto grid max-w-md grid-cols-1 gap-4 md:grid-cols-2">
10+
711
<div
8-
class="flex flex-col items-center justify-center p-2 border border-red-500 rounded-md bg-red-500/25"
12+
class="flex flex-col items-center justify-center rounded-md border border-red-500 bg-red-500/25 p-2"
913
>
10-
<h1 class="py-2 font-bold text-center text-red-500 uppercase">
11-
Vodafone
14+
15+
<h1 class="py-2 text-center font-bold uppercase text-red-500">
16+
Vodafone
1217
</h1>
18+
1319
<img
14-
class="w-6 my-2"
20+
class="my-2 w-6"
1521
src="@/static/img/vf-marker-minified.png"
1622
alt="Vodafone Cabinets"
1723
/>
24+
1825
<span class="font-semibold">{{ data.vf }}</span>
26+
1927
</div>
28+
2029
<div
21-
class="flex flex-col items-center justify-center p-2 border border-blue-500 rounded-md bg-blue-500/25"
30+
class="flex flex-col items-center justify-center rounded-md border border-blue-500 bg-blue-500/25 p-2"
2231
>
23-
<h1 class="py-2 font-bold text-center text-blue-500 uppercase">
24-
COSMOTE
32+
33+
<h1 class="py-2 text-center font-bold uppercase text-blue-500">
34+
COSMOTE
2535
</h1>
36+
2637
<img
27-
class="w-6 my-2"
38+
class="my-2 w-6"
2839
src="@/static/img/ote-marker-minified.png"
2940
alt="COSMOTE Cabinets"
3041
/>
42+
3143
<span class="font-semibold">{{ data.ote }}</span>
44+
3245
</div>
46+
3347
<div
34-
class="flex flex-col items-center justify-center p-2 border border-blue-600 rounded-md bg-blue-600/30"
48+
class="flex flex-col items-center justify-center rounded-md border border-blue-600 bg-blue-600/30 p-2"
3549
>
36-
<h1 class="py-2 font-bold text-center text-blue-600 uppercase">
37-
WIND
50+
51+
<h1 class="py-2 text-center font-bold uppercase text-blue-600">
52+
WIND
3853
</h1>
54+
3955
<img
40-
class="w-6 my-2"
56+
class="my-2 w-6"
4157
src="@/static/img/wind-marker-minified.png"
4258
alt="WIND Cabinets"
4359
/>
60+
4461
<span class="font-semibold">{{ data.wind }}</span>
62+
4563
</div>
64+
4665
<div
47-
class="flex flex-col items-center justify-center p-2 border border-orange-500 rounded-md bg-orange-500/25"
66+
class="flex flex-col items-center justify-center rounded-md border border-orange-500 bg-orange-500/25 p-2"
4867
>
49-
<h1 class="py-2 font-bold text-center text-orange-500 uppercase">
50-
RURAL CONNECT
68+
69+
<h1 class="py-2 text-center font-bold uppercase text-orange-500">
70+
RURAL CONNECT
5171
</h1>
72+
5273
<img
53-
class="w-6 my-2"
74+
class="my-2 w-6"
5475
src="@/static/img/rurcon-marker-minified.png"
5576
alt="Rural Connect Cabinets"
5677
/>
78+
5779
<span class="font-semibold">{{ data.rurcon }}</span>
80+
5881
</div>
82+
5983
<div
60-
class="flex flex-col items-center justify-center p-2 border border-gray-500 rounded-md bg-gray-500/25"
84+
class="flex flex-col items-center justify-center rounded-md border border-gray-500 bg-gray-500/25 p-2"
6185
>
62-
<h1 class="py-2 font-bold text-center text-gray-500 uppercase">
63-
UNKNOWN
86+
87+
<h1 class="py-2 text-center font-bold uppercase text-gray-500">
88+
UNKNOWN
6489
</h1>
65-
<img class="w-6 my-2" src="@/static/img/g-marker.png" alt="Unknown" />
90+
91+
<img class="my-2 w-6" src="@/static/img/g-marker.png" alt="Unknown" />
92+
6693
<span class="font-semibold">{{ data.unknown }}</span>
94+
6795
</div>
96+
6897
<div
69-
class="flex flex-col items-center justify-center p-2 border rounded-md bg-sky-500/25 border-sky-500"
98+
class="flex flex-col items-center justify-center rounded-md border border-sky-500 bg-sky-500/25 p-2"
7099
>
71-
<h1 class="py-2 font-bold text-center uppercase text-sky-500">
72-
CENTERS
100+
101+
<h1 class="py-2 text-center font-bold uppercase text-sky-500">
102+
CENTERS
73103
</h1>
104+
74105
<img
75-
class="w-6 my-2"
106+
class="my-2 w-6"
76107
src="@/static/img/ote-marker-center-minified.png"
77108
alt="A.K Centers"
78109
/>
110+
79111
<span class="font-semibold">{{ data.centers }}</span>
112+
80113
</div>
81-
<div class="flex justify-between col-span-full">
114+
115+
<div class="col-span-full flex justify-between">
116+
82117
<div>
83-
ADSL: <span class="font-semibold">{{ data.adsl }}</span>
118+
ADSL:
119+
<span class="font-semibold">{{ data.adsl }}</span>
120+
84121
</div>
122+
85123
<div>
86-
VDSL: <span class="font-semibold">{{ data.vdsl }}</span>
124+
VDSL:
125+
<span class="font-semibold">{{ data.vdsl }}</span>
126+
87127
</div>
128+
88129
<div>
89-
FTTH: <span class="font-semibold">{{ data.ftth }}</span>
130+
FTTH:
131+
<span class="font-semibold">{{ data.ftth }}</span>
132+
90133
</div>
134+
91135
</div>
136+
92137
</div>
138+
93139
</div>
140+
94141
</template>
95142

96143
<script>
97144
import { supabase } from "@/utils/supabase-client";
145+
import LRU from "lru-cache";
146+
147+
const options = {
148+
max: 500,
149+
ttl: 1000 * 60 * 60 * 2
150+
};
151+
152+
const cache = new LRU(options);
98153
export default {
99154
data() {
100155
return {
101156
data: null
102157
};
103158
},
104159
async fetch() {
160+
const check = cache.get("stats");
161+
if (check) return (this.data = check);
162+
105163
const { data } = await supabase
106164
.from("cabinets")
107165
.select("*", { count: "exact" });
108166
const { count: centers } = await supabase
109167
.from("centers")
110168
.select("*", { count: "exact" });
111169
112-
this.data = {
170+
const payload = {
113171
vf: data.filter(c => c.isp === "Vodafone").length.toLocaleString(),
114172
ote: data.filter(c => c.isp === "OTE").length.toLocaleString(),
115173
rurcon: data
@@ -122,8 +180,11 @@ export default {
122180
adsl: data.filter(c => c.type === "ADSL").length.toLocaleString(),
123181
ftth: data.filter(c => c.type === "FTTH").length.toLocaleString()
124182
};
183+
cache.set("stats", payload);
184+
this.data = payload;
125185
}
126186
};
127187
</script>
128188

129189
<style></style>
190+

‎tailwind.config.js‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,14 @@
11
const colors = require("tailwindcss/colors");
22

33
module.exports = {
4-
mode: "jit",
5-
purge: [],
6-
darkMode: false, // or 'media' or 'class'
4+
content: [
5+
"./components/**/*.{js,vue,ts}",
6+
"./layouts/**/*.vue",
7+
"./pages/**/*.vue",
8+
"./plugins/**/*.{js,ts}",
9+
"./nuxt.config.{js,ts}",
10+
"./content/**/*.md"
11+
],
712
theme: {
813
extend: {
914
colors: {

0 commit comments

Comments
 (0)