mirror of
https://github.com/owntracks/frontend.git
synced 2026-02-13 20:59:50 +00:00
Publish 2.0.0-alpha source
This commit is contained in:
Linus Groh
3
.browserslistrc
Normal file
3
.browserslistrc
Normal file
@@ -0,0 +1,3 @@
|
||||
> 1%
|
||||
last 2 versions
|
||||
not ie > 0
|
||||
22
.eslintrc.js
Normal file
22
.eslintrc.js
Normal file
@@ -0,0 +1,22 @@
|
||||
module.exports = {
|
||||
root: true,
|
||||
env: {
|
||||
node: true
|
||||
},
|
||||
extends: ["plugin:vue/essential", "@vue/prettier"],
|
||||
rules: {
|
||||
"no-console": process.env.NODE_ENV === "production" ? "error" : "off",
|
||||
"no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
|
||||
"prettier/prettier": [
|
||||
"error",
|
||||
{
|
||||
trailingComma: "es5",
|
||||
printWidth: 80,
|
||||
htmlWhitespaceSensitivity: "ignore",
|
||||
},
|
||||
],
|
||||
},
|
||||
parserOptions: {
|
||||
parser: "babel-eslint"
|
||||
}
|
||||
};
|
||||
23
.gitignore
vendored
23
.gitignore
vendored
@@ -1,3 +1,26 @@
|
||||
.DS_Store
|
||||
node_modules
|
||||
/dist
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
||||
# Log files
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
.vscode
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw*
|
||||
|
||||
public/config/config.js
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
|
||||
47
README.md
47
README.md
@@ -1,6 +1,6 @@
|
||||
# OwnTracks UI
|
||||
|
||||
> A modern web interface for OwnTracks made with Vue.js
|
||||
> Web interface for OwnTracks
|
||||
|
||||
[](https://hub.docker.com/r/owntracks/frontend)
|
||||
|
||||
@@ -10,17 +10,32 @@
|
||||
|
||||
## Introduction
|
||||
|
||||
This is a web interface for [OwnTracks](https://github.com/owntracks/recorder), intended to replace the various web pages shipping with the recorder. OwnTracks UI uses Vue.js under the hood.
|
||||
This is a web interface for [OwnTracks](https://github.com/owntracks/recorder) built as
|
||||
a Vue.js single page application. The recorder itself already ships with some basic web
|
||||
pages, this is a more advanced interface with more functionality, all in one place.
|
||||
|
||||
## Installation
|
||||
|
||||
### Manual install
|
||||
### Manually
|
||||
|
||||
Clone the repository and copy `index.html` and the `static/` directory to your server's webroot. The API is expected to be reachable under the same domain as the web interface.
|
||||
For development:
|
||||
|
||||
- Run `yarn install` to install dependencies
|
||||
- Run `yarn serve` to compile for development and start the hot-reload server
|
||||
- Run `yarn lint` to lint and fix files
|
||||
|
||||
To deploy:
|
||||
|
||||
- Run `yarn install --production` to install dependencies
|
||||
- Run `yarn build` to compile and minify for production
|
||||
- Copy the content of the `dist/` directory to your webroot
|
||||
|
||||
The API is expected to be reachable under the same domain as the web interface.
|
||||
|
||||
### Docker
|
||||
|
||||
You can launch directly via Docker run like this:
|
||||
|
||||
```console
|
||||
$ docker run -d -p 80:80 -e SERVER_HOST=otrecorder-host -e SERVER_PORT=otrecorder-port owntracks/frontend
|
||||
```
|
||||
@@ -44,30 +59,26 @@ services:
|
||||
## Features
|
||||
|
||||
- Enable or disable multiple layers:
|
||||
|
||||
- Last known (i.e. live) locations:
|
||||
|
||||
- Accuracy visualization (circle)
|
||||
- Device friendly name and icon
|
||||
- Detailed information (if available): time, lat, lon, height, battery and speed
|
||||
|
||||
- Detailed information (if available): time, latitude, longitude, height, battery and speed
|
||||
- Location history (data points, line or both)
|
||||
- Location heatmap
|
||||
- Button to quickly fit all shown objects on the map into view
|
||||
|
||||
- Display data in a specific date range
|
||||
- Filter by user and device
|
||||
- Customizable:
|
||||
|
||||
- Customisable:
|
||||
- UI color
|
||||
- Default start and end date
|
||||
- Map:
|
||||
|
||||
- Tile server
|
||||
- Max zoom
|
||||
- Default position and zoom
|
||||
- Heatmap colors, radius and blur
|
||||
|
||||
See [`docs/config.md`](docs/config.md) for more info.
|
||||
|
||||
## Screenshots
|
||||
|
||||
_Click to enlarge._
|
||||
@@ -78,18 +89,6 @@ _Click to enlarge._
|
||||
<a href="https://raw.githubusercontent.com/owntracks/frontend/master/docs/images/heatmap.png" target="_blank"><img src="https://raw.githubusercontent.com/owntracks/frontend/master/docs/images/heatmap.png" alt="Heatmap" height="200"></a>
|
||||
<a href="https://raw.githubusercontent.com/owntracks/frontend/master/docs/images/customized.png" target="_blank"><img src="https://raw.githubusercontent.com/owntracks/frontend/master/docs/images/customized.png" alt="Customized" height="200"></a>
|
||||
|
||||
## ToDo
|
||||
|
||||
- Node.js based development workflow:
|
||||
|
||||
- Webpack
|
||||
- Vue SFCs
|
||||
- Sass
|
||||
- Dependency management with yarn instead of a local copy or unpkg.com
|
||||
|
||||
- Add documentation, at least for the config file
|
||||
- Download data for selected date range, user and device as JSON
|
||||
|
||||
## Contributing
|
||||
|
||||
Please feel free to open an issue and discuss your ideas and report bugs. If you think you can help out with something, open a PR!
|
||||
|
||||
3
babel.config.js
Normal file
3
babel.config.js
Normal file
@@ -0,0 +1,3 @@
|
||||
module.exports = {
|
||||
presets: ["@vue/app"],
|
||||
};
|
||||
224
index.html
224
index.html
@@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0" />
|
||||
<title>OwnTracks</title>
|
||||
<link href="static/style.css" rel="stylesheet">
|
||||
<link href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=Noto+Sans" rel="stylesheet">
|
||||
<link href="https://unpkg.com/@mdi/font@3.5.95/css/materialdesignicons.min.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<header>
|
||||
<nav>
|
||||
<div class="nav-item">
|
||||
<button
|
||||
class="button button-outline"
|
||||
title="Automatically center the map view and zoom in to relevant data"
|
||||
@click="centerView"
|
||||
>
|
||||
Center View
|
||||
</button>
|
||||
</div>
|
||||
<div class="nav-item">
|
||||
<span class="mdi mdi-24px mdi-layers"></span>
|
||||
<div class="dropdown">
|
||||
<button class="dropdown-button button" title="Show/hide layers">
|
||||
Layer Settings
|
||||
</button>
|
||||
<div class="dropdown-body">
|
||||
<label tabindex="0">
|
||||
<input type="checkbox" v-model="showLastLocations">
|
||||
Show last known locations
|
||||
</label>
|
||||
<label tabindex="0">
|
||||
<input type="checkbox" v-model="showLocationHistoryLine">
|
||||
Show location history (line)
|
||||
</label>
|
||||
<label tabindex="0">
|
||||
<input type="checkbox" v-model="showLocationHistoryPoints">
|
||||
Show location history (points)
|
||||
</label>
|
||||
<label tabindex="0">
|
||||
<input type="checkbox" v-model="showLocationHeatmap">
|
||||
Show location heatmap
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-item">
|
||||
<span class="mdi mdi-24px mdi-calendar-range"></span>
|
||||
<vuejs-datepicker
|
||||
v-model="startDate"
|
||||
:use-utc="true"
|
||||
:disabled-dates="startDateDisabledDates"
|
||||
title="Select start date"
|
||||
></vuejs-datepicker>
|
||||
to
|
||||
<vuejs-datepicker
|
||||
v-model="endDate"
|
||||
:use-utc="true"
|
||||
:disabled-dates="endDateDisabledDates"
|
||||
title="Select end date"
|
||||
></vuejs-datepicker>
|
||||
</div>
|
||||
<div class="nav-item">
|
||||
<span class="mdi mdi-24px mdi-account"></span>
|
||||
<select v-model="selectedUser" class="dropdown-button button" title="Select user">
|
||||
<option value="">
|
||||
Show All
|
||||
</option>
|
||||
<option v-for="user in users" :value="user">
|
||||
{{ user }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div v-if="selectedUser" class="nav-item">
|
||||
<span class="mdi mdi-24px mdi-cellphone-link"></span>
|
||||
<select v-model="selectedDevice" class="dropdown-button button" title="Select device">
|
||||
<option value="">
|
||||
Show All
|
||||
</option>
|
||||
<option v-for="device in devices[selectedUser]" :value="device">
|
||||
{{ device }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</nav>
|
||||
<nav class="nav-shrink">
|
||||
<div class="nav-item">
|
||||
<button
|
||||
class="button button-flat button-icon"
|
||||
title="Download raw data"
|
||||
@click="showDownloadModal = !showDownloadModal"
|
||||
>
|
||||
<span class="mdi mdi-24px mdi-download"></span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="nav-item">
|
||||
<button
|
||||
class="button button-flat button-icon"
|
||||
title="Information"
|
||||
@click="showInformationModal = !showInformationModal"
|
||||
>
|
||||
<span class="mdi mdi-24px mdi-information-outline"></span>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<l-map ref="map" :zoom="map.zoom" :center="map.center">
|
||||
<l-tile-layer
|
||||
:url="map.url"
|
||||
:attribution="map.attribution"
|
||||
:options="{maxNativeZoom: map.maxNativeZoom, maxZoom: map.maxZoom}"
|
||||
></l-tile-layer>
|
||||
|
||||
<l-circle
|
||||
v-if="showLastLocations"
|
||||
v-for="l in lastLocations"
|
||||
:key="`${l.topic}-circle`"
|
||||
:lat-lng="{lat: l.lat, lng: l.lon}"
|
||||
:radius="l.acc"
|
||||
:color="map.circle.color"
|
||||
:fill-color="map.circle.fillColor"
|
||||
:fill-opacity="map.circle.fillOpacity"
|
||||
></l-circle>
|
||||
|
||||
<l-marker
|
||||
v-if="showLastLocations"
|
||||
v-for="l in lastLocations"
|
||||
:key="`${l.topic}-marker`"
|
||||
:lat-lng="[l.lat, l.lon]"
|
||||
>
|
||||
<location-popup
|
||||
:user="l.username"
|
||||
:device="l.device"
|
||||
:name="l.name"
|
||||
:face="l.face"
|
||||
:timestamp="l.tst"
|
||||
:lat="l.lat"
|
||||
:lon="l.lon"
|
||||
:alt="l.alt"
|
||||
:battery="l.batt"
|
||||
:speed="l.vel"
|
||||
></location-popup>
|
||||
</l-marker>
|
||||
|
||||
<l-polyline
|
||||
v-if="showLocationHistoryLine"
|
||||
:lat-lngs="locationHistoryLatLngs"
|
||||
:color="map.polyline.color"
|
||||
:fill-color="map.polyline.fillColor"
|
||||
></l-polyline>
|
||||
|
||||
<template v-if="showLocationHistoryPoints">
|
||||
<template v-for="(userDevices, user) in locationHistory">
|
||||
<template v-for="(deviceLocations, device) in userDevices">
|
||||
<l-circle-marker
|
||||
v-for="(l, n) in deviceLocations"
|
||||
:key="`${user}-${device}-${n}`"
|
||||
:lat-lng="[l.lat, l.lon]"
|
||||
:radius="map.circleMarker.radius"
|
||||
:color="map.circleMarker.color"
|
||||
:fill-color="map.circleMarker.fillColor"
|
||||
:fill-opacity="map.circleMarker.fillOpacity"
|
||||
>
|
||||
<location-popup
|
||||
:user="user"
|
||||
:device="device"
|
||||
:timestamp="l.tst"
|
||||
:lat="l.lat"
|
||||
:lon="l.lon"
|
||||
:alt="l.alt"
|
||||
:battery="l.batt"
|
||||
:speed="l.vel"
|
||||
></location-popup>
|
||||
</l-circle-marker>
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<template v-if="showLocationHeatmap">
|
||||
<l-heatmap
|
||||
v-if="locationHistoryLatLngs.length"
|
||||
:lat-lng="locationHistoryLatLngs"
|
||||
:max="map.heatmap.max"
|
||||
:radius="map.heatmap.radius"
|
||||
:blur="map.heatmap.blur"
|
||||
:gradient="map.heatmap.gradient"
|
||||
></l-heatmap>
|
||||
</template>
|
||||
|
||||
</l-map>
|
||||
</main>
|
||||
|
||||
<modal :visible="showDownloadModal" @close="showDownloadModal = false">
|
||||
Not implemented.
|
||||
</modal>
|
||||
<modal :visible="showInformationModal" @close="showInformationModal = false">
|
||||
<b>OwnTracks {{ information.ownTracks.version }}</b>
|
||||
<ul>
|
||||
<li><a :href="information.ownTracksUi.sourceCodeUrl">OwnTracks UI Source Code</a></li>
|
||||
<li><a :href="information.ownTracks.documentationUrl">OwnTracks Recorder Documentation</a></li>
|
||||
<li><a :href="information.ownTracks.sourceCodeUrl">OwnTracks Recorder Source Code</a></li>
|
||||
<li><a :href="information.ownTracks.twitterUrl">OwnTracks Twitter</a></li>
|
||||
</ul>
|
||||
</modal>
|
||||
</div>
|
||||
<script src="https://unpkg.com/vue@2.5.22/dist/vue.min.js"></script>
|
||||
<script src="https://unpkg.com/vuejs-datepicker@1.5.4/dist/vuejs-datepicker.min.js"></script>
|
||||
<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
|
||||
<script src="https://unpkg.com/vue2-leaflet@1.2.3/dist/vue2-leaflet.min.js"></script>
|
||||
<script src="https://unpkg.com/leaflet.heat@0.2.0/dist/leaflet-heat.js"></script>
|
||||
<script src="https://unpkg.com/deepmerge@3.2.0/dist/umd.js"></script>
|
||||
<script src="static/components/vue-leaflet-heatmap.js"></script>
|
||||
<script src="static/components/location-popup.js"></script>
|
||||
<script src="static/components/modal.js"></script>
|
||||
<script src="static/config/default.js"></script>
|
||||
<script src="static/config/custom.js"></script>
|
||||
<script src="static/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
46
package.json
Normal file
46
package.json
Normal file
@@ -0,0 +1,46 @@
|
||||
{
|
||||
"name": "owntracks-ui",
|
||||
"version": "2.0.0-alpha",
|
||||
"license": "MIT",
|
||||
"author": {
|
||||
"name": "Linus Groh",
|
||||
"email": "mail@linusgroh.de"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/owntracks/frontend.git"
|
||||
},
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build",
|
||||
"lint": "vue-cli-service lint",
|
||||
"cors-proxy": "node scripts/corsProxy.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"deepmerge": "^4.0.0",
|
||||
"leaflet": "^1.5.1",
|
||||
"leaflet.heat": "^0.2.0",
|
||||
"vue": "^2.6.6",
|
||||
"vue-feather-icons": "^5.0.0",
|
||||
"vue-router": "^3.1.3",
|
||||
"vue2-leaflet": "^2.2.1",
|
||||
"vue2-leaflet-heatmap": "^1.0.5",
|
||||
"vuejs-datepicker": "^1.6.2",
|
||||
"vuex": "^3.1.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "^3.11.0",
|
||||
"@vue/cli-plugin-eslint": "^3.11.0",
|
||||
"@vue/cli-service": "^3.11.0",
|
||||
"@vue/eslint-config-prettier": "^5.0.0",
|
||||
"babel-eslint": "^10.0.3",
|
||||
"cors-anywhere": "^0.4.1",
|
||||
"eslint": "^6.4.0",
|
||||
"eslint-plugin-prettier": "^3.1.1",
|
||||
"eslint-plugin-vue": "^5.2.3",
|
||||
"lint-staged": "^9.4.0",
|
||||
"node-sass": "^4.12.0",
|
||||
"sass-loader": "^8.0.0",
|
||||
"vue-template-compiler": "^2.5.21"
|
||||
}
|
||||
}
|
||||
5
postcss.config.js
Normal file
5
postcss.config.js
Normal file
@@ -0,0 +1,5 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
autoprefixer: {},
|
||||
},
|
||||
};
|
||||
3
public/config/config.default.js
Normal file
3
public/config/config.default.js
Normal file
@@ -0,0 +1,3 @@
|
||||
// Here you can overwite the default configúration values
|
||||
window.owntracks = window.owntracks || {};
|
||||
window.owntracks.config = {};
|
||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
18
public/index.html
Normal file
18
public/index.html
Normal file
@@ -0,0 +1,18 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<title>OwnTracks UI</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>We're sorry but OwnTracks doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<script src="<%= BASE_URL %>config/config.js"></script>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
25
scripts/corsProxy.js
Normal file
25
scripts/corsProxy.js
Normal file
@@ -0,0 +1,25 @@
|
||||
const corsProxy = require("cors-anywhere");
|
||||
|
||||
const host = process.env.OT_PROXY_HOST || "0.0.0.0";
|
||||
const port = process.env.OT_PROXY_PORT || 8888;
|
||||
const username = process.env.OT_BASIC_AUTH_USERNAME || null;
|
||||
const password = process.env.OT_BASIC_AUTH_PASSWORD || null;
|
||||
|
||||
const options = {
|
||||
httpProxyOptions: {
|
||||
ws: true,
|
||||
},
|
||||
};
|
||||
|
||||
if (username !== null && password !== null) {
|
||||
console.log(`Basic auth for user ${username} enabled`);
|
||||
options.setHeaders = {
|
||||
Authorization: `Basic ${Buffer.from(`${username}:${password}`).toString(
|
||||
"base64"
|
||||
)}`,
|
||||
};
|
||||
}
|
||||
|
||||
corsProxy.createServer(options).listen(port, host, () => {
|
||||
console.log(`Running CORS Anywhere on http://${host}:${port}`);
|
||||
});
|
||||
107
src/App.vue
Normal file
107
src/App.vue
Normal file
@@ -0,0 +1,107 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<AppHeader />
|
||||
<main>
|
||||
<router-view />
|
||||
</main>
|
||||
<Modal name="download">
|
||||
Not implemented.
|
||||
</Modal>
|
||||
<Modal name="information">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://github.com/owntracks/frontend">
|
||||
owntracks/frontend
|
||||
</a>
|
||||
({{ frontendVersion }})
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/owntracks/recorder">
|
||||
owntracks/recorder
|
||||
</a>
|
||||
({{ recorderVersion }})
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://owntracks.org/booklet/">
|
||||
OwnTracks Recorder Documentation
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://twitter.com/OwnTracks">@OwnTracks</a>
|
||||
</li>
|
||||
</ul>
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapActions, mapMutations, mapState } from "vuex";
|
||||
|
||||
import config from "@/config";
|
||||
import * as types from "@/store/mutation-types";
|
||||
import AppHeader from "@/components/AppHeader";
|
||||
import Modal from "@/components/Modal";
|
||||
|
||||
export default {
|
||||
components: { AppHeader, Modal },
|
||||
created() {
|
||||
document.documentElement.style.setProperty(
|
||||
"--color-accent",
|
||||
config.accentColor
|
||||
);
|
||||
this.populateStateFromQuery(this.$route.query);
|
||||
this.loadData();
|
||||
// Update URL query params when relevant state changes
|
||||
this.$store.subscribe(
|
||||
mutation =>
|
||||
[
|
||||
types.SET_SELECTED_USER,
|
||||
types.SET_SELECTED_DEVICE,
|
||||
types.SET_START_DATE,
|
||||
types.SET_END_DATE,
|
||||
types.SET_MAP_CENTER,
|
||||
types.SET_MAP_ZOOM,
|
||||
types.SET_MAP_LAYER_VISIBILITY,
|
||||
].includes(mutation.type) && this.updateUrlQuery()
|
||||
);
|
||||
// Initially update URL query params from state
|
||||
this.updateUrlQuery();
|
||||
},
|
||||
computed: {
|
||||
...mapState(["frontendVersion", "recorderVersion"]),
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({
|
||||
setModalVisibility: types.SET_MODAL_VISIBILITY,
|
||||
}),
|
||||
...mapActions(["populateStateFromQuery", "loadData"]),
|
||||
updateUrlQuery() {
|
||||
const {
|
||||
map,
|
||||
startDate: start,
|
||||
endDate: end,
|
||||
selectedUser: user,
|
||||
selectedDevice: device,
|
||||
} = this.$store.state;
|
||||
const activeLayers = Object.keys(map.layers).filter(
|
||||
key => map.layers[key] === true
|
||||
);
|
||||
const query = {
|
||||
lat: map.center.lat,
|
||||
lng: map.center.lng,
|
||||
zoom: map.zoom,
|
||||
start: start.toISOString().split("T")[0],
|
||||
end: end.toISOString().split("T")[0],
|
||||
...(user !== null && { user }),
|
||||
...(user !== null && device !== null && { device }),
|
||||
...(activeLayers.length > 0 && { layers: activeLayers.join(",") }),
|
||||
};
|
||||
this.$router.replace({ query }).catch(() => {}); // https://github.com/vuejs/vue-router/issues/2872#issuecomment-519073998
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "styles/main";
|
||||
</style>
|
||||
119
src/api.js
Normal file
119
src/api.js
Normal file
@@ -0,0 +1,119 @@
|
||||
import { getApiUrl } from "@/util";
|
||||
|
||||
const fetchApi = (path, params = {}) => {
|
||||
const url = getApiUrl(path);
|
||||
Object.keys(params).forEach(key => url.searchParams.append(key, params[key]));
|
||||
return fetch(url);
|
||||
};
|
||||
|
||||
export const getVersion = async () => {
|
||||
const response = await fetchApi("/api/0/version");
|
||||
const json = await response.json();
|
||||
const version = json.version;
|
||||
return version;
|
||||
};
|
||||
|
||||
export const getUsers = async () => {
|
||||
const response = await fetchApi("/api/0/list");
|
||||
const json = await response.json();
|
||||
const users = json.results;
|
||||
return users;
|
||||
};
|
||||
|
||||
export const getDevices = async users => {
|
||||
const devices = {};
|
||||
await Promise.all(
|
||||
users.map(async user => {
|
||||
const response = await fetchApi(`/api/0/list`, { user });
|
||||
const json = await response.json();
|
||||
const userDevices = json.results;
|
||||
devices[user] = userDevices;
|
||||
})
|
||||
);
|
||||
return devices;
|
||||
};
|
||||
|
||||
export const getLastLocations = async (user, device) => {
|
||||
const params = {};
|
||||
if (user) {
|
||||
params["user"] = user;
|
||||
if (device) {
|
||||
params["device"] = device;
|
||||
}
|
||||
}
|
||||
const response = await fetchApi("/api/0/last", params);
|
||||
const json = await response.json();
|
||||
return json;
|
||||
};
|
||||
|
||||
export const getUserDeviceLocationHistory = async (
|
||||
user,
|
||||
device,
|
||||
start,
|
||||
end
|
||||
) => {
|
||||
const startDate = start.toISOString().split("T")[0];
|
||||
const endDate = end.toISOString().split("T")[0];
|
||||
const response = await fetchApi("/api/0/locations", {
|
||||
from: `${startDate}T00:00:00`,
|
||||
to: `${endDate}T23:59:59`,
|
||||
user,
|
||||
device,
|
||||
format: "json",
|
||||
});
|
||||
const json = await response.json();
|
||||
return json.data;
|
||||
};
|
||||
|
||||
export const getLocationHistory = async (devices, start, end) => {
|
||||
const locationHistory = {};
|
||||
await Promise.all(
|
||||
Object.keys(devices).map(async user => {
|
||||
locationHistory[user] = {};
|
||||
await Promise.all(
|
||||
devices[user].map(async device => {
|
||||
locationHistory[user][device] = await getUserDeviceLocationHistory(
|
||||
user,
|
||||
device,
|
||||
start,
|
||||
end
|
||||
);
|
||||
})
|
||||
);
|
||||
})
|
||||
);
|
||||
return locationHistory;
|
||||
};
|
||||
|
||||
export const connectWebsocket = async callback => {
|
||||
let url = getApiUrl("/ws/last");
|
||||
url.protocol = url.protocol.replace("http", "ws");
|
||||
url = url.href;
|
||||
const ws = new WebSocket(url);
|
||||
console.info(`[WS] Connecting to ${url}...`);
|
||||
ws.onopen = () => {
|
||||
console.info("[WS] Connected");
|
||||
ws.send("LAST");
|
||||
};
|
||||
ws.onclose = () => {
|
||||
console.info("[WS] Disconnected. Reconnecting in one second...");
|
||||
setTimeout(connectWebsocket, 1000);
|
||||
};
|
||||
ws.onmessage = async msg => {
|
||||
if (msg.data) {
|
||||
try {
|
||||
const data = JSON.parse(msg.data);
|
||||
if (data._type === "location") {
|
||||
console.info("[WS] Location update received");
|
||||
callback && (await callback());
|
||||
}
|
||||
} catch (err) {
|
||||
if (msg.data !== "LAST") {
|
||||
console.exception(err);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
console.info("[WS] Ping");
|
||||
}
|
||||
};
|
||||
};
|
||||
232
src/components/AppHeader.vue
Normal file
232
src/components/AppHeader.vue
Normal file
@@ -0,0 +1,232 @@
|
||||
<template>
|
||||
<header>
|
||||
<nav>
|
||||
<div class="nav-item">
|
||||
<button
|
||||
class="button button-outline"
|
||||
title="Automatically center the map view and zoom in to relevant data"
|
||||
@click="$root.$emit('fitView')"
|
||||
>
|
||||
Fit View
|
||||
</button>
|
||||
</div>
|
||||
<div class="nav-item">
|
||||
<LayersIcon size="1x" />
|
||||
<div class="dropdown">
|
||||
<button class="dropdown-button button" title="Show/hide layers">
|
||||
Layer Settings
|
||||
</button>
|
||||
<div class="dropdown-body">
|
||||
<label tabindex="0">
|
||||
<input
|
||||
type="checkbox"
|
||||
:checked="map.layers.last"
|
||||
@change="
|
||||
setMapLayerVisibility({
|
||||
layer: 'last',
|
||||
visibility: $event.target.checked,
|
||||
})
|
||||
"
|
||||
/>
|
||||
Show last known locations
|
||||
</label>
|
||||
<label tabindex="0">
|
||||
<input
|
||||
type="checkbox"
|
||||
:checked="map.layers.line"
|
||||
@change="
|
||||
setMapLayerVisibility({
|
||||
layer: 'line',
|
||||
visibility: $event.target.checked,
|
||||
})
|
||||
"
|
||||
/>
|
||||
Show location history (line)
|
||||
</label>
|
||||
<label tabindex="0">
|
||||
<input
|
||||
type="checkbox"
|
||||
:checked="map.layers.points"
|
||||
@change="
|
||||
setMapLayerVisibility({
|
||||
layer: 'points',
|
||||
visibility: $event.target.checked,
|
||||
})
|
||||
"
|
||||
/>
|
||||
Show location history (points)
|
||||
</label>
|
||||
<label tabindex="0">
|
||||
<input
|
||||
type="checkbox"
|
||||
:checked="map.layers.heatmap"
|
||||
@change="
|
||||
setMapLayerVisibility({
|
||||
layer: 'heatmap',
|
||||
visibility: $event.target.checked,
|
||||
})
|
||||
"
|
||||
/>
|
||||
Show location heatmap
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-item">
|
||||
<CalendarIcon size="1x" />
|
||||
<Datepicker
|
||||
v-model="startDate"
|
||||
:use-utc="true"
|
||||
:disabled-dates="startDateDisabledDates"
|
||||
title="Select start date"
|
||||
/>
|
||||
to
|
||||
<Datepicker
|
||||
v-model="endDate"
|
||||
:use-utc="true"
|
||||
:disabled-dates="endDateDisabledDates"
|
||||
title="Select end date"
|
||||
/>
|
||||
</div>
|
||||
<div class="nav-item">
|
||||
<UserIcon size="1x" />
|
||||
<select
|
||||
v-model="selectedUser"
|
||||
class="dropdown-button button"
|
||||
title="Select user"
|
||||
>
|
||||
<option :value="null">
|
||||
Show All
|
||||
</option>
|
||||
<option v-for="user in users" :value="user" :key="user">
|
||||
{{ user }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div v-if="selectedUser" class="nav-item">
|
||||
<SmartphoneIcon size="1x" />
|
||||
<select
|
||||
v-model="selectedDevice"
|
||||
class="dropdown-button button"
|
||||
title="Select device"
|
||||
>
|
||||
<option :value="null">
|
||||
Show All
|
||||
</option>
|
||||
<option
|
||||
v-for="device in devices[selectedUser]"
|
||||
:value="device"
|
||||
:key="`${selectedUser}-${device}`"
|
||||
>
|
||||
{{ device }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</nav>
|
||||
<nav class="nav-shrink">
|
||||
<div class="nav-item">
|
||||
<button
|
||||
class="button button-flat button-icon"
|
||||
title="Download raw data"
|
||||
@click="
|
||||
setModalVisibility({
|
||||
modal: 'download',
|
||||
visibility: true,
|
||||
})
|
||||
"
|
||||
>
|
||||
<DownloadIcon size="1x" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="nav-item">
|
||||
<button
|
||||
class="button button-flat button-icon"
|
||||
title="Information"
|
||||
@click="
|
||||
setModalVisibility({
|
||||
modal: 'information',
|
||||
visibility: true,
|
||||
})
|
||||
"
|
||||
>
|
||||
<InfoIcon size="1x" />
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapActions, mapGetters, mapMutations, mapState } from "vuex";
|
||||
import {
|
||||
CalendarIcon,
|
||||
DownloadIcon,
|
||||
InfoIcon,
|
||||
LayersIcon,
|
||||
SmartphoneIcon,
|
||||
UserIcon,
|
||||
} from "vue-feather-icons";
|
||||
import Datepicker from "vuejs-datepicker";
|
||||
|
||||
import * as types from "@/store/mutation-types";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
CalendarIcon,
|
||||
DownloadIcon,
|
||||
InfoIcon,
|
||||
LayersIcon,
|
||||
SmartphoneIcon,
|
||||
UserIcon,
|
||||
Datepicker,
|
||||
},
|
||||
computed: {
|
||||
...mapState(["users", "devices", "map"]),
|
||||
...mapGetters(["startDateDisabledDates", "endDateDisabledDates"]),
|
||||
selectedUser: {
|
||||
get() {
|
||||
return this.$store.state.selectedUser;
|
||||
},
|
||||
set(value) {
|
||||
this.setSelectedUser(value);
|
||||
},
|
||||
},
|
||||
selectedDevice: {
|
||||
get() {
|
||||
return this.$store.state.selectedDevice;
|
||||
},
|
||||
set(value) {
|
||||
this.setSelectedDevice(value);
|
||||
},
|
||||
},
|
||||
startDate: {
|
||||
get() {
|
||||
return this.$store.state.startDate;
|
||||
},
|
||||
set(value) {
|
||||
this.setStartDate(value);
|
||||
},
|
||||
},
|
||||
endDate: {
|
||||
get() {
|
||||
return this.$store.state.endDate;
|
||||
},
|
||||
set(value) {
|
||||
this.setEndDate(value);
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({
|
||||
setMapLayerVisibility: types.SET_MAP_LAYER_VISIBILITY,
|
||||
setModalVisibility: types.SET_MODAL_VISIBILITY,
|
||||
}),
|
||||
...mapActions([
|
||||
"setSelectedUser",
|
||||
"setSelectedDevice",
|
||||
"setStartDate",
|
||||
"setEndDate",
|
||||
]),
|
||||
},
|
||||
};
|
||||
</script>
|
||||
89
src/components/LDeviceLocationPopup.vue
Normal file
89
src/components/LDeviceLocationPopup.vue
Normal file
@@ -0,0 +1,89 @@
|
||||
<template>
|
||||
<LPopup>
|
||||
<img v-if="face" class="location-popup-face" :src="faceImageDataURI" />
|
||||
<b v-if="name">{{ name }}</b>
|
||||
<b v-else>{{ user }}/{{ device }}</b>
|
||||
<div class="location-popup-detail">
|
||||
<span class="mdi mdi-16px mdi-calendar-clock"></span>
|
||||
{{ new Date(timestamp * 1000).toLocaleString() }}
|
||||
</div>
|
||||
<div class="location-popup-detail">
|
||||
<span class="mdi mdi-16px mdi-crosshairs-gps"></span>
|
||||
{{ lat }}, {{ lon }}, {{ alt }}m
|
||||
</div>
|
||||
<div v-if="address" class="location-popup-detail">
|
||||
<span class="mdi mdi-16px mdi-map-marker"></span>
|
||||
{{ address }}
|
||||
</div>
|
||||
<div v-if="typeof battery === 'number'" class="location-popup-detail">
|
||||
<span class="mdi mdi-16px mdi-battery"></span>
|
||||
{{ battery }} %
|
||||
</div>
|
||||
<div v-if="typeof speed === 'number'" class="location-popup-detail">
|
||||
<span class="mdi mdi-16px mdi-speedometer"></span>
|
||||
{{ speed }} km/h
|
||||
</div>
|
||||
</LPopup>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { LPopup } from "vue2-leaflet";
|
||||
|
||||
export default {
|
||||
name: "LDeviceLocationPopup",
|
||||
components: {
|
||||
LPopup,
|
||||
},
|
||||
props: {
|
||||
user: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
device: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
face: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
timestamp: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
lat: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
lon: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
alt: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
address: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
battery: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
speed: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
faceImageDataURI() {
|
||||
return `data:image/png;base64,${this.face}`;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
39
src/components/Modal.vue
Normal file
39
src/components/Modal.vue
Normal file
@@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<div class="modal" v-show="modals[name]" @click.self="close">
|
||||
<div class="modal-container">
|
||||
<button class="modal-close-button" title="Close" @click="close">
|
||||
×
|
||||
</button>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapMutations, mapState } from "vuex";
|
||||
|
||||
import * as types from "@/store/mutation-types";
|
||||
|
||||
export default {
|
||||
props: {
|
||||
name: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
...mapState(["modals"]),
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({
|
||||
setModalVisibility: types.SET_MODAL_VISIBILITY,
|
||||
}),
|
||||
close() {
|
||||
this.setModalVisibility({
|
||||
modal: this.name,
|
||||
visibility: false,
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
103
src/config.js
Normal file
103
src/config.js
Normal file
@@ -0,0 +1,103 @@
|
||||
import deepmerge from "deepmerge";
|
||||
|
||||
const endDate = new Date();
|
||||
endDate.setUTCHours(0);
|
||||
endDate.setUTCMinutes(0);
|
||||
endDate.setUTCSeconds(0);
|
||||
|
||||
const startDate = new Date(endDate);
|
||||
startDate.setUTCMonth(startDate.getMonth() - 1);
|
||||
|
||||
const DEFAULT_CONFIG = {
|
||||
api: {
|
||||
// API base URL, defaults to the same domain. Keep CORS in mind.
|
||||
baseUrl: `${window.location.protocol}//${window.location.host}`,
|
||||
},
|
||||
accentColor: "#478db2",
|
||||
// Initial start and end date. Doesn't have to be hardcoded, see
|
||||
// above. Defaults to one month ago - today.
|
||||
startDate,
|
||||
endDate,
|
||||
// User and device selected by default. Set to null to show all by default.
|
||||
selectedUser: null,
|
||||
selectedDevice: null,
|
||||
map: {
|
||||
// Initial map center position
|
||||
center: { lat: 0, lng: 0 },
|
||||
// Initial map zoom
|
||||
zoom: 19,
|
||||
// This is being used to fetch tiles in different resolutions -
|
||||
// set to the highest value the configured tileserver supports.
|
||||
maxNativeZoom: 19,
|
||||
// Allow zooming closer than the tile server supports, which will
|
||||
// result in (slightly) blurry tiles on higher zoom levels. Set
|
||||
// to the same value as `maxNativeZoom` to disable.
|
||||
maxZoom: 21,
|
||||
// Tile server URL. See Leaflet documentation for more info.
|
||||
url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
|
||||
attribution:
|
||||
'© <a href="https://osm.org/copyright">OpenStreetMap</a> contributors',
|
||||
// Leaflet map controls. Options should be self-explanatory.
|
||||
controls: {
|
||||
zoom: {
|
||||
display: true,
|
||||
position: "topleft",
|
||||
},
|
||||
scale: {
|
||||
display: true,
|
||||
position: "bottomleft",
|
||||
maxWidth: 200,
|
||||
metric: true,
|
||||
imperial: true,
|
||||
},
|
||||
},
|
||||
// `color` and `fillColor` default to `accentColor` when null.
|
||||
polyline: {
|
||||
color: null,
|
||||
fillColor: "transparent",
|
||||
},
|
||||
circle: {
|
||||
color: null,
|
||||
fillColor: null,
|
||||
fillOpacity: 0.2,
|
||||
},
|
||||
circleMarker: {
|
||||
color: null,
|
||||
fillColor: "#fff",
|
||||
fillOpacity: 1,
|
||||
radius: 4,
|
||||
},
|
||||
// Configuration for the heatmap (simpleheat). See
|
||||
// https://github.com/mourner/simpleheat for more info.
|
||||
heatmap: {
|
||||
max: 20,
|
||||
radius: 25,
|
||||
blur: 15,
|
||||
// Uses simpleheat's default gradient when null. See
|
||||
// https://github.com/mourner/simpleheat/blob/c1998c36fa2f9a31350371fd42ee30eafcc78f9c/simpleheat.js#L22-L28
|
||||
gradient: null,
|
||||
},
|
||||
// Which layers to show by default. The source of truth at runtime
|
||||
// is the Vuex store, which is initialised from these values and
|
||||
// the query parameters, in that order.
|
||||
layers: {
|
||||
last: true,
|
||||
line: true,
|
||||
points: false,
|
||||
heatmap: false,
|
||||
},
|
||||
// Maximum distance (in meters) between points for them to be part
|
||||
// of the the same line. This avoids straight lines going across
|
||||
// the map when there's a large distance between two points (which
|
||||
// usually indicates that they're not related). Set to Infinity to
|
||||
// disable splitting into separate lines.
|
||||
maxPointDistance: 1000,
|
||||
},
|
||||
};
|
||||
|
||||
// Use deepmerge to combine the default and user-defined configuration.
|
||||
// This enables the user to use a fairly small config object which only
|
||||
// needs to contain actual changes, not all default values - and these
|
||||
// stay up-to-date automatically.
|
||||
// There might not be a user-defined config, default to an empty object.
|
||||
export default deepmerge(DEFAULT_CONFIG, (window.owntracks || {}).config || {});
|
||||
9
src/constants.js
Normal file
9
src/constants.js
Normal file
@@ -0,0 +1,9 @@
|
||||
// Regular expression for an ISO 8601 YYYY-MM-DD date.
|
||||
// Used to validate dates from URL query parameters.
|
||||
export const ISO_DATE_REGEXP = new RegExp(
|
||||
/^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])$/
|
||||
);
|
||||
|
||||
// https://en.wikipedia.org/wiki/Earth_radius
|
||||
// Used to calculate the distance between two coordinates.
|
||||
export const EARTH_RADIUS_IN_KM = 6371;
|
||||
12
src/main.js
Normal file
12
src/main.js
Normal file
@@ -0,0 +1,12 @@
|
||||
import Vue from "vue";
|
||||
import App from "@/App.vue";
|
||||
import router from "@/router";
|
||||
import store from "@/store";
|
||||
|
||||
Vue.config.productionTip = false;
|
||||
|
||||
new Vue({
|
||||
router,
|
||||
store,
|
||||
render: h => h(App),
|
||||
}).$mount("#app");
|
||||
17
src/router.js
Normal file
17
src/router.js
Normal file
@@ -0,0 +1,17 @@
|
||||
import Vue from "vue";
|
||||
import Router from "vue-router";
|
||||
import Map from "./views/Map.vue";
|
||||
|
||||
Vue.use(Router);
|
||||
|
||||
export default new Router({
|
||||
mode: "history",
|
||||
base: process.env.BASE_URL,
|
||||
routes: [
|
||||
{
|
||||
path: "/",
|
||||
name: "map",
|
||||
component: Map,
|
||||
},
|
||||
],
|
||||
});
|
||||
184
src/store/actions.js
Normal file
184
src/store/actions.js
Normal file
@@ -0,0 +1,184 @@
|
||||
import * as types from "@/store/mutation-types";
|
||||
import * as api from "@/api";
|
||||
import { isIsoDate } from "@/util";
|
||||
|
||||
/**
|
||||
* Populate the state from URL query parameters.
|
||||
*
|
||||
* @param {Object} query URL query parameters
|
||||
*/
|
||||
const populateStateFromQuery = ({ state, commit }, query) => {
|
||||
if (query.lat && !isNaN(parseFloat(query.lat))) {
|
||||
commit(types.SET_MAP_CENTER, {
|
||||
lat: query.lat,
|
||||
lng: parseFloat(state.map.center.lng),
|
||||
});
|
||||
}
|
||||
if (query.lng && !isNaN(parseFloat(query.lng))) {
|
||||
commit(types.SET_MAP_CENTER, {
|
||||
lat: parseFloat(state.map.center.lat),
|
||||
lng: query.lng,
|
||||
});
|
||||
}
|
||||
if (query.zoom && !isNaN(parseInt(query.zoom))) {
|
||||
commit(types.SET_MAP_ZOOM, parseInt(query.zoom));
|
||||
}
|
||||
if (query.start && isIsoDate(query.start)) {
|
||||
commit(types.SET_START_DATE, new Date(query.start));
|
||||
}
|
||||
if (query.end && isIsoDate(query.end)) {
|
||||
commit(types.SET_END_DATE, new Date(query.end));
|
||||
}
|
||||
if (query.user) {
|
||||
commit(types.SET_SELECTED_USER, query.user);
|
||||
}
|
||||
if (query.device) {
|
||||
commit(types.SET_SELECTED_DEVICE, query.device);
|
||||
}
|
||||
if (query.layers) {
|
||||
const activeLayers = query.layers.split(",");
|
||||
Object.keys(state.map.layers).forEach(layer => {
|
||||
const visibility = activeLayers.includes(layer);
|
||||
if (state.map.layers[layer] !== visibility) {
|
||||
commit(types.SET_MAP_LAYER_VISIBILITY, { layer, visibility });
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Trigger loading of all required data: users, devices, last locations,
|
||||
* location history, version and initiate WebSocket connection.
|
||||
*/
|
||||
const loadData = async ({ dispatch }) => {
|
||||
await dispatch("getUsers");
|
||||
await dispatch("getDevices");
|
||||
await dispatch("getLastLocations");
|
||||
await dispatch("getLocationHistory");
|
||||
await dispatch("getRecorderVersion");
|
||||
await dispatch("connectWebsocket");
|
||||
};
|
||||
|
||||
/**
|
||||
* Connect to WebSocket to receive live location updates. When an update is
|
||||
* received, reload last locations and location history.
|
||||
*/
|
||||
const connectWebsocket = async ({ dispatch }) => {
|
||||
api.connectWebsocket(async () => {
|
||||
await dispatch("getLastLocations");
|
||||
// Reloading the complete location history is necessary because the
|
||||
// last locations do lack some of the detailed information.
|
||||
// TODO: make this optional via config.
|
||||
await dispatch("getLocationHistory");
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Load user names.
|
||||
*/
|
||||
const getUsers = async ({ commit }) => {
|
||||
commit(types.SET_USERS, await api.getUsers());
|
||||
};
|
||||
|
||||
/**
|
||||
* Load devices names of all users.
|
||||
*/
|
||||
const getDevices = async ({ commit, state }) => {
|
||||
commit(types.SET_DEVICES, await api.getDevices(state.users));
|
||||
};
|
||||
|
||||
/**
|
||||
* Load last location of the selected user/device.
|
||||
*/
|
||||
const getLastLocations = async ({ commit, state }) => {
|
||||
commit(
|
||||
types.SET_LAST_LOCATIONS,
|
||||
await api.getLastLocations(state.selectedUser, state.selectedDevice)
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Load location history of all devices, in the selected date range.
|
||||
*/
|
||||
const getLocationHistory = async ({ commit, state }) => {
|
||||
let devices;
|
||||
if (state.selectedUser) {
|
||||
if (state.selectedDevice) {
|
||||
devices = { [state.selectedUser]: [state.selectedDevice] };
|
||||
} else {
|
||||
devices = { [state.selectedUser]: state.devices[state.selectedUser] };
|
||||
}
|
||||
} else {
|
||||
devices = state.devices;
|
||||
}
|
||||
commit(
|
||||
types.SET_LOCATION_HISTORY,
|
||||
await api.getLocationHistory(devices, state.startDate, state.endDate)
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Load the OwnTracks recorder version.
|
||||
*/
|
||||
const getRecorderVersion = async ({ commit }) => {
|
||||
commit(types.SET_RECORDER_VERSION, await api.getVersion());
|
||||
};
|
||||
|
||||
/**
|
||||
* Set the selected user and reload the location history.
|
||||
*
|
||||
* @param {string} user Name of the new selected user
|
||||
*/
|
||||
const setSelectedUser = async ({ commit, dispatch }, user) => {
|
||||
commit(types.SET_SELECTED_USER, user);
|
||||
await dispatch("getLocationHistory");
|
||||
await dispatch("getLastLocations");
|
||||
};
|
||||
|
||||
/**
|
||||
* Set the selected device and reload the location history.
|
||||
*
|
||||
* @param {string} device Name of the new selected device
|
||||
*/
|
||||
const setSelectedDevice = async ({ commit, dispatch }, device) => {
|
||||
commit(types.SET_SELECTED_DEVICE, device);
|
||||
await dispatch("getLocationHistory");
|
||||
await dispatch("getLastLocations");
|
||||
};
|
||||
|
||||
/**
|
||||
* Set the start date for loading data and reload the location history.
|
||||
*
|
||||
* @param {Date} startDate Start date for loading data
|
||||
*/
|
||||
const setStartDate = async ({ commit, dispatch }, startDate) => {
|
||||
commit(types.SET_START_DATE, startDate);
|
||||
await dispatch("getLocationHistory");
|
||||
await dispatch("getLastLocations");
|
||||
};
|
||||
|
||||
/**
|
||||
* Set the end date for loading data and reload the location history.
|
||||
*
|
||||
* @param {Date} endDate End date for loading data
|
||||
*/
|
||||
const setEndDate = async ({ commit, dispatch }, endDate) => {
|
||||
commit(types.SET_END_DATE, endDate);
|
||||
await dispatch("getLocationHistory");
|
||||
await dispatch("getLastLocations");
|
||||
};
|
||||
|
||||
export default {
|
||||
populateStateFromQuery,
|
||||
loadData,
|
||||
connectWebsocket,
|
||||
getUsers,
|
||||
getDevices,
|
||||
getLastLocations,
|
||||
getLocationHistory,
|
||||
getRecorderVersion,
|
||||
setSelectedUser,
|
||||
setSelectedDevice,
|
||||
setStartDate,
|
||||
setEndDate,
|
||||
};
|
||||
93
src/store/getters.js
Normal file
93
src/store/getters.js
Normal file
@@ -0,0 +1,93 @@
|
||||
import L from "leaflet";
|
||||
|
||||
import config from "@/config";
|
||||
import { distanceBetweenCoordinates } from "@/util";
|
||||
|
||||
/**
|
||||
* From the selected users' and devices' location histories, create an
|
||||
* array of all coordinates.
|
||||
*
|
||||
* @param {Object} state.locationHistory Location history of selected users and devices
|
||||
* @return {Array.<L.LatLng>} All coordinates
|
||||
*/
|
||||
const locationHistoryLatLngs = state => {
|
||||
const latLngs = [];
|
||||
Object.keys(state.locationHistory).forEach(user => {
|
||||
Object.keys(state.locationHistory[user]).forEach(device => {
|
||||
state.locationHistory[user][device].forEach(coordinate => {
|
||||
latLngs.push(L.latLng(coordinate.lat, coordinate.lon));
|
||||
});
|
||||
});
|
||||
});
|
||||
return latLngs;
|
||||
};
|
||||
|
||||
/**
|
||||
* From the selected users' and devices' location histories, create an
|
||||
* array of coordinate groups where the distance between two subsequent
|
||||
* coordinates does not exceed `config.map.maxPointDistance`.
|
||||
*
|
||||
* @param {Object} state.locationHistory Location history of selected users and devices
|
||||
* @return {Array.<Array.<L.LatLng>>} Groups of coherent coordinates
|
||||
*/
|
||||
const locationHistoryLatLngGroups = state => {
|
||||
const groups = [];
|
||||
Object.keys(state.locationHistory).forEach(user => {
|
||||
Object.keys(state.locationHistory[user]).forEach(device => {
|
||||
let latLngs = [];
|
||||
state.locationHistory[user][device].forEach(coordinate => {
|
||||
const latLng = L.latLng(coordinate.lat, coordinate.lon);
|
||||
// Skip if group splitting is disabled or this is the first
|
||||
// coordinate in the current group
|
||||
if (config.map.maxPointDistance !== null && latLngs.length > 0) {
|
||||
const lastLatLng = latLngs.slice(-1)[0];
|
||||
if (
|
||||
distanceBetweenCoordinates(lastLatLng, latLng) >
|
||||
config.map.maxPointDistance
|
||||
) {
|
||||
// Distance is too far, start new group of coordinate
|
||||
groups.push(latLngs);
|
||||
latLngs = [];
|
||||
}
|
||||
}
|
||||
// Add coordinate to current active group
|
||||
latLngs.push(latLng);
|
||||
});
|
||||
groups.push(latLngs);
|
||||
});
|
||||
});
|
||||
return groups;
|
||||
};
|
||||
|
||||
/**
|
||||
* For the start date selector, disable all dates above the end date
|
||||
* or current date.
|
||||
*
|
||||
* @param {Date} state.endDate End date
|
||||
* @return {Object} Configuration for the `disabled-dates` prop of the `vuejs-datepicker` component
|
||||
*/
|
||||
const startDateDisabledDates = state => {
|
||||
return {
|
||||
customPredictor: date => date > state.endDate || date > new Date(),
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* For the end date selector, disable all dates below the start date
|
||||
* or above the current date.
|
||||
*
|
||||
* @param {Date} state.startDate Start date
|
||||
* @return {Object} Configuration for the `disabled-dates` prop of the `vuejs-datepicker` component
|
||||
*/
|
||||
const endDateDisabledDates = state => {
|
||||
return {
|
||||
customPredictor: date => date < state.startDate || date > new Date(),
|
||||
};
|
||||
};
|
||||
|
||||
export default {
|
||||
locationHistoryLatLngs,
|
||||
locationHistoryLatLngGroups,
|
||||
startDateDisabledDates,
|
||||
endDateDisabledDates,
|
||||
};
|
||||
36
src/store/index.js
Normal file
36
src/store/index.js
Normal file
@@ -0,0 +1,36 @@
|
||||
import Vue from "vue";
|
||||
import Vuex from "vuex";
|
||||
|
||||
import getters from "@/store/getters";
|
||||
import mutations from "@/store/mutations";
|
||||
import actions from "@/store/actions";
|
||||
import config from "@/config";
|
||||
|
||||
Vue.use(Vuex);
|
||||
|
||||
export default new Vuex.Store({
|
||||
state: {
|
||||
frontendVersion: process.env.PACKAGE_VERSION,
|
||||
recorderVersion: "",
|
||||
users: [],
|
||||
devices: {},
|
||||
lastLocations: [],
|
||||
locationHistory: {},
|
||||
selectedUser: config.selectedUser,
|
||||
selectedDevice: config.selectedDevice,
|
||||
startDate: config.startDate,
|
||||
endDate: config.endDate,
|
||||
map: {
|
||||
center: config.map.center,
|
||||
zoom: config.map.zoom,
|
||||
layers: config.map.layers,
|
||||
},
|
||||
modals: {
|
||||
download: false,
|
||||
information: false,
|
||||
},
|
||||
},
|
||||
getters,
|
||||
mutations,
|
||||
actions,
|
||||
});
|
||||
13
src/store/mutation-types.js
Normal file
13
src/store/mutation-types.js
Normal file
@@ -0,0 +1,13 @@
|
||||
export const SET_RECORDER_VERSION = "SET_RECORDER_VERSION";
|
||||
export const SET_USERS = "SET_USERS";
|
||||
export const SET_DEVICES = "SET_DEVICES";
|
||||
export const SET_LAST_LOCATIONS = "SET_LAST_LOCATIONS";
|
||||
export const SET_LOCATION_HISTORY = "SET_LOCATION_HISTORY";
|
||||
export const SET_SELECTED_USER = "SET_SELECTED_USER";
|
||||
export const SET_SELECTED_DEVICE = "SET_SELECTED_DEVICE";
|
||||
export const SET_START_DATE = "SET_START_DATE";
|
||||
export const SET_END_DATE = "SET_END_DATE";
|
||||
export const SET_MAP_CENTER = "SET_MAP_CENTER";
|
||||
export const SET_MAP_ZOOM = "SET_MAP_ZOOM";
|
||||
export const SET_MAP_LAYER_VISIBILITY = "SET_MAP_LAYER_VISIBILITY";
|
||||
export const SET_MODAL_VISIBILITY = "SET_MODAL_VISIBILITY";
|
||||
43
src/store/mutations.js
Normal file
43
src/store/mutations.js
Normal file
@@ -0,0 +1,43 @@
|
||||
import * as types from "@/store/mutation-types";
|
||||
|
||||
export default {
|
||||
[types.SET_RECORDER_VERSION](state, version) {
|
||||
state.recorderVersion = version;
|
||||
},
|
||||
[types.SET_USERS](state, users) {
|
||||
state.users = users;
|
||||
},
|
||||
[types.SET_DEVICES](state, devices) {
|
||||
state.devices = devices;
|
||||
},
|
||||
[types.SET_LAST_LOCATIONS](state, lastLocations) {
|
||||
state.lastLocations = lastLocations;
|
||||
},
|
||||
[types.SET_LOCATION_HISTORY](state, locationHistory) {
|
||||
state.locationHistory = locationHistory;
|
||||
},
|
||||
[types.SET_SELECTED_USER](state, selectedUser) {
|
||||
state.selectedUser = selectedUser;
|
||||
},
|
||||
[types.SET_SELECTED_DEVICE](state, selectedDevice) {
|
||||
state.selectedDevice = selectedDevice;
|
||||
},
|
||||
[types.SET_START_DATE](state, startDate) {
|
||||
state.startDate = startDate;
|
||||
},
|
||||
[types.SET_END_DATE](state, endDate) {
|
||||
state.endDate = endDate;
|
||||
},
|
||||
[types.SET_MAP_CENTER](state, center) {
|
||||
state.map.center = center;
|
||||
},
|
||||
[types.SET_MAP_ZOOM](state, zoom) {
|
||||
state.map.zoom = zoom;
|
||||
},
|
||||
[types.SET_MAP_LAYER_VISIBILITY](state, { layer, visibility }) {
|
||||
state.map.layers[layer] = visibility;
|
||||
},
|
||||
[types.SET_MODAL_VISIBILITY](state, { modal, visibility }) {
|
||||
state.modals[modal] = visibility;
|
||||
},
|
||||
};
|
||||
@@ -7,7 +7,7 @@
|
||||
:root {
|
||||
--color-text: #333;
|
||||
--color-background: #fff;
|
||||
--color-accent: #3388ff;
|
||||
--color-accent: #478db2;
|
||||
--color-accent-text: #fff;
|
||||
--drop-shadow: drop-shadow(0 10px 10px rgb(0, 0, 0, 0.2));
|
||||
--dropdown-arrow: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2225%22%20height%3D%2210%22%3E%3Cpath%20fill%3D%22%23333%22%20fill-opacity%3D%221%22%20stroke%3D%22none%22%20d%3D%22M0%2C0%20L0%2C0%20L1%2C0%20L1%2C6%20L7%2C6%20L7%2C7%20L0%2C7%20z%22%20transform%3D%22rotate(-45%205%200)%22%20%2F%3E%3C%2Fsvg%3E");
|
||||
@@ -31,6 +31,13 @@ ul {
|
||||
list-style: inside;
|
||||
}
|
||||
|
||||
.vue2leaflet-map {
|
||||
height: 100vh;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
#app {
|
||||
display: flex;
|
||||
min-height: 100%;
|
||||
@@ -42,6 +49,7 @@ ul {
|
||||
padding: 20px;
|
||||
white-space: nowrap;
|
||||
overflow-x: auto;
|
||||
z-index: 1;
|
||||
color: var(--color-accent-text);
|
||||
background: var(--color-accent);
|
||||
}
|
||||
@@ -69,8 +77,6 @@ ul {
|
||||
|
||||
#app > main {
|
||||
flex: 1;
|
||||
/* https://github.com/linusg/owntracks-ui/issues/6 */
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.button,
|
||||
@@ -199,11 +205,6 @@ ul {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.leaflet-container {
|
||||
/* https://github.com/linusg/owntracks-ui/issues/6 */
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.leaflet-container .leaflet-popup {
|
||||
filter: var(--drop-shadow);
|
||||
}
|
||||
@@ -254,17 +255,14 @@ ul {
|
||||
color: var(--color-accent-text);
|
||||
}
|
||||
|
||||
header .mdi {
|
||||
header .feather {
|
||||
font-size: 20px;
|
||||
margin-right: 10px;
|
||||
position: relative;
|
||||
top: 5px;
|
||||
margin-right: 3px;
|
||||
top: -2px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
header .button .mdi {
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.mdi-16px.mdi-set,
|
||||
.mdi-16px.mdi::before {
|
||||
font-size: 16px;
|
||||
}
|
||||
.button-icon .feather {
|
||||
margin: 0;
|
||||
}
|
||||
1
src/styles/main.scss
Normal file
1
src/styles/main.scss
Normal file
@@ -0,0 +1 @@
|
||||
@import "base";
|
||||
27
src/util.js
Normal file
27
src/util.js
Normal file
@@ -0,0 +1,27 @@
|
||||
import config from "@/config";
|
||||
import { ISO_DATE_REGEXP, EARTH_RADIUS_IN_KM } from "@/constants";
|
||||
|
||||
export const getApiUrl = path => new URL(`${config.api.baseUrl}${path}`);
|
||||
export const isIsoDate = s => ISO_DATE_REGEXP.test(s);
|
||||
export const degreesToRadians = degrees => (degrees * Math.PI) / 180;
|
||||
|
||||
// https://stackoverflow.com/a/365853/5952681
|
||||
export const distanceBetweenCoordinates = (c1, c2) => {
|
||||
const latDistanceInRad = degreesToRadians(c1.lat - c2.lat);
|
||||
const lngDistanceInRad = degreesToRadians(c1.lng - c2.lng);
|
||||
const lat1InRad = degreesToRadians(c1.lat);
|
||||
const lat2InRad = degreesToRadians(c2.lat);
|
||||
const a =
|
||||
Math.sin(latDistanceInRad / 2) * Math.sin(latDistanceInRad / 2) +
|
||||
Math.sin(lngDistanceInRad / 2) *
|
||||
Math.sin(lngDistanceInRad / 2) *
|
||||
Math.cos(lat1InRad) *
|
||||
Math.cos(lat2InRad);
|
||||
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
|
||||
// Return distance in meters
|
||||
return EARTH_RADIUS_IN_KM * c * 1000;
|
||||
};
|
||||
|
||||
export const capitalizeFirstLetter = string => {
|
||||
return string.charAt(0).toUpperCase() + string.slice(1);
|
||||
};
|
||||
210
src/views/Map.vue
Normal file
210
src/views/Map.vue
Normal file
@@ -0,0 +1,210 @@
|
||||
<template>
|
||||
<LMap
|
||||
ref="map"
|
||||
:center="map.center"
|
||||
:zoom="map.zoom"
|
||||
@update:center="setMapCenter"
|
||||
@update:zoom="setMapZoom"
|
||||
>
|
||||
<LControlZoom
|
||||
v-if="controls.zoom.display"
|
||||
:position="controls.zoom.position"
|
||||
/>
|
||||
<LControlScale
|
||||
v-if="controls.scale.display"
|
||||
:position="controls.scale.position"
|
||||
:maxWidth="controls.scale.maxWidth"
|
||||
:metric="controls.scale.metric"
|
||||
:imperial="controls.scale.imperial"
|
||||
/>
|
||||
<LTileLayer
|
||||
:url="url"
|
||||
:attribution="attribution"
|
||||
:options="{ maxNativeZoom, maxZoom }"
|
||||
/>
|
||||
|
||||
<template v-if="map.layers.last">
|
||||
<LCircle
|
||||
v-for="l in lastLocations"
|
||||
:key="`${l.topic}-circle`"
|
||||
:lat-lng="{ lat: l.lat, lng: l.lon }"
|
||||
:radius="l.acc"
|
||||
:color="circle.color"
|
||||
:fill-color="circle.fillColor"
|
||||
:fill-opacity="circle.fillOpacity"
|
||||
/>
|
||||
|
||||
<LMarker
|
||||
v-for="l in lastLocations"
|
||||
:key="`${l.topic}-marker`"
|
||||
:lat-lng="[l.lat, l.lon]"
|
||||
>
|
||||
<LDeviceLocationPopup
|
||||
:user="l.username"
|
||||
:device="l.device"
|
||||
:name="l.name"
|
||||
:face="l.face"
|
||||
:timestamp="l.tst"
|
||||
:lat="l.lat"
|
||||
:lon="l.lon"
|
||||
:alt="l.alt"
|
||||
:battery="l.batt"
|
||||
:speed="l.vel"
|
||||
/>
|
||||
</LMarker>
|
||||
</template>
|
||||
|
||||
<template v-if="map.layers.line">
|
||||
<LPolyline
|
||||
v-for="(group, i) in locationHistoryLatLngGroups"
|
||||
:key="i"
|
||||
:lat-lngs="group"
|
||||
:color="polyline.color"
|
||||
:fill-color="polyline.fillColor"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template v-if="map.layers.points">
|
||||
<template v-for="(userDevices, user) in locationHistory">
|
||||
<template v-for="(deviceLocations, device) in userDevices">
|
||||
<LCircleMarker
|
||||
v-for="(l, n) in deviceLocations"
|
||||
:key="`${user}-${device}-${n}`"
|
||||
:lat-lng="[l.lat, l.lon]"
|
||||
:radius="circleMarker.radius"
|
||||
:color="circleMarker.color"
|
||||
:fill-color="circleMarker.fillColor"
|
||||
:fill-opacity="circleMarker.fillOpacity"
|
||||
>
|
||||
<LDeviceLocationPopup
|
||||
:user="user"
|
||||
:device="device"
|
||||
:timestamp="l.tst"
|
||||
:lat="l.lat"
|
||||
:lon="l.lon"
|
||||
:alt="l.alt"
|
||||
:battery="l.batt"
|
||||
:speed="l.vel"
|
||||
></LDeviceLocationPopup>
|
||||
</LCircleMarker>
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<template v-if="map.layers.heatmap">
|
||||
<LHeatmap
|
||||
v-if="locationHistoryLatLngs.length"
|
||||
:lat-lng="locationHistoryLatLngs"
|
||||
:max="heatmap.max"
|
||||
:radius="heatmap.radius"
|
||||
:blur="heatmap.blur"
|
||||
:gradient="heatmap.gradient"
|
||||
/>
|
||||
</template>
|
||||
</LMap>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters, mapState, mapMutations } from "vuex";
|
||||
import L from "leaflet";
|
||||
import "leaflet.heat";
|
||||
import {
|
||||
LMap,
|
||||
LTileLayer,
|
||||
LControlScale,
|
||||
LControlZoom,
|
||||
LMarker,
|
||||
LCircleMarker,
|
||||
LCircle,
|
||||
LPolyline,
|
||||
} from "vue2-leaflet";
|
||||
import "leaflet/dist/leaflet.css";
|
||||
import markerIcon from "leaflet/dist/images/marker-icon.png";
|
||||
import markerIcon2x from "leaflet/dist/images/marker-icon-2x.png";
|
||||
import markerShadow from "leaflet/dist/images/marker-shadow.png";
|
||||
import LHeatmap from "vue2-leaflet-heatmap";
|
||||
|
||||
import * as types from "@/store/mutation-types";
|
||||
import config from "@/config";
|
||||
import LDeviceLocationPopup from "@/components/LDeviceLocationPopup";
|
||||
|
||||
// See https://github.com/KoRiGaN/Vue2Leaflet/issues/28#issuecomment-299038157
|
||||
delete L.Icon.Default.prototype._getIconUrl;
|
||||
L.Icon.Default.mergeOptions({
|
||||
iconUrl: markerIcon,
|
||||
iconRetinaUrl: markerIcon2x,
|
||||
shadowUrl: markerShadow,
|
||||
});
|
||||
|
||||
export default {
|
||||
components: {
|
||||
LMap,
|
||||
LTileLayer,
|
||||
LControlScale,
|
||||
LControlZoom,
|
||||
LMarker,
|
||||
LCircleMarker,
|
||||
LCircle,
|
||||
LPolyline,
|
||||
LDeviceLocationPopup,
|
||||
LHeatmap,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
center: this.$store.state.map.center,
|
||||
zoom: this.$store.state.map.zoom,
|
||||
maxNativeZoom: config.map.maxNativeZoom,
|
||||
maxZoom: config.map.maxZoom,
|
||||
url: config.map.url,
|
||||
attribution: config.map.attribution,
|
||||
controls: config.map.controls,
|
||||
polyline: {
|
||||
...config.map.polyline,
|
||||
color: config.map.polyline.color || config.accentColor,
|
||||
},
|
||||
circle: {
|
||||
...config.map.circle,
|
||||
color: config.map.circle.color || config.accentColor,
|
||||
fillColor: config.map.circle.fillColor || config.accentColor,
|
||||
},
|
||||
circleMarker: {
|
||||
...config.map.circleMarker,
|
||||
color: config.map.circleMarker.color || config.accentColor,
|
||||
},
|
||||
heatmap: config.map.heatmap,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.$root.$on("fitView", () => {
|
||||
this.fitView();
|
||||
});
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(["locationHistoryLatLngs", "locationHistoryLatLngGroups"]),
|
||||
...mapState(["lastLocations", "locationHistory", "map"]),
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({
|
||||
setMapCenter: types.SET_MAP_CENTER,
|
||||
setMapZoom: types.SET_MAP_ZOOM,
|
||||
}),
|
||||
fitView() {
|
||||
if (
|
||||
(this.map.layers.line ||
|
||||
this.map.layers.loints ||
|
||||
this.map.layers.heatmap) &&
|
||||
this.locationHistoryLatLngs.length > 0
|
||||
) {
|
||||
this.$refs.map.mapObject.fitBounds(
|
||||
new L.LatLngBounds(this.locationHistoryLatLngs)
|
||||
);
|
||||
} else if (this.map.layers.last && this.lastLocations.length > 0) {
|
||||
const locations = this.lastLocations.map(l => L.latLng(l.lat, l.lon));
|
||||
this.$refs.map.mapObject.fitBounds(new L.LatLngBounds(locations), {
|
||||
maxZoom: this.maxNativeZoom,
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -1,80 +0,0 @@
|
||||
(() => {
|
||||
const props = {
|
||||
user: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
device: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
face: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
timestamp: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
lat: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
lon: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
alt: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
address: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
battery: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
speed: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
};
|
||||
const { LPopup } = Vue2Leaflet;
|
||||
Vue.component('location-popup', {
|
||||
template: `
|
||||
<l-popup>
|
||||
<img v-if="face" class="location-popup-face" :src="faceImageDataURI">
|
||||
<b v-if="name">{{ name }}</b>
|
||||
<b v-else>{{ user }}/{{ device }}</b>
|
||||
<div class="location-popup-detail">
|
||||
<span class="mdi mdi-16px mdi-calendar-clock"></span> {{ new Date(timestamp * 1000).toLocaleString() }}
|
||||
</div>
|
||||
<div class="location-popup-detail">
|
||||
<span class="mdi mdi-16px mdi-crosshairs-gps"></span> {{ lat }}, {{ lon }}, {{ alt }}m
|
||||
</div class="location-popup-detail">
|
||||
<div v-if="address" class="location-popup-detail">
|
||||
<span class="mdi mdi-16px mdi-map-marker"></span> {{ address }}
|
||||
</div>
|
||||
<div v-if="typeof battery === 'number'" class="location-popup-detail">
|
||||
<span class="mdi mdi-16px mdi-battery"></span> {{ battery }} %
|
||||
</div>
|
||||
<div v-if="typeof battery === 'number'" class="location-popup-detail">
|
||||
<span class="mdi mdi-16px mdi-speedometer"></span> {{ speed }} km/h
|
||||
</div>
|
||||
</l-popup>
|
||||
`,
|
||||
components: { LPopup },
|
||||
props,
|
||||
computed: {
|
||||
faceImageDataURI() {
|
||||
return `data:image/png;base64,${this.face}`;
|
||||
},
|
||||
},
|
||||
});
|
||||
})();
|
||||
@@ -1,18 +0,0 @@
|
||||
Vue.component('modal', {
|
||||
template: `
|
||||
<div class="modal" v-show="visible" @click.self="$emit('close')">
|
||||
<div class="modal-container">
|
||||
<button class="modal-close-button" title="Close" @click="$emit('close')">
|
||||
×
|
||||
</button>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -1,152 +0,0 @@
|
||||
(() => {
|
||||
const capitalizeFirstLetter = (string) => {
|
||||
return string.charAt(0).toUpperCase() + string.slice(1);
|
||||
}
|
||||
|
||||
const propsBinder = (vueElement, leafletElement, props) => {
|
||||
for (const key in props) {
|
||||
const setMethodName = 'set' + capitalizeFirstLetter(key);
|
||||
const deepValue = (props[key].type === Object) ||
|
||||
(props[key].type === Array) ||
|
||||
(Array.isArray(props[key].type));
|
||||
if (props[key].custom && vueElement[setMethodName]) {
|
||||
vueElement.$watch(key, (newVal, oldVal) => {
|
||||
vueElement[setMethodName](newVal, oldVal);
|
||||
}, {
|
||||
deep: deepValue
|
||||
});
|
||||
} else if (setMethodName === 'setOptions') {
|
||||
vueElement.$watch(key, (newVal, oldVal) => {
|
||||
L.setOptions(leafletElement, newVal);
|
||||
}, {
|
||||
deep: deepValue
|
||||
});
|
||||
} else if (leafletElement[setMethodName]) {
|
||||
vueElement.$watch(key, (newVal, oldVal) => {
|
||||
leafletElement[setMethodName](newVal);
|
||||
}, {
|
||||
deep: deepValue
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const { findRealParent, L } = Vue2Leaflet;
|
||||
const props = {
|
||||
latLng: {
|
||||
type: Array,
|
||||
custom: false,
|
||||
default: () => []
|
||||
},
|
||||
minOpacity: {
|
||||
type: Number,
|
||||
custom: true,
|
||||
default: 0.05
|
||||
},
|
||||
maxZoom: {
|
||||
type: Number,
|
||||
custom: true,
|
||||
default: 18
|
||||
},
|
||||
radius: {
|
||||
type: Number,
|
||||
custom: true,
|
||||
default: 25
|
||||
},
|
||||
blur: {
|
||||
type: Number,
|
||||
custom: true,
|
||||
default: 15
|
||||
},
|
||||
max: {
|
||||
type: Number,
|
||||
custom: true,
|
||||
default: 1.0
|
||||
},
|
||||
gradient: {
|
||||
type: Object,
|
||||
custom: true,
|
||||
default: () => ({
|
||||
0.4: 'blue',
|
||||
0.6: 'cyan',
|
||||
0.7: 'lime',
|
||||
0.8: 'yellow',
|
||||
1.0: 'red'
|
||||
})
|
||||
},
|
||||
visible: {
|
||||
type: Boolean,
|
||||
custom: true,
|
||||
default: true
|
||||
}
|
||||
};
|
||||
|
||||
Vue.component('l-heatmap', {
|
||||
props,
|
||||
template: '<div></div>',
|
||||
mounted() {
|
||||
const options = {};
|
||||
if (this.minOpacity) {
|
||||
options.minOpacity = this.minOpacity;
|
||||
}
|
||||
if (this.maxZoom) {
|
||||
options.maxZoom = this.maxZoom;
|
||||
}
|
||||
if (this.radius) {
|
||||
options.radius = this.radius;
|
||||
}
|
||||
if (this.blur) {
|
||||
options.blur = this.blur;
|
||||
}
|
||||
if (this.max) {
|
||||
options.max = this.max;
|
||||
}
|
||||
if (this.gradient) {
|
||||
options.gradient = this.gradient;
|
||||
}
|
||||
this.mapObject = L.heatLayer(this.latLng, options);
|
||||
L.DomEvent.on(this.mapObject, this.$listeners);
|
||||
propsBinder(this, this.mapObject, props);
|
||||
|
||||
this.$watch('latLng', (newVal, _) => {
|
||||
this.mapObject.setLatLngs(newVal);
|
||||
}, { deep: true });
|
||||
this.parentContainer = findRealParent(this.$parent);
|
||||
this.parentContainer.addLayer(this, !this.visible);
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.parentContainer.removeLayer(this);
|
||||
},
|
||||
methods: {
|
||||
setMinOpacity(newVal) {
|
||||
this.mapObject.setOptions({ minOpacity: newVal });
|
||||
},
|
||||
setMaxZoom(newVal) {
|
||||
this.mapObject.setOptions({ maxZoom: newVal });
|
||||
},
|
||||
setRadius(newVal) {
|
||||
this.mapObject.setOptions({ radius: newVal });
|
||||
},
|
||||
setBlur(newVal) {
|
||||
this.mapObject.setOptions({ blur: newVal });
|
||||
},
|
||||
setMax(newVal) {
|
||||
this.mapObject.setOptions({ max: newVal });
|
||||
},
|
||||
setGradient(newVal) {
|
||||
this.mapObject.setOptions({ gradient: newVal });
|
||||
},
|
||||
setVisible(newVal, oldVal) {
|
||||
if (newVal === oldVal) return;
|
||||
if (newVal) {
|
||||
this.parentContainer.addLayer(this);
|
||||
} else {
|
||||
this.parentContainer.removeLayer(this);
|
||||
}
|
||||
},
|
||||
addLatLng(value) {
|
||||
this.mapObject.addLatLng(value);
|
||||
}
|
||||
}
|
||||
});
|
||||
})();
|
||||
@@ -1,2 +0,0 @@
|
||||
// Here you can overwite values from default.js
|
||||
window.config = {};
|
||||
@@ -1,27 +0,0 @@
|
||||
(() => {
|
||||
const endDate = new Date();
|
||||
endDate.setUTCHours(0);
|
||||
endDate.setUTCMinutes(0);
|
||||
endDate.setUTCSeconds(0);
|
||||
const startDate = new Date(endDate);
|
||||
startDate.setUTCMonth(startDate.getMonth()-1);
|
||||
window.defaultConfig = {
|
||||
accentColor: '#3388ff',
|
||||
startDate,
|
||||
endDate,
|
||||
map: {
|
||||
center: L.latLng(0, 0),
|
||||
zoom: 19,
|
||||
maxNativeZoom: 19,
|
||||
maxZoom: 21,
|
||||
url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
|
||||
attribution: '© <a href="https://osm.org/copyright">OpenStreetMap</a> contributors',
|
||||
heatmap: {
|
||||
max: 20,
|
||||
radius: 25,
|
||||
blur: 15,
|
||||
gradient: null, // https://github.com/mourner/simpleheat/blob/gh-pages/simpleheat.js#L22
|
||||
},
|
||||
},
|
||||
};
|
||||
})();
|
||||
218
static/main.js
218
static/main.js
@@ -1,218 +0,0 @@
|
||||
(() => {
|
||||
const { LMap, LTileLayer, LMarker, LCircleMarker, LCircle, LPolyline } = Vue2Leaflet;
|
||||
const config = deepmerge(window.defaultConfig, window.config);
|
||||
new Vue({
|
||||
el: '#app',
|
||||
components: { vuejsDatepicker, LMap, LTileLayer, LMarker, LCircleMarker, LPolyline, LCircle },
|
||||
data: {
|
||||
users: [],
|
||||
devices: {},
|
||||
lastLocations: [],
|
||||
locationHistory: {},
|
||||
showLastLocations: true,
|
||||
showLocationHistoryPoints: false,
|
||||
showLocationHistoryLine: false,
|
||||
showLocationHeatmap: false,
|
||||
selectedUser: '',
|
||||
selectedDevice: '',
|
||||
startDate: config.startDate,
|
||||
endDate: config.endDate,
|
||||
showDownloadModal: false,
|
||||
showInformationModal: false,
|
||||
map: {
|
||||
center: config.map.center,
|
||||
zoom: config.map.zoom,
|
||||
maxNativeZoom: config.map.maxNativeZoom,
|
||||
maxZoom: config.map.maxZoom,
|
||||
url: config.map.url,
|
||||
attribution: config.map.attribution,
|
||||
polyline: {
|
||||
color: config.accentColor,
|
||||
fillColor: 'transparent',
|
||||
},
|
||||
circle: {
|
||||
color: config.accentColor,
|
||||
fillColor: config.accentColor,
|
||||
fillOpacity: 0.2,
|
||||
},
|
||||
circleMarker: {
|
||||
radius: 4,
|
||||
color: config.accentColor,
|
||||
fillColor: '#fff',
|
||||
fillOpacity: 1,
|
||||
},
|
||||
heatmap: {
|
||||
max: config.map.heatmap.max,
|
||||
radius: config.map.heatmap.radius,
|
||||
blur: config.map.heatmap.radius,
|
||||
gradient: config.map.heatmap.gradient,
|
||||
},
|
||||
},
|
||||
information: {
|
||||
ownTracks: {
|
||||
version: '',
|
||||
documentationUrl: 'https://owntracks.org/booklet/',
|
||||
sourceCodeUrl: 'https://github.com/owntracks/recorder',
|
||||
twitterUrl: 'https://twitter.com/OwnTracks',
|
||||
},
|
||||
ownTracksUi: {
|
||||
sourceCodeUrl: 'https://github.com/linusg/owntracks-ui',
|
||||
},
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
selectedUser: async function () {
|
||||
this.selectedDevice = '';
|
||||
this.lastLocations = await this.getLastLocations();
|
||||
this.locationHistory = await this.getLocationHistory();
|
||||
},
|
||||
selectedDevice: async function () {
|
||||
this.lastLocations = await this.getLastLocations();
|
||||
this.locationHistory = await this.getLocationHistory();
|
||||
},
|
||||
startDate: async function () {
|
||||
this.locationHistory = await this.getLocationHistory();
|
||||
},
|
||||
endDate: async function () {
|
||||
this.locationHistory = await this.getLocationHistory();
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
locationHistoryLatLngs() {
|
||||
const latLngs = [];
|
||||
Object.keys(this.locationHistory).forEach((user) => {
|
||||
Object.keys(this.locationHistory[user]).forEach((device) => {
|
||||
this.locationHistory[user][device].forEach((l) => {
|
||||
latLngs.push(L.latLng(l.lat, l.lon));
|
||||
});
|
||||
});
|
||||
});
|
||||
return latLngs;
|
||||
},
|
||||
startDateDisabledDates() {
|
||||
return {
|
||||
customPredictor: (date) => (date > this.endDate) || (date > new Date())
|
||||
};
|
||||
},
|
||||
endDateDisabledDates() {
|
||||
return {
|
||||
customPredictor: (date) => (date < this.startDate) || (date > new Date())
|
||||
};
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
init: async function () {
|
||||
const root = document.documentElement;
|
||||
root.style.setProperty('--color-accent', config.accentColor);
|
||||
this.users = await this.getUsers();
|
||||
this.devices = await this.getDevices();
|
||||
this.lastLocations = await this.getLastLocations();
|
||||
this.locationHistory = await this.getLocationHistory();
|
||||
this.centerView();
|
||||
await this.connectWebsocket();
|
||||
this.information.ownTracks.version = await this.getVersion();
|
||||
},
|
||||
connectWebsocket: async function () {
|
||||
const wsUrl = `${document.location.protocol.replace('http', 'ws')}//${document.location.host}/ws/last`;
|
||||
const ws = new WebSocket(wsUrl);
|
||||
console.log(`[WS] Connecting to ${wsUrl}...`);
|
||||
ws.onopen = (e) => {
|
||||
console.log('[WS] Connected');
|
||||
ws.send('LAST');
|
||||
};
|
||||
ws.onclose = () => {
|
||||
console.log('[WS] Disconnected. Reconnecting in one second...')
|
||||
setTimeout(this.connectWebsocket, 1000);
|
||||
};
|
||||
ws.onmessage = async (msg) => {
|
||||
if (msg.data) {
|
||||
try {
|
||||
const data = JSON.parse(msg.data);
|
||||
if (data._type === 'location') {
|
||||
console.log('[WS] Location update received');
|
||||
this.lastLocations = await this.getLastLocations();
|
||||
this.locationHistory = await this.getLocationHistory();
|
||||
}
|
||||
} catch (err) {}
|
||||
} else {
|
||||
console.log('[WS] Ping');
|
||||
}
|
||||
};
|
||||
},
|
||||
getVersion: async function () {
|
||||
const response = await fetch('/api/0/version');
|
||||
const json = await response.json();
|
||||
const version = json.version;
|
||||
return version;
|
||||
},
|
||||
getUsers: async function () {
|
||||
const response = await fetch('/api/0/list');
|
||||
const json = await response.json();
|
||||
const users = json.results;
|
||||
return users;
|
||||
},
|
||||
getDevices: async function () {
|
||||
const devices = {};
|
||||
await Promise.all(this.users.map(async (user) => {
|
||||
const response = await fetch(`/api/0/list?user=${user}`);
|
||||
const json = await response.json();
|
||||
const userDevices = json.results;
|
||||
devices[user] = userDevices;
|
||||
}));
|
||||
return devices;
|
||||
},
|
||||
getLastLocations: async function () {
|
||||
let url = '/api/0/last';
|
||||
if (this.selectedUser !== '') {
|
||||
url += `?&user=${this.selectedUser}`;
|
||||
if (this.selectedDevice !== '') {
|
||||
url += `&device=${this.selectedDevice}`;
|
||||
}
|
||||
}
|
||||
const response = await fetch(url);
|
||||
const json = await response.json();
|
||||
return json;
|
||||
},
|
||||
getLocationHistory: async function () {
|
||||
let users;
|
||||
let devices;
|
||||
if (this.selectedUser === '') {
|
||||
users = this.users;
|
||||
devices = { ...this.devices };
|
||||
} else {
|
||||
users = [this.selectedUser];
|
||||
if (this.selectedDevice === '') {
|
||||
devices = { [this.selectedUser]: this.devices[this.selectedUser] };
|
||||
} else {
|
||||
devices = { [this.selectedUser]: [this.selectedDevice] };
|
||||
}
|
||||
}
|
||||
const locations = {};
|
||||
await Promise.all(users.map(async (user) => {
|
||||
locations[user] = {};
|
||||
await Promise.all(devices[user].map(async (device) => {
|
||||
const startDateString = `${this.startDate.toISOString().split('T')[0]}T00:00:00`;
|
||||
const endDateString = `${this.endDate.toISOString().split('T')[0]}T23:59:59`;
|
||||
const url = `/api/0/locations?from=${startDateString}&to=${endDateString}&format=json&user=${user}&device=${device}`;
|
||||
const response = await fetch(url);
|
||||
const json = await response.json();
|
||||
const userDeviceLocations = json.data;
|
||||
locations[user][device] = userDeviceLocations;
|
||||
}));
|
||||
}));
|
||||
return locations;
|
||||
},
|
||||
centerView() {
|
||||
if ((this.showLocationHistoryPoints || this.showLocationHistoryLine || this.showLocationHeatmap) && this.locationHistoryLatLngs.length > 0) {
|
||||
this.$refs.map.mapObject.fitBounds(new L.LatLngBounds(this.locationHistoryLatLngs));
|
||||
} else if (this.showLastLocations && this.lastLocations.length > 0) {
|
||||
const locations = this.lastLocations.map((l) => L.latLng(l.lat, l.lon));
|
||||
this.$refs.map.mapObject.fitBounds(new L.LatLngBounds(locations), {maxZoom: this.map.maxNativeZoom});
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
});
|
||||
})();
|
||||
17
vue.config.js
Normal file
17
vue.config.js
Normal file
@@ -0,0 +1,17 @@
|
||||
const fs = require("fs");
|
||||
const webpack = require("webpack");
|
||||
|
||||
const packageJson = fs.readFileSync("./package.json");
|
||||
const version = JSON.parse(packageJson).version;
|
||||
|
||||
module.exports = {
|
||||
configureWebpack: {
|
||||
plugins: [
|
||||
new webpack.DefinePlugin({
|
||||
"process.env": {
|
||||
PACKAGE_VERSION: `"${version}"`,
|
||||
},
|
||||
}),
|
||||
],
|
||||
},
|
||||
};
|
||||
Reference in New Issue
Block a user