Update

app/components/nav-bar.hbs

@@ -3,8 +3,8 @@
   <LinkTo @route="home">Home</LinkTo>
   <LinkTo @route="library">Libraries</LinkTo>
   <LinkTo @route="latest-books">Latest Arrivals</LinkTo>
-  {{!-- <p>Books : {{this.booksReq}}</p>
-  <p>Library : {{this.libraryReq}}</p> --}}
+  <p>Books : {{this.booksReq}}</p>
+  <p>Library : {{this.libraryReq}}</p>
   <br>
   <button class='buttonMode' type="button" {{on 'click' this.changeTheme}}>{{this.theme}}</button>
   <hr>

app/components/nav-bar.js

@@ -1,43 +1,42 @@
 import Component from '@glimmer/component';
-import { inject as service } from "@ember/service";
-import {action, set,get} from '@ember/object';
+import { inject as service } from '@ember/service';
+import { action, set, get } from '@ember/object';
 
 export default class NavBarComponent extends Component {
-    // @service data;
-    @service userPreference;
-
-    // get libraryReq(){
-    //      return this.data.libraryReq;
-    // }
-
-    // get booksReq(){
-    //     return this.data.booksReq;
-    // }
-
-    get theme(){        
-        let t = this.userPreference.theme;
-
-        // setting body colour
-        let backgroundColour = t == 'dark' ? 'grey' : 'white';
-        let colour = t == 'dark' ? 'white' : 'black';
-        $('body').css('background-color', backgroundColour);
-        $('body').css('color', colour);
-
-        return t;
-    }
-
-    @action
-    changeTheme(){
-        let t = this.theme == 'dark' ? 'light' : 'dark';
-        this.userPreference.setTheme(t);
-    }
-
-    // @action
-    // changeColour(){
-    //     let backgroundColour = this.theme  == 'dark' ? 'grey' : 'white';
-    //     let colour = this.theme  == 'dark' ? 'white' : 'black';
-    //     $('body').css('background-color', backgroundColour);
-    //     $('body').css('color', colour);
-    // }
-
+  @service data;
+  @service userPreference;
+
+  get libraryReq() {
+    return this.data.libraryReq;
+  }
+
+  get booksReq() {
+    return this.data.booksReq;
+  }
+
+  get theme() {
+    let t = this.userPreference.theme;
+
+    // setting body colour
+    let backgroundColour = t == 'dark' ? 'grey' : 'white';
+    let colour = t == 'dark' ? 'white' : 'black';
+    $('body').css('background-color', backgroundColour);
+    $('body').css('color', colour);
+
+    return t;
+  }
+
+  @action
+  changeTheme() {
+    let t = this.theme == 'dark' ? 'light' : 'dark';
+    this.userPreference.setTheme(t);
+  }
+
+  // @action
+  // changeColour(){
+  //     let backgroundColour = this.theme  == 'dark' ? 'grey' : 'white';
+  //     let colour = this.theme  == 'dark' ? 'white' : 'black';
+  //     $('body').css('background-color', backgroundColour);
+  //     $('body').css('color', colour);
+  // }
 }

app/controllers/library/details/books/index.js

@@ -1,20 +1,20 @@
 import Controller from '@ember/controller';
 import { tracked } from '@glimmer/tracking';
