feature: on session

.env

@@ -1,4 +1,6 @@
-# VITE_API_BASE=http://192.168.1.112:3101/api/v1
+# VITE_API_BASE=https://test.gairacalabs.site/api/v1
 VITE_API_BASE=http://localhost:3000/api/v1
-VITE_API_PATH_LIST=/ivao/list/today
-VITE_API_PATH_WHITELIST=/ivao/whitelist
+VITE_API_PATH_LIST=/list/today
+VITE_API_PATH_WHITELIST=/whitelist
+VITE_API_PATH_NOW_SESSIONS=/ivao/sessions/now
+VITE_API_PATH_NOW_FLIGHTPLANS=/ivao/flightplans/latest

.gitignore

@@ -28,3 +28,4 @@ coverage
 *.sw?
 
 .history
+.env

package-lock.json

@@ -13,9 +13,12 @@
         "@popperjs/core": "^2.11.6",
         "axios": "^1.2.2",
         "bootstrap": "^5.2.3",
+        "lodash": "^4.17.21",
         "moment": "^2.29.4",
         "redis": "^4.5.1",
         "vue": "^3.2.45",
+        "vue-loading-overlay": "^6.0.2",
+        "vue-mobile-detection": "^2.0.1",
         "vue-router": "^4.1.6"
       },
       "devDependencies": {
@@ -469,6 +472,76 @@
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
       "dev": true
     },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz",
+      "integrity": "sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/set-array": "^1.0.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz",
+      "integrity": "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/set-array": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
+      "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/source-map": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.2.tgz",
+      "integrity": "sha512-m7O9o2uR8k2ObDysZYzdfhb08VuEml5oWGiosa1VdaPZ/A6QyPkAJuwN0Q1lhULOf6B7MtQmHENS743hWtCrgw==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.0",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.4.14",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
+      "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.17",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.17.tgz",
+      "integrity": "sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/resolve-uri": "3.1.0",
+        "@jridgewell/sourcemap-codec": "1.4.14"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -572,6 +645,14 @@
       "integrity": "sha512-sXo/qW2/pAcmT43VoRKOJbDOfV3cYpq3szSVfIThQXNt+E4DfKj361vaAt3c88U5tPUxzEswam7GW48PJqtKAg==",
       "dev": true
     },
+    "node_modules/@types/node": {
+      "version": "18.11.18",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.18.tgz",
+      "integrity": "sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-4.0.0.tgz",
@@ -883,6 +964,14 @@
         "node": ">=8"
       }
     },
+    "node_modules/buffer-from": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
+      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
     "node_modules/bulma": {
       "version": "0.9.4",
       "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.4.tgz",
@@ -1003,6 +1092,14 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -1892,8 +1989,7 @@
     "node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
@@ -2551,6 +2647,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/source-map-support": {
+      "version": "0.5.21",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
+      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "buffer-from": "^1.0.0",
+        "source-map": "^0.6.0"
+      }
+    },
     "node_modules/sourcemap-codec": {
       "version": "1.4.8",
       "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
@@ -2605,6 +2713,26 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/terser": {
+      "version": "5.16.1",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.16.1.tgz",
+      "integrity": "sha512-xvQfyfA1ayT0qdK47zskQgRZeWLoOQ8JQ6mIgRGVNwZKdQMU+5FkCBjmv4QjcrTzyZquRw2FVtlJSRUmMKQslw==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/source-map": "^0.3.2",
+        "acorn": "^8.5.0",
+        "commander": "^2.20.0",
+        "source-map-support": "~0.5.20"
+      },
+      "bin": {
+        "terser": "bin/terser"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -2765,6 +2893,25 @@
         "eslint": ">=6.0.0"
       }
     },
+    "node_modules/vue-loading-overlay": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/vue-loading-overlay/-/vue-loading-overlay-6.0.2.tgz",
+      "integrity": "sha512-5GCvv6hPjNfHg+tKnLkk6yO/b/AdCCkdZb2dfrVFOuDyJz38dbm34k6oohVy/xIoFzPGsEEVtwCxq5G3RIYZ1Q==",
+      "engines": {
+        "node": ">=12.13.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
+    "node_modules/vue-mobile-detection": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/vue-mobile-detection/-/vue-mobile-detection-2.0.1.tgz",
+      "integrity": "sha512-ziB0Rp8Snp08+p7E+WCRzeYYYp0ddPaqHlFxWN0kpLAddB5D/PRwgIv18P08hkhwNFRgBQ71T19jNIbttR7P0g==",
+      "dependencies": {
+        "vue": "^3.2.20"
+      }
+    },
     "node_modules/vue-router": {
       "version": "4.1.6",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.1.6.tgz",
@@ -3060,6 +3207,67 @@
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
       "dev": true
     },
