Finding Falcone. ( GeekTrust Challenge — 2019 — UI)

3 min readNov 22, 2020

Part 2— Code breakup
https://github.com/minus1by12Dev/project1043/tree/angular-11-update-branch

Part 1 — HERE

Starting up. Setting up.

Start with Creating a new Angular Project and navigating to the project.
We need Routing, because the requirement asks for that. And stick to Scss for styling. All our components should have a prefix i.e. ff

ng new findingFalcone --style=scss --prefix=ff --routing=true

2. Next up would be generating the two Components.

ng g c components/selection
ng g c components/result

3. Update the Routing app-routing.module.ts

const  routes:  Routes  = [
    {path:  '', redirectTo:  'selection', pathMatch:'full' },
    {path:  'selection', component:  SelectionComponent},
    {path:  'result', component:  ResultComponent}
];

4. Models

Planet Class ( planet.ts )
import { Vehicle } from './vehicles';
  export class Planet {
    name : string;
    distance : number;
    isSelected : boolean;
    assignedVehicle : Vehicle
  }Vehicle Class ( vehicle.ts )
export class Vehicle {
    id: string;
    name : string;
    total_no : number;
    max_distance : number;
    speed : number;
    isAvailable :  boolean;
  }

5. Create a DataService Component, that would have functions, making the API calls to get the Planets and Vehicles data.

getPlanetsData() :  Observable<Planet[]>{
    return  this.http.get<Planet[]>("https://findfalcone.herokuapp.com/planets");
  }

  getVehiclesData() :  Observable<Vehicle[]>{
    return  this.http.get<Vehicle[]>("https://findfalcone.herokuapp.com/vehicles");
  }

Font

Raleway font from Google Fonts.

Adding Interactions

Selection & Deselection of Planets, with the proper UI feedback and count updates, along with Toastr notifications of exceeding the number of selections.

Drag and Drop

There are a lot of options to choose from, and one of the most Popular solution is Angular material Drag & Drop

Requirements

The vehicle that has already been assigned, should not be draggable any more. Debatable. More like it should be marked as Selected, but still should be draggable and then the vehicles should realign themselves.
A vehicle should only be allowed to drop on a selected planet.
Related to the previous one, should be able to drop a vehicle only to the planet, whose distance it will be able to cover.

I have chosen to implement Drag & Drop via the simple HTML5 constructs. ( draggable, dragstart, dragend, dragover and drop events and attributes. )

selectionComponent.html — with drag and drop constructs

TS Code
This is pretty big and you can refer to the GitHub URL to read more.

API Calls

Make the Final calls to the API to get the result.

As per the problem statement, we need to first get a Token ( https://findfalcone.herokuapp.com/token — A POST Request ) and then use that token, along with the planet and vehicle names to https://findfalcone.herokuapp.com/find .

The final result is a game of luck. The application randomly assigns a planet to Al Falcone (from the 6 available planets) and if the planet is in the list of 4 selected by the user, we get a success message

But, these endpoints could have stopped working!!!. Happens a lot of times. Helps in thinking abt Error Handling. So we would be doing a mock implementation.

We will randomly pick a planet from the list of planets and if that planet exists in the list chosen, then Viola!!!, King Shan WINS, else he needs to send a new Search Party.

Added header, footer, navigation to the Result Component and basic HTTP Error handling.

With navigation, there were two approaches that could be taken.

Make the API call on the SearchComponent, wait for the result and navigate to the ResultComponent with the result. OR
Navigate to the ResultComponent, make the API call from in there, wait for the result and display the result.

We have gone with the former one on this one, since the result returned is pretty basic and can be passed as Query Parameters into the routed Component.

More involved and extensive results would need different approach than the one taken here, or could use Resolvers.

Working app in action

The initial project was coded in August, 2019 — with Angular 8.1.2 and since then Angular has moved on to 11.