-import {action} from '@ember/object';
+import { action } from '@ember/object';
 
 export default class LibraryDetailsBooksIndexController extends Controller {
   queryParams = ['sort'];
   sort;
   // @action
   //   action1(){
-  //       //  document.getElementById('id1').addEventListener('click',function() { 
+  //       //  document.getElementById('id1').addEventListener('click',function() {
   //       $('#id1').click(function(){
   //           Ember.run(function () {
   //             Ember.debug('In my own runloop');
   //             Ember.run.schedule('actions',function(){
   //               $('body').css('background-color', 'yellow');
   //             });
-              
+
   //             Ember.run(function () {
   //               Ember.debug('In a nested runloop');
   //               $('body').css('background-color', 'red');
@@ -24,17 +24,17 @@ export default class LibraryDetailsBooksIndexController extends Controller {
   //   }
 
   // get sortedBooks() {
-    
+
   //   let s = this.sort;
-    
+
   //   if (s) {
   //     return this.model.sort((a, b) => {
   //       if (s === 'asc') {
-  //         return a.name.localeCompare(b.name); 
+  //         return a.name.localeCompare(b.name);
   //       } else if (s === 'desc') {
-  //         return b.name.localeCompare(a.name); 
+  //         return b.name.localeCompare(a.name);
   //       } else {
-  //         return 0; 
+  //         return 0;
   //       }
   //     });
   //   }

app/controllers/library/details/read-book.js

@@ -3,21 +3,20 @@ import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
 
 export default class LibraryDetailsReadBookController extends Controller {
-    @service router;
-    email = null;
-    name = null;
+  @service router;
+  email = null;
+  name = null;
 
-    @action
-    getBook() {
-        if(!this.email || !this.name){
-            alert("Enter all the details to proceed!");
-            return;
-        }
-        alert("Successfully Sent Book to " + this.email);
-        this.set('email', null);
-        this.set('name', null);
-
-        this.router.transitionTo('library.details.books');
+  @action
+  getBook() {
+    if (!this.email || !this.name) {
+      alert('Enter all the details to proceed!');
+      return;
     }
-}
+    alert('Successfully Sent Book to ' + this.email);
+    this.set('email', null);
+    this.set('name', null);
 
+    this.router.transitionTo('library.details.books');
+  }
+}

app/router.js

@@ -7,15 +7,15 @@ export default class Router extends EmberRouter {
 }
 
 Router.map(function () {
-  this.route('home',{path:"/home"})
-  this.route('library', function() {
-    this.route('details', {path:"/:library_id"}, function() {
-      this.route('books', function() {
-        this.route('book',{path:"/:book_id"});
+  this.route('home');
+  this.route('library', function () {
+    this.route('details', { path: '/:library_id' }, function () {
+      this.route('books', function () {
+        this.route('book', { path: '/:book_id' });
       });
-      this.route('read-book',{path:"/read/:readbook_id"});
+      this.route('read-book', { path: '/read/:readbook_id' });
     });
   });
-  this.route('not-found',{path:"/*path"});
+  this.route('not-found', { path: '/*path' });
   this.route('latest-books');
 });

app/routes/application.js

@@ -1,12 +1,12 @@
 import Route from '@ember/routing/route';
-import {inject as service} from '@ember/service';
+import { inject as service } from '@ember/service';
 
 export default class ApplicationRoute extends Route {
-    @service router;
-    beforeModel(transition){
-        // console.log(transition.to.name);
-        if(transition.to.name==='index'){
-            this.router.transitionTo('home');
-        } 
+  @service router;
+  beforeModel(transition) {
+    // console.log(transition.to.name);
+    if (transition.to.name === 'index') {
+      this.router.transitionTo('home');
     }
-}
+  }
+}

app/routes/latest-books.js

@@ -1,30 +1,32 @@
 import Route from '@ember/routing/route';
-import {action} from '@ember/object';
+import { action } from '@ember/object';
 
 export default class LatestBooksRoute extends Route {
-    @action
-    loading(transition){
-        console.log("loading");
-        return true;
-    }
+  @action
+  loading(transition) {
+    console.log('loading');
+    return true;
+  }
 
-    @action
-    error(){
-        console.log("error");
-        return true;
-    }
+  @action
+  error() {
+    console.log('error');
+    return true;
+  }
 
-    model() {
-        return fetch('https://www.googleapis.com/books/v1/volumes?q=publishedDate:2013&maxResults=8')
-            .then(response => response.json())
-            .then(data => {
-                return data.items;
-            })
-        // let data=await fetch('https://www.googleapis.com/books/v1/volumes?q=publishedDate:2013&maxResults=8')
-        //     .then(response => response.json())
-        //     .then(data => {
-        //         return data.items;
-        //     })
-        // return data;
-    }
+  model() {
+    return fetch(
+      'https://www.googleapis.com/books/v1/volumes?q=publishedDate:2013&maxResults=8',
+    )
+      .then((response) => response.json())
+      .then((data) => {
+        return data.items;
+      });
+    // let data=await fetch('https://www.googleapis.com/books/v1/volumes?q=publishedDate:2013&maxResults=8')
+    //     .then(response => response.json())
+    //     .then(data => {
+    //         return data.items;
+    //     })
+    // return data;
+  }
 }

app/routes/library.js

@@ -1,5 +1,3 @@
 import Route from '@ember/routing/route';
 
-export default class LibraryRoute extends Route {
-
-}
+export default class LibraryRoute extends Route {}

app/routes/library/details.js

@@ -1,27 +1,26 @@
 import Route from '@ember/routing/route';
-import { inject as service } from "@ember/service";
+import { inject as service } from '@ember/service';
 
 export default class LibraryDetailsRoute extends Route {
-    // @service('LibraryData') library;
-    // @service data;
-    @service router;
+  @service data;
+  @service router;
 
-    model({ library_id }) {
-        // let url = "library/" + library_id;
-        // let lib = this.data.getData(url);
+  model({ library_id }) {
+    let url = '/libraries/' + library_id;
+    let lib = this.data.getData(url);
 
-        // this.library.data.forEach(element => {
-        //     if (element.id == library_id) {
-        //         lib = element;
-        //         return;
-        //     }
-        // });
-
-        let lib = fetch(`/libraries/${library_id}`).then((response)=>response.json()).then((r)=> r.data)
-
-        if (!lib) {
-            this.router.transitionTo('not-found', "notFound");
-        }
-        return lib;
+    if (!lib) {
+      this.router.transitionTo('not-found', 'notFound');
     }
+    return lib;
+  }
 }
+
+// this.library.data.forEach(element => {
+//     if (element.id == library_id) {
+//         lib = element;
+//         return;
+//     }
+// });
+
+// let lib = fetch(`/libraries/${library_id}`).then((response)=>response.json()).then((r)=> r.data)

app/routes/library/details/books.js

@@ -1,4 +1,3 @@
 import Route from '@ember/routing/route';
 
-export default class LibraryDetailsBooksRoute extends Route {
-}
+export default class LibraryDetailsBooksRoute extends Route {}

app/routes/library/details/books/book.js

@@ -1,26 +1,25 @@
 import Route from '@ember/routing/route';
-import { inject as service } from "@ember/service";
+import { inject as service } from '@ember/service';
 
 export default class LibraryDetailsBooksBookRoute extends Route {
-    @service router;
-    // @service data;
+  @service router;
+  @service data;
 
-    async model({ book_id }) {
-        // let library_id = this.paramsFor('library.details').library_id;
-        // let url = `library/${library_id}/books/${book_id}`;
-        // let book = this.data.getData(url);
-
-        // library.books.forEach(element => {
-        //     if (element.id == book_id) {
-        //         book = element;
-        //         return
-        //     }
-        // });
-        let book = await fetch(`/books/${book_id}`).then((response) => response.json()).then((r) => r.data);
-
-        if (!book) {
-            this.router.transitionTo('not-found', "notfound");
-        }
-        return book;
+  async model({ book_id }) {
+    let library_id = this.paramsFor('library.details').library_id;
+    let url = `/libraries/${library_id}/books/${book_id}`;
+    let book = await this.data.getData(url);
+    if (!book) {
+      this.router.transitionTo('not-found', 'notfound');
     }
+    return book;
+  }
 }
+
+   // library.books.forEach(element => {
+    //     if (element.id == book_id) {
+    //         book = element;
+    //         return
+    //     }
+    // });
+    // let book = await fetch(`/books/${book_id}`).then((response) => response.json()).then((r) => r.data);