New frontend #287

linusg · 2019-01-29T17:44:24Z

This is NOT finished yet - just for some people to have a look. I'll add commits as I continue development.

Please add suggestions and feedback of all kinds in the issue thread #284. I'll update this ToDo list then.

ToDo

Fix dropdown not being visible on small screens due to absolute positioning
Implement download data modal
Replace https://fonts.gstatic.com/s/notosans/v7/... URLs in public/static/vendor/noto-sans@7/noto-sans.css
Add link to existing table page
Modal transition
Reflect selection changes in the URL and vice versa, so specific configuration will be applied when loading the URL with arguments.
Example: https://my.owntracks.org?from=2019-01-01&to=2019-01-29&user=linus&device=ipad&layer=last,line,heatmap&zoom=12&center=48.12345,8.12345
Make default user and device selection configurable
Make fetching of location history after WS update configurable

Features

Maybe I'll compile a list of all features here in the future. For now just one specific one:

Configuration

You can basically copy parts of the configuration object from public/static/config/default.js to public/static/config/custom.js, and change values, e.g.:

window.config = {
  accentColor: '#7b0600',
  map: {
    url: 'https://{s}.tile.thunderforest.com/spinal-map/{z}/{x}/{y}.png?apikey=xxxxxxxxxxxxxxxxxxxx',
  },
};

That means a lot of things can be tweaked: tile server, accent color, default start and end date, heatmap colors, map zoom levels, ... More to come!

Warning: you might end up with something like this 😉

jpmens · 2019-01-30T13:35:12Z

@linusg what I've seen so far is mouth-watering; please don't stop! :-)

I pulled in this branch and symlinked as so:

cd docroot/
ln -s ../public .

before launching the Recorder. I get the new page when opening /public but get neither data nor a map shown, just FYI.

What I see server-side, is dozens of queries to the API, and this occurs periodically every few (10?) seconds:

Jan 30 13:28:40  ot-recorder[1997] <Debug>: http: GET /api/0/last
Jan 30 13:28:40  ot-recorder[1997] <Debug>: http: GET /api/0/locations
Jan 30 13:28:40  ot-recorder[1997] <Debug>: http: GET /api/0/locations
Jan 30 13:28:40  ot-recorder[1997] <Debug>: http: GET /api/0/locations
Jan 30 13:28:40  ot-recorder[1997] <Debug>: http: GET /api/0/locations
Jan 30 13:28:40  ot-recorder[1997] <Debug>: http: GET /api/0/locations
Jan 30 13:28:40  ot-recorder[1997] <Debug>: http: GET /api/0/locations
Jan 30 13:28:40  ot-recorder[1997] <Debug>: http: GET /api/0/locations
Jan 30 13:28:40  ot-recorder[1997] <Debug>: http: GET /api/0/locations
Jan 30 13:28:40  ot-recorder[1997] <Debug>: http: GET /api/0/locations
Jan 30 13:28:40  ot-recorder[1997] <Debug>: http: GET /api/0/locations
Jan 30 13:28:40  ot-recorder[1997] <Debug>: http: GET /api/0/locations
Jan 30 13:28:40  ot-recorder[1997] <Debug>: http: GET /api/0/locations
Jan 30 13:28:40  ot-recorder[1997] <Debug>: http: GET /api/0/locations
Jan 30 13:28:40  ot-recorder[1997] <Debug>: http: GET /api/0/locations
Jan 30 13:28:40  ot-recorder[1997] <Debug>: http: GET /api/0/locations
Jan 30 13:28:40  ot-recorder[1997] <Debug>: http: GET /api/0/locations
Jan 30 13:28:40  ot-recorder[1997] <Debug>: http: GET /api/0/locations
Jan 30 13:28:40  ot-recorder[1997] <Debug>: http: GET /api/0/locations
Jan 30 13:28:40  ot-recorder[1997] <Debug>: http: GET /api/0/locations
Jan 30 13:28:40  ot-recorder[1997] <Debug>: http: GET /api/0/locations
Jan 30 13:28:40  ot-recorder[1997] <Debug>: http: GET /api/0/locations
Jan 30 13:28:40  ot-recorder[1997] <Debug>: http: GET /api/0/locations
Jan 30 13:28:40  ot-recorder[1997] <Debug>: http: GET /api/0/locations
Jan 30 13:28:40  ot-recorder[1997] <Debug>: http: GET /api/0/locations
Jan 30 13:28:40  ot-recorder[1997] <Debug>: http: GET /api/0/locations
Jan 30 13:28:41  ot-recorder[1997] <Debug>: http: GET /api/0/locations
Jan 30 13:28:41  ot-recorder[1997] <Debug>: http: GET /api/0/locations
Jan 30 13:28:41  ot-recorder[1997] <Debug>: http: GET /api/0/locations
Jan 30 13:28:41  ot-recorder[1997] <Debug>: http: GET /api/0/locations
Jan 30 13:28:41  ot-recorder[1997] <Debug>: http: GET /api/0/locations
Jan 30 13:28:41  ot-recorder[1997] <Debug>: http: GET /api/0/locations
Jan 30 13:28:41  ot-recorder[1997] <Debug>: http: GET /api/0/locations
Jan 30 13:28:41  ot-recorder[1997] <Debug>: http: GET /api/0/locations
Jan 30 13:28:41  ot-recorder[1997] <Debug>: http: GET /api/0/locations

linusg · 2019-01-30T14:01:51Z

before launching the Recorder. I get the new page when opening /public but get neither data nor a map shown, just FYI.

So you see the header at the top, but no map tiles and data show up? Can you please open the "Network" tab in the developer tools of your browser (F12 in Firefox), reload the page and look for possible 4xx status codes?

I created the new directory (public) for now so I wouldn't have to deal with removing some of the old pages, without breaking anything. Also I configured nginx to directly serve the static files and only requests to /api/0/... and /ws/... are forwarded to http://127.0.0.1:8083.

What I see server-side, is dozens of queries to the API, and this occurs periodically every few (10?) seconds:

Yes - I believe what you're seeing is this, since all users and devices will be shown by default (yet another config value!):

recorder/public/static/main.js

Lines 186 to 197 in 2e04e65

    
           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; 
        
             })); 
        
           }));

(Is there a possibility of getting the history for multiple users/devices at once? Omitting them yields user and device are required)

and the ten second interval might be a WebSocket message coming in:

recorder/public/static/main.js

Lines 126 to 130 in 2e04e65

    
           if (data._type === 'location') { 
        
             console.log('[WS] Location update received'); 
        
             this.lastLocations = await this.getLastLocations(); 
        
             this.locationHistory = await this.getLocationHistory(); 
        
           }

My thoughts behind this were: whenever the WebSocket reports a new last location, pull the same information again from HTTP API endpoint because the WebSocket data contains less information. Also, fetch the history so points and the line will update as well.
From a performance point of view this might be horrible, but personally I didn't mind the additional requests.

We should probably disable this by default and make it configurable (e.g. liveUpdateHistory: false).

jpmens · 2019-01-30T14:45:52Z

Loaded in Firefox, and I see map and points. Hmm. (No 404s in debugger). Chrome shows the header only with no errors in JS console, and Safari (all on Mac) shows a single 404 for

http://localhost:8087/public/static/vendor/[email protected]/css/materialdesignicons.min.css.map

Right you are: the API queries are due to Websocket traffic. I've narrowed this Recorder down to a single user and when I publish 3 individual OwnTracks positions I clearly see this on Recorder's console:

* 14:34:47 owntracks/jjolie/moto               t=u tid=JJ loc=48.85833,3.29513 [FR] La Terre Noire, 77510 Sablonnières, France (u0dmfyr)
Jan 30 14:34:47  ot-recorder[3595] <Debug>: http: GET /api/0/last
Jan 30 14:34:47  ot-recorder[3595] <Debug>: http: GET /api/0/locations



* 14:34:52 owntracks/jjolie/moto               t=u tid=JJ loc=48.85833,3.29513 [FR] La Terre Noire, 77510 Sablonnières, France (u0dmfyr)
Jan 30 14:34:52  ot-recorder[3595] <Debug>: http: GET /api/0/last
Jan 30 14:34:52  ot-recorder[3595] <Debug>: http: GET /api/0/locations