+    "@jridgewell/gen-mapping": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz",
+      "integrity": "sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "requires": {
+        "@jridgewell/set-array": "^1.0.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      }
+    },
+    "@jridgewell/resolve-uri": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz",
+      "integrity": "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
+    "@jridgewell/set-array": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
+      "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
+    "@jridgewell/source-map": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.2.tgz",
+      "integrity": "sha512-m7O9o2uR8k2ObDysZYzdfhb08VuEml5oWGiosa1VdaPZ/A6QyPkAJuwN0Q1lhULOf6B7MtQmHENS743hWtCrgw==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "requires": {
+        "@jridgewell/gen-mapping": "^0.3.0",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      }
+    },
+    "@jridgewell/sourcemap-codec": {
+      "version": "1.4.14",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
+      "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
+    "@jridgewell/trace-mapping": {
+      "version": "0.3.17",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.17.tgz",
+      "integrity": "sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "requires": {
+        "@jridgewell/resolve-uri": "3.1.0",
+        "@jridgewell/sourcemap-codec": "1.4.14"
+      }
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -3137,6 +3345,14 @@
       "integrity": "sha512-sXo/qW2/pAcmT43VoRKOJbDOfV3cYpq3szSVfIThQXNt+E4DfKj361vaAt3c88U5tPUxzEswam7GW48PJqtKAg==",
       "dev": true
     },
+    "@types/node": {
+      "version": "18.11.18",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.18.tgz",
+      "integrity": "sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
     "@vitejs/plugin-vue": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-4.0.0.tgz",
@@ -3390,6 +3606,14 @@
         "fill-range": "^7.0.1"
       }
     },
+    "buffer-from": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
+      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
     "bulma": {
       "version": "0.9.4",
       "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.4.tgz",
@@ -3477,6 +3701,14 @@
         "delayed-stream": "~1.0.0"
       }
     },
+    "commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -4125,8 +4357,7 @@
     "lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
     "lodash.merge": {
       "version": "4.6.2",
@@ -4575,6 +4806,18 @@
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
       "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw=="
     },
+    "source-map-support": {
+      "version": "0.5.21",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
+      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "requires": {
+        "buffer-from": "^1.0.0",
+        "source-map": "^0.6.0"
+      }
+    },
     "sourcemap-codec": {
       "version": "1.4.8",
       "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
@@ -4610,6 +4853,20 @@
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
       "dev": true
     },
+    "terser": {
+      "version": "5.16.1",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.16.1.tgz",
+      "integrity": "sha512-xvQfyfA1ayT0qdK47zskQgRZeWLoOQ8JQ6mIgRGVNwZKdQMU+5FkCBjmv4QjcrTzyZquRw2FVtlJSRUmMKQslw==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "requires": {
+        "@jridgewell/source-map": "^0.3.2",
+        "acorn": "^8.5.0",
+        "commander": "^2.20.0",
+        "source-map-support": "~0.5.20"
+      }
+    },
     "text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -4710,6 +4967,20 @@
         "semver": "^7.3.6"
       }
     },
+    "vue-loading-overlay": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/vue-loading-overlay/-/vue-loading-overlay-6.0.2.tgz",
+      "integrity": "sha512-5GCvv6hPjNfHg+tKnLkk6yO/b/AdCCkdZb2dfrVFOuDyJz38dbm34k6oohVy/xIoFzPGsEEVtwCxq5G3RIYZ1Q==",
+      "requires": {}
+    },
+    "vue-mobile-detection": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/vue-mobile-detection/-/vue-mobile-detection-2.0.1.tgz",
+      "integrity": "sha512-ziB0Rp8Snp08+p7E+WCRzeYYYp0ddPaqHlFxWN0kpLAddB5D/PRwgIv18P08hkhwNFRgBQ71T19jNIbttR7P0g==",
+      "requires": {
+        "vue": "^3.2.20"
+      }
+    },
     "vue-router": {
       "version": "4.1.6",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.1.6.tgz",

package.json

@@ -7,7 +7,8 @@
     "build": "vite build",
     "preview": "vite preview",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
-    "serve": "npm run build && http-server ./dist -c-1"
+    "serve": "npm run build && http-server ./dist -c-1",
+    "docker-build": "docker build -t arhuako/ltsweb ."
   },
   "dependencies": {
     "@headlessui/vue": "^1.7.7",
@@ -15,9 +16,12 @@
     "@popperjs/core": "^2.11.6",
     "axios": "^1.2.2",
     "bootstrap": "^5.2.3",
+    "lodash": "^4.17.21",
     "moment": "^2.29.4",
     "redis": "^4.5.1",
     "vue": "^3.2.45",
+    "vue-loading-overlay": "^6.0.2",
+    "vue-mobile-detection": "^2.0.1",
     "vue-router": "^4.1.6"
   },
   "devDependencies": {

src/App.vue

@@ -1,59 +1,48 @@
 <script>
 // import { RouterLink, RouterView } from "vue-router";
 
-import moment from 'moment';
-import FormatTime from './components/FormatTime.vue';
-
-import { getMonthlyList, getWhitelist } from './data/http/listRequest';
-
 export default {
   data() {
     return {
       loading: true,
       list: [],
-      whitelist: []
+      whitelist: [],
+      isNavMobileOpen: false,
     }
   },
-  async mounted() {
-    await this.loadData();
-  },
   methods: {
-    async loadData() {
-      let data = await getMonthlyList();
-      this.list = data.sort((a, b) => b.time - a.time).map(d => {
-        const val = d.time / 60;
-        const hours = Number.isNaN(val) ? 0 : Math.floor(val / 60);
-        const minutes = String(Number.isNaN(val) ? 0 :Math.round((val % 60)) + 100).substring(1);
-        d._formattedTime = `${hours}:${minutes}`;
-        return d;
-      });
-      this.whitelist = await getWhitelist();
-      console.log(this.list);
-    }, 
-    dateTime(value) {
-      return moment(value).fromNow(); //.format('YYYY-MM-DD HH:mm');
-    },
-    flagIcon(code) {
-      return new URL(`/public/flags/${code}.png`, import.meta.url).href
-    }
-  },
-  components: {
-    FormatTime,
+    toggleNavMobile() {
+      this.isNavMobileOpen = !this.isNavMobileOpen;
+    }
   }
 }
-
-
 
 </script>
 
 <template>
-  <header class="container is-fluid level block mt-2">
-    <div class="level-left">
+  <nav class="navbar" role="navigation" aria-label="main navigation">
+    <div class="navbar-brand">
+      <a class="navbar-item" href="https://bulma.io">
         <img src="@/assets/images/logo_28.png" alt="Latin Streaming Alliance" class="logo">
+      </a>
+
+      <a role="button" class="navbar-burger" :class="{'is-active': isNavMobileOpen}" aria-label="menu" aria-expanded="false" @click="toggleNavMobile()">
+        <span aria-hidden="true"></span>
+        <span aria-hidden="true"></span>
+        <span aria-hidden="true"></span>
+      </a>
     </div>
-  </header>
+
+    <div id="navbarBasicExample" class="navbar-menu" :class="{'is-active': isNavMobileOpen}">
+      <div class="navbar-start">
+        <router-link class="navbar-item" to="/">ICAO</router-link>
+        <router-link class="navbar-item" to="/acars">Acars</router-link>
+      </div>
+    </div>
+  </nav>
   <div class="container">
-    <section class="section">
+    <div> <RouterView /> </div>
+    <!-- <section class="section">
       <h1 class="title">Pilotos activos con mas de 200 horas en ACARS</h1>      
         <table class="table is-striped is-hoverable is-fullwidth">
           <thead>
@@ -81,59 +70,9 @@ export default {
             </tr>
           </tbody>
         </table>
-      </section>
-    <section class="section">
-      <h1 class="title">Status mensual IVAO</h1>      
-        <table class="table is-striped is-hoverable is-fullwidth">
-          <thead>
-            <tr>
-              <th class="has-text-centered">VID</th>
-              <th class="">Nombre</th>
-              <th class="has-text-centered">División</th>
-              <th class="has-text-centered">Horas totales</th>
-              <th class="has-text-centered">Último vuelo</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="item in list" :key="item.vid">
-              <td class="has-text-centered">
-                {{ item.vid  }}
-              </td>
-              <td>
-                {{ item.name  }}
-              </td>
-              <td class="has-text-centered">
-                {{ item.division  }} <img v-if="item.division" :src="flagIcon(item.division.toLowerCase())" :alt="item.division" :title="item.division">
-              </td>
-              <td class="has-text-centered">
-                <FormatTime :value="item.time / 60" />
-              </td>
-              <td class="">
-                <div class="is-size-6">
-                  {{ item.lastFlight.departureId }} - {{ item.lastFlight.arrivalId }} <span class="is-size-7 ml-1 has-text-grey-light">{{ dateTime(item.lastFlightDate) }}</span>
-                </div>
-                  <div class="field is-grouped is-grouped-multiline">
-                    <div class="control">
-                      <div class="tags has-addons">
-                        <span class="tag is-dark">Callsign</span>
-                        <span class="tag">{{ item.lastCallsign }}</span>
-                      </div>
-                    </div>
-                    <div class="control">
-                      <div class="tags has-addons">
-                        <span class="tag is-dark">Aircraft</span>
-                        <span class="tag">{{ item.lastFlight.aircraftId }}</span>
-                      </div>
+      </section> -->
     </div>
    
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-    </section>
-    </div>
-    <!-- <RouterView /> -->
 </template>
 
 <style>