{"id":19274700,"url":"https://github.com/aiday-mar/angular-travel-app","last_synced_at":"2026-05-18T02:36:47.812Z","repository":{"id":175828464,"uuid":"426181094","full_name":"aiday-mar/angular-travel-app","owner":"aiday-mar","description":"Angular travelling website","archived":false,"fork":false,"pushed_at":"2021-12-09T14:29:20.000Z","size":960,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-07-25T02:19:15.203Z","etag":null,"topics":["angular","personal-project","typescript"],"latest_commit_sha":null,"homepage":"https://travel-angular-aiday.web.app/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aiday-mar.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-11-09T10:15:41.000Z","updated_at":"2025-01-24T00:50:07.000Z","dependencies_parsed_at":null,"dependency_job_id":"c3eba16f-5c2d-4b5c-af2d-1aedd7436a75","html_url":"https://github.com/aiday-mar/angular-travel-app","commit_stats":null,"previous_names":["aiday-mar/angular-travel-app"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/aiday-mar/angular-travel-app","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aiday-mar%2Fangular-travel-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aiday-mar%2Fangular-travel-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aiday-mar%2Fangular-travel-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aiday-mar%2Fangular-travel-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aiday-mar","download_url":"https://codeload.github.com/aiday-mar/angular-travel-app/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aiday-mar%2Fangular-travel-app/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33162707,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-17T22:39:12.733Z","status":"online","status_checked_at":"2026-05-18T02:00:06.436Z","response_time":71,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","personal-project","typescript"],"created_at":"2024-11-09T20:47:00.904Z","updated_at":"2026-05-18T02:36:47.807Z","avatar_url":"https://github.com/aiday-mar.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular travelling website\n\nLink : https://travel-angular-aiday.web.app/\n\nNote : This website was developed using StackBlitz, hence why some files are missing as compared to if I was developing locally on my computer. \n\n![alt text](https://github.com/aiday-mar/Angular-travel-app/blob/master/Angular_Picture_1.PNG?raw=true)\n\n\u003cbr/\u003e\u003cbr/\u003e\n\n![alt text](https://github.com/aiday-mar/Angular-travel-app/blob/master/Angular_Picture_2.PNG?raw=true)\n\n\u003cb\u003eCustomer support chat window\u003c/b\u003e\n\nThe chat window is made using the Kendo library. A div was appended to the top of the window, which can be used to close the window.\n\n\u003cb\u003eBooking interface\u003c/b\u003e\n\nThere is a booking page, where you can search for a flight (the results are filtered on typing). It is also possible to select the date range of the flight using the Material UI date calendar picker. You can select the flights of interest by clicking on the shopping cart icon. The select flights will appear in the checkout. In order to do this, I implemented a booking service as follows:\n\n```\nimport { Injectable } from \"@angular/core\";\n\ninterface Flight {\n  id: String;\n  from: String;\n  to: String;\n  departure: String;\n  arrival: String;\n  price: String;\n}\n\n@Injectable()\nexport class BookingService {\n  flightsToPay: Flight[] = [];\n  flightIdsToPay: String[] = [];\n  totalFlights: number = 0;\n\n  constructor() {}\n}\n```\n\nThen I use the booking service as follows in the booking component.\n\n```\nexport class BookComponent implements OnInit {\n  flights: Flight[] = flightsData;\n  constructor(private bookingService: BookingService) {}\n  saveBooking(\n    id: string,\n    from: string,\n    to: string,\n    departure: string,\n    arrival: string,\n    price: string\n  ) {\n    const toSave: Flight = {\n      id: id,\n      from: from,\n      to: to,\n      departure: departure,\n      arrival: arrival,\n      price: price,\n    };\n    if (this.bookingService.flightIdsToPay.indexOf(id) == -1) {\n      this.bookingService.flightsToPay.push(toSave);\n      this.bookingService.flightIdsToPay = this.bookingService.flightsToPay.map(\n        (entry) =\u003e entry.id\n      );\n      this.bookingService.totalFlights =\n        this.bookingService.totalFlights + Number(price);\n    } else {\n      this.bookingService.flightsToPay =\n        this.bookingService.flightsToPay.filter((entry) =\u003e entry.id !== id);\n      this.bookingService.flightIdsToPay = this.bookingService.flightsToPay.map(\n        (entry) =\u003e entry.id\n      );\n      this.bookingService.totalFlights =\n        this.bookingService.totalFlights - Number(price);\n    }\n  }\n  getColor(id: string) {\n    if (this.bookingService.flightIdsToPay.indexOf(id) == -1) {\n      return \"grey\";\n    } else {\n      return \"green\";\n    }\n  }\n  onChangeFrom(event) {\n    this.flights = flightsData.filter(function (entry) {\n      return entry.from.toLowerCase().includes(event.toLowerCase());\n    });\n  }\n  onChangeTo(event) {\n    this.flights = flightsData.filter(function (entry) {\n      return entry.to.toLowerCase().includes(event.toLowerCase());\n    });\n  }\n  onClickSubmit(data) {\n    this.flights = flightsData.filter(function (entry) {\n      return entry.from == data.from \u0026\u0026 entry.to == data.to;\n    });\n  }\n  ngOnInit() {}\n}\n```\n\n\u003cb\u003ePayment with stripe\u003c/b\u003e\n\nOnce the flights are booked it is possible to pay for them. The payment component is implemented using the Stripe library.\n\n```\nexport class PaymentComponent implements OnInit {\n  flightsToPay: Flight[];\n  paymentHandler:any = null;\n\n  constructor(private bookingService: BookingService) {\n    this.flightsToPay = bookingService.flightsToPay;\n  }\n\n  ngOnInit() {\n    this.invokeStripe();\n  }\n  \n  makePayment(amount) {\n    const paymentHandler = (\u003cany\u003ewindow).StripeCheckout.configure({\n      key: \"PK\",\n      locale: \"auto\",\n      token: function (stripeToken: any) {\n        console.log(stripeToken)\n        alert(\"Stripe token generated!\");\n      }\n    });\n  \n    paymentHandler.open({\n      name: \"Payment\",\n      amount: amount * 100\n    });\n  }\n  \n  invokeStripe() {\n    if(!window.document.getElementById(\"stripe-script\")) {\n      const script = window.document.createElement(\"script\");\n      script.id = \"stripe-script\";\n      script.type = \"text/javascript\";\n      script.src = \"https://checkout.stripe.com/checkout.js\";\n      script.onload = () =\u003e {\n        this.paymentHandler = (\u003cany\u003ewindow).StripeCheckout.configure({\n          key: \"PK\",\n          locale: \"auto\",\n          token: function (stripeToken: any) {\n            console.log(stripeToken)\n            alert(\"Payment has been successfull!\");\n          }\n        });\n      }\n        \n      window.document.body.appendChild(script);\n    }\n  }\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faiday-mar%2Fangular-travel-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faiday-mar%2Fangular-travel-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faiday-mar%2Fangular-travel-app/lists"}