├── .browserslistrc
├── .eslintrc.js
├── .gitignore
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── Icons
    │   ├── SatelliteIcon.vue
    │   ├── SatelliteIconDark.vue
    │   ├── StationIcon.vue
    │   ├── satellite_blue.png
    │   ├── station_icon_green.png
    │   └── station_icon_red.png
    ├── assets
    │   ├── fullScren-but.png
    │   ├── logo-large.svg
    │   ├── logo.png
    │   └── logo.svg
    ├── charts
    │   └── LineChart.js
    ├── components
    │   ├── DynamicTemplate.vue
    │   ├── EditStation.vue
    │   ├── HelloWorld.vue
    │   ├── HexView.vue
    │   ├── Navbar.vue
    │   ├── PacketMap.vue
    │   ├── PacketRow.vue
    │   ├── Station.vue
    │   ├── StationRx.vue
    │   ├── Telemetry.vue
    │   └── Worldmap.vue
    ├── main.js
    ├── plugins
    │   └── vuetify.js
    ├── router
    │   └── index.js
    ├── store
    │   └── index.js
    └── views
    │   ├── AprilFools.vue
    │   ├── Home.vue
    │   ├── Packet.vue
    │   ├── Packets.vue
    │   ├── Satellite.vue
    │   ├── Satellites.vue
    │   ├── Station.vue
    │   ├── Stations.vue
    │   └── User.vue
└── vue.config.js


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not dead
4 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true
 5 |   },
 6 |   'extends': [
 7 |     'plugin:vue/essential',
 8 |     'eslint:recommended'
 9 |   ],
10 |   parserOptions: {
11 |     parser: 'babel-eslint'
12 |   },
13 |   rules: {
14 |     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
15 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # tinygs-webapp
 2 | 
 3 | ## Project setup
 4 | ```
 5 | npm install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | npm run serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | npm run build
16 | ```
17 | 
18 | ### Lints and fixes files
19 | ```
20 | npm run lint
21 | ```
22 | 
23 | ### Customize configuration
24 | See [Configuration Reference](https://cli.vuejs.org/config/).
25 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "tinygs-webapp",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "axios": "^0.21.1",
12 |     "chart.js": "^2.9.4",
13 |     "core-js": "^3.6.5",
14 |     "leaflet": "^1.7.1",
15 |     "moment": "^2.29.1",
16 |     "v-runtime-template": "^1.10.0",
17 |     "vue": "^2.6.11",
18 |     "vue-chartjs": "^3.5.1",
19 |     "vue-json-viewer": "^2.2.18",
20 |     "vue-router": "^3.2.0",
21 |     "vue2-leaflet": "^2.6.0",
22 |     "vuetify": "^2.4.0",
23 |     "vuex": "^3.4.0"
24 |   },
25 |   "devDependencies": {
26 |     "@mdi/font": "^5.9.55",
27 |     "@vue/cli-plugin-babel": "~4.5.0",
28 |     "@vue/cli-plugin-eslint": "~4.5.0",
29 |     "@vue/cli-plugin-router": "~4.5.0",
30 |     "@vue/cli-plugin-vuex": "~4.5.0",
31 |     "@vue/cli-service": "~4.5.0",
32 |     "babel-eslint": "^10.1.0",
33 |     "eslint": "^6.7.2",
34 |     "eslint-plugin-vue": "^6.2.2",
35 |     "sass": "^1.32.0",
36 |     "sass-loader": "^10.0.0",
37 |     "vue-cli-plugin-vuetify": "~2.1.0",
38 |     "vue-template-compiler": "^2.6.11",
39 |     "vuetify-loader": "^1.7.0"
40 |   }
41 | }
42 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/4m1g0/tinyGS-webapp/f40109550794ff85a7d57f01c4a7af3fc15d97e7/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
10 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
11 |   </head>
12 |   <body>
13 |     <noscript>
14 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
15 |     </noscript>
16 |     <div id="app"></div>
17 |     <!-- built files will be auto injected -->
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <v-app>
  3 |     <Navbar v-on:logout="user=null" :user="user" />
  4 |     <v-main class="grey lighten-3 " style="height:100%;">
  5 |       <router-view v-if="!$route.query.loginToken || !$route.query.userId"></router-view>
  6 | 
  7 |       <v-row v-else class="fill-height ma-0" align="center" justify="center">
  8 |         <div class="text-center">
  9 |           <h1 class="grey--text mr-12">Logging in...</h1>
 10 |           <v-progress-circular v-if="!loginError" indeterminate color="grey"></v-progress-circular>
 11 |           <v-alert class="mt-2" color="red" v-else dark icon="mdi-alert-circle" border="right">
 12 |             Login error! This login token has expired.
 13 |           </v-alert>
 14 |         </div>
 15 |       </v-row>
 16 |       <div style="padding-bottom:150px;"></div>
 17 |       <v-footer class="mt-12 pa-3"
 18 |         color="primary"
 19 |         padless
 20 |         absolute
 21 |       >
 22 |         <v-row
 23 |           justify="center"
 24 |           no-gutters
 25 |         >
 26 |           <v-btn
 27 |             v-for="link in links"
 28 |             :key="link.url"
 29 |             color="white"
 30 |             text
 31 |             rounded
 32 |             class="my-2 mx-1"
 33 |             @click="navigate(link.url)"
 34 | 
 35 |           >
 36 |           <v-icon class="mr-2">{{link.icon}}</v-icon> {{link.name}}
 37 |           </v-btn>
 38 |           <v-col
 39 |             class=" py-4 text-center white--text"
 40 |             cols="12"
 41 |           >
 42 |             {{ new Date().getFullYear() }} — <strong>TinyGS</strong>
 43 |           </v-col>
 44 |         </v-row>
 45 |       </v-footer>
 46 |     </v-main>
 47 |   </v-app>
 48 | </template>
 49 | 
 50 | <script>
 51 | import Navbar from './components/Navbar.vue';
 52 | const axios = require("axios");
 53 | 
 54 | export default {
 55 |   name: 'App',
 56 | 
 57 |   components: {
 58 |     Navbar,
 59 |   },
 60 |   data() {
 61 |     return {
 62 |       user: null,
 63 |       loginError: false,
 64 |       links: [
 65 |         {icon:"mdi-github", name:' GitHub',url:"https://github.com/G4lile0/tinyGS"},
 66 |         {icon:"mdi-file-document-multiple-outline", name:' Wiki',url:"https://github.com/G4lile0/tinyGS/wiki"},
 67 |         {icon:"mdi-map-marker-question-outline", name:' FAQ',url:"https://github.com/G4lile0/tinyGS/wiki/FAQ"},
 68 |         {icon:"mdi-forum", name:' Telegram',url:"https://t.me/joinchat/DmYSElZahiJGwHX6jCzB3Q"},
 69 |       ],
 70 |     }
 71 |   },
 72 |   mounted() {
 73 |     if ("userId" in localStorage) {
 74 |         this.user = localStorage.userId
 75 |     }
 76 | 
 77 |     if (this.$route.query.loginToken && this.$route.query.userId) {
 78 |       this.login();
 79 |     }
 80 |   },
 81 |   methods: {
 82 |     async login() {
 83 |       if ("userId" in localStorage) {
 84 |         this.$router.push(`/user/${this.user}`)
 85 |         return
 86 |       }
 87 |       let params = {
 88 |         loginToken: this.$route.query.loginToken,
 89 |         userId: this.$route.query.userId
 90 |       }
 91 |       try {
 92 |         const { data } = await axios.post("https://api.tinygs.com/v1/login", params);
 93 |         console.log(data);
 94 |         localStorage.sessionToken = data.sessionToken
 95 |         localStorage.userId = params.userId
 96 |         this.user = params.userId
 97 |         this.$router.push(`/user/${params.userId}`)
 98 |       } catch (err) {
 99 |         //console.log(JSON.stringify(err))
100 |         this.loginError = true;
101 |       }
102 |       
103 |       // put authenticate and save token and remove query string -> this.$router.push(this.$route.path)
104 |     },
105 |     navigate(l){
106 |       window.location = l;
107 |     },
108 |   }
109 | };
110 | </script>
111 | 


--------------------------------------------------------------------------------
/src/Icons/SatelliteIcon.vue:
--------------------------------------------------------------------------------
1 | <template>
2 | 
3 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100"><polygon points="38.17 39.4 45.24 32.33 43.34 27.92 24.21 8.78 14.59 18.4 33.72 37.53" fill="white"/><path d="M69.22 44.57L54.38 29.73c-1.1-1.1-2.91-1.1-4.01 0L35.53 44.57c-1.1 1.1-1.1 2.91 0 4.01l14.84 14.84c1.1 1.1 2.91 1.1 4.01 0l14.84-14.84C70.32 47.47 70.32 45.67 69.22 44.57z" fill="white"/><polygon points="71.04 55.61 66.58 53.75 59.52 60.82 61.42 65.23 80.55 84.36 90.17 74.75" fill="white"/><path d="M28.08 55.26l-6.05 0.59C23.11 68.13 32.78 77.94 45 79.22l0.59-6.05C36.26 72.15 28.89 64.66 28.08 55.26z" fill="white"/><path d="M15.88 56.54L9.83 57.13c1.67 18.06 16.03 32.43 34.08 34.09l0.59-6.04C29.34 83.76 17.29 71.71 15.88 56.54z" fill="white"/></svg>
4 | </template>
5 | 


--------------------------------------------------------------------------------
/src/Icons/SatelliteIconDark.vue:
--------------------------------------------------------------------------------
1 | <template>
2 | 
3 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100"><polygon points="38.17 39.4 45.24 32.33 43.34 27.92 24.21 8.78 14.59 18.4 33.72 37.53" fill="black"/><path d="M69.22 44.57L54.38 29.73c-1.1-1.1-2.91-1.1-4.01 0L35.53 44.57c-1.1 1.1-1.1 2.91 0 4.01l14.84 14.84c1.1 1.1 2.91 1.1 4.01 0l14.84-14.84C70.32 47.47 70.32 45.67 69.22 44.57z" fill="black"/><polygon points="71.04 55.61 66.58 53.75 59.52 60.82 61.42 65.23 80.55 84.36 90.17 74.75" fill="black"/><path d="M28.08 55.26l-6.05 0.59C23.11 68.13 32.78 77.94 45 79.22l0.59-6.05C36.26 72.15 28.89 64.66 28.08 55.26z" fill="black"/><path d="M15.88 56.54L9.83 57.13c1.67 18.06 16.03 32.43 34.08 34.09l0.59-6.04C29.34 83.76 17.29 71.71 15.88 56.54z" fill="black"/></svg>
4 | </template>
5 | 


--------------------------------------------------------------------------------
/src/Icons/StationIcon.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <svg
 3 |    xmlns:dc="http://purl.org/dc/elements/1.1/"
 4 |    xmlns:cc="http://creativecommons.org/ns#"
 5 |    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
 6 |    xmlns:svg="http://www.w3.org/2000/svg"
 7 |    xmlns="http://www.w3.org/2000/svg"
 8 |    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
 9 |    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
10 |    sodipodi:docname="dibujo.svg"
11 |    inkscape:version="1.0 (4035a4fb49, 2020-05-01)"
12 |    id="svg865"
13 |    version="1.1"
14 |    viewBox="0 0 26.614882 32.60743"
15 |    height="32.60743mm"
16 |    width="26.614882mm">
17 |   <defs
18 |      id="defs859" />
19 |   <sodipodi:namedview
20 |      inkscape:window-maximized="1"
21 |      inkscape:window-y="27"
22 |      inkscape:window-x="0"
23 |      inkscape:window-height="1376"
24 |      inkscape:window-width="2560"
25 |      fit-margin-bottom="0"
26 |      fit-margin-right="0"
27 |      fit-margin-left="0"
28 |      fit-margin-top="0"
29 |      showgrid="false"
30 |      inkscape:document-rotation="0"
31 |      inkscape:current-layer="layer1"
32 |      inkscape:document-units="mm"
33 |      inkscape:cy="70.627453"
34 |      inkscape:cx="102.73841"
35 |      inkscape:zoom="1.979899"
36 |      inkscape:pageshadow="2"
37 |      inkscape:pageopacity="0.0"
38 |      borderopacity="1.0"
39 |      bordercolor="#666666"
40 |      pagecolor="#ffffff"
41 |      id="base" />
42 |   <metadata
43 |      id="metadata862">
44 |     <rdf:RDF>
45 |       <cc:Work
46 |          rdf:about="">
47 |         <dc:format>image/svg+xml</dc:format>
48 |         <dc:type
49 |            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
50 |         <dc:title></dc:title>
51 |       </cc:Work>
52 |     </rdf:RDF>
53 |   </metadata>
54 |   <g
55 |      transform="translate(-17.043881,-25.662578)"
56 |      id="layer1"
57 |      inkscape:groupmode="layer"
58 |      inkscape:label="Capa 1">
59 |     <path
60 |        inkscape:connector-curvature="0"
61 |        id="path4687"
62 |        d="m 25.921991,48.253567 a 6.8912181,6.9925593 0 0 0 -6.89157,6.99285 6.8912181,6.9925593 0 0 0 0.115239,1.25626 13.370907,12.473213 0 0 0 6.830073,1.76733 13.370907,12.473213 0 0 0 6.709669,-1.7017 6.8912181,6.9925593 0 0 0 0.127641,-1.32189 6.8912181,6.9925593 0 0 0 -6.891052,-6.99285 z"
63 |        style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.8693;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill" />
64 |     <path
65 |        sodipodi:nodetypes="ccccc"
66 |        inkscape:connector-curvature="0"
67 |        id="path4689"
68 |        d="m 20.976609,32.630947 c -2.291557,1.62608 -3.928037,4.66951 -3.932728,7.6469 1.65e-4,6.36686 4.830907,11.90608 11.197767,11.90596 2.85535,-0.005 6.161028,-1.29334 8.053771,-3.36436 z"
69 |        style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.52983;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill" />
70 |     <ellipse
71 |        transform="matrix(0.75626911,0.65426067,-0.52791361,0.84929807,0,0)"
72 |        ry="6.3669958"
73 |        rx="11.07095"
74 |        cy="12.510401"
75 |        cx="46.270409"
76 |        id="ellipse4691"
77 |        style="fill:#ececec;fill-opacity:1;stroke:none;stroke-width:1.24244;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill" />
78 |     <path
79 |        inkscape:connector-curvature="0"
80 |        id="path4693"
81 |        d="m 32.811492,55.214387 a 11.859003,10.110863 0 0 1 -6.929808,1.92184 11.859003,10.110863 0 0 1 -6.850229,-1.86603 6.8912181,6.9925593 0 0 0 0.114205,1.23248 13.370906,12.473213 0 0 0 6.830073,1.76733 13.370906,12.473213 0 0 0 6.709669,-1.7017 6.8912181,6.9925593 0 0 0 0.12764,-1.32188 6.8912181,6.9925593 0 0 0 -0.0016,-0.032 z"
82 |        style="fill:#ececec;fill-opacity:1;stroke:none;stroke-width:1.8693;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill" />
83 |     <path
84 |        inkscape:connector-curvature="0"
85 |        id="path4695"
86 |        d="m 36.595283,25.667464 c -1.353145,-0.05321 -2.330078,0.345703 -2.330078,0.345703 a 0.73340072,0.73340072 0 1 0 0.560547,1.355468 c 0,0 0.659493,-0.277749 1.712891,-0.236328 1.053398,0.04142 2.43204,0.394931 3.84375,1.80664 1.41171,1.41171 1.765219,2.79035 1.80664,3.84375 0.04142,1.0534 -0.236328,1.71289 -0.236328,1.71289 a 0.73340175,0.73340175 0 1 0 1.355469,0.56055 c 0,0 0.398911,-0.97693 0.345703,-2.33008 -0.05321,-1.35314 -0.565628,-3.15156 -2.236328,-4.822265 -1.6707,-1.6707 -3.469121,-2.183121 -4.822266,-2.236328 z m -0.818359,3.472653 c -0.840361,-0.0732 -1.472656,0.15625 -1.472656,0.15625 a 0.73257327,0.73257327 0 1 0 0.511719,1.3711 c 0,0 0.288877,-0.11391 0.833984,-0.0664 0.545107,0.0475 1.28133,0.25789 2.091797,1.06836 0.810466,0.81046 1.020861,1.54669 1.068359,2.09179 0.0475,0.54511 -0.06836,0.83399 -0.06836,0.83399 a 0.73265193,0.73265193 0 1 0 1.373047,0.51172 c 0,0 0.227521,-0.6323 0.154296,-1.47266 -0.07322,-0.84036 -0.446445,-1.95426 -1.492187,-3 -1.045743,-1.04574 -2.159639,-1.42092 -3,-1.49414 z"
87 |        style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.465;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
88 |     <path
89 |        inkscape:connector-curvature="0"
90 |        style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.165;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
91 |        d="m 35.158187,31.868407 a 2.3151042,2.3151042 0 0 0 -2.315104,2.31511 2.3151042,2.3151042 0 0 0 0.123507,0.73794 l -6.939628,6.8616 a 1.0834656,1.0834656 0 1 0 1.523421,1.54099 l 6.989238,-6.91173 a 2.3151042,2.3151042 0 0 0 0.618566,0.0863 2.3151042,2.3151042 0 0 0 2.315105,-2.3151 2.3151042,2.3151042 0 0 0 -2.315105,-2.31511 z m -2.18953,3.05873 a 2.3151042,2.3151042 0 0 0 1.567346,1.48415 2.3151042,2.3151042 0 0 1 -1.567346,-1.48415 z"
92 |        id="path4697" />
93 |   </g>
94 | </svg>
95 | </template>
96 | 


--------------------------------------------------------------------------------
/src/Icons/satellite_blue.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/4m1g0/tinyGS-webapp/f40109550794ff85a7d57f01c4a7af3fc15d97e7/src/Icons/satellite_blue.png


--------------------------------------------------------------------------------
/src/Icons/station_icon_green.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/4m1g0/tinyGS-webapp/f40109550794ff85a7d57f01c4a7af3fc15d97e7/src/Icons/station_icon_green.png


--------------------------------------------------------------------------------
/src/Icons/station_icon_red.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/4m1g0/tinyGS-webapp/f40109550794ff85a7d57f01c4a7af3fc15d97e7/src/Icons/station_icon_red.png


--------------------------------------------------------------------------------
/src/assets/fullScren-but.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/4m1g0/tinyGS-webapp/f40109550794ff85a7d57f01c4a7af3fc15d97e7/src/assets/fullScren-but.png


--------------------------------------------------------------------------------
/src/assets/logo-large.svg:
--------------------------------------------------------------------------------
  1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
  2 | <svg
  3 |    xmlns:dc="http://purl.org/dc/elements/1.1/"
  4 |    xmlns:cc="http://creativecommons.org/ns#"
  5 |    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
  6 |    xmlns:svg="http://www.w3.org/2000/svg"
  7 |    xmlns="http://www.w3.org/2000/svg"
  8 |    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
  9 |    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
 10 |    inkscape:export-ydpi="70.07"
 11 |    inkscape:export-xdpi="70.07"
 12 |    inkscape:export-filename="/home/oscar/proyectos/tinyGS/tinygs-webapp/src/assets/logo.png"
 13 |    sodipodi:docname="logo.svg"
 14 |    inkscape:version="1.0 (4035a4fb49, 2020-05-01)"
 15 |    id="svg8"
 16 |    version="1.1"
 17 |    viewBox="0 0 41.860273 21.524385"
 18 |    height="81.352005"
 19 |    width="158.21205">
 20 |   <defs
 21 |      id="defs2" />
 22 |   <sodipodi:namedview
 23 |      fit-margin-bottom="5"
 24 |      fit-margin-right="5"
 25 |      fit-margin-left="5"
 26 |      fit-margin-top="5"
 27 |      units="px"
 28 |      inkscape:document-rotation="0"
 29 |      inkscape:window-maximized="1"
 30 |      inkscape:window-y="0"
 31 |      inkscape:window-x="2560"
 32 |      inkscape:window-height="1043"
 33 |      inkscape:window-width="1920"
 34 |      showgrid="false"
 35 |      inkscape:current-layer="layer1"
 36 |      inkscape:document-units="mm"
 37 |      inkscape:cy="39.116603"
 38 |      inkscape:cx="50.419148"
 39 |      inkscape:zoom="3.959798"
 40 |      inkscape:pageshadow="2"
 41 |      inkscape:pageopacity="0.0"
 42 |      borderopacity="1.0"
 43 |      bordercolor="#666666"
 44 |      pagecolor="#ffffff"
 45 |      id="base" />
 46 |   <metadata
 47 |      id="metadata5">
 48 |     <rdf:RDF>
 49 |       <cc:Work
 50 |          rdf:about="">
 51 |         <dc:format>image/svg+xml</dc:format>
 52 |         <dc:type
 53 |            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
 54 |         <dc:title></dc:title>
 55 |       </cc:Work>
 56 |     </rdf:RDF>
 57 |   </metadata>
 58 |   <g
 59 |      transform="translate(0.9918794,-271.24554)"
 60 |      id="layer1"
 61 |      inkscape:groupmode="layer"
 62 |      inkscape:label="Capa 1">
 63 |     <g
 64 |        transform="matrix(0.73926178,0,0,0.73926178,5.1986694,73.530189)"
 65 |        style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:13.5371px;line-height:28.2023px;font-family:FreeMono;-inkscape-font-specification:FreeMono;text-align:center;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.12809px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
 66 |        id="text817"
 67 |        aria-label="TINY ">
 68 |       <path
 69 |          id="path907"
 70 |          style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:9.02474px;font-family:FreeMono;-inkscape-font-specification:FreeMono;fill:#ffffff;stroke-width:1.12809px"
 71 |          d="m 20.203538,277.27937 h 0.947598 q 0.243668,0 0.243668,0.18049 0,0.18952 -0.243668,0.18952 h -2.26521 q -0.243668,0 -0.243668,-0.18952 0,-0.18049 0.243668,-0.18049 h 0.947598 v -4.3409 h -1.507132 v 0.65881 q 0,0.24366 -0.189519,0.24366 -0.180495,0 -0.180495,-0.24366 v -1.02883 h 4.115281 v 1.02883 q 0,0.24366 -0.180495,0.24366 -0.08122,0 -0.135371,-0.0632 -0.05415,-0.0722 -0.05415,-0.18049 v -0.65881 h -1.498107 z" />
 72 |       <path
 73 |          id="path909"
 74 |          style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:9.02474px;font-family:FreeMono;-inkscape-font-specification:FreeMono;fill:#ffffff;stroke-width:1.12809px"
 75 |          d="m 25.609344,272.93847 v 4.3409 h 1.254438 q 0.252693,0 0.252693,0.18049 0,0.0361 -0.009,0.0722 -0.009,0.0271 -0.0361,0.0541 -0.01805,0.0181 -0.05415,0.0361 -0.02707,0.009 -0.0722,0.018 -0.0361,0.009 -0.08122,0.009 H 23.98489 q -0.243668,0 -0.243668,-0.18952 0,-0.18049 0.243668,-0.18049 h 1.254439 v -4.3409 H 23.98489 q -0.243668,0 -0.243668,-0.18952 0,-0.1805 0.243668,-0.1805 h 2.878892 q 0.252693,0 0.252693,0.1805 0,0.18952 -0.252693,0.18952 z" />
 76 |       <path
 77 |          id="path911"
 78 |          style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:9.02474px;font-family:FreeMono;-inkscape-font-specification:FreeMono;fill:#ffffff;stroke-width:1.12809px"
 79 |          d="m 32.657652,277.64938 h -0.469287 l -2.752546,-4.54847 v 4.17846 h 0.676856 q 0.243668,0 0.243668,0.18049 0,0.0361 -0.009,0.0722 -0.009,0.0271 -0.0361,0.0541 -0.01805,0.0181 -0.04512,0.0361 -0.02707,0.009 -0.0722,0.018 -0.0361,0.009 -0.08122,0.009 h -1.353711 q -0.243668,0 -0.243668,-0.18952 0,-0.18049 0.243668,-0.18049 h 0.306841 v -4.3409 h -0.487336 q -0.243668,0 -0.243668,-0.18952 0,-0.1805 0.243668,-0.1805 h 0.956623 l 2.752545,4.54847 v -4.17845 h -0.66783 q -0.252693,0 -0.252693,-0.18952 0,-0.1805 0.252693,-0.1805 h 1.344686 q 0.243668,0 0.243668,0.1805 0,0.18952 -0.243668,0.18952 H 32.65768 Z" />
 80 |       <path
 81 |          id="path913"
 82 |          style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:9.02474px;font-family:FreeMono;-inkscape-font-specification:FreeMono;fill:#ffffff;stroke-width:1.12809px"
 83 |          d="m 36.457054,275.3571 v 1.92227 h 0.947598 q 0.243668,0 0.243668,0.18049 0,0.18952 -0.243668,0.18952 h -2.26521 q -0.243668,0 -0.243668,-0.18952 0,-0.18049 0.243668,-0.18049 h 0.947598 v -1.92227 l -1.615428,-2.41863 h -0.216594 q -0.243668,0 -0.243668,-0.18952 0,-0.1805 0.243668,-0.1805 h 1.001746 q 0.243668,0 0.243668,0.1805 0,0.18952 -0.243668,0.18952 h -0.34294 l 1.37176,2.04862 1.344687,-2.04862 h -0.36099 q -0.252693,0 -0.252693,-0.18952 0,-0.1805 0.252693,-0.1805 h 0.992721 q 0.243668,0 0.243668,0.1805 0,0.18952 -0.243668,0.18952 h -0.216593 z" />
 84 |     </g>
 85 |     <g
 86 |        style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:21.3333px;line-height:2.30551px;font-family:FreeMono;-inkscape-font-specification:'FreeMono Bold';text-align:center;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
 87 |        id="flowRoot819"
 88 |        transform="matrix(0.72570888,0,0,0.72570888,-89.216045,148.3348)"
 89 |        aria-label="GS">
 90 |       <path
 91 |          id="path916"
 92 |          style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:21.3333px;line-height:21.2031px;font-family:FreeMono;-inkscape-font-specification:'FreeMono Bold';letter-spacing:0.12px;fill:#ffffff"
 93 |          d="m 157.18671,187.53993 q 1.42934,0 1.42934,1.06667 0,0.81067 -0.896,1.06666 v 2.816 q -1.42933,0.74667 -2.432,1.024 -1.00266,0.29867 -2.24,0.29867 -1.45066,0 -2.60266,-0.34134 -1.152,-0.36266 -1.83466,-0.91733 -0.68267,-0.55467 -1.13067,-1.30133 -0.448,-0.768 -0.61866,-1.49333 -0.17067,-0.72533 -0.17067,-1.49333 v -1.51467 q 0,-2.49599 1.68533,-4.22399 1.70667,-1.74933 4.37333,-1.74933 1.728,0 3.09333,0.68266 0.34133,-0.68266 0.87466,-0.68266 0.576,0 0.78933,0.36267 0.21334,0.34133 0.21334,1.04533 v 1.66399 q 0,0.68267 -0.23467,1.04534 -0.21333,0.36266 -0.832,0.36266 -0.14933,0 -0.29866,-0.0213 -0.128,-0.0427 -0.21334,-0.0853 -0.0853,-0.064 -0.17066,-0.14934 -0.064,-0.0853 -0.128,-0.14933 -0.0427,-0.0853 -0.0853,-0.192 -0.0427,-0.128 -0.064,-0.192 -0.0213,-0.064 -0.064,-0.17067 -0.0213,-0.128 -0.0213,-0.17066 -0.17067,-0.55467 -0.91733,-0.87467 -0.74667,-0.34133 -1.92,-0.34133 -1.792,0 -2.87999,1.06666 -1.06667,1.04534 -1.06667,2.77333 v 1.36533 q 0,1.62133 0.896,2.60267 0.91733,0.96 3.19999,0.96 1.472,0 2.66667,-0.53334 v -1.472 h -2.13333 q -1.408,0 -1.408,-1.06666 0,-0.61867 0.36267,-0.832 0.36266,-0.23467 1.04533,-0.23467 z" />
 94 |       <path
 95 |          id="path918"
 96 |          style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:21.3333px;line-height:21.2031px;font-family:FreeMono;-inkscape-font-specification:'FreeMono Bold';letter-spacing:0.12px;fill:#ffffff"
 97 |          d="m 168.89066,180.77728 q 0.64,0 0.832,0.36267 0.21334,0.36266 0.21334,1.04533 v 1.87733 q 0,1.42933 -1.04534,1.42933 -0.17066,0 -0.32,-0.0213 -0.128,-0.0427 -0.23466,-0.0853 -0.0853,-0.064 -0.17067,-0.14933 -0.0853,-0.10667 -0.128,-0.17067 -0.0427,-0.064 -0.0853,-0.192 -0.0427,-0.128 -0.064,-0.17066 0,-0.064 -0.0427,-0.192 -0.0213,-0.14934 -0.0213,-0.17067 -0.14933,-0.64 -0.85333,-1.024 -0.68267,-0.40533 -1.68533,-0.40533 -1.00267,0 -1.70667,0.46933 -0.704,0.46933 -0.704,1.152 0,0.72533 0.704,1.13066 0.704,0.384 1.64267,0.512 0.93866,0.10667 2.09066,0.42667 1.152,0.29867 1.81333,0.832 1.25866,1.00266 1.25866,2.66666 0,0.832 -0.36266,1.51467 -0.34133,0.68266 -0.98133,1.17333 -0.64,0.49066 -1.55733,0.74666 -0.896,0.27734 -1.984,0.27734 -1.77067,0 -3.328,-0.832 -0.192,0.21333 -0.32,0.32 -0.10666,0.10666 -0.23466,0.14933 -0.128,0.0427 -0.29867,0.0427 -1.088,0 -1.088,-1.408 v -1.408 q 0,-0.704 0.23467,-1.04533 0.23467,-0.36267 0.832,-0.36267 0.192,0 0.34133,0.0427 0.17067,0.0427 0.27733,0.128 0.10667,0.0853 0.17067,0.17067 0.0853,0.064 0.128,0.19199 0.064,0.128 0.0853,0.192 0.0213,0.064 0.0427,0.17067 0.0427,0.10667 0.0427,0.128 0.14933,0.576 1.024,0.98133 0.87466,0.40534 1.94133,0.40534 1.19466,0 2.00533,-0.46934 0.81066,-0.46933 0.81066,-1.152 0,-0.63999 -0.64,-1.02399 -0.61866,-0.384 -1.45066,-0.512 -0.81067,-0.128 -1.92,-0.384 -1.088,-0.256 -1.74933,-0.61867 -0.81067,-0.46933 -1.28,-1.25866 -0.46933,-0.78934 -0.46933,-1.70667 0,-1.62133 1.32266,-2.68799 1.32267,-1.088 3.30667,-1.088 1.64266,0 2.77332,0.704 0.17067,-0.40533 0.34134,-0.55467 0.17066,-0.14933 0.49066,-0.14933 z" />
 98 |     </g>
 99 |     <g
100 |        transform="matrix(0.02210172,0,0,0.02210172,4.1720573,275.33059)"
101 |        id="g938"
102 |        style="fill:#ffffff">
103 |       <g
104 |          id="g877"
105 |          style="fill:#ffffff">
106 |         <g
107 |            id="g875"
108 |            style="fill:#ffffff">
109 |           <path
110 |              inkscape:connector-curvature="0"
111 |              d="M 194.84,254.637 312.135,137.342 198.831,120.14 c -12.402,-1.883 -23.076,8.792 -21.193,21.193 z"
112 |              id="path865"
113 |              style="fill:#ffffff" />
114 |           <path
115 |              inkscape:connector-curvature="0"
116 |              d="m 388.511,516.293 c -19.922,8.436 -40.467,14.752 -61.48,18.924 l -61.826,55.115 c -8.509,7.586 -3.144,21.669 8.256,21.669 h 236.204 c 10.278,0 18.611,-8.333 18.611,-18.611 V 401.134 c -11.354,16.822 -24.347,32.568 -38.9,47.121 -29.148,29.147 -63.083,52.039 -100.865,68.038 z"
117 |              id="path867"
118 |              style="fill:#ffffff" />
119 |           <path
120 |              inkscape:connector-curvature="0"
121 |              d="m 483.292,33.806 c -3.697,-4.241 -8.867,-6.389 -14.048,-6.389 -4.749,0 -9.508,1.803 -13.155,5.45 L 346.411,142.546 200.044,288.912 73.988,414.969 c -7.626,7.627 -7.191,20.116 0.939,27.203 50.854,44.334 117.347,71.185 190.111,71.185 39.538,0 77.24,-7.96 111.595,-22.357 59.747,-25.038 109.362,-69.553 140.869,-125.576 23.54,-41.856 36.976,-90.132 36.976,-141.507 C 554.477,151.153 527.626,84.66 483.292,33.806 Z"
122 |              id="path869"
123 |              style="fill:#ffffff" />
124 |           <path
125 |              inkscape:connector-curvature="0"
126 |              d="m 194.98,87.453 c 13.356,0 25.913,5.201 35.358,14.645 5.451,5.45 14.289,5.45 19.74,-0.001 5.451,-5.451 5.45,-14.289 -0.001,-19.74 -14.718,-14.716 -34.285,-22.821 -55.097,-22.821 -42.967,0 -77.923,34.957 -77.923,77.923 0,20.815 8.106,40.384 22.824,55.101 2.725,2.725 6.297,4.088 9.869,4.088 3.572,0 7.145,-1.363 9.87,-4.089 5.451,-5.451 5.451,-14.289 -0.001,-19.739 -9.446,-9.445 -14.647,-22.003 -14.647,-35.361 0.001,-27.573 22.434,-50.006 50.008,-50.006 z"
127 |              id="path871"
128 |              style="fill:#ffffff" />
129 |           <path
130 |              inkscape:connector-curvature="0"
131 |              d="m 106.833,233.962 c 3.572,0 7.145,-1.363 9.87,-4.089 5.451,-5.451 5.45,-14.289 -0.001,-19.739 C 96.541,189.974 85.438,163.168 85.438,134.656 85.437,75.8 133.321,27.916 192.177,27.916 c 28.509,0 55.313,11.102 75.472,31.26 5.451,5.451 14.289,5.45 19.739,-0.001 5.451,-5.451 5.451,-14.289 -10e-4,-19.739 C 261.956,14.005 228.143,0 192.177,0 156.208,0 122.394,14.007 96.961,39.439 71.528,64.871 57.522,98.687 57.522,134.655 c 0,35.969 14.007,69.785 39.442,95.218 2.725,2.726 6.297,4.089 9.869,4.089 z"
132 |              id="path873"
133 |              style="fill:#ffffff" />
134 |         </g>
135 |       </g>
136 |       <g
137 |          id="g879"
138 |          style="fill:#ffffff" />
139 |       <g
140 |          id="g881"
141 |          style="fill:#ffffff" />
142 |       <g
143 |          id="g883"
144 |          style="fill:#ffffff" />
145 |       <g
146 |          id="g885"
147 |          style="fill:#ffffff" />
148 |       <g
149 |          id="g887"
150 |          style="fill:#ffffff" />
151 |       <g
152 |          id="g889"
153 |          style="fill:#ffffff" />
154 |       <g
155 |          id="g891"
156 |          style="fill:#ffffff" />
157 |       <g
158 |          id="g893"
159 |          style="fill:#ffffff" />
160 |       <g
161 |          id="g895"
162 |          style="fill:#ffffff" />
163 |       <g
164 |          id="g897"
165 |          style="fill:#ffffff" />
166 |       <g
167 |          id="g899"
168 |          style="fill:#ffffff" />
169 |       <g
170 |          id="g901"
171 |          style="fill:#ffffff" />
172 |       <g
173 |          id="g903"
174 |          style="fill:#ffffff" />
175 |       <g
176 |          id="g905"
177 |          style="fill:#ffffff" />
178 |       <g
179 |          id="g907"
180 |          style="fill:#ffffff" />
181 |     </g>
182 |   </g>
183 | </svg>
184 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/4m1g0/tinyGS-webapp/f40109550794ff85a7d57f01c4a7af3fc15d97e7/src/assets/logo.png


