New web interface #592
Comments
|
One potential library that we can use: |
|
Bad news, I was waiting for ExtJS 7. |
|
Agree. There is still some chances that they release version 7, but I think we should start working on alternative. |
|
Sure, I'll start to studying this framework. |
|
We need to decide what to use first. Maybe we should use react with something like this: |
|
Good thing about react is that we can potentially make native mobile apps later using react native. |
|
We are used to working with stores on ExtJS and dojo also has similar thing https://dojotoolkit.org/reference-guide/1.7/dojo/store.html#dojo-store What if we create list of features waited from framework... like
|
|
OpenLayers is just a map library. You can include it in a simple div. REST data stores and tables with filters are nice to have, but not really a requirement. We can implement all that ourselves. The benefit would be that we have more control and it will probably be much faster than ExtJS stuff. I think the main requirement is to have enough UI widgets for everything that we need. Grid, forms with all different field types, various toolbars and menus, resizable panels. Last one needs more research. Possibly we can just use some pure HTML components. |
|
Another option for nice UI widgets: It's not really a JS framework, but it's fast and look nice. Demo that might be kind of relevant to our use case: |
|
I have also found this. Might be useful as a reference on how others implement similar functionality: |
|
Another thing I want to consider is using Leaflet library for maps. It's much smaller (god for mobile) and simpler than OpenLayers. There is a good plugin for including Google Maps (a lot of people are interested in this). It doesn't have as many features as OpenLayers, but then we don't actually need that many features. We use markers and various geozones and that's about it. What do you think? |
|
Implementing stores, tables and filters might take a time... But agree ExtJS is not fast at all. I briefly looked at Leaflet, I like it at first sight. It has all we need and what is interesting I found a couple of plugins for SVG marker icons, I believe we could implement native SVG icons, and manipulate them as SVG, without rerendering to Also I liked mf-geoadmin3, very nice looking. Good reference. One important thing to decide is licence. Will we migrate back to Apache 2.0? Are these libraries fit by licence to us? |
|
Yes, that's one of the most important parts. We want Apache 2.0 again. All of the libraries that I've mentioned should be good. I want to try React with Material UI to see if it would work for us. |
|
OK. React is popular and used/supported by big companies, do not think it will die soon. Material UI is nice looking. |
|
One more, I'm not good in web programming, but as I understand React is only "V" in MVC, what will we use for states? Redux? |
|
I'm not an expert myself, so I guess we'll have to learn. |
|
One more thing also would be nice to have is unit tests. |
|
Agree, it would be nice to have some tests for web app. |
|
IMO project can move: react + material-ui + Leaflet; best options its has compatible licenses. |
|
I don't get the question. |
|
I have done some more investigation and it seems like React is not a very good match for our project. Neither Leaflet nor OpenLayers have a good integration with it. There are only some very basic wrappers. I'm sure it's possible to somehow make React and map libraries work together, but it's not going to be easy or nice. |
|
Agree, wrappers (I have found) are very basic. I believe they do not support all we need. |
|
What do you think about following stack:
|
|
I like it, a lot of work, but we could do it smaller and faster without frameworks. |
|
I have noticed it as well. Apparently it's in development. Maybe we can use some third party component until they develop official one. |
|
Agree, also we may rethink interface and implement most things without tables. They are necessary only for reports. |
|
I was also thinking about it. We can use lists, especially if we want to make it more mobile-friendly. |
|
Did you check vueJS ? |
|
@ovnicraft, we can consider vue.js if you can explain the benefits. I have already researched react-leaflet. It is very basic integration as I mentioned above. Please don't just throw in some names that you heard unless you know what you are talking about. |
|
Hi, I am an outsider. I just saw your conversation linked from Material Design Component data table issue and makes me interested into the discussion. I think the choice you are making is very considerate and admirable. I want to leave some of my experience if you don't mind.
I have been researching for 3 days about good web components.
I have been using Google map for long time and it has very good API, even with streetview etc. I am also the owner of https://ngmap.github.io/ and https://github.com/ng2-ui/map. However you need to pay for it when it becomes commercial. Also it does not provide a very customized requirements, e.g. setting North to any side.
ES6/ES7 ways makes the code a lot to easy to read IMO. Also using classes makes documentation a lot easier.
You may need a framework, which handles routing, storage, http call handling, server-side-rendering, performance. Experience with angular1, angular2, and react was ok, but not satisfactory. Recently I learned VueJs, and it seems very easy and promising. |
|
Start implementing features and send pull requests. |
|
They have already started with something or everything from scratch. What scripts, plugins, complements, have weighed, as you already analyzed more than me, I would like to know that.?? |
|
I started doing some simple work on the React + Redux + Material UI rewrite that @tananaev started. To be a loose guideline, I made a public trello board with some obvious user stories that need tackled: https://trello.com/b/kPlpdZD4/traccar-web-modern The list of tasks is not comprehensive nor detailed, but it is something. Anyone can view the board and cards, but editing requires you to be added to the team. I am willing to add anyone to the Trello team who wants to be actively involved in the development. You can contact me at [email protected] |
|
FYI @tananaev is also a Trello team and board admin with ability to add anyone and change anything. |
|
how to do geofence with react app?? |
|
there is an leaflet module for geofencing. |
|
https://github.com/dev-labs-bg/geofencing/blob/master/README.md it is already an port of it on react it seems. not tested it but i guess it should work |
|
So a month ago I finally had some time to play with React and React Native for a new/modern web interface. So if I understand it right noone else is working on it right now? Regarding the app/functionality. I think I found quite a nice solution for the React Native/Mobile app layout (at least the most commonly used device list/map/reports). I'll whip out some wireframes over the weekend and post them here for feedback. The progress will probably be slow, but I think I'll finally be able to do at least a consistent amount of work towards a new interface the following weeks/months. |
|
I don't think what you are proposing is relevant to the new web app. |
|
Yeah it's not entirely connected with the new web app, but it's something I noticed when doing a React Native prototype. I'm far from an experienced React developer, but I think that changes like that would make it a lot easier to develop a React app. But I guess they're not required, at least for now. I'll post the wireframes for the mobile app and so we can discuss the general layout and I can continue with the prototype in the right direction. |
|
@jinzo make any progress? I want to help on this badly but am so taken of time with work and family it's driving me nuts. Know anyone I can offer up some cash to for help on this project and maybe helping me build what I am thinking this would be a great base for? I checked out the Trello board - not seeing anything in there - but I don't use Trello - ever - so willing to learn... looked over at the github rep for modern and do not see any activity there either.. Guys/gals - what can I do to help or offer up as a rewards base to attract some talent to this project? I dont have much time to work on this directly - I will help as I can though. I figure my best offer is to identify approved direction plans and milestones and offer up a bounty to anyone willing to put in the time to make the pull requests and commits... any thoughts? |
|
The plan is simple - implement same functionality that we have in the original app. |
|
Hi, how can I help? |
|
Any decisions made on where to go with the web interface yet? I have not seen any trello updates or notices here for a while... Let me know what to work on and I can definitely put some time in for this project. |
|
I built a little example using react and typescript: Currently, the app could do a simple login, getting devices, receive position from websocket, and generate trips' reports. I would love to help in my spare time for the modernisation of traccar web. |
|
Here's a build of the new web app: modern.zip. Replace "web" folder with the content of the archive to try it on your server. The functionality is very basic at the moment, but I think it's a good starting point. The "modern" branch is now merged into master and I plan to include the new web interface as an option in the next official release. |
Anything you want tested or done ? Installed and worked straight out of ta box. Looks very nice kudo's for all that made it possible. |
|
Testing is good. If there are any issues, please report. If anyone has time, it would be nice to start adding more functionality to eventually replace the old web app with this one. |
Sure atm it runs fine but there is also very little to break :P. Love to give it a go to help but i have no access to a java compiler (I presume its still needed.) I could play around with the source and commit uncompiled i suppose the source is and will remain at: https://github.com/dt-ap/traccar-react ? |
|
No need for Java compiler. It's a standard React application. The source code is here in this repo. |
Yep was looking in the wrong place cloned it and am running it this seems doable for a novice like me. I could make some base layouts menu etc i guess. I'll have to find a visual tool for it. |
|
Hello, I am a full stack software developer, I am interested in this project, I think it is paused and I would like to contribute to the development of the new application. |
|
It's not really paused. Feel free to contribute. |
|
If anyone is interested in contributing to the new Traccar web app, there's now an opportunity to get a free t-shirt for it. Feel free to contact me if you need some pointers on what things you can work ok. It can be as small or big as you want. |
|
Sounds good, really interesting. It would be nice if you have some list of small or big features/pointers/bugs that we could maybe worked on |
|
Smaller more straightforward work:
For the above features you can just follow existing patterns. A bit more complicated:
|
|
Is there a running traccar server with some data for staging/testing? Because I don't have a running traccar server, but would love to work on the web interface. |
|
You can use demo servers if you want. You don't need any data to implement most of the features that I mentioned. |
|
Modern app is officially out. |
and others
Apparently Sencha is dying:
https://www.sencha.com/forum/showthread.php?377323-Sencha-sold-to-IDERA
I think we need to start seriously thinking of rewriting the web app.
The text was updated successfully, but these errors were encountered: