captaininler / findatree Goto Github PK

guess trees
setup db
store results
implement game logic

One approach would be to use geofire to only get the trees that are around the center of the map: https://github.com/CaptainInler/geofire.

This ticket is also about changing the symbology for the map and the trees.

• transfer functionality to new components under map
• delete unused subcomponents under members

• decide on a CSS framework to have the app look consistent (do we need one or can we create the css ourselves?)
• add a right/left side panel with the different options for guessing the type.
• the map should occupy all the screen and the panel should per default be toggled off.
• by clicking on a button the panel should animate itself to occupy 40%(30?) of the screen.

@CaptainInler please delete or modify as you see fit, these are just some ideas.

We only consider 2 modes: desktop and mobile portrait.
css breakpoint will be at 600px (?)

This ticket is about desigining the layout and implementing it.

• Establish the requirements and sketch the design of the app
• Set up a build system
• Create a prototype for the app displaying a map and loading data from a DB
• Create the layout of the game
• Set up user accounts
• Create a loading page for the app
• Find a solution to visualize 60000 trees
• Implement tree editing
• Adapt layout for mobile portrait
• Create basic test cases
• Implement game functionality
• Design layout for the game
• Materialize menu on the top right
• Display current location

Clean up application:

• clean up members

App requirements:

• users can easily find information about trees in their city
• users can report new trees and edit existing ones if they are logged in
• users can test their knowledge by playing a game where they have to guess the tree type
• the visualisation used in the app is appealing and attracts users to it
• the app should be responsive

Initial design:

add an open source licence
add a shrinkwrap

Simple function to shorten the name under certain conditions: length, comma separated...

the layout for the guess panel can use some styling for the display of the points:

This ticket is about designing and implementing a solution for this.

• setup first tests
• which tests might make sense? might be useful?

This ticket is about setting up a database with users and creating the authentication component. Front end can also be designed using a login page (see mockup).

@beatfleischli please add or delete info in this ticket as you see best. I can swap with you if you get bored of it and want to do more front end.

Selected tree should be highlighted.
Would be nice to see current user position on the map, if using a mobile.

Create tree editing functionality:

• user can edit attributes of existing trees
• user can add trees
• user can delete trees

Access to editing only shows up when user is logged in.

Having the build system up and running, create a map that will load some points from the database and display them as 3D trees.

Scene to get started with: http://zurich.maps.arcgis.com/home/webscene/viewer.html?webscene=c01e6ad0e45449e39354e08c1158e706

Our app is built using the following technologies:

• Angular
• Typescript
• Sass
• ArcGIS API for JavaScript for the 3D visualization
• Jasmine for testing
• Dojo and Webpack for module bundling (Dojo is only needed because of the ArcGIS API for JS)

The build system should allow:

• writing code using Typescript with ES6 features
• writing styles using a preprocessor for better modularity
• using modularised code with ES6 import syntax
• writing and running unit tests and integration tests
• while developing the app should automatically detect any changes and reload the browser
• have a build command that will build for production
• a live version of the app should be up and running as a github page
• have the possibility to use angular-cli

Current build system is based on: https://github.com/jwerts/angular2-esri-play

Hier braucht es noch zwei kleine Korrekturen:

Quartier: hello löschen und Layout anpassen bei einer bestimmten Breite....

The menu on the top right is not in the same style as the rest of the app. Convert it to a material ui menu.

maybe user name? Something like 'logged in as Your Name'

• clear the structure of interaction and mode
• clear the structure of side-panel.component.html
• hide side-panel on logout

@beatfleischli kannst du dir das noch anschauen? Ich habe keine Ahnung was da los ist.

Repro:

ich will den Button zum Bäume hinzufügen auch für den Admin zeigen, nicht nur für user. Also wenn ich hier https://github.com/CaptainInler/findAtree/blob/master/src/app/map/map.component.html#L6 appState.userHasRole('user') mit appState.userIsLoggedIn() ändere, dann geht die App in einem endless loop. Ich habe nicht verstanden was da passiert.