grisu-noe/mobile-app

This project aims to build a modern mobile web-app based on the framework Ionic to improve the functionality of http://mobile.leitstelle122.at/.

Grisu NÖ - Mobile App

The already existing mobile web-app (http://mobile.leitstelle122.at/) of WASTL - shortened for "Warn- und Alarmstufenliste" in German - is used to display several realtime information of currently running fire brigade incidents in Lower Austria. The incident data is kindly provided by the voluntary fire department "Freiwillige Feuerwehr Krems". WASTL is a project by several public sector entities:

Die Warn- und Alarmstufenliste ist ein gemeinsames Projekt des NÖ Landesfeuerwehrverbandes, der NÖ Landesregierung, des Bundesrechenzentrums, des Bezirksfeuerwehrkommandos Krems, des Magistrates der Stadt Krems sowie der Freiwilligen Feuerwehr Krems.

This project aims to build a modern mobile web-app based on the Ionic framework to improve the functionality of the existing solution. The new resulting mobile app should be available in several app stores for different mobile platforms to have a native look and feel.

Contributing

You want to contribute? Great! Thanks for being awesome! Please see the project related issues before you start coding. Pull requests are always welcome!

Coding guidelines

• 4 spaces for indentation
• 140 character max. line length
• In general, try to make your code blend in with the surrounding code.

Setup of development environment

• Install node.js (v4.x)
• npm install -g cordova ionic gulp
• Optional: Install bower command line utility: npm install -g bower
• Go to project root folder
• Install required node dependencies: npm install
• Run Gulp dependency installation: gulp install
  • If you have problems to execute the Gulp task, try to execute git config url."https://".insteadOf git:// before
• Add platforms
  • ionic platform --noresources --nosave add ios (works only on Mac OSX)
  • ionic platform --noresources --nosave add android (you need to install the Android SDK before)
• ENJOY!

Useful commands and hints

• Show app log in console when debugging app on Android device with USB
  • adb logcat -s CordovaLog:D or adb logcat -s chromium:D
• Start Google Chrome with disabled web security to retrieve data from remote servers
  • see http://stackoverflow.com/a/6083677/1296333
• Watch SASS changes and compile / move it immediately
  • gulp sass:watch
• Start web server and open browser. It also watches for code changes.
  • ionic serve
• Emulate an iOS device with Mac OSX
  • List available emulators: <PROJECT_ROOT>/platforms/ios/cordova/lib/list-emulator-images
  • Start emulator: ionic emulate ios --target="<TARGET>" e.g.: ionic emulate ios --target="iPad (Retina)"

Licencing

Grisu NÖ is licenced under the MIT License (MIT).

mobile-app's Issues

Add changelog prompt with rating option

Show changelog once after each app version update

Settings view

A user should be able to change his settings. Settings are:

• Functionality to directly jump into users preferred district at startup
• The use of extended incident data (info screen data)
  -- see #13

Refactor loading error message

When there is no internet connection or a timeout occured the data provider returns http error code with value 0. When code 0 is returned a better error message should be printed out.

When loading times out the view gets unresponsible

test it with ios and android
2 error popups come up and the background won't get destroyed when clicking OK. maybe we should replace the error popups with native Toast messages.

Wrong comma and line break when incident.o or incident.o2 is not provided.

Infects incident.html and incidents.html.

Write initial unit and integration tests

Unit and integration tests help to improve stability. We should them for controllers and service providers. We should also try to write tests after each new feature.

Incident participation

When user has activated a token for his district he will be able to see 2 buttons on the incident screen:
"I will participate / I won't participate in incident"

• All users with token of the app / infoscreen in fire department can see the number of participations
• We need to set up an own server or even better would be to integrate this functionality at Krems (WASTL server)
• It's a mapping of Token/Cookie and incident. A token belongs to an incident.
• Double voting is not allowed

Change border color of top bar and border of charts

Text of extended incidents wrong

Update the token text

Add route plan to extended incident

There should be a second map which shows route information (colored line) from actual user position to incident place.

History data should be displayed in own view, not in a popup window

Create and configure splash screen and app icons

Splash screens and app icons in different sizes should be available for Android an iOS. Consider to create 9-patch images for Android. Don't forget to make icons for app stores.

• https://cordova.apache.org/docs/en/4.0.0/config_ref_images.md.html#Icons%20and%20Splash%20Screens
• https://github.com/phonegap/phonegap/wiki/App-Splash-Screen-Sizes

Bygone incident hours

Implement in incident view

Splashscreen plugin

ios has no hiding feature after some time for the splashscreen. lets take a look at the splashscreen plugin of cordova. ngCordova could also be helpful (look at ionic formulas)

Provide clean task

Create a gulp task which cleans the project. Should run before install script.

Analyze other fire department apps for new functionality

Remove i18n multi language support (MLS)

Remove all i18n relevant code. Other languages than German are useless in Grisu, because the data provided by WASTL Krems is only available in German.

Extend gulp install script

Gulp install script should be extended to auto-install Cordova plugins, compile scss files, move platform specific assets and so on. This task should speed up the setup of the development environment. Don't forget tu update the docs.

Optional use of extended incident data

To view extended incident data the user needs to activate a given token provided by the API for verification. Then extended data can be loaded (exact incident position, maps, routes, exact dates and times etc., descriptions)

• the incidents of user's districts should be marked with special icon to mark "extended data available"
• incident view needs to be adapted (load different template?!?!)

Cleanup of old existing apps

• Refactor "AusrückScreen"
• Use old webapp POST mechanism for voting and set link to App Store of Grisu NÖ
  • With info where users can activate tokens

Attribution links of Leaflet map don't open up in new browser window on native devices

Try to fix it, otherwise delete the links

Create initial infrastructure

To start developing, we need a infrastructure with following (can vary) tasks:

• ✅ Continuous integration system (for automatic tests etc.): Travis CI
• ✅ Unit and integration testing framework: Jasmine and Karma
• ✅ Documentation for developers
  • How to checkout
  • Update coding guidelines
  • Use of Emoticons: e.g. ✅ 🔴
• ✅ Initial ionic commit (app template)

Swipe statistics

Swiping between statistics should be possible.

Update to Ionic beta.14

Adapt deprecated code, check for correct execution of things, animation of icons should be fixed etc.

https://github.com/driftyco/ionic/blob/master/CHANGELOG.md

Show map of incident

But only when geocoding is ok.

Prepare Google Play and Apple App Store

• Write description of app
• List features
• Created images (Screenshots, Logos etc.)
• Update description in config.xml
• Add store icons to README.txt

Try to find better icons for statistics sub tabs

The clock icons are pretty ugly in statistics tab. Try to find better and maybe smaller ones.

Swipe between incidents

The incident overview of an district should be swipeable.

User should be able to share / save incident

Implement sharing for facebook / whatsapp and so on
Implement an email / sms service too

See:

• http://ngcordova.com/docs/plugins/emailComposer/
• http://ngcordova.com/docs/plugins/sms/
• http://ngcordova.com/docs/plugins/socialSharing/

Implement about dialog

This view should contain following things:

• App name & icon
• Current version, format MAJOR.MINOR.HOTFIX
• A short description about the app
• Contributors if necessary
• Words of thanks to FF Krems for REST service

Also update the app description in source files!

Rename FF to FW

There are also "Betriebsfeuerwehren", so the term "FF" and "Freiwillige Feuerwehr" should be renamed to "FW" and "Feuerehr". Also comments and descriptions are affected.

Refactor code: doReresh()

The method doRefresh() is used in many controllers and the code is mostly duplicated there. Find a way to define it abstract. Only the controller specific business logic should be implemented in controllers.

Wrong district is active on map

There is a misconfiguration with Klosterneuburg, Purkersdorf and Stockerau. Stockerau is active, altough Klosterneuburg should be active. Purkersdorf has wrong mapping. See correct mapping http://www.feuerwehr-krems.at/ShowArtikelSpeed.asp?Artikel=5184&Filter=06

Add angular directive for statistics view

Implement directive to show statistics tab

Extended incidents: copying of code should be possible

Animated refresh icon is bouncing/jumping

The spinner icon at the right upper corner is bouncing when it gets animated. Maybe the following topic explains the issue: ionic-team/ionicons#45

I think it's a issue of Ionic.

History button is too dark.

It is not really visible for users. Change colors...

List of all fire departments

Look at WASTL Mobile. Are the fire departments hardcoded?

Districts are not shown

The reporter has a Samsung S3 Mini with Android 4.2.2

"Auf meinem derzeitigen Reserve-Androiden (S3mini) gibts aber noch ein paar Bugs. Ich kann die Bezirke nicht anklicken... wenn ich das mache erscheint ein paar cm oberhalb ein Rechteck - sonst tut sich nix"

Integrate the functionality of http://wasser.leitstelle122.at/

As you can see it's a interactive map of hydrants.

Multiple loading error dialogs visible

There should be only one popup window containing a connection error.

Add fading transition between main tabs

Real-time extended incidents are not shown

The extended incident functionality is broken when there is an active incident for "my fire department". No star is shown.

Show message when an user has voted.

Show a "Already voted" message when user shouldn't be able to vote.

Split sources files

We should split the source files (controllers, templates etc.) into smaller files.

Extended incidents -> add check for places like normal incidents do

A list and map in which all incidents are shown would be nice.

To achieve this we would need to get all incidents of whole Lower Austria with one request. Maybe the XML-API of WASTL which is used by https://play.google.com/store/apps/details?id=com.ithtl.essapp could help here.

Add locate me button to hydrant map

when the button gets clicked the current location will get found.

Add "Powered by"

The app is powered by the voluntary fire department Wolfsgraben. Add this to about dialog.

Add Retina display suppprt for map tiles

See http://leafletjs.com/reference.html for further information