--------------------------------------------------------------------------------
/src/assets/logo.svg:
--------------------------------------------------------------------------------
  1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
  2 | <svg
  3 |    xmlns:dc="http://purl.org/dc/elements/1.1/"
  4 |    xmlns:cc="http://creativecommons.org/ns#"
  5 |    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
  6 |    xmlns:svg="http://www.w3.org/2000/svg"
  7 |    xmlns="http://www.w3.org/2000/svg"
  8 |    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
  9 |    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
 10 |    inkscape:export-ydpi="70.07"
 11 |    inkscape:export-xdpi="70.07"
 12 |    inkscape:export-filename="/home/oscar/proyectos/tinyGS/tinygs-webapp/src/assets/logo.png"
 13 |    sodipodi:docname="logo.svg"
 14 |    inkscape:version="1.0 (4035a4fb49, 2020-05-01)"
 15 |    id="svg8"
 16 |    version="1.1"
 17 |    viewBox="0 0 41.860273 21.524385"
 18 |    height="81.352005"
 19 |    width="158.21205">
 20 |   <defs
 21 |      id="defs2" />
 22 |   <sodipodi:namedview
 23 |      fit-margin-bottom="5"
 24 |      fit-margin-right="5"
 25 |      fit-margin-left="5"
 26 |      fit-margin-top="5"
 27 |      units="px"
 28 |      inkscape:document-rotation="0"
 29 |      inkscape:window-maximized="1"
 30 |      inkscape:window-y="0"
 31 |      inkscape:window-x="2560"
 32 |      inkscape:window-height="1043"
 33 |      inkscape:window-width="1920"
 34 |      showgrid="false"
 35 |      inkscape:current-layer="layer1"
 36 |      inkscape:document-units="mm"
 37 |      inkscape:cy="39.116603"
 38 |      inkscape:cx="50.419148"
 39 |      inkscape:zoom="3.959798"
 40 |      inkscape:pageshadow="2"
 41 |      inkscape:pageopacity="0.0"
 42 |      borderopacity="1.0"
 43 |      bordercolor="#666666"
 44 |      pagecolor="#ffffff"
 45 |      id="base" />
 46 |   <metadata
 47 |      id="metadata5">
 48 |     <rdf:RDF>
 49 |       <cc:Work
 50 |          rdf:about="">
 51 |         <dc:format>image/svg+xml</dc:format>
 52 |         <dc:type
 53 |            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
 54 |         <dc:title></dc:title>
 55 |       </cc:Work>
 56 |     </rdf:RDF>
 57 |   </metadata>
 58 |   <g
 59 |      transform="translate(0.9918794,-271.24554)"
 60 |      id="layer1"
 61 |      inkscape:groupmode="layer"
 62 |      inkscape:label="Capa 1">
 63 |     <g
 64 |        transform="matrix(1.0471345,0,0,1.0471345,-0.93978067,-13.292296)"
 65 |        style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:13.5371px;line-height:28.2023px;font-family:FreeMono;-inkscape-font-specification:FreeMono;text-align:center;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.12809px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
 66 |        id="text817"
 67 |        aria-label="TINY ">
 68 |       <path
 69 |          id="path907"
 70 |          style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:9.02474px;font-family:FreeMono;-inkscape-font-specification:FreeMono;fill:#ffffff;stroke-width:1.12809px"
 71 |          d="m 20.203538,277.27937 h 0.947598 q 0.243668,0 0.243668,0.18049 0,0.18952 -0.243668,0.18952 h -2.26521 q -0.243668,0 -0.243668,-0.18952 0,-0.18049 0.243668,-0.18049 h 0.947598 v -4.3409 h -1.507132 v 0.65881 q 0,0.24366 -0.189519,0.24366 -0.180495,0 -0.180495,-0.24366 v -1.02883 h 4.115281 v 1.02883 q 0,0.24366 -0.180495,0.24366 -0.08122,0 -0.135371,-0.0632 -0.05415,-0.0722 -0.05415,-0.18049 v -0.65881 h -1.498107 z" />
 72 |       <path
 73 |          id="path909"
 74 |          style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:9.02474px;font-family:FreeMono;-inkscape-font-specification:FreeMono;fill:#ffffff;stroke-width:1.12809px"
 75 |          d="m 25.609344,272.93847 v 4.3409 h 1.254438 q 0.252693,0 0.252693,0.18049 0,0.0361 -0.009,0.0722 -0.009,0.0271 -0.0361,0.0541 -0.01805,0.0181 -0.05415,0.0361 -0.02707,0.009 -0.0722,0.018 -0.0361,0.009 -0.08122,0.009 H 23.98489 q -0.243668,0 -0.243668,-0.18952 0,-0.18049 0.243668,-0.18049 h 1.254439 v -4.3409 H 23.98489 q -0.243668,0 -0.243668,-0.18952 0,-0.1805 0.243668,-0.1805 h 2.878892 q 0.252693,0 0.252693,0.1805 0,0.18952 -0.252693,0.18952 z" />
 76 |       <path
 77 |          id="path911"
 78 |          style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:9.02474px;font-family:FreeMono;-inkscape-font-specification:FreeMono;fill:#ffffff;stroke-width:1.12809px"
 79 |          d="m 32.657652,277.64938 h -0.469287 l -2.752546,-4.54847 v 4.17846 h 0.676856 q 0.243668,0 0.243668,0.18049 0,0.0361 -0.009,0.0722 -0.009,0.0271 -0.0361,0.0541 -0.01805,0.0181 -0.04512,0.0361 -0.02707,0.009 -0.0722,0.018 -0.0361,0.009 -0.08122,0.009 h -1.353711 q -0.243668,0 -0.243668,-0.18952 0,-0.18049 0.243668,-0.18049 h 0.306841 v -4.3409 h -0.487336 q -0.243668,0 -0.243668,-0.18952 0,-0.1805 0.243668,-0.1805 h 0.956623 l 2.752545,4.54847 v -4.17845 h -0.66783 q -0.252693,0 -0.252693,-0.18952 0,-0.1805 0.252693,-0.1805 h 1.344686 q 0.243668,0 0.243668,0.1805 0,0.18952 -0.243668,0.18952 H 32.65768 Z" />
 80 |       <path
 81 |          id="path913"
 82 |          style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:9.02474px;font-family:FreeMono;-inkscape-font-specification:FreeMono;fill:#ffffff;stroke-width:1.12809px"
 83 |          d="m 36.457054,275.3571 v 1.92227 h 0.947598 q 0.243668,0 0.243668,0.18049 0,0.18952 -0.243668,0.18952 h -2.26521 q -0.243668,0 -0.243668,-0.18952 0,-0.18049 0.243668,-0.18049 h 0.947598 v -1.92227 l -1.615428,-2.41863 h -0.216594 q -0.243668,0 -0.243668,-0.18952 0,-0.1805 0.243668,-0.1805 h 1.001746 q 0.243668,0 0.243668,0.1805 0,0.18952 -0.243668,0.18952 h -0.34294 l 1.37176,2.04862 1.344687,-2.04862 h -0.36099 q -0.252693,0 -0.252693,-0.18952 0,-0.1805 0.252693,-0.1805 h 0.992721 q 0.243668,0 0.243668,0.1805 0,0.18952 -0.243668,0.18952 h -0.216593 z" />
 84 |     </g>
 85 |     <g
 86 |        style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:21.3333px;line-height:2.30551px;font-family:FreeMono;-inkscape-font-specification:'FreeMono Bold';text-align:center;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
 87 |        id="flowRoot819"
 88 |        transform="matrix(1.0279374,0,0,1.0279374,-134.67442,92.665417)"
 89 |        aria-label="GS">
 90 |       <path
 91 |          id="path916"
 92 |          style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:21.3333px;line-height:21.2031px;font-family:FreeMono;-inkscape-font-specification:'FreeMono Bold';letter-spacing:0.12px;fill:#ffffff"
 93 |          d="m 157.18671,187.53993 q 1.42934,0 1.42934,1.06667 0,0.81067 -0.896,1.06666 v 2.816 q -1.42933,0.74667 -2.432,1.024 -1.00266,0.29867 -2.24,0.29867 -1.45066,0 -2.60266,-0.34134 -1.152,-0.36266 -1.83466,-0.91733 -0.68267,-0.55467 -1.13067,-1.30133 -0.448,-0.768 -0.61866,-1.49333 -0.17067,-0.72533 -0.17067,-1.49333 v -1.51467 q 0,-2.49599 1.68533,-4.22399 1.70667,-1.74933 4.37333,-1.74933 1.728,0 3.09333,0.68266 0.34133,-0.68266 0.87466,-0.68266 0.576,0 0.78933,0.36267 0.21334,0.34133 0.21334,1.04533 v 1.66399 q 0,0.68267 -0.23467,1.04534 -0.21333,0.36266 -0.832,0.36266 -0.14933,0 -0.29866,-0.0213 -0.128,-0.0427 -0.21334,-0.0853 -0.0853,-0.064 -0.17066,-0.14934 -0.064,-0.0853 -0.128,-0.14933 -0.0427,-0.0853 -0.0853,-0.192 -0.0427,-0.128 -0.064,-0.192 -0.0213,-0.064 -0.064,-0.17067 -0.0213,-0.128 -0.0213,-0.17066 -0.17067,-0.55467 -0.91733,-0.87467 -0.74667,-0.34133 -1.92,-0.34133 -1.792,0 -2.87999,1.06666 -1.06667,1.04534 -1.06667,2.77333 v 1.36533 q 0,1.62133 0.896,2.60267 0.91733,0.96 3.19999,0.96 1.472,0 2.66667,-0.53334 v -1.472 h -2.13333 q -1.408,0 -1.408,-1.06666 0,-0.61867 0.36267,-0.832 0.36266,-0.23467 1.04533,-0.23467 z" />
 94 |       <path
 95 |          id="path918"
 96 |          style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:21.3333px;line-height:21.2031px;font-family:FreeMono;-inkscape-font-specification:'FreeMono Bold';letter-spacing:0.12px;fill:#ffffff"
 97 |          d="m 168.89066,180.77728 q 0.64,0 0.832,0.36267 0.21334,0.36266 0.21334,1.04533 v 1.87733 q 0,1.42933 -1.04534,1.42933 -0.17066,0 -0.32,-0.0213 -0.128,-0.0427 -0.23466,-0.0853 -0.0853,-0.064 -0.17067,-0.14933 -0.0853,-0.10667 -0.128,-0.17067 -0.0427,-0.064 -0.0853,-0.192 -0.0427,-0.128 -0.064,-0.17066 0,-0.064 -0.0427,-0.192 -0.0213,-0.14934 -0.0213,-0.17067 -0.14933,-0.64 -0.85333,-1.024 -0.68267,-0.40533 -1.68533,-0.40533 -1.00267,0 -1.70667,0.46933 -0.704,0.46933 -0.704,1.152 0,0.72533 0.704,1.13066 0.704,0.384 1.64267,0.512 0.93866,0.10667 2.09066,0.42667 1.152,0.29867 1.81333,0.832 1.25866,1.00266 1.25866,2.66666 0,0.832 -0.36266,1.51467 -0.34133,0.68266 -0.98133,1.17333 -0.64,0.49066 -1.55733,0.74666 -0.896,0.27734 -1.984,0.27734 -1.77067,0 -3.328,-0.832 -0.192,0.21333 -0.32,0.32 -0.10666,0.10666 -0.23466,0.14933 -0.128,0.0427 -0.29867,0.0427 -1.088,0 -1.088,-1.408 v -1.408 q 0,-0.704 0.23467,-1.04533 0.23467,-0.36267 0.832,-0.36267 0.192,0 0.34133,0.0427 0.17067,0.0427 0.27733,0.128 0.10667,0.0853 0.17067,0.17067 0.0853,0.064 0.128,0.19199 0.064,0.128 0.0853,0.192 0.0213,0.064 0.0427,0.17067 0.0427,0.10667 0.0427,0.128 0.14933,0.576 1.024,0.98133 0.87466,0.40534 1.94133,0.40534 1.19466,0 2.00533,-0.46934 0.81066,-0.46933 0.81066,-1.152 0,-0.63999 -0.64,-1.02399 -0.61866,-0.384 -1.45066,-0.512 -0.81067,-0.128 -1.92,-0.384 -1.088,-0.256 -1.74933,-0.61867 -0.81067,-0.46933 -1.28,-1.25866 -0.46933,-0.78934 -0.46933,-1.70667 0,-1.62133 1.32266,-2.68799 1.32267,-1.088 3.30667,-1.088 1.64266,0 2.77332,0.704 0.17067,-0.40533 0.34134,-0.55467 0.17066,-0.14933 0.49066,-0.14933 z" />
 98 |     </g>
 99 |     <g
100 |        transform="matrix(0.0313062,0,0,0.0313062,-2.3939354,272.54984)"
101 |        id="g938"
102 |        style="fill:#ffffff">
103 |       <g
104 |          id="g877"
105 |          style="fill:#ffffff">
106 |         <g
107 |            id="g875"
108 |            style="fill:#ffffff">
109 |           <path
110 |              inkscape:connector-curvature="0"
111 |              d="M 194.84,254.637 312.135,137.342 198.831,120.14 c -12.402,-1.883 -23.076,8.792 -21.193,21.193 z"
112 |              id="path865"
113 |              style="fill:#ffffff" />
114 |           <path
115 |              inkscape:connector-curvature="0"
116 |              d="m 388.511,516.293 c -19.922,8.436 -40.467,14.752 -61.48,18.924 l -61.826,55.115 c -8.509,7.586 -3.144,21.669 8.256,21.669 h 236.204 c 10.278,0 18.611,-8.333 18.611,-18.611 V 401.134 c -11.354,16.822 -24.347,32.568 -38.9,47.121 -29.148,29.147 -63.083,52.039 -100.865,68.038 z"
117 |              id="path867"
118 |              style="fill:#ffffff" />
119 |           <path
120 |              inkscape:connector-curvature="0"
121 |              d="m 483.292,33.806 c -3.697,-4.241 -8.867,-6.389 -14.048,-6.389 -4.749,0 -9.508,1.803 -13.155,5.45 L 346.411,142.546 200.044,288.912 73.988,414.969 c -7.626,7.627 -7.191,20.116 0.939,27.203 50.854,44.334 117.347,71.185 190.111,71.185 39.538,0 77.24,-7.96 111.595,-22.357 59.747,-25.038 109.362,-69.553 140.869,-125.576 23.54,-41.856 36.976,-90.132 36.976,-141.507 C 554.477,151.153 527.626,84.66 483.292,33.806 Z"
122 |              id="path869"
123 |              style="fill:#ffffff" />
124 |           <path
125 |              inkscape:connector-curvature="0"
126 |              d="m 194.98,87.453 c 13.356,0 25.913,5.201 35.358,14.645 5.451,5.45 14.289,5.45 19.74,-0.001 5.451,-5.451 5.45,-14.289 -0.001,-19.74 -14.718,-14.716 -34.285,-22.821 -55.097,-22.821 -42.967,0 -77.923,34.957 -77.923,77.923 0,20.815 8.106,40.384 22.824,55.101 2.725,2.725 6.297,4.088 9.869,4.088 3.572,0 7.145,-1.363 9.87,-4.089 5.451,-5.451 5.451,-14.289 -0.001,-19.739 -9.446,-9.445 -14.647,-22.003 -14.647,-35.361 0.001,-27.573 22.434,-50.006 50.008,-50.006 z"
127 |              id="path871"
128 |              style="fill:#ffffff" />
129 |           <path
130 |              inkscape:connector-curvature="0"
131 |              d="m 106.833,233.962 c 3.572,0 7.145,-1.363 9.87,-4.089 5.451,-5.451 5.45,-14.289 -0.001,-19.739 C 96.541,189.974 85.438,163.168 85.438,134.656 85.437,75.8 133.321,27.916 192.177,27.916 c 28.509,0 55.313,11.102 75.472,31.26 5.451,5.451 14.289,5.45 19.739,-0.001 5.451,-5.451 5.451,-14.289 -10e-4,-19.739 C 261.956,14.005 228.143,0 192.177,0 156.208,0 122.394,14.007 96.961,39.439 71.528,64.871 57.522,98.687 57.522,134.655 c 0,35.969 14.007,69.785 39.442,95.218 2.725,2.726 6.297,4.089 9.869,4.089 z"
132 |              id="path873"
133 |              style="fill:#ffffff" />
134 |         </g>
135 |       </g>
136 |       <g
137 |          id="g879"
138 |          style="fill:#ffffff" />
139 |       <g
140 |          id="g881"
141 |          style="fill:#ffffff" />
142 |       <g
143 |          id="g883"
144 |          style="fill:#ffffff" />
145 |       <g
146 |          id="g885"
147 |          style="fill:#ffffff" />
148 |       <g
149 |          id="g887"
150 |          style="fill:#ffffff" />
151 |       <g
152 |          id="g889"
153 |          style="fill:#ffffff" />
154 |       <g
155 |          id="g891"
156 |          style="fill:#ffffff" />
157 |       <g
158 |          id="g893"
159 |          style="fill:#ffffff" />
160 |       <g
161 |          id="g895"
162 |          style="fill:#ffffff" />
163 |       <g
164 |          id="g897"
165 |          style="fill:#ffffff" />
166 |       <g
167 |          id="g899"
168 |          style="fill:#ffffff" />
169 |       <g
170 |          id="g901"
171 |          style="fill:#ffffff" />
172 |       <g
173 |          id="g903"
174 |          style="fill:#ffffff" />
175 |       <g
176 |          id="g905"
177 |          style="fill:#ffffff" />
178 |       <g
179 |          id="g907"
180 |          style="fill:#ffffff" />
181 |     </g>
182 |   </g>
183 | </svg>
184 | 


--------------------------------------------------------------------------------
/src/charts/LineChart.js:
--------------------------------------------------------------------------------
 1 | import { Line, mixins } from 'vue-chartjs'
 2 | const { reactiveProp } = mixins
 3 | 
 4 | export default {
 5 |   extends: Line,
 6 |   mixins: [reactiveProp],
 7 |   props: ['options'],
 8 |   mounted () {
 9 |     // this.chartData is created in the mixin.
10 |     // If you want to pass options please create a local options object
11 |     this.renderChart(this.chartData, this.options)
12 |   }
13 | }


--------------------------------------------------------------------------------
/src/components/DynamicTemplate.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-runtime-template :template="customTemplate"></v-runtime-template>
 3 | </template>
 4 | 
 5 | <script>
 6 | import VRuntimeTemplate from "v-runtime-template";
 7 | 
 8 | export default {
 9 |   components: {
10 |     VRuntimeTemplate
11 |   },
12 |   props: [
13 |     "packet",
14 |     "customTemplate"
15 |   ],
16 |   methods: {
17 |     round(x){
18 |       if (x)
19 |         return Math.round(x);
20 |       return null;
21 |     },
22 |     fixed2(x){
23 |       if (x)
24 |         return x.toFixed(2);
25 |       return null;
26 |     },
27 |     fixed3(x){
28 |       if (x)
29 |         return x.toFixed(3);
30 |       return null;
31 |     },
32 |     toHex(data){
33 |       if (data.startsWith("VGlueUdTLXRlc3Q"))
34 |         return "TinyGS Test Packet"
35 |       
36 |       if (data.startsWith("RXJyb3JfQ1JD"))
37 |         return "CRC ERROR"
38 | 
39 |       var decodedData = Buffer.from(data, 'base64')
40 |       let packetData = "";
41 |       for (var i = 0; i < decodedData.length; i++) {
42 |           if (decodedData[i] <= 0xF) { packetData += "0"; }
43 |           else { packetData += ""; }
44 |           packetData += decodedData[i].toString(16) + "";
45 |       }
46 |       return packetData;
47 |     }
48 |   },
49 |   computed: {
50 |     h() {
51 |       let packet = this.packet;
52 |       if (packet && packet.parsed && packet.parsed.header)
53 |         return packet.parsed.header
54 |       return null
55 |     },
56 |     p() {
57 |       let packet = this.packet;
58 |       if (packet && packet.parsed && packet.parsed.payload)
59 |         return packet.parsed.payload
60 |       return null
61 |     },
62 |   }
63 | }
64 | </script>
65 | 
66 | <style>
67 | 
68 | </style>


--------------------------------------------------------------------------------
/src/components/EditStation.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-dialog v-model="modal" max-width="800px">
 3 |     <template v-slot:activator="{ on }">
 4 |       <v-btn class="mt-2 success" slot="activator" v-on="on">Edit</v-btn>
 5 |     </template>
 6 |     
 7 |     <v-card>
 8 |       <v-card-title><h2>Edit station parameters</h2></v-card-title>
 9 |       <v-card-text class="text-center">
10 |         <p>Here you can configure the parameters of your station. Currently only predefined satellite configurations are supported but we are working on the full parameter list!</p>
11 |         <v-form>
12 |           <v-select v-model="satellite" :items="satellites" label="Select a satellite"></v-select>
13 |           <v-text-field v-model="config" label="OR Write your own config"></v-text-field>
14 |           <v-btn @click="send()" color="primary">Send</v-btn>
15 |         </v-form>
16 |       </v-card-text>
17 |     </v-card>
18 |   </v-dialog>
19 | </template>
20 | 
21 | <script>
22 | const axios = require("axios");
23 | 
24 | export default {
25 |   name: "EditStation",
26 |   props: [
27 |     "station",
28 |     "modemConf"
29 |   ],
30 |   data(){
31 |     return {
32 |       modal: null,
33 |       satellite: '',
34 |       config: '',
35 |       satellites: null
36 |     }
37 |   },
38 |   beforeMount() {
39 |     this.getSatellites();
40 |   },
41 |   methods: {
42 |     async getSatellites() {
43 |       const { data } = await axios.get(`https://api.tinygs.com/v1/satellites/?status=Supported`);
44 |       console.log(data);
45 |       
46 |       this.satellites = data.map(x => x.name);
47 |     },
48 |     async send() {
49 |       let params = {
50 |         satellite: this.satellite,
51 |         config: this.config
52 |       }
53 |       let config = {
54 |         headers: {
55 |           sessionToken: localStorage.sessionToken,
56 |           userId: localStorage.userId
57 |         }
58 |       }
59 |       console.log(this.modemConf);
60 |       try {
61 |         await axios.post(`https://api.tinygs.com/v1/station/${this.station}`, params, config);
62 |       } catch (err) {
63 |         console.log(JSON.stringify(err))
64 |       }
65 |       this.$emit("sent");
66 |       this.modal = false
67 |     }
68 |   }
69 | }
70 | </script>
71 | 
72 | <style>
73 | 
74 | </style>


--------------------------------------------------------------------------------
/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <v-container>
  3 |     <v-row class="text-center">
  4 |       <v-col cols="12">
  5 |         <v-img
  6 |           :src="require('../assets/logo.svg')"
  7 |           class="my-3"
  8 |           contain
  9 |           height="200"
 10 |         />
 11 |       </v-col>
 12 | 
 13 |       <v-col class="mb-4">
 14 |         <h1 class="display-2 font-weight-bold mb-3">
 15 |           Welcome to Vuetify
 16 |         </h1>
 17 | 
 18 |         <p class="subheading font-weight-regular">
 19 |           For help and collaboration with other Vuetify developers,
 20 |           <br>please join our online
 21 |           <a
 22 |             href="https://community.vuetifyjs.com"
 23 |             target="_blank"
 24 |           >Discord Community</a>
 25 |         </p>
 26 |       </v-col>
 27 | 
 28 |       <v-col
 29 |         class="mb-5"
 30 |         cols="12"
 31 |       >
 32 |         <h2 class="headline font-weight-bold mb-3">
 33 |           What's next?
 34 |         </h2>
 35 | 
 36 |         <v-row justify="center">
 37 |           <a
 38 |             v-for="(next, i) in whatsNext"
 39 |             :key="i"
 40 |             :href="next.href"
 41 |             class="subheading mx-3"
 42 |             target="_blank"
 43 |           >
 44 |             {{ next.text }}
 45 |           </a>
 46 |         </v-row>
 47 |       </v-col>
 48 | 
 49 |       <v-col
 50 |         class="mb-5"
 51 |         cols="12"
 52 |       >
 53 |         <h2 class="headline font-weight-bold mb-3">
 54 |           Important Links
 55 |         </h2>
 56 | 
 57 |         <v-row justify="center">
 58 |           <a
 59 |             v-for="(link, i) in importantLinks"
 60 |             :key="i"
 61 |             :href="link.href"
 62 |             class="subheading mx-3"
 63 |             target="_blank"
 64 |           >
 65 |             {{ link.text }}
 66 |           </a>
 67 |         </v-row>
 68 |       </v-col>
 69 | 
 70 |       <v-col
 71 |         class="mb-5"
 72 |         cols="12"
 73 |       >
 74 |         <h2 class="headline font-weight-bold mb-3">
 75 |           Ecosystem
 76 |         </h2>
 77 | 
 78 |         <v-row justify="center">
 79 |           <a
 80 |             v-for="(eco, i) in ecosystem"
 81 |             :key="i"
 82 |             :href="eco.href"
 83 |             class="subheading mx-3"
 84 |             target="_blank"
 85 |           >
 86 |             {{ eco.text }}
 87 |           </a>
 88 |         </v-row>
 89 |       </v-col>
 90 |     </v-row>
 91 |   </v-container>
 92 | </template>
 93 | 
 94 | <script>
 95 |   export default {
 96 |     name: 'HelloWorld',
 97 | 
 98 |     data: () => ({
 99 |       ecosystem: [
100 |         {
101 |           text: 'vuetify-loader',
102 |           href: 'https://github.com/vuetifyjs/vuetify-loader',
103 |         },
104 |         {
105 |           text: 'github',
106 |           href: 'https://github.com/vuetifyjs/vuetify',
107 |         },
108 |         {
109 |           text: 'awesome-vuetify',
110 |           href: 'https://github.com/vuetifyjs/awesome-vuetify',
111 |         },
112 |       ],
113 |       importantLinks: [
114 |         {
115 |           text: 'Documentation',
116 |           href: 'https://vuetifyjs.com',
117 |         },
118 |         {
119 |           text: 'Chat',
120 |           href: 'https://community.vuetifyjs.com',
121 |         },
122 |         {
123 |           text: 'Made with Vuetify',
124 |           href: 'https://madewithvuejs.com/vuetify',
125 |         },
126 |         {
127 |           text: 'Twitter',
128 |           href: 'https://twitter.com/vuetifyjs',
129 |         },
130 |         {
131 |           text: 'Articles',
132 |           href: 'https://medium.com/vuetify',
133 |         },
134 |       ],
135 |       whatsNext: [
136 |         {
137 |           text: 'Explore components',
138 |           href: 'https://vuetifyjs.com/components/api-explorer',
139 |         },
140 |         {
141 |           text: 'Select a layout',
142 |           href: 'https://vuetifyjs.com/getting-started/pre-made-layouts',
143 |         },
144 |         {
145 |           text: 'Frequently Asked Questions',
146 |           href: 'https://vuetifyjs.com/getting-started/frequently-asked-questions',
147 |         },
148 |       ],
149 |     }),
150 |   }
151 | </script>
152 | 


--------------------------------------------------------------------------------
/src/components/HexView.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="hexview">
 3 | 
 4 |     <pre class="hexdump">{{ content }}</pre>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {
10 |   props: {
11 |     raw: ArrayBuffer,
12 |   },
13 |   data() {
14 |     return {
15 |       hex: true,
16 |       windowWidth: window.innerWidth,
17 |     }
18 |   },
19 |   mounted() {
20 |     this.$nextTick(() => {
21 |       window.addEventListener('resize', this.onResize);
22 |     })
23 |   },
24 |   methods: {
25 |     onResize() {
26 |       this.windowWidth = window.innerWidth
27 |     }
28 |   },
29 |   computed: {
30 |     content() {
31 |       if (this.raw && this.raw.byteLength)
32 |         return this.hex ? this.hexdump : new TextDecoder('utf8').decode(this.raw)
33 |       else
34 |         return '(empty)'
35 |     },
36 |     hexdump() {
37 |       let dump
38 |       let lineLen
39 |       if (this.windowWidth > 1290) {
40 |         dump = '      0  1  2  3  4  5  6  7  8  9  A  B  C  D  E  F 0123456789ABCDEF'
41 |         lineLen = 16
42 |       }
43 |       else {
44 |         dump = '      0  1  2  3  4  5  6  7  8 012345678'
45 |         lineLen = 9
46 |       }
47 |       
48 | 
49 |       let view = new DataView(this.raw)
50 |       for (let i = 0; i < this.raw.byteLength; i += lineLen) {
51 |         dump += `\n${('0000' + i.toString(16).toUpperCase()).slice(-4)} `
52 |         for (let j = 0; j < lineLen; j++) {
53 |           let ch = i + j > this.raw.byteLength - 1 ?
54 |             '  ' :
55 |             (0 + view.getUint8(i + j).toString(16).toUpperCase()).slice(-2)
56 |           dump += `${ch} `
57 |         }
58 |         dump += String.fromCharCode.apply(null,
59 |           new Uint8Array(this.raw.slice(i, i + lineLen)))
60 |           .replace(/[^\x20-\x7E]/g, '.')
61 |       }
62 |       return dump
63 |     },
64 |   }
65 | }
66 | </script>
67 | 
68 | <style>
69 | .hexview {
70 |   overflow: auto;
71 | }
72 | 
73 | </style>


--------------------------------------------------------------------------------
/src/components/Navbar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <nav>
 3 |     <v-app-bar app color="primary" dark height="70">
 4 |       <v-app-bar-nav-icon @click="drawer=!drawer" class="mr-4"></v-app-bar-nav-icon>
 5 | 
 6 |       <div class="flex-grow-1 d-flex justify-center">
 7 |         <div class="d-flex">
 8 |           <v-img contain transition="fade-transition" max-height="60" alt="TinyGS logo" src="../assets/logo.svg" />
 9 |           <v-chip
10 |             class="ma-2 text-button font-weight-black"
11 |             color="green"
12 |             text-color="white"
13 |           >
14 |             BETA
15 |           </v-chip>
16 |         </div>
17 |       </div>
18 | 
19 |       <v-btn icon class="mr-2" v-if="user">
20 |         <v-icon @click="$router.push(`/user/${user}`)" large>mdi-account-circle</v-icon>
21 |       </v-btn>
22 |       <v-btn @click="logout()" color="primary" class="lighten-1" depressed v-if="user">
23 |         <span>Sign Out</span>
24 |         <v-icon right>mdi-exit-to-app</v-icon>
25 |       </v-btn>
26 |       <!--<Login /> -->
27 |     </v-app-bar >
28 |     <v-navigation-drawer disable-resize-watcher v-model="drawer" app color="primary" class="darken-1">
29 |       <div class="d-flex justify-center mt-3 mb-4">
30 |         <v-img contain max-height="90" transition="scale-transition" alt="TinyGS logo" src="../assets/logo.svg" />
31 |       </div>
32 |       <v-divider color="white"></v-divider>
33 |       <v-list dense>
34 |         <v-list-item-group flat class="white--text">
35 |           <v-list-item dark v-for="link in links" :key="link.text" router :to="link.path">
36 |             <v-list-item-icon>
37 |               <v-icon v-text="link.icon"></v-icon>
38 |             </v-list-item-icon>
39 |             <v-list-item-content>
40 |               <v-list-item-title v-text="link.text"></v-list-item-title>
41 |             </v-list-item-content>
42 |           </v-list-item>
43 |         </v-list-item-group>
44 |       </v-list>
45 |     </v-navigation-drawer>
46 |   </nav>
47 | </template>
48 | 
49 | <script>
50 | 
51 | 
52 | export default {
53 |   props: [
54 |     "user"
55 |   ],
56 |   data() {
57 |     return {
58 |       drawer: false,
59 |       links: [
60 |         { text: 'Home', icon: 'mdi-home', path: '/' },
61 |         { text: 'Stations', icon: '$station', path: '/stations' },
62 |         { text: 'Satellites', icon: '$satellite', path: '/satellites' },
63 |         { text: 'Packets', icon: 'mdi-file-document-outline', path: '/packets' },
64 |       ],
65 |     }
66 |   },
67 |   methods: {
68 |     logout(){
69 |       localStorage.removeItem("userId")
70 |       localStorage.removeItem("sessionToken")
71 |       this.$emit("logout", true)
72 |     }
73 |   }
74 | }
75 | </script>
76 | 
77 | <style>
78 | 
79 | </style>


--------------------------------------------------------------------------------
/src/components/PacketMap.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 
 3 |   <div>
 4 |     <l-map
 5 |       :zoom="zoom"
 6 |       :center="center"
 7 |       style="height: 500px; width: 100%; z-index:0;"
 8 |     >
 9 |       <l-tile-layer
