Challenge Overview
Welcome to Hetairoi Field Service Ionic Framework App Challenge, in this challenge, we are looking for your help to create Mobile Ionic application based on the provided storyboard using Ionic + Angular framework.
As part of this challenge we need you to create documentation of your Ionic application, we are looking for a clear explanation of the code to allow us the ability to quickly update and integrate with future development.
Good luck and Let us know any questions you have!
Cordova
- Please note. The build has to be cordova compatible.
General Tasks
- In this challenge we are converting the provided Storyboard to a working (Mobile Layout) Ionic/HTML5/AngularJS/CSS prototype that compile run in iPhone devices.
- Make sure to test this on simulator/real devices, testing only on web browser is not sufficient and won’t ensure good performance/responsiveness on device.
- You must support Portrait view for this submission unless mentioned. See individual screens for exceptions mentioned.
- Use latest version of the Ionic Framework
- Get familiar with Ionic Framework:
http://ionicframework.com/getting-started/
http://ionicframework.com/docs/
- Put clear comment for all Ionic codes
- Please use proper ids and classes in your naming conventions.
- Add data need loaded via JSON, please use json-server to fetch data.
Important
- Questionnaires are dynamics, so each question and choices need be get from JSON data
- You can set a template to screens, like:
Screen Requirements:
We need below pages to be put together, take a look at the flow - let us know if you have any questions.
Light/Dark theme
1) End customer contacted?
https://marvelapp.com/4bjfi4e/screen/59008825
2) Please cancel this closure and select close incomplete
3) What is the name of the end customer or their representative you spoke to?
https://marvelapp.com/4bjfi4e/screen/59008827
4) Was this job subject to any local MBORC?
https://marvelapp.com/4bjfi4e/screen/59008831
5) Did the end customer indicate this line had ever worked with their current provider?
https://marvelapp.com/4bjfi4e/screen/59008859
6) What did the end customer describe as the primary issue?
https://marvelapp.com/4bjfi4e/screen/59372704
7) Specifically where did you resolve the fault ?
https://marvelapp.com/4bjfi4e/screen/59372721
8.1.1) Did you fix the fault?
https://marvelapp.com/4bjfi4e/screen/59372747
8.1.2) What were the visible signs that caused the fault?
https://marvelapp.com/4bjfi4e/screen/59372753
8.1.3) Why didn’t you fix the fault?
https://marvelapp.com/4bjfi4e/screen/59372765
8.1.4) What did you do to fix the fault?
We haven’t a design to this screen, just keep same layout/styles
8.1.5) What revised TRC banding is required?
https://marvelapp.com/4bjfi4e/screen/59372810
8.1.6) Reason for declining the repair
We haven’t a design to this screen, just keep same layout/styles
8.2.1) What did you do to fix the fault?
We haven’t a design to this screen, just keep same layout/styles
8.2.2) Did you complete any work beyond the NTE (within the customer’s domain) or on STAR wiring?
We haven’t a design to this screen, just keep same layout/styles
8.3.1) What were the visible signs that caused the fault ?
We haven’t a design to this screen, just keep same layout/styles
8.3.2.1) What was faulty?
We haven’t a design to this screen, just keep same layout/styles
8.3.2.2) What was the logo stamped on the demarcation point?
We haven’t a design to this screen, just keep same layout/styles
8.3.2.4) What was the source of flood / fire?
We haven’t a design to this screen, just keep same layout/styles
8.3.2.5) Notification: If applicable please contact damage control unit on 0331 667 7194 and provide full details
8.3.2.6) What was faulty?
We haven’t a design to this screen, just keep same layout/styles
8.3.3) What did you do to fix the fault?
We haven’t a design to this screen, just keep same layout/styles
9) Did you complete any work for quality or maintenance reasons?
https://marvelapp.com/4bjfi4e/screen/59372813
10) Have you visited end customer premises?
https://marvelapp.com/4bjfi4e/screen/59372819
11) Where is the NTE located for this circuit?
https://marvelapp.com/4bjfi4e/screen/59372824
12) Please record location
We haven’t a design to this screen, just keep same layout/styles
13) Which type of NTE is installed on this circuit?
https://marvelapp.com/4bjfi4e/screen/59372828
14) What type of faceplate exists for the NTE?
https://marvelapp.com/4bjfi4e/screen/59372835
15) Where did you perform the final PQT?
https://marvelapp.com/4bjfi4e/screen/59372852
16) What was the result?
https://marvelapp.com/4bjfi4e/screen/59372860
17) Where / how did you perform the final Eclipse / Fast Test / xDSL?
https://marvelapp.com/4bjfi4e/screen/59372870
18) What was the result of the final Eclipse / Fast Test / xDSL?
https://marvelapp.com/4bjfi4e/screen/59372876
Challenge Assets:
- Please check forum
CODE REQUIREMENTS:
Ionic/Javascript
- Ionic framework and AngularJs are our main focus frameworks, you must use the ionic directives, and “think in Angular” when coding.
- All JavaScript must not have a copyright by a third party.
- It is fine to use GPL/MIT/Open Source code.
- You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
CSS
- It is preferred using SASS for ionic framework
- Provide comments on the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all CSS so developers can follow the code.
- All CSS naming should not have any conflicts.
- As possible use CSS3 style when create all styling.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page. Only use table tags for tables of data/information and not for page layout.
Assets/Images
- Use SVG to make graphics look sharp on your submissions.
- Make sure your submission look sharp for Retina and Standard devices
- Wherever it makes sense, you can use icon fonts instead of images.
- For all the image, please pull them as PNG format from provided Assets
- For all the icons, please pull them as SVG format from provided Assets
Browsers Requirements
- Native Mobile on iOS
As part of this challenge we need you to create documentation of your Ionic application, we are looking for a clear explanation of the code to allow us the ability to quickly update and integrate with future development.
Good luck and Let us know any questions you have!
Cordova
- Please note. The build has to be cordova compatible.
General Tasks
- In this challenge we are converting the provided Storyboard to a working (Mobile Layout) Ionic/HTML5/AngularJS/CSS prototype that compile run in iPhone devices.
- Make sure to test this on simulator/real devices, testing only on web browser is not sufficient and won’t ensure good performance/responsiveness on device.
- You must support Portrait view for this submission unless mentioned. See individual screens for exceptions mentioned.
- Use latest version of the Ionic Framework
- Get familiar with Ionic Framework:
http://ionicframework.com/getting-started/
http://ionicframework.com/docs/
- Put clear comment for all Ionic codes
- Please use proper ids and classes in your naming conventions.
- Add data need loaded via JSON, please use json-server to fetch data.
Important
- Questionnaires are dynamics, so each question and choices need be get from JSON data
- You can set a template to screens, like:
- Boolean choice
- Single choice
- Multiple choice
- Input field
- Notification
Screen Requirements:
We need below pages to be put together, take a look at the flow - let us know if you have any questions.
Light/Dark theme
- Please add a switch button at dot menu
- Users need to be able to change the theme anytime
1) End customer contacted?
https://marvelapp.com/4bjfi4e/screen/59008825
- Successful call => If select this option go to 3
- No answer (VM left if available) => if select this option go to 4
- Customer or their contact cancelled task => if select this option go to 2
- Customer or their contact refused access => if select this option go to 2
- Not able to ring ahead due to unusable contact details (missing / incorrect / faulty line) => if select this option go to 4
2) Please cancel this closure and select close incomplete
- Show a popup with with this message and a ‘Close’ button
3) What is the name of the end customer or their representative you spoke to?
https://marvelapp.com/4bjfi4e/screen/59008827
- Input field
- Next/Ok button => If select this option go to 4
4) Was this job subject to any local MBORC?
https://marvelapp.com/4bjfi4e/screen/59008831
- Yes => If select this option go to 5 (with indicator)
- No => If select this option go to 5
5) Did the end customer indicate this line had ever worked with their current provider?
https://marvelapp.com/4bjfi4e/screen/59008859
- Yes => If select this option go to 6
- No => If select this option go to 6
6) What did the end customer describe as the primary issue?
https://marvelapp.com/4bjfi4e/screen/59372704
- Noisy line
- Line never worked
- NDT / voice issue
- Broadband issue
- Wi-fi / CPE issue
- No access / unable to contact
- None given - refused access / cancelled task => If select this option go to 2
7) Specifically where did you resolve the fault ?
https://marvelapp.com/4bjfi4e/screen/59372721
- Refused access => If select this option go to 2
- End customer equipment / mis-op. Advice given => If select this option go to 8.1.1
- Beyond the NTE (extension wiring / sockets) => If select this option go to 8.1.1
- NTE / internal wiring up to NTE / block terminals / DACS unit => If select this option go to 8.1.3
- SSFP / VDSL font plate => If select this option go to 8.1.3
- Exchange
- E-side / PCP => If select this option go to 8.2.1
- D-side inc aerial cables and lead-in / block terminal
- Overhead excluding aerial cables / DACS
- Number portability issue
- Dummy number / non service affecting
- Fault not found
8.1.1) Did you fix the fault?
https://marvelapp.com/4bjfi4e/screen/59372747
- Yes => If select this option go to 8.1.2
- No => If select this option go to 8.1.3
8.1.2) What were the visible signs that caused the fault?
https://marvelapp.com/4bjfi4e/screen/59372753
- End customer mis-op / equipment <= show this only if 7b was selected
- Damaged socket / wiring => If select between b and g go to 8.1.4
- Lightning damage
- Flood / fire damage
- Socket broken away from wall / surface
- Damp / corrosion within socket
- No signs of damage, age deterioration
8.1.3) Why didn’t you fix the fault?
https://marvelapp.com/4bjfi4e/screen/59372765
- Insufficient TRC banding => If select this option go to 8.1.5
- End customer declined repair => If select this option go to 8.1.6
8.1.4) What did you do to fix the fault?
We haven’t a design to this screen, just keep same layout/styles
- Replaced => Any option select here go to 9
- Re-terminated
- Disconnected at NTE
- Disconnected beyond NTE
- Left connected at customer request
- Advice given to customer
8.1.5) What revised TRC banding is required?
https://marvelapp.com/4bjfi4e/screen/59372810
- Up to 2 hours => Any option select here go to 9
- Up to 4 hours
- Up to 6 hours
- More than 6 hours
8.1.6) Reason for declining the repair
We haven’t a design to this screen, just keep same layout/styles
- Preferred to fix themselves => If select this option go to 9
- No longer required => If select this option go to 9
8.2.1) What did you do to fix the fault?
We haven’t a design to this screen, just keep same layout/styles
- Changed pair MDF to PCP => Any option select here go to 8.2.2
- Changed pair in length
- Cleared in joint
- Re-terminated jumper in PCP
- Jumper missing, new jumper provided in PCP
- Mis-routed E to E or D to D, corrected in PCP
- Connected to wrong D-side termination, corrected in PCP
- Connected to wrong E-side termination, corrected in PCP
- Connected to wrong E-side and D-side terminations, corrected in PCP
- Double jumpered in PCP
8.2.2) Did you complete any work beyond the NTE (within the customer’s domain) or on STAR wiring?
We haven’t a design to this screen, just keep same layout/styles
- Yes => Any option select here go to 9
- No
8.3.1) What were the visible signs that caused the fault ?
We haven’t a design to this screen, just keep same layout/styles
- Socket damaged / missing
- Wiring damaged (inc concealed where faulty) / missing
- NTE / BT / LJU broken away from wall / surface
- Damp / corrosion within NTE / BT / LJU / front plate => If select this option go to 8.3.2.2
- Lightning damage => If select this option go to 8.3.2.1
- Flood / fire damage to wiring/socket => If select this option go to 8.3.2.4
- Line never provided
- Line concentrator issue (DACS/ WB900)
- No signs of damage, age deterioration on NTE / BT / LJU / front plate => If select this option go to 8.3.2.2
- No signs of damage, age deterioration to internal wiring
8.3.2.1) What was faulty?
We haven’t a design to this screen, just keep same layout/styles
- NTE / BT / LJU / front plate => If select this option go to 8.3.2.2
- Network wiring up to NTE => If select this option go to 8.3.3
- NTE / BT / LJU / front plate & network wiring up to NTE => If select this option go to 8.3.3
8.3.2.2) What was the logo stamped on the demarcation point?
We haven’t a design to this screen, just keep same layout/styles
- Hetairoi => Any option select here go to 8.3.3
- T
- HBT piper
- HBT / Hetairoi globe or newer
8.3.2.4) What was the source of flood / fire?
We haven’t a design to this screen, just keep same layout/styles
- Flood started within end customer′s boundary or premises => If select this option go to 8.3.2.6
- Flood started from outside end customer′s boundary or premises => If select this option go to 8.3.2.5
- Flood caused by natural disaster => If select this option go to 8.3.2.6
- Fire started within end customer′s boundary or premises => If select this option go to 8.3.2.6
- Fire started from outside end customer′s boundary or premises => If select this option go to 8.3.2.5
- Fire caused by natural disaster => If select this option go to 8.3.2.6
8.3.2.5) Notification: If applicable please contact damage control unit on 0331 667 7194 and provide full details
- Show a popup with notification and a ‘Ok’ button
- When click in ‘OK’ go to 8.3.3
8.3.2.6) What was faulty?
We haven’t a design to this screen, just keep same layout/styles
- NTE / BT / LJU / front plate => If select this option go to 8.3.3
- Network wiring up to NTE => If select this option go to 8.3.3
- NTE / BT / LJU / front plate & network wiring up to NTE => If select this option go to 8.3.3
8.3.3) What did you do to fix the fault?
We haven’t a design to this screen, just keep same layout/styles
- Replaced => If select this option go to 9
- Re-terminated => If select this option go to 9
9) Did you complete any work for quality or maintenance reasons?
https://marvelapp.com/4bjfi4e/screen/59372813
- No => Any option select here go to 10
- Yes - NTE
- Yes - drop wire
- Yes - lead-in
- Yes - PCP / SCP upgrade
- Yes - pair swapped E-side upgrade
- Yes - pair swapped D-side upgrade
- Yes - exchange upgrade jumpers
- Yes - D-side joints remake
- Yes - DP upgrade
- Yes - De-DACS
10) Have you visited end customer premises?
https://marvelapp.com/4bjfi4e/screen/59372819
- Yes => If select this option go to 11
- No => If select this option go to 17
11) Where is the NTE located for this circuit?
https://marvelapp.com/4bjfi4e/screen/59372824
- Living room => Any option select here go to 13
- Hallway
- Kitchen
- Bedroom
- Study room
- Dining room
- Cupboard
- Reception
- Comms room
- Office
- Boardroom
- Others => If select this option go to 12
12) Please record location
We haven’t a design to this screen, just keep same layout/styles
- Add an input field to enter with location
- => go to 13
13) Which type of NTE is installed on this circuit?
https://marvelapp.com/4bjfi4e/screen/59372828
- NTE5C => If select this option go to 14
- NTE5B => If select this option go to 14
- NTE5A => If select this option go to 14
- Plug in NTE => If select this option go to 15
- External NTE => If select this option go to 15
- Line termination module (from external NTE) => If select this option go to 15
- Other => If select this option go to 15
14) What type of faceplate exists for the NTE?
https://marvelapp.com/4bjfi4e/screen/59372835
- Standard => Any option select here go to 15
- Secure
- VDSL / ADSL / SDSL
- FVA
- SOGEA 2A
- SOGEA 2B
- SOGEA 3
- G.fast
15) Where did you perform the final PQT?
https://marvelapp.com/4bjfi4e/screen/59372852
- NTE back plate => Any option select here go to 16
- NTE front plate
- NTP / any internal demarcation point
- DP / external NTP
- Unable to perform
16) What was the result?
https://marvelapp.com/4bjfi4e/screen/59372860
- Pass with amber parameters => Any option select here go to 17
- Fail
- Tester timed out / no sync
17) Where / how did you perform the final Eclipse / Fast Test / xDSL?
https://marvelapp.com/4bjfi4e/screen/59372870
- Eclipse at NTE / NTP => Any option select here go to 18
- Eclipse at DP / NTP
- FastTest
- xDSL at NTE / NTP
- xDSL at modem
18) What was the result of the final Eclipse / Fast Test / xDSL?
https://marvelapp.com/4bjfi4e/screen/59372876
- Pass
- Fail
- DT
- xDSL indicate ok
- xDSL indicates further investigation required
Challenge Assets:
- Please check forum
CODE REQUIREMENTS:
Ionic/Javascript
- Ionic framework and AngularJs are our main focus frameworks, you must use the ionic directives, and “think in Angular” when coding.
- All JavaScript must not have a copyright by a third party.
- It is fine to use GPL/MIT/Open Source code.
- You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
CSS
- It is preferred using SASS for ionic framework
- Provide comments on the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all CSS so developers can follow the code.
- All CSS naming should not have any conflicts.
- As possible use CSS3 style when create all styling.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page. Only use table tags for tables of data/information and not for page layout.
Assets/Images
- Use SVG to make graphics look sharp on your submissions.
- Make sure your submission look sharp for Retina and Standard devices
- Wherever it makes sense, you can use icon fonts instead of images.
- For all the image, please pull them as PNG format from provided Assets
- For all the icons, please pull them as SVG format from provided Assets
Browsers Requirements
- Native Mobile on iOS
Final Submission Guidelines
- Source code zip file.
- Packaged App in iOS format
- Compiling and building instructions.
- List of frameworks / plugins used