* 14:34:58 owntracks/jjolie/moto               t=u tid=JJ loc=48.85833,3.29513 [FR] La Terre Noire, 77510 Sablonnières, France (u0dmfyr)
Jan 30 14:34:58  ot-recorder[3595] <Debug>: http: GET /api/0/last
Jan 30 14:34:58  ot-recorder[3595] <Debug>: http: GET /api/0/locations

Is there a possibility of getting the history for multiple users/devices at once?

So you'd like /api/0/locations to return the lot? That could turn into a massive amount of data ... I'm not sure we should do that.

We should probably disable this by default and make it configurable (e.g. liveUpdateHistory: false).

Yes, please. I know of users with 30 or 40 devices (vehicles) reporting at a frequency of around a minute.

linusg · 2019-01-30T16:01:14Z

So you'd like /api/0/locations to return the lot? That could turn into a massive amount of data ... I'm not sure we should do that.

Not necessarily - but that or doing one request for each device shown are the only options available :)

tabacha · 2019-02-03T16:43:29Z

I can not load this in chorme. The leavlet map seams to have height: 0px. But I see network traffic which looks goot. When I start it in firefox, I`ve got SAML error in the api endpoint (I use owntrack with apache mellon and saml auth). I will try to debug this later on.

linusg · 2019-02-23T14:11:05Z

Update:

I can confirm the map is not displaying in Chromium, for some reason some of the CSS is missing/not applied - I see no 404s though, so same as @tabacha.

For various reasons I decided to not continue developing this as a new feature for https://github.com/owntracks/recorder but rather continue as an independent project, because:

I'm working as a developer full-time, which means limited time for stuff like this but also makes development harder after spending a lot of focus and creativity on work related matters
The bug stated above. I've not noticed it for a long time because I only use Firefox and kind of except that cross-browser incompatibilities are gone by now. If I don't make this a feature integrated into this project itself, I don't have the pressure of making it work cross-browser for now.
Chrome (arguably) becoming the new IE is not adding any pressure here either.
Keeping some of the current pages in and replacing some by the new UI seems overly complicated to me and will be quite some wok figuring out which dependencies can be dropped and which not, at least for me.
Build step: I'd like to add a build step (Webpack), which allows using technologies as Sass, latest ES6 features and package management using yarn.
While I'd like to to that, I can't make anyone happy. The current state works perfectly for me (™), but of course I'll accept PRs - instead of implementing every feature someone wants right now and myself.

Of course the source code will be free to use and modify, and people interested can just grab their copy, do a production build and configure their server of choice to serve the content of the resulting dist/ directory. Thanks to the OwnTracks HTTP API this possible without any restrictions!

jpmens · 2019-02-23T21:20:27Z

Good luck.

linusg added 2 commits January 29, 2019 18:27

Add new web frontend

d353a83

Add custom.js config file to .gitignore

2e04e65

linusg closed this Feb 23, 2019

linusg mentioned this pull request Sep 3, 2019

Transfer linusg/owntracks-ui to the owntracks organisation owntracks/talk#72

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

New frontend #287

New frontend #287

linusg commented Jan 29, 2019 •

edited

Loading

jpmens commented Jan 30, 2019

linusg commented Jan 30, 2019

jpmens commented Jan 30, 2019 •

edited

Loading

linusg commented Jan 30, 2019

tabacha commented Feb 3, 2019

linusg commented Feb 23, 2019 •

edited

Loading

jpmens commented Feb 23, 2019

New frontend #287

New frontend #287

Conversation

linusg commented Jan 29, 2019 • edited Loading

ToDo

Features

Configuration

jpmens commented Jan 30, 2019

linusg commented Jan 30, 2019

jpmens commented Jan 30, 2019 • edited Loading

linusg commented Jan 30, 2019

tabacha commented Feb 3, 2019

linusg commented Feb 23, 2019 • edited Loading

jpmens commented Feb 23, 2019

linusg commented Jan 29, 2019 •

edited

Loading

jpmens commented Jan 30, 2019 •

edited

Loading

linusg commented Feb 23, 2019 •

edited

Loading