10 |         :url="url"
11 |         :attribution="attribution"
12 |       />
13 |       <l-circle v-if="packet.satPos"
14 |         :lat-lng="circle.center"
15 |         :radius="circle.radius"
16 |       >
17 |         
18 |       </l-circle>
19 | 
20 |       <l-marker v-if="packet.satPos" :lat-lng="[packet.satPos.lat, packet.satPos.lng]" :icon="satelliteIcon"> 
21 | 
22 |         <l-popup :content="`<h3>${packet.satDisplayName}</h3>`" />
23 |       </l-marker>
24 | 
25 |       <l-marker v-for="station in packet.stations" :key="`${station.name}@${station.userId}`" :lat-lng="station.location" :icon="(station.crc_error)?stationErrorIcon:stationActiveIcon">
26 | 
27 |         <l-popup :content="`<h3>${station.name}</h2><br>
28 |                             <strong>Distance:</strong> ${station.distance?station.distance.toFixed(2):0} Km<br>
29 |                             <strong>RSSI:</strong> ${station.receptionParams.rssi} dBm<br>
30 |                             <strong>SNR:</strong> ${station.receptionParams.snr} Db<br>
31 |                             <strong>Freq error:</strong> ${station.receptionParams.frequency_error} Hz<br>`" />
32 |       </l-marker>
33 | 
34 |     </l-map>
35 |   </div>
36 | </template>
37 | 
38 | <script>
39 | import {
40 |   LMap,
41 |   LTileLayer,
42 |   LCircle,
43 |   LPopup,
44 |   LMarker,
45 | } from "vue2-leaflet";
46 | import { latLng, icon } from "leaflet";
47 |   
48 | 
49 | export default {
50 |   name: "PacketMap",
51 |   components: {
52 |     LMap,
53 |     LTileLayer,
54 |     LCircle,
55 |     LPopup,
56 |     LMarker
57 |   },
58 |   props: [
59 |       "packet"
60 |   ],
61 |   data() {
62 |     return {
63 |       satelliteIcon: icon({
64 |                         iconUrl: 'https://static.tinygs.com/satellite_blue.png',
65 |                         iconSize:     [32, 32], // size of the icon
66 |                         iconAnchor:   [16, 16], // point of the icon which will correspond to marker's location
67 |                     }),
68 |       stationActiveIcon: icon({
69 |                         iconUrl: 'https://static.tinygs.com/station_icon_green.png',
70 |                         iconSize:     [32, 32], // size of the icon
71 |                         iconAnchor:   [16, 16], // point of the icon which will correspond to marker's location
72 |                     }),
73 |       stationErrorIcon: icon({
74 |                         iconUrl: 'https://static.tinygs.com/station_icon_orange.png',
75 |                         iconSize:     [32, 32], // size of the icon
76 |                         iconAnchor:   [16, 16], // point of the icon which will correspond to marker's location
77 |                     }),
78 |       zoom: 3,
79 |       center: [this.packet.satPos?this.packet.satPos.lat:this.packet.stations[0].location[0], this.packet.satPos?this.packet.satPos.lng:this.packet.stations[0].location[1]],
80 |       circle: {
81 |         center: this.packet.satPos? latLng(this.packet.satPos.lat, this.packet.satPos.lng):[0,0],
82 |         radius: (this.packet.footPrint?this.packet.footPrint*500:3000)
83 |       },
84 |       url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
85 |       attribution:
86 |         '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
87 |     };
88 |   },
89 | };
90 | </script>
91 | 


--------------------------------------------------------------------------------
/src/components/PacketRow.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <v-card flat class="pa-7 clickable" :to="`/packet/${packet.id}`">
 3 |   <v-layout row wrap>
 4 |   <v-flex xs12 sm6 md6 lg3 xl2>
 5 |   <h3><v-icon>$satelliteDark</v-icon> {{packet.parsed?packet.satDisplayName:"Unknown"}}</h3>
 6 |   <div>{{`${dateFormat(packet.serverTime)} (${dateSince(packet.serverTime)})`}}</div>
 7 |   </v-flex>
 8 |   <v-flex xs6 sm3 md3 lg2 xl1>
 9 |   <div class="caption grey--text">Mode</div>
10 |   <div>{{`${packet.mode}@${packet.freq}`}}</div>
11 |   </v-flex>
12 |   <v-flex xs6 sm3 md3 lg1 xl1>
13 |   <div class="caption grey--text">Received by</div>
14 |   <div>{{`${packet.stationNumber} stations`}}</div>
15 |   </v-flex>
16 |   <v-flex xs12 sm12 md12 lg6 xl8 v-if="packet.parsed && customTemplate">
17 |     <DynamicTemplate class="pa-3" :packet="packet" :customTemplate="customTemplate" />
18 |   </v-flex>
19 |   <v-flex class="d-none d-xl-inline-block xl8" v-else>
20 |     <div class="caption grey--text">Data</div>
21 |     <div>{{toHex(packet.raw)}}</div>
22 |   </v-flex>
23 |   </v-layout>
24 | </v-card>
25 | </template>
26 | 
27 | <script>
28 | import moment from 'moment'
29 | import DynamicTemplate from './DynamicTemplate.vue'
30 | 
31 | export default {
32 |   components: {
33 |     DynamicTemplate
34 |   },
35 |   name: "PacketRow",
36 |   props: [
37 |     "packet",
38 |     "customTemplate"
39 |   ],
40 |   methods: {
41 |     dateFormat(time){
42 |       return moment(time).format("lll")
43 |     },
44 |     dateSince(time) {
45 |       return moment(time).fromNow()
46 |     },
47 |     toHex(data){
48 |       if (data.startsWith("VGlueUdTLXRlc3Q"))
49 |         return "TinyGS Test Packet"
50 |       
51 |       if (data.startsWith("RXJyb3JfQ1JD"))
52 |         return "CRC ERROR"
53 | 
54 |       var decodedData = Buffer.from(data, 'base64')
55 |       let packetData = "";
56 |       for (var i = 0; i < decodedData.length; i++) {
57 |           if (decodedData[i] <= 0xF) { packetData += "0"; }
58 |           else { packetData += ""; }
59 |           packetData += decodedData[i].toString(16) + "";
60 |       }
61 |       return packetData;
62 |     }
63 |   }
64 | }
65 | </script>
66 | 
67 | <style>
68 | 
69 | </style>


--------------------------------------------------------------------------------
/src/components/Station.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-card flat :class="`pa-7 clickable ${(station.status ? 'online' : 'offline')}`" :to="`/station/${station.name}@${station.userId}`">
 3 |   <v-layout row wrap>
 4 |     <v-flex xs6 sm4 md3 lg2 xl2>
 5 |       <h3 class="caption grey--text">Station Name</h3>
 6 |       <div ><strong>{{station.name}} </strong> </div>
 7 |     </v-flex>
 8 |     <v-flex xs6 sm4 md3 lg2 xl1>
 9 |       <div class="caption grey--text text-center">Listening</div>
10 |       <div class="text-center">{{station.satellite}}</div>
11 |     </v-flex>
12 |     <v-flex xs6 sm4 md3 lg1 xl1>
13 |       <div class="caption grey--text text-center">Version</div>
14 |       <div class="text-center">{{station.version}}</div>
15 | 
16 |     </v-flex>
17 |     <v-flex xs6 sm4 md3 lg1 xl1>
18 |       <div v-if="station.status == 1" class="caption grey--text text-center"> 
19 |         Last packet </div>
20 |         <div v-else class="caption grey--text text-center">
21 |         Last seen</div>  
22 |     <div v-if="station.status == 1" class="text-center"> 
23 |         {{dateSince(station.lastPacketTime)}}</div>
24 |         <div v-else class="text-center">
25 |         {{dateSince(station.lastSeen)}}</div>  
26 |     </v-flex>
27 | 
28 |     <v-flex flex-grow-1>
29 |       <div class="caption grey--text text-center">Auto tuning</div>
30 |       <div class="text-center"><v-icon>{{station.remoteTune?"mdi-check":"mdi-cancel"}}</v-icon></div>
31 |     </v-flex>
32 |     <v-flex flex-grow-1>
33 |       <div class="caption grey--text text-center">Test mode</div>
34 |       <div class="text-center">{{station.test?"ON":"OFF"}}</div>
35 |     </v-flex>
36 |     <v-flex flex-grow-1>
37 |       <div class="caption grey--text text-center">Telemetry packets</div>
38 |       <div class="text-center">{{station.telemetryPackets}}</div>
39 |     </v-flex>
40 |     <v-flex flex-grow-1 >
41 |       <div class="caption grey--text text-center">Confirmed packets</div>
42 |       <div class="text-center">{{station.confirmedPackets}}</div>
43 |     </v-flex>
44 |      <v-flex v-if="station.local_ip" flex-grow-1 class="text-right">
45 |         <v-btn color="primary" :disabled="station.status==0" class="lighten-1 text-center mt-3" depressed @click.stop=""  :href="`http://${station.local_ip}/`" target="_blank" >
46 |         <span>{{station.local_ip}}</span>
47 |         <v-icon right>mdi-open-in-new</v-icon>
48 |         </v-btn>
49 |     </v-flex>
50 |   </v-layout>
51 | </v-card>
52 | </template>
53 | 
54 | <script>
55 | import moment from 'moment'
56 | 
57 | export default {
58 |   props: [
59 |     "station"
60 |   ],
61 |   methods: {
62 |     dateSince(time) {
63 |       if (!time) { return "Never"}
64 |       return moment(time).fromNow()
65 |     },
66 |   }
67 | }
68 | </script>
69 | 
70 | <style>
71 | .online {
72 |   border-left: 4px solid green !important;
73 | }
74 | 
75 | .offline {
76 |   border-left: 4px solid red !important;
77 | }
78 | 
79 | </style>


--------------------------------------------------------------------------------
/src/components/StationRx.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-card flat class="pa-7 clickable" :to="`/station/${station.name}@${station.userId}`">
 3 |   <v-layout row wrap>
 4 |     <v-flex xs12 sm12 md12 lg2 xl2>
 5 |       <h3 class="caption grey--text">Station Name</h3>
 6 |       <div ><strong>📡 {{station.name}}</strong></div>
 7 |     </v-flex>
 8 |     <v-flex xs6 sm4 md2 lg1 xl1>
 9 |       <div class="caption grey--text text-center">📏 Distance</div>
10 |       <div class="text-center">{{(station.distance || 0).toFixed(0)}} Km</div>
11 |     </v-flex>
12 |     <v-flex xs6 sm4 md2 lg1 xl1>
13 |       <div class="caption grey--text text-center">📐 Elevation</div>
14 |       <div class="text-center">{{(station.elevation || 0).toFixed(2)}}º</div>
15 |     </v-flex>
16 |     <v-flex xs6 sm4 md4 lg2 xl2>
17 |       <div class="caption grey--text text-center">🕒 Time</div>
18 |       <div class="text-center">{{formatTime(station.usec_time)}}</div>
19 |     </v-flex>
20 |     <v-flex xs6 sm4 md2 lg1 xl1>
21 |       <div class="caption grey--text text-center">📶 RSSI</div>
22 |       <div class="text-center">{{station.receptionParams.rssi}} dBm</div>
23 |     </v-flex>
24 |     <v-flex xs6 sm4 md3 lg1 xl1>
25 |       <div class="caption grey--text text-center">SNR</div>
26 |       <div class="text-center">{{station.receptionParams.snr}} dB</div>
27 |     </v-flex>
28 |     <v-flex xs6 sm4 md2 lg1 xl1>
29 |       <div class="caption grey--text text-center">Predicted Doppler</div>
30 |       <div class="text-center">{{((station.doppler * freq * 1000000 - freq * 1000000) || 0).toFixed(2)  || ""}} Hz</div>
31 |     </v-flex>
32 |     <v-flex xs6 sm4 md4 lg2 xl2>
33 |       <div class="caption grey--text text-center">Frequency Error</div>
34 |       <div class="text-center">{{station.receptionParams.frequency_error}} Hz</div>
35 |     </v-flex>
36 |     <v-flex xs6 sm4 md3 lg1 xl1>
37 |       <div class="caption grey--text text-center">CRC Error</div>
38 |       <div class="text-center"><v-icon color="red">{{station.crc_error?"mdi-checkbox-blank-circle":""}}</v-icon></div>
39 |     </v-flex>
40 | 
41 |   </v-layout>
42 | </v-card>
43 | </template>
44 | 
45 | <script>
46 | import moment from 'moment'
47 | 
48 | export default {
49 |   props: [
50 |     "station",
51 |     "freq"
52 |   ],
53 |   methods: {
54 |     dateSince(time) {
55 |       return moment(time).fromNow()
56 |     },
57 |     formatTime(time) {
58 |       return moment(time/1000).format('HH:mm:ss.SSS');
59 |     }
60 |   }
61 | }
62 | </script>
63 | 
64 | <style>
65 | 
66 | </style>


--------------------------------------------------------------------------------
/src/components/Telemetry.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   
 3 | </template>
 4 | 
 5 | <script>
 6 | import DynamicTemplate from './DynamicTemplate.vue'
 7 | 
 8 | export default {
 9 |   components: {
10 |     DynamicTemplate
11 |   },
12 |   name: "Telemetry",
13 |   props: [
14 |     "packet",
15 |     "customTemplate"
16 |   ],
17 | }
18 | </script>
19 | 
20 | 
21 | <style>
22 | 
23 | </style>


--------------------------------------------------------------------------------
/src/components/Worldmap.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 
  3 |   <div>
  4 |     <l-map
  5 |       @popupclose="focusSatellite=null"
  6 |       :zoom="zoom"
  7 |       :center="center"
  8 |       style="height: 100%; width: 100%; z-index:0;"
  9 |     >
 10 |       <l-tile-layer
 11 |         :url="url"
 12 |         :attribution="attribution"
 13 |       />
 14 | 
 15 |       <l-marker v-for="satellite in satellites" :key="satellite.name" :lat-lng="[satellite.lat, satellite.lng]" :icon="satelliteIcon" @click="focusSatellite=satellite.name"> 
 16 |         <l-popup><h3><router-link :to='`/satellite/${satellite.name}`'>{{satellite.displayName}}</router-link></h3>Showing stations currently<br>listening to this satellite.</l-popup>
 17 |         <l-tooltip :class="focusSatellite?'hidden':''" :options="{permanent: true, offset: [12,0], opacity: 0.8}" > {{satellite.displayName}}  </l-tooltip>
 18 |       </l-marker>
 19 | 
 20 |       <l-marker v-for="station in stations" :key="`${station.name}@${station.userId}`" :visible="!focusSatellite || focusSatellite == station.satellite" :lat-lng="station.location" :icon="(station.status == 0)?stationInactiveIcon:stationActiveIcon" :class="(station.status == 0)?'inactive':'active'" >
 21 | 
 22 |         <l-popup><h3><router-link :to='`/station/${station.name}@${station.userId}`'>{{station.name}}</router-link></h3><br>
 23 |                             <strong>{{(station.status==0)?'Last seen':'Last packet'}}:</strong> {{(station.status==0)?formatDate(station.lastSeen):formatDate(station.lastPacketTime)}} <br>
 24 |                             <strong>Version:</strong> {{station.version}} <br>
 25 |                             <strong>Status:</strong> {{(station.status==0)?'Offline':'Online'}} <br>
 26 |                             <strong>Listening:</strong> {{station.satellite}} <br> </l-popup>
 27 |       
 28 |       </l-marker>
 29 |     </l-map>
 30 |   </div>
 31 | </template>
 32 | 
 33 | <script>
 34 | import {
 35 |   LMap,
 36 |   LTileLayer,
 37 |   LPopup,
 38 |   LMarker,
 39 |   LTooltip
 40 | } from "vue2-leaflet";
 41 | import { icon } from "leaflet";
 42 | const axios = require("axios");
 43 | import moment from 'moment'
 44 |   
 45 | 
 46 | export default {
 47 |   name: "Worldmap",
 48 |   components: {
 49 |     LMap,
 50 |     LTileLayer,
 51 |     LPopup,
 52 |     LMarker,
 53 |     LTooltip
 54 |   },
 55 |   props: [
 56 |       "packet"
 57 |   ],
 58 |   data() {
 59 |     return {
 60 |       satelliteIcon: icon({
 61 |                         iconUrl: 'https://static.tinygs.com/satellite_blue.png',
 62 |                         iconSize:     [32, 32], // size of the icon
 63 |                         iconAnchor:   [16, 16], // point of the icon which will correspond to marker's location
 64 |                     }),
 65 |       stationActiveIcon: icon({
 66 |                         iconUrl: 'https://static.tinygs.com/station_icon_green.png',
 67 |                         iconSize:     [32, 32], // size of the icon
 68 |                         iconAnchor:   [16, 16], // point of the icon which will correspond to marker's location
 69 |                     }),
 70 |       stationInactiveIcon: icon({
 71 |                         iconUrl: 'https://static.tinygs.com/station_icon_red.png',
 72 |                         iconSize:     [32, 32], // size of the icon
 73 |                         iconAnchor:   [16, 16], // point of the icon which will correspond to marker's location
 74 |                     }),
 75 |       zoom: 3,
 76 |       center: [35, 0],
 77 |       url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
 78 |       attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
 79 |       stations: null,
 80 |       satellites: null,
 81 |       focusSatellite: null,
 82 |     };
 83 |   },
 84 |   beforeMount(){
 85 |     this.getSatellites()
 86 |     this.getStations()
 87 |     //setInterval(this.getSatellites, 10000);
 88 |     //setInterval(this.getStations, 10000);
 89 |   },
 90 |   methods:{
 91 |     async getStations() {
 92 |       const { data } = await axios.get("https://api.tinygs.com/v1/stations");
 93 |       //console.log(data);
 94 |       this.stations = data;
 95 |     },
 96 |     async getSatellites() {
 97 |       const { data } = await axios.get("https://api.tinygs.com/v1/satellitesWorldmap");
 98 |       //console.log(data);
 99 |       this.satellites = data;
100 |     },
101 |     formatDate(time) {
102 |       if (!time) { return "Never"}
103 |       return moment(time).fromNow()
104 |     },
105 |   },
106 |   computed:{ 
107 |     focusStations: function (){
108 |       if (!this.focusSatellite) return this.stations
109 |       let root=this 
110 |       return this.stations.filter((x)=>x.satellite==root.focusSatellite)
111 |     }
112 |   }
113 | 
114 | };
115 | </script>
116 | 
117 | <style >
118 |   .leaflet-marker-icon[src*="satellite_blue.png"] {
119 |     z-index: 300 !important;
120 |   }
121 | 
122 |   .leaflet-marker-icon[src*="station_icon_green.png"] {
123 |     z-index: 200 !important;
124 |   }
125 | 
126 |   .leaflet-marker-icon[src*="station_icon_red.png"] {
127 |     z-index: 199 !important;
128 |   }
129 | 
130 |   .hidden {
131 |     display: none;
132 |   }
133 | </style>
134 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import router from './router'
 4 | import store from './store'
 5 | import vuetify from './plugins/vuetify';
 6 | 
 7 | 
 8 | 
 9 | Vue.config.productionTip = false
10 | 
11 | new Vue({
12 |   router,
13 |   store,
14 |   vuetify,
15 |   render: h => h(App)
16 | }).$mount('#app')
17 | 


--------------------------------------------------------------------------------
/src/plugins/vuetify.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import Vuetify, { VLayout, VFlex } from 'vuetify/lib';
 3 | import SatelliteIcon from '@/Icons/SatelliteIcon.vue'
 4 | import StationIcon from '@/Icons/StationIcon.vue'
 5 | import SatelliteIconDark from '@/Icons/SatelliteIconDark.vue'
 6 | 
 7 | 
 8 | Vue.use(Vuetify, {
 9 |     components: { VLayout, VFlex },
10 | });
11 | 
12 | export default new Vuetify({
13 |     icons: {
14 |         values: {
15 |             satellite: {
16 |                 component: SatelliteIcon
17 |             },
18 |             satelliteDark: {
19 |                 component: SatelliteIconDark
20 |             },
21 |             station: {
22 |                 component: StationIcon
23 |             }
24 |         }
25 |     }
26 | });
27 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
  1 | import Vue from 'vue'
  2 | import VueRouter from 'vue-router'
  3 | import Home from '../views/Home.vue'
  4 | import Satellites from '../views/Satellites.vue'
  5 | import Satellite from '../views/Satellite.vue'
  6 | import Packet from '../views/Packet.vue'
  7 | import Packets from '../views/Packets.vue'
  8 | import Station from '../views/Station.vue'
  9 | import User from '../views/User.vue'
 10 | import AprilFools from '../views/AprilFools.vue'
 11 | 
 12 | Vue.use(VueRouter)
 13 | 
 14 | const routes = [
 15 |   {
 16 |     path: '/',
 17 |     name: 'Home',
 18 |     component: Home,
 19 |     meta: {
 20 |       title: 'Home - TinyGS'
 21 |     }
 22 |   },
 23 |   {
 24 |     path: '/stations',
 25 |     name: 'Stations',
 26 |     // route level code-splitting
 27 |     // this generates a separate chunk (about.[hash].js) for this route
 28 |     // which is lazy-loaded when the route is visited.
 29 |     component: () => import(/* webpackChunkName: "about" */ '../views/Stations.vue'),
 30 |     meta: {
 31 |       title: 'Stations - TinyGS'
 32 |     }
 33 |   },
 34 |   {
 35 |     path: '/satellites',
 36 |     name: 'Satellites',
 37 |     component: Satellites,
 38 |     meta: {
 39 |       title: 'Satellites - TinyGS'
 40 |     }
 41 |   },
 42 |   {
 43 |     path: '/satellite/:name',
 44 |     name: 'Satellite',
 45 |     component: Satellite,
 46 |     meta: {
 47 |       title: 'Satellite - TinyGS'
 48 |     }
 49 |   },
 50 |   {
 51 |     path: '/packet/:id',
 52 |     name: 'Packet',
 53 |     component: Packet,
 54 |     meta: {
 55 |       title: 'Packet View - TinyGS'
 56 |     }
 57 |   },
 58 |   {
 59 |     path: '/packets',
 60 |     name: 'Packets',
 61 |     component: Packets,
 62 |     meta: {
 63 |       title: 'Last received packets - TinyGS'
 64 |     }
 65 |   },
 66 |   {
 67 |     path: '/station/:id',
 68 |     name: 'Station',
 69 |     component: Station,
 70 |     meta: {
 71 |       title: 'Station Console - TinyGS'
 72 |     }
 73 |   },
 74 |   {
 75 |     path: '/user/:id',
 76 |     name: 'User',
 77 |     component: User,
 78 |     meta: {
 79 |       title: 'User Console - TinyGS'
 80 |     }
 81 |   },
 82 |   {
 83 |     path: '/april/:id',
 84 |     name: 'AprilFools',
 85 |     component: AprilFools,
 86 |     meta: {
 87 |       title: 'April Fools - TinyGS'
 88 |     }
 89 |   }
 90 | ]
 91 | 
 92 | const router = new VueRouter({
 93 |   mode: 'history',
 94 |   base: process.env.BASE_URL,
 95 |   routes
 96 | })
 97 | 
 98 | router.beforeEach((to, _, next) => {
 99 |   document.title = to.meta.title
100 |   next()
101 | })
102 | 
103 | export default router
104 | 


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Vuex from 'vuex'
 3 | 
 4 | Vue.use(Vuex)
 5 | 
 6 | export default new Vuex.Store({
 7 |   state: {
 8 |   },
 9 |   mutations: {
10 |   },
11 |   actions: {
12 |   },
13 |   modules: {
14 |   }
15 | })
16 | 


--------------------------------------------------------------------------------
/src/views/AprilFools.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div class="packet">
 3 |   <v-container>
 4 |     <h1 class="text-center display-4 grey--text text--darken-2 ma-5" color="">April Fools!</h1>
 5 |   </v-container>
 6 | </div>
 7 | </template>
 8 | 
 9 | <script>
10 | 
11 | 
12 | export default {
13 |   name: "AprilFools",
14 |   components: {
15 |   },
16 |   data() {
17 |     return {
18 | 
19 |     }
20 |   },
21 | }
22 | </script>
23 | 
24 | <style>
25 | 
26 | </style>


--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <v-container fluid class="ma-0 pa-0">
  3 |       <Worldmap style="height:60vh;width:100%;"/>
  4 |       <!--<iframe src="https://api.tinygs.com/worldmap/" style="height:60vh;width:100%;" ></iframe>-->
  5 |     <v-container class="grey--text text--darken-3">
  6 |       <h2 class="grey--text text--darken-3 mb-4">Welcome to TinyGS, the Open Source Global Satellite Network</h2>
  7 |       <p>TinyGS is an open network of Ground Stations distributed around the world to receive and operate LoRa satellites, weather probes and other flying objects, using cheap and versatile modules.</p>
  8 |       <p>This project is based on ESP32 boards and currently it is compatible with sx126x and sx127x LoRa módules but we plan to support more radio módules in the future.</p>
  9 |       <v-layout row wrap class="justify-center py-6">
 10 |         <v-flex sm12 md4 pa-4 >
 11 |           <v-layout justify-center>
 12 |             <v-card class="pa-2 ma-2 rounded-xl stats-card">
 13 |               <v-card-text>
 14 |                 <div class="text-center display-1 "><v-icon x-large class="display-3 pb-3">mdi-account-group</v-icon></div>
 15 |                 <div class="text-center display-2 ">{{statistics.members}}</div>
 16 |                 <div class="subheading font-weight-bold text-center">Members</div>
 17 |               </v-card-text>
 18 |             </v-card>
 19 |           </v-layout>
 20 |         </v-flex>
 21 |         <v-flex sm12 md4 pa-4>
 22 |           <v-layout justify-center>
 23 |             <v-card class="pa-2 ma-2 rounded-xl stats-card">
 24 |               <v-card-text>
 25 |                 <div class="text-center display-1"><v-icon x-large class="display-3 pb-3">mdi-satellite-uplink</v-icon></div>
 26 |                 <div class="text-center display-2">{{statistics.stations}}</div>
 27 |                 <div class="subheading font-weight-bold text-center">Active stations</div>
 28 |               </v-card-text>
 29 |             </v-card>
 30 |           </v-layout>
 31 |         </v-flex>
 32 |         <v-flex sm12 md4 pa-4>
 33 |           <v-layout justify-center>
 34 |             <v-card class="pa-2 ma-2 rounded-xl stats-card">
 35 |               <v-card-text>
 36 |                 <div class="text-center display-1 "><v-icon x-large class="display-3 pb-3">mdi-file-document-outline</v-icon></div>
 37 |                 <div class="text-center display-2">{{statistics.packets + 10000}}</div>
 38 |                 <div class="subheading font-weight-bold text-center">Received packets</div>
 39 |               </v-card-text>
 40 |             </v-card>
 41 |           </v-layout>
 42 |         </v-flex>
 43 |       </v-layout>
 44 |       <h3 class="py-3 grey--text text--darken-3">History</h3>
 45 |       <p>Initially TinyGS was born under the name ESP32 Fossa Groundstation, it was developed as a "weekend" project for the FossaSAT-1 LoRa satellite. We are passionate about space and created this project to be able to track and use the satellites and to learn and experiment about radio. Currently the network is open to any LoRa satellite and we also support other flying objects that have a compatible radio modulation with our hardware such as FSK, GFSK, MSK, GMSK, LoRa and OOK. And the project was renamed to TinyGS.</p>
 46 |       <p>Even though we have no relation with the Fossa team, they inspired this project and we are excited to support their new launched satellites into our network.</p>
 47 |       <p>This are the more important moments of the project:</p>
 48 |       <ul>
 49 |         <li>Nov 28, 2019 ESP32-OLED-Fossa-GroundStation project born.</li>
 50 |         <li>Dec 6, 2019 FossaSAT-1 deployed with an Electron rocket by Rocket Lab.</li>
 51 |         <li>Dec 10,2019 YL3CT's GS receive the fist LoRa packet from FossaSAT-1</li>
 52 |         <li>Sep 28,2020 6U Norby LoRa satellite is deployed with a Soyuz-2-1b launcher</li>
 53 |         <li>Oct 11, 2020 KA9ETC's GS receive the first LoRa packet from Norby</li>
 54 |         <li>Jan 24, 2021 3x V-R3x sat deployed with a Falcon-9</li>
 55 |         <li>Jan 25, 2021 KA9ETC'S GS receive the first LoRa packet from V-R3x</li>
 56 |         <li>Feb 14, 2021 New name and web tinyGS.com with a new Beta firmware.</li>
 57 |         <li>Feb 28, 2021 First packet received from SD SAT by PA3ARK.</li>
 58 |         <li>Mar 20, 2021 First LoRa relay message between two tinyGS stations from K4KDR to N6RFM using SD SAT.</li>
 59 |       </ul>
 60 |       <h3 class="py-3 pt-6 grey--text text--darken-3">Get Started</h3>
 61 |       <p>Join out <a href="https://t.me/joinchat/DmYSElZahiJGwHX6jCzB3Q">Telegram Channel</a>, visit our <a href="https://github.com/G4lile0/tinyGS">GitHub Page</a> and build your station.</p>
 62 | 
 63 |     </v-container>
 64 |       
 65 |   </v-container>
 66 | </template>
 67 | 
 68 | <script>
 69 | import Worldmap from '../components/Worldmap.vue';
 70 | const axios = require("axios");
 71 | 
 72 | export default {
 73 |   name: 'Home',
 74 |   components: {
 75 |     Worldmap
 76 |   
 77 |   },
 78 |   data() {
 79 |     return {
 80 |       links: [
 81 |         {icon:"mdi-github", name:' GitHub',url:"https://github.com/G4lile0/tinyGS"},
 82 |         {icon:"mdi-file-document-multiple-outline", name:' Wiki',url:"https://github.com/G4lile0/tinyGS/wiki"},
 83 |         {icon:"mdi-map-marker-question-outline", name:' FAQ',url:"https://github.com/G4lile0/tinyGS/wiki/FAQ"},
 84 |         {icon:"mdi-forum", name:' Telegram',url:"https://t.me/joinchat/DmYSElZahiJGwHX6jCzB3Q"},
 85 |       ],
 86 |       statistics: {}
 87 |     }
 88 |   },
 89 |   beforeMount(){
 90 |     this.getStatistics()
 91 |   },
 92 |   methods: {
 93 |     async getStatistics() {
 94 |       const { data } = await axios.get("https://api.tinygs.com/v1/statistics");
 95 |       console.log(data);
 96 |       this.statistics = data;
 97 |     }
 98 |   }
 99 | 
100 | }
101 | </script>
102 | 
103 | <style scoped>
104 | .home {
105 |   height: 100%;
106 | }
107 | 
108 | h2 {
109 |   text-align: center;
110 | }
111 | 
112 | .stats-card {
113 |   min-width: 250px;
114 |   margin:0 auto;
115 | }
116 | 
117 | </style>
118 | 


--------------------------------------------------------------------------------
/src/views/Packet.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | <div class="packet">
  3 |   <v-container>
  4 |     <v-layout row wrap v-if="packet">
  5 |       <!-- description -->
  6 |       <v-flex mt-4 ml-4 xs12 class="grey--text text--darken-1"> 
  7 |         <h1 class="heading">{{ packet.name }}</h1>
  8 |       </v-flex>
  9 |       <v-flex pa-4 xs12 sm6 class="grey--text text--darken-1"> 
 10 |         
 11 |         <v-card flat class="mr-5 my-3 pa-2 grey--text text--darken-3">
 12 |           <v-card-text class="grey--text text--darken-3 mx-auto">
 13 |             <h1 class="ma-2 mb-5">{{packet.satDisplayName || packet.satellite}}</h1>
 14 |             <div>Received on: {{formatDate(packet.serverTime)}}</div>
 15 |             <div v-if="packet.mode == 'FSK'">
 16 |               <i>{{packet.mode}}</i> {{packet.freq}} Mhz  BR: {{packet.bitrate}}  FD: {{packet.freqDev}}  BW: {{packet.rxBw}} kHz
 17 |             </div>
 18 |             <div v-else>
 19 |               <i>{{packet.mode}}</i> {{packet.freq}} Mhz  SF: {{packet.sf}}  CR: {{packet.cr}}  BW: {{packet.bw}} kHz
 20 |             </div>
 21 |             <div v-if="packet.parsed && packet.template">
 22 |               <div v-if="packet.eclipseDepth">
 23 |                 <div v-if="packet.sunLit">Sat in Sun ☀️ Eclipse Depth: {{(packet.eclipseDepth).toFixed(2)}}º</div>
 24 |                 <div v-else>Sat in Umbra 🌌  Eclipse Depth: {{(packet.eclipseDepth).toFixed(2)}}º </div>
 25 |                 <div>Theoretical coverage {{(packet.footPrint).toFixed(0)}} km </div>
 26 |               </div><br>
 27 |               <DynamicTemplate :packet="packet" :customTemplate="packet.template" />
 28 |               
 29 |             </div>
 30 |             <div v-else>
 31 |               <strong>Unrecognized packet.</strong> This packet does not match the known structure of this satellite. It might be an unknown packet or just terrestrial noise.
 32 |             </div>
 33 |           </v-card-text>
 34 |         </v-card>
 35 |        
 36 |         <v-card flat class="mr-5 my-3 grey--text text--darken-3">
 37 |           <v-card-text class="grey--text text--darken-3 mx-auto">
 38 |             <a class="download-btn" :href="downloadUrl" download="packet.bin">Download</a>
 39 |             <h2 class="ma-2">Hexadecimal view</h2>
 40 |             <HexView :raw="base64ToArrayBuffer(packet.raw)"/>
 41 |           </v-card-text>
 42 |         </v-card>
 43 |         <v-card v-if="packet.parsed" flat class="mr-5 my-3 pa-2 grey--text text--darken-3" style="overflow:auto;white-space: nowrap;max-height:600px;">
 44 |           <v-card-text class="grey--text text--darken-3 mx-auto">
 45 |             <h2 class="ma-2 mb-5">Raw parsed view</h2>
 46 |             <json-viewer copyable :expand-depth=0 boxed  :value="packet.parsed"></json-viewer>
 47 |           </v-card-text>
 48 |         </v-card>
 49 |       </v-flex>
 50 |       <v-flex pa-4 xs12 sm6 class="grey--text text--darken-1"> 
 51 |         <v-card flat class="mr-5 my-3 pa-4 grey--text text--darken-3">
 52 |           <PacketMap :packet="packet" />
 53 |         </v-card>
 54 |       </v-flex>
 55 |       
 56 |       <!-- Packets -->
 57 |       <v-flex xs12 sm12 pa-4>
 58 |         <div v-for="station in packet.stations" :key="`${station.name}@${station.userId}`"> 
 59 |           <StationRx :station="station" :freq="packet.freq"/>
 60 |           <v-divider></v-divider>
 61 |         </div>
 62 |       </v-flex>
 63 |       
 64 |     </v-layout>
 65 |     <div v-else> <!-- loading spinner -->
 66 |       <v-row class="fill-height ma-16" align="center" justify="center">
 67 |         <v-progress-circular indeterminate color="grey"></v-progress-circular>
 68 |       </v-row>
 69 |     </div>
 70 |   </v-container>
 71 | </div>
 72 | </template>
 73 | 
 74 | <script>
 75 | const axios = require("axios");
 76 | import JsonViewer from 'vue-json-viewer'
 77 | import DynamicTemplate from '../components/DynamicTemplate.vue'
 78 | import StationRx from '../components/StationRx.vue'
 79 | import HexView from '../components/HexView.vue'
 80 | import PacketMap from '../components/PacketMap.vue'
 81 | import moment from 'moment'
 82 | import "leaflet/dist/leaflet.css"
 83 | 
 84 | export default {
 85 |   name: "Packet",
 86 |   components: {
 87 |     DynamicTemplate,
 88 |     StationRx,
 89 |     HexView,
 90 |     PacketMap,
 91 |     JsonViewer
 92 |   },
 93 |   data() {
 94 |     return {
 95 |       packet: null,
 96 |     }
 97 |   },
 98 |   beforeMount() {
 99 |     this.getPacket()
100 |   },
101 |   methods: {
102 |     async getPacket() {
103 |       const { data } = await axios.get(`https://api.tinygs.com/v1/packet/${this.$route.params.id}`);
104 |       console.log(data);
105 |       this.packet = data;
106 |     },
107 |     formatDate(time) {
108 |       return moment(time).format('LLL')
109 |     },
110 |     base64ToArrayBuffer(base64) {
111 |         var binary_string = atob(base64);
112 |         var len = binary_string.length;
113 |         var bytes = new Uint8Array(len);
114 |         for (var i = 0; i < len; i++) {
115 |             bytes[i] = binary_string.charCodeAt(i);
116 |         }
117 |         return bytes.buffer;
118 |     },
119 |   },
120 |   computed: {
121 |     downloadUrl() {
122 |       return `data:application/octet-stream;base64,${this.packet.raw}`
123 |     }
124 |   }
125 | }
126 | </script>
127 | 
128 | <style>
129 | .jv-container .jv-code {
130 |   padding: 4px 10px;
131 | }
132 | 
133 | .download-btn {
134 |   position:absolute;
135 |   right:20px;
136 |   text-decoration: none;
137 |   color:rgb(84, 176, 212) !important;
138 | }
139 | </style>


--------------------------------------------------------------------------------
/src/views/Packets.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="packets">
 3 |   <h1 class="subheading grey--text">Last packets</h1>
 4 |   <v-container>
 5 |     <v-layout row wrap v-if="packets">
 6 |       <v-flex xs12 sm12 pa-4>
 7 |         <div v-for="packet in packets" :key="packet.id"> 
 8 |           <PacketRow :packet="packet" :customTemplate="customTemplates[packet.satellite]" />
 9 |           <v-divider></v-divider>
10 |         </div>
11 |       </v-flex>
12 |     </v-layout>
13 |     <v-row v-else class="fill-height ma-0" align="center" justify="center">
14 |       <v-progress-circular indeterminate color="grey"></v-progress-circular>
15 |     </v-row>
16 |   </v-container>
17 |   </div>
18 | </template>
19 | 
20 | <script>
21 | const axios = require("axios");
22 | import PacketRow from '../components/PacketRow.vue'
23 | 
24 | export default {
25 |   name:"Packets",
26 |   components: {
27 |     PacketRow
28 |   },
29 |   data() {
30 |     return {
31 |       packets: null,
32 |       customTemplates: null
33 |     }
34 |   },
35 |   beforeMount(){
36 |     this.getPackets()
37 |   },
38 |   methods:{
39 |     async getPackets() {
40 |       const { data } = await axios.get("https://api.tinygs.com/v2/packets");
41 |       console.log(data);
42 |       this.packets = data.packets;
43 |       this.customTemplates = data.templates;
44 |     },
45 |   }
46 | }
47 | </script>
48 | 
49 | <style>
50 | 
51 | </style>


--------------------------------------------------------------------------------
/src/views/Satellite.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | <div class="satellite">
  3 |   <v-container v-if="satellite">
  4 |     <v-layout row wrap>
  5 |       <!-- column 1 -->
  6 |       <v-flex pa-4 mt-2 xs12 sm6 class="grey--text text--darken-1"> 
  7 |         <!-- description -->
  8 |         <h1 class="heading">{{ satellite.displayName }}</h1>
  9 |         <p v-html="satellite.longDescription"></p>
 10 |         <ul>
 11 |           <li><strong>Status:</strong> {{satellite.status}}</li>
 12 |           <li><strong>Launch Date:</strong> {{formatLaunchDate(satellite.launchDate)}}</li>
 13 |         </ul>
 14 |         <v-card v-if="satellite.tle && satellite.tle.length == 3" flat class="mr-5 my-3 pa-4 grey--text text--darken-3" style="overflow:auto;white-space: nowrap;">
 15 |           <h3>TLEs</h3>
 16 |           <v-card-text class="grey--text text--darken-3 mx-auto">
 17 |             <pre>
 18 | {{satellite.tle[0]}}
 19 | {{satellite.tle[1]}}
 20 | {{satellite.tle[2]}}
 21 |             </pre>
 22 |           </v-card-text>
 23 |         </v-card>
 24 |         <!-- Telemetry -->
 25 |         <v-card v-if="satellite.lastTelemetry && satellite.webTemplate" flat class="mr-5 my-3 pa-4 grey--text text--darken-3">
 26 |           <h2>Last telemetry</h2>
 27 |           <v-card-text class="grey--text text--darken-3 mx-auto">
 28 |             <DynamicTemplate :packet="lastTelemetry" :customTemplate="satellite.webTemplate" />
 29 |           </v-card-text>
 30 |         </v-card>
 31 | 
 32 | 
 33 |       </v-flex>
 34 | 
 35 |       <!-- Column 2 -->
 36 |       <v-flex pa-4 mt-2 xs12 sm6 class="grey--text text--darken-1">
 37 |         <!-- satvis -->
 38 |         <v-card flat class="mr-5 my-3 pa-2 grey--text text--darken-3" style="min-height:500px;">
 39 |           <iframe id="satvis-frame" allowtransparency="true" :src="`https://viewer.tinygs.com/?elements=Point,Label,Orbit,Sensor-cone,Ground-station-link&layers=OfflineHighres&tags=TinyGS&sat=${satellite.displayName}`" class="satvis" :class="{'satvis-fullScreen': satvisFullScreen, 'satvis-normal': !satvisFullScreen}"></iframe>
 40 |           <div class="credits-satvis">Powered by <a href="https://github.com/Flowm/satvis">Satvis</a> (MIT)</div>
 41 |           <v-btn @click="satvisFullScreen = !satvisFullScreen" class="mr-2" :class="{'fullScreen-btn-fullScreen': satvisFullScreen, 'fullScreen-btn-normal': !satvisFullScreen}" icon>
 42 |             <v-img contain transition="fade-transition" max-height="60" src="../assets/fullScren-but.png" />
 43 |           </v-btn>
 44 |         </v-card>
 45 | 
 46 |         <!-- images -->
 47 |         <v-layout row wrap>
 48 |           <v-flex xs12 md6 v-for="image in satellite.images" :key="image">
 49 |               <v-card class="ma-2">
 50 |                 <v-img :src="image" height="300px"></v-img>
 51 |               </v-card>
 52 |           </v-flex>
 53 |         </v-layout>
 54 | 
 55 |       </v-flex>
 56 |       
 57 |       
 58 |       <!-- chart -->
 59 |       <!--<v-flex pa-4 mt-2 xs12 sm6 class="grey--text text--darken-1">
 60 |         <line-chart height="200" width="400" v-if="datacollection" :chart-data="datacollection" :options="options"></line-chart>
 61 |         <button @click="fillData()">Randomize</button>
 62 |       </v-flex>-->
 63 |     </v-layout>
 64 |       <!-- Packets -->
 65 |       
 66 |       <!--<h3>Packet list</h3>-->
 67 |     <v-divider class="mt-6"></v-divider>
 68 |     <div class="pa-4" v-if="packets && packets.length > 0">
 69 |       <div  v-for="packet in packets" :key="packet.id"> 
 70 |         <PacketRow :packet="packet" :customTemplate="customTemplates[packet.satellite]" />
 71 |         <v-divider></v-divider>
 72 |       </div>
 73 |     </div>
 74 |     <div class="pa-4" v-else>
 75 |       <div class="text-center grey--text text--darken-3">
 76 |         No packets yet.
 77 |       </div>
 78 |     </div>
 79 |   </v-container>
 80 |   <div v-else> <!-- loading spinner -->
 81 |     <v-row class="fill-height ma-16" align="center" justify="center">
 82 |       <v-progress-circular indeterminate color="grey"></v-progress-circular>
 83 |     </v-row>
 84 |   </div>
 85 |   
 86 | </div>
 87 | </template>
 88 | 
 89 | <script>
 90 | const axios = require("axios");
 91 | //import LineChart from '../charts/LineChart.js'
 92 | import PacketRow from '../components/PacketRow.vue'
 93 | import moment from 'moment'
 94 | import DynamicTemplate from '../components/DynamicTemplate.vue'
 95 | 
 96 | export default {
 97 |   name: "Satellite",
 98 |   components: {
 99 |     //LineChart,
100 |     PacketRow,
101 |     DynamicTemplate
102 |   },
103 |   data() {
104 |     return {
105 |       satellite: null,
106 |       packets: null,
107 |       customTemplates: null,
108 |       datacollection: null,
109 |       satvisFullScreen: false,
110 |       options: {
111 |         scales: {
112 |             xAxes: [{
113 |                 type: 'time',
114 |                 distribution: 'series'
115 |             }]
116 |         }
117 |     }
118 |     }
119 |   },
120 |   beforeMount() {
121 |     this.getSatellite()
122 |     this.getPackets()
123 |     //this.fillData()
124 |   },
125 |   methods: {
126 |     async getSatellite() {
127 |       const { data } = await axios.get(`https://api.tinygs.com/v1/satellite/${this.$route.params.name}`);
128 |       console.log(data);
129 |       this.satellite = data;
130 |       document.title = `${this.satellite.displayName} satellite - TinyGS`
131 |     },
132 |     async getPackets() {
133 |       const { data } = await axios.get(`https://api.tinygs.com/v2/packets?satellite=${this.$route.params.name}`);
134 |       console.log(data);
135 |       this.customTemplates = data.templates;
136 |       this.packets = data.packets;
137 | 
138 |     },
139 |     fillData () {
140 |       this.datacollection = {
141 |         //labels: [this.d, this.getRandomInt(), this.getRandomInt(), this.getRandomInt()],
142 |         data: [
143 |           {
144 |               x: new Date(),
145 |               y: 1
146 |           }, {
147 |               t: new Date(),
148 |               y: 10
149 |           }
150 |         ]
151 |       }
152 |     },
153 |     getRandomInt () {
154 |       return Math.floor(Math.random() * (50 - 5 + 1)) + 5
155 |     },
156 |     formatLaunchDate(date){
157 |       return moment(date).format('lll');
158 |     }
159 |   },
160 |   computed: {
161 |     lastTelemetry(){ // adaptor to use last telemetry as if it were a full packet
162 |       if (this.satellite && this.satellite.lastTelemetry)
163 |         return {parsed:this.satellite.lastTelemetry};
164 |       return null;
165 |     }
166 |   }
167 | }
168 | </script>
169 | 
170 | <style>
171 | 
172 | .clickable:hover {
173 |   right: -1px;
174 | }
175 | 
176 | .credits-satvis {
177 |   position: absolute;
178 |   right: 0;
179 |   bottom: 0;
180 |   margin: 9px;
181 |   font-size: 0.7em;
182 |   border-radius: 0 !important;
183 |   background-color: rgba(255, 255, 255, 0.8);
184 |   padding: 2px;
185 | }
186 | 
187 | .satvis-fullScreen {
188 |   position: fixed;
189 |   top: 65px;
190 |   left:0;
191 |   padding-bottom: 65px;
192 |   height: 100%;
193 |   width: 100%;
194 |   z-index: 2;
195 | }
196 | 
197 | .satvis-normal {
198 |   display: block;
199 |   width: 100%;
200 |   height: 500px;
201 | }
202 | 
203 | .fullScreen-btn-normal {
204 |   position: absolute;
205 |   right: 4px;
206 |   bottom: 35px;
207 | }
208 | 
209 | .fullScreen-btn-fullScreen {
210 |   position: fixed;
211 |   right: 20px;
212 |   bottom: 20px;
213 |   z-index: 3;
214 | }
215 | </style>


--------------------------------------------------------------------------------
/src/views/Satellites.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="satellites">
  3 |     <v-container class="my-5">
  4 |       <v-row class="ml-1">
  5 |         <v-col cols="12" sm="12" md="4" lg="3" class="mt-1">
  6 |           <v-text-field v-model="findTxt" hide-details outlined dense clearable label="Find" prepend-inner-icon="mdi-magnify"></v-text-field>
  7 |         </v-col>
  8 |         <v-col cols="12" sm="12" md="4" lg="3">
  9 |           <v-select v-model="statusSelect" :items="statusItems" label="Status" multiple chips hide-details clearable dense prepend-inner-icon="mdi-filter-menu" :menu-props="{ bottom: true, offsetY: true }">
 10 |             <template v-slot:selection="data">
 11 |               <v-chip :class="data.item" :key="JSON.stringify(data.item)" v-bind="data.attrs" :input-value="data.selected" @click:close="statusSelect.splice(statusSelect.indexOf(data.item), 1)" close >
 12 |                 {{ data.item }}
 13 |               </v-chip>
 14 |             </template>
 15 |           </v-select>
 16 |         </v-col>
 17 |         <v-col cols="12" class="d-none d-md-block" md="4" lg="3">
 18 |           <v-select v-model="freqSelect" :items="freqItems" label="Frequency" multiple hide-details chips clearable dense prepend-inner-icon="mdi-filter-menu" :menu-props="{ bottom: true, offsetY: true }">
 19 |             <template v-slot:selection="data">
 20 |               <v-chip :class="data.item" :key="JSON.stringify(data.item)" v-bind="data.attrs" :input-value="data.selected" @click:close="freqSelect.splice(statusSelect.indexOf(data.item), 1)" close >
 21 |                 {{ data.item }}
 22 |               </v-chip>
 23 |             </template>
 24 |           </v-select>
 25 |         </v-col>
 26 |       </v-row>
 27 |       <v-layout row wrap>
 28 |         <v-flex xs12 sm6 md4 lg3 v-for="sat in satellites" :key="sat.name">
 29 |           <v-card class="text-center ma-4 rounded-lg clickable" :to="`satellite/${sat.name}`">
 30 |             <v-img height="250" :src="sat.images[0]">
 31 |               <template v-slot:placeholder>
 32 |                 <v-row
 33 |                   class="fill-height ma-0"
 34 |                   align="center"
 35 |                   justify="center"
 36 |                 >
 37 |                   <v-progress-circular
 38 |                     indeterminate
 39 |                     color="grey"
 40 |                   ></v-progress-circular>
 41 |                   
 42 |                 </v-row>
 43 |               </template>
 44 |             </v-img>
 45 |             <!--<v-responsive class="pt-4">{{ sat.images[0] }}</v-responsive>-->
 46 |             <v-card-text>
 47 |               <div class="subheading">{{ sat.displayName }}</div>
 48 |               <div class="grey--text">{{ sat.description }}</div>
 49 |               <div class="mt-3" v-if="sat.status=='Future'"><strong>Launch Date:</strong> {{formatLaunchDate(sat.launchDate)}}</div>
 50 |             </v-card-text>
 51 |             <v-chip v-for="(conf,i) in sat.configurations" :key="i" :class="`${conf.mode} ma-2`">{{conf.mode}}@{{conf.freq}}</v-chip>
 52 |             <v-chip :class="`${sat.status} ma-2`">{{sat.status}}</v-chip>
 53 |             <v-card-actions>
 54 |               
 55 |             </v-card-actions>
 56 |           </v-card>
 57 |         </v-flex>
 58 |       </v-layout>
 59 |     </v-container>
 60 |   </div>
 61 | </template>
 62 | 
 63 | <script>
 64 | const axios = require("axios");
 65 | import moment from 'moment'
 66 | 
 67 | export default {
 68 |   name: 'Satellites',
 69 |   data() {
 70 |     return {
 71 |       findTxt: "",
 72 |       statusSelect: [],
 73 |       statusItems: ['Supported', 'Future', 'Experimental', 'Inactive'],
 74 |       freqSelect: [],
 75 |       freqItems: ['433','868-915','2400'],
 76 | 
 77 |       origData: []
 78 |     }
 79 |   },
 80 |   beforeMount() {
 81 |     this.getSatellites();
 82 |   },
 83 |   methods: {
 84 |     async getSatellites() {
 85 |       const { data } = await axios.get("https://api.tinygs.com/v1/satellites");
 86 |       console.log(data);
 87 |       this.origData = data;
 88 |     },
 89 |     formatLaunchDate(date){
 90 |       return moment(date).format('lll');
 91 |     },
 92 |   },
 93 |   computed:{
 94 |     satellites(){
 95 |       if (!this.origData)
 96 |         return null;
 97 |       
 98 |       let sats;
 99 |       if (this.findTxt)
100 |         sats = this.origData.filter(s => s.name.toLowerCase().includes(this.findTxt.toLowerCase()) 
101 |                                     || s.displayName.toLowerCase().includes(this.findTxt.toLowerCase())
102 |                                     || s.longDescription.toLowerCase().includes(this.findTxt.toLowerCase()))
103 |       else
104 |         sats = this.origData
105 |       
106 |       if (this.statusSelect.length > 0)
107 |         sats = sats.filter(sat => this.statusSelect.includes(sat.status))
108 | 
109 |       if (this.freqSelect.length > 0) {
110 |         let freq_min, freq_max;
111 |         if (this.freqSelect == '433') {
112 |           freq_min = 400; freq_max = 550;
113 |         } else if (this.freqSelect == '868-915') {
114 |           freq_min = 800; freq_max = 950;
115 |         } else if (this.freqSelect == '2400') {
116 |           freq_min = 2100; freq_max = 2500;
117 |         }
118 | 
119 |         sats = sats.filter(sat => sat.configurations.filter(conf => freq_min < conf.freq && conf.freq < freq_max).length > 0)
120 |       }
121 | 
122 |       return sats
123 |     }
124 |   }
125 | }
126 | 
127 | </script>
128 | 
129 | <style>
130 | .subheading {
131 |   margin: 10px 20px;
132 | }
133 | 
134 | .Supported {
135 |   background: #4CAF50 !important;
136 | }
137 | 
138 | .Future {
139 |   background: #82B1FF  !important;
140 | }
141 | 
142 | 
143 | .Experimental {
144 |   background: #FFC107  !important;
145 | }
146 | 
147 | .Inactive {
148 |   background: #FF5252  !important;
149 | }
150 | 
151 | .clickable:hover {
152 |   top: -5px;
153 | }
154 | 
155 | </style>


--------------------------------------------------------------------------------
/src/views/Station.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | <div class="station">
  3 |   <v-container>
  4 |     <v-layout row wrap v-if="station">
  5 |       <!-- description -->
  6 |       <v-flex mt-4 ml-4 xs12 class="grey--text text--darken-1"> 
  7 |         <h1 class="heading">
  8 |           <v-btn @click="$router.go(-1)" class="mr-2" depressed>
  9 |             <v-icon  large>mdi-arrow-left</v-icon>
 10 |             <span>Back</span>
 11 |           </v-btn>
 12 |           {{ station.name }} Console</h1>
 13 |       </v-flex>
 14 |       <v-flex pa-4 xs12 sm6 class="grey--text text--darken-1"> 
 15 |         
 16 |         <v-card flat class="mr-5 my-3 pa-2 grey--text text--darken-3">
 17 |           <v-card-text class="grey--text text--darken-3 mx-auto">
 18 |             <v-layout row wrap>
 19 |               <v-flex pa-2 xs6 sm6 md6 lg3 xl3>
 20 |                 <div class="caption grey--text">Listening</div>
 21 |                 <div >{{station.satellite}}</div>
 22 |               </v-flex>
 23 |               <v-flex pa-2 xs6 sm6 md6 lg3 xl3>
 24 |                 <div class="caption grey--text">Version</div>
 25 |                 <div >{{station.version}}</div>
 26 |               </v-flex>
 27 |               <v-flex pa-2 xs6 sm6 md6 lg3 xl3>
 28 |                 <div class="caption grey--text">Last seen</div>
 29 |                 <div >{{dateSince(station.lastSeen)}}</div>
 30 |               </v-flex>
 31 |               <v-flex pa-2 xs6 sm6 md6 lg3 xl3>
 32 |                 <div class="caption grey--text">Auto tunning</div>
 33 |                 <div ><v-icon>{{station.remoteTune?"mdi-check":"mdi-cancel"}}</v-icon></div>
 34 |               </v-flex>
 35 |               <v-flex pa-2 xs6 sm6 md6 lg3 xl3>
 36 |                 <div class="caption grey--text">Test mode</div>
 37 |                 <div >{{station.test?"ON":"OFF"}}</div>
 38 |               </v-flex>
 39 |               <v-flex pa-2 xs6 sm6 md6 lg3 xl3>
 40 |                 <div class="caption grey--text">Confirmed packets</div>
 41 |                 <div >{{station.confirmedPackets}}</div>
 42 |               </v-flex>
 43 |               <v-flex pa-2 xs6 sm6 md6 lg3 xl3>
 44 |                 <div class="caption grey--text">Status</div>
 45 |                 <strong v-html="(station.status==1) ? '<span class=\'green--text\'>Online</span>' : '<span class=\'red--text\'>Offline</span>'"></strong>
 46 |               </v-flex>
 47 |               <v-flex pa-2 xs6 sm6 md6 lg3 xl3>
 48 |                 <EditStation v-on:sent="configSent()" :station="$route.params.id" :config="station.modem_conf" v-if="isCurrentUser(station.userId)"/>
 49 |               </v-flex>
 50 |               <v-flex pa-2 xs8 sm8 md8 lg4 xl4 v-if="isCurrentUser(station.userId) ">
 51 |                 <v-text-field v-model="txStr" maxlength="25" persistent-hint hint="Make sure you are allowed to transmit by local regulations!" label="Message to transmit" style="display:inline"></v-text-field>
 52 |               </v-flex>
 53 |               <v-flex pa-2 xs4 sm4 md4 lg3 xl3 v-if="isCurrentUser(station.userId) ">
 54 |                 <v-btn :disabled="txDisabled||!station.tx" @click="sendTx()" color="primary">{{buttonText}}</v-btn>
 55 |               </v-flex>
 56 |               <v-flex pa-2 xs4 sm4 md4 lg3 xl3 v-if="isCurrentUser(station.userId)">
 57 |                 <v-btn :disabled="txDisabled||!station.tx" @click="sendTest()" color="primary">Transmit test frame</v-btn>
 58 |               </v-flex>
 59 |               <v-checkbox v-if="isCurrentUser(station.userId) " v-model="base64Cb" label="Base 64 encoded"></v-checkbox>
 60 |             </v-layout>
 61 |           </v-card-text>
 62 |         </v-card>
 63 |       </v-flex>
 64 |       <v-flex pa-4 xs12 sm6 class="grey--text text--darken-1"> 
 65 |         <v-card flat class="mr-5 my-3 pa-2 grey--text text--darken-3" style="min-height:500px;">
 66 |           <iframe id="satvis-frame" allowtransparency="true" :src="`https://viewer.tinygs.com/?elements=Point,Label,Orbit,Sensor-cone,Ground-station-link&layers=OfflineHighres&gs=${station.location[0]},${station.location[1]}&tags=TinyGS`" class="satvis" :class="{'satvis-fullScreen': satvisFullScreen, 'satvis-normal': !satvisFullScreen}"></iframe>
 67 |           <div class="credits-satvis">Powered by <a href="https://github.com/Flowm/satvis">Satvis</a> (MIT)</div>
 68 |           <v-btn @click="satvisFullScreen = !satvisFullScreen" class="mr-2" :class="{'fullScreen-btn-fullScreen': satvisFullScreen, 'fullScreen-btn-normal': !satvisFullScreen}" icon>
 69 |             <v-img contain transition="fade-transition" max-height="60" src="../assets/fullScren-but.png" />
 70 |           </v-btn>
 71 |         </v-card>
 72 |       </v-flex>
 73 |       <v-snackbar
 74 |         v-model="snackbar.show"
 75 |         >
 76 |           <b>{{ snackbar.title }}</b><br>
 77 |           <i>{{ snackbar.description }}</i>
 78 | 
 79 |           <template v-slot:action="{ attrs }">
 80 |             <v-btn
 81 |               color="primary"
 82 |               text
 83 |               v-bind="attrs"
 84 |               @click="snackbar.show = false"
 85 |             >
 86 |               Close
 87 |             </v-btn>
 88 |         </template>
 89 |       </v-snackbar>
 90 |       
 91 |   
 92 |       <!-- Packets -->
 93 |       <v-flex xs12 sm12 pa-4>
 94 |         <div v-for="packet in packets" :key="packet.id"> 
 95 |           <PacketRow :packet="packet" :customTemplate="customTemplates[packet.satellite]" />
 96 |           <v-divider></v-divider>
 97 |         </div>
 98 |       </v-flex>
 99 |     </v-layout>
100 |     <div v-else> <!-- loading spinner -->
101 |       <v-row class="fill-height ma-16" align="center" justify="center">
102 |         <v-progress-circular indeterminate color="grey"></v-progress-circular>
103 |       </v-row>
104 |     </div>
105 |   </v-container>
106 | </div>
107 | 
108 | </template>
109 | 
110 | <script>
111 | const axios = require("axios");
112 | import PacketRow from '../components/PacketRow.vue'
113 | import EditStation from '../components/EditStation.vue'
114 | import moment from 'moment'
115 | 
116 | 
117 | export default {
118 |   components: {
119 |     EditStation,
120 |     PacketRow
121 |   },
122 |   data() {
123 |     return {
124 |       station: null,
125 |       packets: null,
126 |       satvisFullScreen: false,
127 |       txStr: "",
128 |       txDisabled: false,
129 |       snackbar: {text:"", show:false},
130 |       customTemplates: null,
131 |       base64Cb: false
132 |     }
133 |   },
134 |   beforeMount() {
135 |     this.getStation()
136 |     this.getPackets()
137 |   },
138 |   methods: {
139 |     async getStation() {
140 |       const { data } = await axios.get(`https://api.tinygs.com/v1/station/${this.$route.params.id}`);
141 |       console.log(data);
142 |       this.station = data;
143 |       document.title = `${this.station.name} Console - TinyGS`
144 |     },
145 |     async getPackets() {
146 |       const { data } = await axios.get(`https://api.tinygs.com/v2/packets?station=${this.$route.params.id}`);
147 |       console.log(data);
148 |       this.packets = data.packets;
149 |       this.customTemplates = data.templates;
150 |     },
151 |     dateSince(time) {
152 |       console.log(time)
153 |       return moment(time).fromNow()
154 |     },
155 |     isCurrentUser(user) {
156 |       return localStorage.userId == user
157 |     },
158 |     configSent(){
159 |       this.getStation()
160 |     },
161 |     async sendTx() {
162 |       if (!this.txStr) {
163 |         this.snackbar.title = "You cannot send an empty payload!"
164 |         this.snackbar.description = ""
165 |         this.snackbar.show = true;
166 |         return;
167 |       }
168 |         
169 |       this.snackbar.title = "TX successful from your station!"
170 |       this.snackbar.description = "Please, be aware that nearby stations might also want to transmit. Do not flood."
171 |       this.snackbar.show = true;
172 |       setTimeout(() => this.txDisabled = false , 1000);
173 |       this.txDisabled = true;
174 |       let params = {
175 |         tx: (this.base64Cb?this.txStr:btoa(this.txStr))
176 |       }
177 |       let config = {
178 |         headers: {
179 |           sessionToken: localStorage.sessionToken,
180 |           userId: localStorage.userId
181 |         }
182 |       }
183 |       //console.log(this.modemConf);
184 |       try {
185 |         await axios.post(`https://api.tinygs.com/v2/station/${this.$route.params.id}/tx`, params, config);
186 |       } catch (err) {
187 |         console.log(JSON.stringify(err))
188 |       }
189 |     },
190 |     async sendTest() {
191 |       this.snackbar.title = "Test frame sent!"
192 |       this.snackbar.description = "Please, do not overuse this feature to keep the system available for real packets."
193 |       this.snackbar.show = true;
194 |       setTimeout(() => this.txDisabled = false , 20000);
195 |       this.txDisabled = true;
196 |       let params = {
197 |       }
198 |       let config = {
199 |         headers: {
200 |           sessionToken: localStorage.sessionToken,
201 |           userId: localStorage.userId
202 |         }
203 |       }
204 |       //console.log(this.modemConf);
205 |       try {
206 |         await axios.post(`https://api.tinygs.com/v1/station/${this.$route.params.id}/test`, params, config);
207 |       } catch (err) {
208 |         console.log(JSON.stringify(err))
209 |       }
210 |     }
211 |   },
212 |   computed: {
213 |     buttonText() {
214 |       if (!this.station.tx)
215 |         return "TX Disabled"
216 |       
217 |       return this.txDisabled?"Tx sent":"Send TX!"
218 |     }
219 |   }
220 | }
221 | </script>
222 | 
223 | <style>
224 | .credits-satvis {
225 |   position: absolute;
226 |   right: 0;
227 |   bottom: 0;
228 |   margin: 9px;
229 |   font-size: 0.7em;
230 |   border-radius: 0 !important;
231 |   background-color: rgba(255, 255, 255, 0.8);
232 |   padding: 2px;
233 | }
234 | 
235 | .satvis-fullScreen {
236 |   position: fixed;
237 |   top: 65px;
238 |   left:0;
239 |   padding-bottom: 65px;
240 |   height: 100%;
241 |   width: 100%;
242 |   z-index: 2;
243 | }
244 | 
245 | .satvis-normal {
246 |   display: block;
247 |   width: 100%;
248 |   height: 500px;
249 | }
250 | 
251 | .fullScreen-btn-normal {
252 |   position: absolute;
253 |   right: 4px;
254 |   bottom: 35px;
255 | }
256 | 
257 | .fullScreen-btn-fullScreen {
258 |   position: fixed;
259 |   right: 20px;
260 |   bottom: 20px;
261 |   z-index: 3;
262 | }
263 | 
264 | </style>


--------------------------------------------------------------------------------
/src/views/Stations.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="stations">
  3 |     <v-container>
  4 |       <v-row class="ml-1 mt-2">
  5 |         <v-col cols="12" sm="12" md="4" lg="3" class="mt-1">
  6 |           <v-text-field v-model="findTxt" hide-details outlined dense clearable label="Find" prepend-inner-icon="mdi-magnify"></v-text-field>
  7 |         </v-col>
  8 |         <v-col cols="12" sm="12" md="4" lg="3">
  9 |           <v-select v-model="satelliteSelect" :items="satelliteItems" label="Satellite" multiple chips hide-details clearable dense prepend-inner-icon="mdi-filter-menu" :menu-props="{ bottom: true, offsetY: true }">
 10 |             <template v-slot:selection="data">
 11 |               <v-chip :class="data.item" :key="JSON.stringify(data.item)" v-bind="data.attrs" :input-value="data.selected" @click:close="satelliteSelect.splice(satelliteSelect.indexOf(data.item), 1)" close >
 12 |                 {{ data.item }}
 13 |               </v-chip>
 14 |             </template>
 15 |           </v-select>
 16 |         </v-col>
 17 |       </v-row>
 18 |       <v-layout row wrap v-if="stations">
 19 |         <v-flex xs12 sm12 pa-4>
 20 |           <div v-for="station in currentPageStations" :key="`${station.name}@${station.userId}`"> 
 21 |             <Station :station="station"/>
 22 |             <v-divider></v-divider>
 23 |           </div>
 24 |         </v-flex>
 25 |       </v-layout>
 26 |       <v-row v-else class="fill-height ma-0" align="center" justify="center">
 27 |         <v-progress-circular indeterminate color="grey"></v-progress-circular>
 28 |       </v-row>
 29 |       <v-row justify="center">
 30 |         <v-col cols="4">
 31 |           <v-container class="max-width">
 32 |             <v-pagination v-show="pagLength > 1"
 33 |               v-model="page"
 34 |               :length="pagLength"
 35 |             ></v-pagination>
 36 |           </v-container>
 37 |         </v-col>
 38 |       </v-row>
 39 |     </v-container>
 40 |   </div>
 41 | </template>
 42 | 
 43 | <script>
 44 | const axios = require("axios");
 45 | import Station from '../components/Station.vue'
 46 | 
 47 | const itemsPerPage = 50;
 48 | 
 49 | export default {
 50 |   name:"Stations",
 51 |   components: {
 52 |     Station
 53 |   },
 54 |   data() {
 55 |     return {
 56 |       satelliteSelect: [],
 57 |       satelliteItems: [],
 58 |       findTxt: "",
 59 |       stations: null,
 60 |       page: 1,
 61 |     }
 62 |   },
 63 |   beforeMount(){
 64 |     this.getStations()
 65 |   },
 66 |   methods:{
 67 |     async getStations() {
 68 |       const { data } = await axios.get("https://api.tinygs.com/v1/stations");
 69 |       console.log(data);
 70 |       this.satelliteItems = data.map(item => item.satellite).filter((value, index, self) => self.indexOf(value) === index)
 71 |       this.stations = data;
 72 |     }
 73 |   },
 74 |   computed:{
 75 |     stationsFiltered() {
 76 |       if (!this.stations)
 77 |         return null
 78 |       
 79 |       let ret;
 80 |       if (this.satelliteSelect.length > 0)
 81 |         ret = this.stations.filter(s => this.satelliteSelect.includes(s.satellite))
 82 |       else
 83 |         ret = this.stations
 84 |       
 85 |       if (this.findTxt)
 86 |         ret = ret.filter(s => s.name.toLowerCase().includes(this.findTxt.toLowerCase()))
 87 |       
 88 |       return ret;
 89 |     },
 90 |     currentPageStations(){
 91 |       let start = itemsPerPage*(this.page-1)
 92 |       return this.stationsFiltered.slice(start, start+itemsPerPage);
 93 |     },
 94 |     pagLength(){
 95 |       
 96 |       if (!this.stationsFiltered)
 97 |         return 0
 98 | 
 99 |       return Math.round(this.stationsFiltered.length / itemsPerPage)
100 |     }
101 |   },
102 |   watch: {
103 |     findTxt(){
104 |       this.page = 1
105 |     },
106 |     satelliteSelect(){
107 |       this.page = 1
108 |     },
109 |     page() {
110 |       window.scrollTo(0,0)
111 |     }
112 |   }
113 |   
114 | }
115 | </script>
116 | 
117 | <style>
118 | 
119 | 
120 | </style>


--------------------------------------------------------------------------------
/src/views/User.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="user">
 3 |   <v-container>
 4 |     <v-layout row wrap v-if="user">
 5 |       <!-- description -->
 6 |       <v-flex mt-4 ml-4 xs12 class="grey--text text--darken-1"> 
 7 |         <h1 class="heading">User Console</h1>
 8 |       </v-flex>
 9 |       <v-flex pa-4 xs12 sm6 class="grey--text text--darken-1"> 
10 |         <v-card flat class="mr-5 my-3 pa-2 grey--text text--darken-3">
11 |           <v-card-text class="grey--text text--darken-3 mx-auto">
12 |             We are still working on this component ;)
13 |           </v-card-text>
14 |         </v-card>
15 |       </v-flex>
16 |       <v-flex pa-4 xs12 sm6 class="grey--text text--darken-1"> 
17 |         <v-card flat class="mr-5 my-3 pa-4 grey--text text--darken-3">
18 |           <v-card-text class="grey--text text--darken-3 mx-auto">
19 |             We are still working on this component ;)
20 |           </v-card-text>
21 |         </v-card>
22 |       </v-flex>
23 |       
24 |   
25 |       <!-- Stations -->
26 |       <v-flex xs12 sm12 pa-4>
27 |         <div v-for="station in stations" :key="`${station.name}@${station.userId}`"> 
28 |           <Station :station="station"/>
29 |           <v-divider></v-divider>
30 |         </div>
31 |       </v-flex>
32 |     </v-layout>
33 |     <v-row v-else class="fill-height ma-0" align="center" justify="center">
34 |       <v-progress-circular indeterminate color="grey"></v-progress-circular>
35 |     </v-row>
36 |   </v-container>
37 | </div>
38 | 
39 | </template>
40 | 
41 | <script>
42 | const axios = require("axios");
43 | import Station from '../components/Station.vue'
44 | 
45 | export default {
46 |   components: {
47 |     Station
48 |   },
49 |   data() {
50 |     return {
51 |       user: true,
52 |       stations: null
53 |     }
54 |   },
55 |   beforeMount(){
56 |     this.getStations()
57 |   },
58 |   methods:{
59 |     async getStations() {
60 |       if (!localStorage.userId)
61 |         return;
62 | 
63 |       const { data } = await axios.get(`https://api.tinygs.com/v1/stations?userId=${localStorage.userId}`);
64 |       console.log(data);
65 |       this.stations = data;
66 |     }
67 |   }
68 | }
69 | </script>
70 | 
71 | <style>
72 | 
73 | </style>


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   runtimeCompiler: true,
3 |   transpileDependencies: [
4 |     'vuetify'
5 |   ]
6 | }
7 | 


--------------------------------------------------------------------------------