From b1cf259276774ab68aa9cc942515b1aae49871cb Mon Sep 17 00:00:00 2001
From: Ellen Wittingen <ellen2000w@gmail.com>
Date: Sat, 21 Oct 2023 18:03:33 +0200
Subject: [PATCH] Implemented comments in PR

---
 .../cards/public-room-advert-card.hbs         |  32 ++---
 .../cards/public-room-advert-card.js          |   9 --
 app/components/cards/room-advert-card.hbs     |  36 ++---
 app/components/cards/room-advert-card.js      |   9 --
 app/components/header-nav.hbs                 |  32 ++---
 app/components/header-nav.js                  | 127 ++++++++++--------
 app/styles/components/navbar.scss             |  12 +-
 app/templates/public/room-forum.hbs           |   8 +-
 app/templates/room-adverts/index.hbs          |   6 +-
 app/templates/room-adverts/new.hbs            |   4 +-
 .../room-adverts/room-advert/edit.hbs         |   4 +-
 translations/en.yaml                          |   6 +-
 12 files changed, 136 insertions(+), 149 deletions(-)
 delete mode 100644 app/components/cards/public-room-advert-card.js
 delete mode 100644 app/components/cards/room-advert-card.js

diff --git a/app/components/cards/public-room-advert-card.hbs b/app/components/cards/public-room-advert-card.hbs
index ed3257c5f..10a2eacc6 100644
--- a/app/components/cards/public-room-advert-card.hbs
+++ b/app/components/cards/public-room-advert-card.hbs
@@ -5,52 +5,52 @@
         <div class="row">
           <div class="pe-4 col-12 col-md-6 mb-3">
             <div class="width-fit-content">
-              <h2 class="text-secondary me-5">{{roomAdvert.houseName}}</h2>
+              <h2 class="text-secondary me-5">{{@roomAdvert.houseName}}</h2>
               <hr class="border border-secondary bg-secondary border-3 opacity-100 mt-0" />
             </div>
             <table>
-              {{#if roomAdvert.location}}
+              {{#if @roomAdvert.location}}
                 <tr>
                   <th class="pe-3 text-secondary">{{t 'component.public.roomForum.location'}}</th>
                   <td>
                     <a
-                      href='https://maps.google.com/?q={{roomAdvert.location}}'
+                      href='https://maps.google.com/?q={{@roomAdvert.location}}'
                       target='_blank'
                     >
-                      {{roomAdvert.location}}
+                      {{@roomAdvert.location}}
                     </a>
                   </td>
                 </tr>
               {{/if}}
-              {{#if roomAdvert.availableFrom}}
+              {{#if @roomAdvert.availableFrom}}
                 <tr>
                   <th class="pe-3 text-secondary">{{t 'component.public.roomForum.availableFrom'}}</th>
-                  <td>{{roomAdvert.availableFrom}}</td>
+                  <td>{{@roomAdvert.availableFrom}}</td>
                 </tr>
               {{/if}}
               <tr>
                 <th class="pe-3 text-secondary">{{t 'component.public.roomForum.contact'}}</th>
                 <td>
-                  {{#if (is-phone roomAdvert.contact)}}
-                    <a href='tel:{{roomAdvert.contact}}'>{{roomAdvert.contact}}</a>
-                  {{else if (is-email roomAdvert.contact)}}
-                    <a href='mailto:{{roomAdvert.contact}}'>{{roomAdvert.contact}}</a>
-                  {{else if (is-url roomAdvert.contact)}}
-                    <a href='{{roomAdvert.contact}}' target='_blank'>{{roomAdvert.contact}}</a>
+                  {{#if (is-phone @roomAdvert.contact)}}
+                    <a href='tel:{{@roomAdvert.contact}}'>{{@roomAdvert.contact}}</a>
+                  {{else if (is-email @roomAdvert.contact)}}
+                    <a href='mailto:{{@roomAdvert.contact}}'>{{@roomAdvert.contact}}</a>
+                  {{else if (is-url @roomAdvert.contact)}}
+                    <a href='{{@roomAdvert.contact}}' target='_blank'>{{@roomAdvert.contact}}</a>
                   {{else}}
-                    {{roomAdvert.contact}}
+                    {{@roomAdvert.contact}}
                   {{/if}}
                 </td>
               </tr>
             </table>
           </div>
-          {{#if roomAdvert.coverPhotoUrl}}
-            <img src={{roomAdvert.coverPhotoUrl}} class='col-12 col-md-6 mb-3 object-fit-cover'/> 
+          {{#if @roomAdvert.coverPhotoUrl}}
+            <img src={{@roomAdvert.coverPhotoUrl}} class='col-12 col-md-6 mb-3 object-fit-cover'/> 
           {{/if}}
         </div>
         <p class='card-text' data-test-room-advert-description>
           {{markdown-to-html
-            roomAdvert.descriptionCamofied
+            @roomAdvert.descriptionCamofied
             extensions='youtubeEmbed bootstrapTable'
           }}
         </p>
diff --git a/app/components/cards/public-room-advert-card.js b/app/components/cards/public-room-advert-card.js
deleted file mode 100644
index d6cb9c6db..000000000
--- a/app/components/cards/public-room-advert-card.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import Component from '@ember/component';
-
-const PublicRoomAdvertCardComponent = Component.extend({});
-
-PublicRoomAdvertCardComponent.reopenClass({
-  positionalParams: ['roomAdvert'],
-});
-
-export default PublicRoomAdvertCardComponent;
diff --git a/app/components/cards/room-advert-card.hbs b/app/components/cards/room-advert-card.hbs
index d6aa60a4a..036730c97 100644
--- a/app/components/cards/room-advert-card.hbs
+++ b/app/components/cards/room-advert-card.hbs
@@ -1,21 +1,21 @@
 <div class='card'>
   <div class='card-header card-header--overlay'>
-    <img class='card-img-top' src={{roomAdvert.coverPhotoUrlOrDefault}} />
+    <img class='card-img-top' src={{@roomAdvert.coverPhotoUrlOrDefault}} />
 
     <div class='card-title-bar gradient-overlay'>
 
       <div class='card-titles'>
         <h2 class='card-title' data-test-room-advert-house-name>
-          {{roomAdvert.houseName}}
+          {{@roomAdvert.houseName}}
         </h2>
         <h3 class='card-subtitle'>
           <span class='subtitle-author' data-test-room-advert-author>
             <LinkTo
               @route='users.user'
-              roomAdvert={{roomAdvert.author.id}}
+              @model={{@roomAdvert.author.id}}
               class='link-to card-subtitle-link'
             >
-              {{roomAdvert.author.fullName}}
+              {{@roomAdvert.author.fullName}}
             </LinkTo>
           </span>
         </h3>
@@ -24,22 +24,22 @@
   </div>
 
   <div class='row card-subheader-row ms-0 me-0'>
-    {{#if roomAdvert.location}}
+    {{#if @roomAdvert.location}}
       <div class='col-12 col-md-6 card-subheader-item align-items-center p-3'>
         <b>Locatie: </b>
         <a
-          href='https://maps.google.com/?q={{roomAdvert.location}}'
+          href='https://maps.google.com/?q={{@roomAdvert.location}}'
           target='_blank'
         >
-          {{roomAdvert.location}}
+          {{@roomAdvert.location}}
         </a>
       </div>
     {{/if}}
 
-    {{#if roomAdvert.availableFrom}}
+    {{#if @roomAdvert.availableFrom}}
       <div class='col-12 col-md-6 card-subheader-item align-items-center p-3'>
         <b>Beschikbaar vanaf: </b>
-        {{roomAdvert.availableFrom}}
+        {{@roomAdvert.availableFrom}}
       </div>
     {{/if}}
   </div>
@@ -47,24 +47,24 @@
   <div class='card-body'>
     <p class='card-text' data-test-room-advert-description>
       {{markdown-to-html
-        roomAdvert.descriptionCamofied
+        @roomAdvert.descriptionCamofied
         extensions='youtubeEmbed bootstrapTable'
       }}
     </p>
   </div>
 
-  {{#if roomAdvert.contact}}
+  {{#if @roomAdvert.contact}}
     <div class='row card-sub-bottom-row ms-0 me-0'>
       <div class='col-12 card-sub-item align-items-center p-3'>
         <b>Contact: </b>
-        {{#if (is-phone roomAdvert.contact)}}
-          <a href='tel:{{roomAdvert.contact}}'>{{roomAdvert.contact}}</a>
-        {{else if (is-email roomAdvert.contact)}}
-          <a href='mailto:{{roomAdvert.contact}}'>{{roomAdvert.contact}}</a>
-        {{else if (is-url roomAdvert.contact)}}
-          <a href='{{roomAdvert.contact}}' target='_blank'>{{roomAdvert.contact}}</a>
+        {{#if (is-phone @roomAdvert.contact)}}
+          <a href='tel:{{@roomAdvert.contact}}'>{{@roomAdvert.contact}}</a>
+        {{else if (is-email @roomAdvert.contact)}}
+          <a href='mailto:{{@roomAdvert.contact}}'>{{@roomAdvert.contact}}</a>
+        {{else if (is-url @roomAdvert.contact)}}
+          <a href='{{@roomAdvert.contact}}' target='_blank'>{{@roomAdvert.contact}}</a>
         {{else}}
-          {{roomAdvert.contact}}
+          {{@roomAdvert.contact}}
         {{/if}}
       </div>
     </div>
diff --git a/app/components/cards/room-advert-card.js b/app/components/cards/room-advert-card.js
deleted file mode 100644
index 455328f49..000000000
--- a/app/components/cards/room-advert-card.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import Component from '@ember/component';
-
-const RoomAdvertCardComponent = Component.extend({});
-
-RoomAdvertCardComponent.reopenClass({
-  positionalParams: ['roomAdvert'],
-});
-
-export default RoomAdvertCardComponent;
diff --git a/app/components/header-nav.hbs b/app/components/header-nav.hbs
index 90f8d23e5..839c7d8c8 100644
--- a/app/components/header-nav.hbs
+++ b/app/components/header-nav.hbs
@@ -1,35 +1,35 @@
-<nav class='navbar pb-0 pt-0 {{if (not session.isAuthenticated) "public"}}' aria-label='breadcrumb'>
+<nav class='header-nav navbar pb-0 pt-0 {{if (not this.session.isAuthenticated) "public"}}' aria-label='breadcrumb'>
   <div class="container-fluid d-flex justify-content-between">
     <span
-      class='{{if session.isAuthenticated "half-toggle" "pe-2"}} left-sidebar-toggle d-block d-md-none link'
+      class='{{if this.session.isAuthenticated "half-toggle" "pe-2"}} left-sidebar-toggle d-block d-md-none link'
       {{action 'toggleLeftSidebar'}}
     >
       ☰
     </span>
 
-    {{#if session.isAuthenticated }}
-      <span {{action 'handleLogoAction'}} class='navbar-brand'>
+    {{#if this.session.isAuthenticated }}
+      <span {{action this.handleLogoAction}} class='navbar-brand'>
         <div class='header-logo'> </div>
       </span>
     {{else}}
       <div class='public-header-logo'> </div>
     {{/if}}
 
-    <div class='d-flex col ps-0 pe-0 navbar-contents-holder {{if (not session.isAuthenticated) "public"}}'>
+    <div class='d-flex col ps-0 pe-0 navbar-contents-holder {{if (not this.session.isAuthenticated) "public"}}'>
       <div class='navbar-overflow-wrapper'>
         <div class='navbar-nav col d-flex flex-row'>
-          {{#if session.isAuthenticated}}
+          {{#if this.session.isAuthenticated}}
             <Breadcrumbs @routeInfos={{@routeInfos}} />
-          {{else if (not media.isMobile)}}
+          {{else if (not this.media.isMobile)}}
             <LinkTo @route='index' class="page-actions-buttons">
-              <BsButton @type="primary" class="public-navbar-button {{if (eq router.currentRouteName 'index') 'selected'}}">Home</BsButton>
+              <BsButton @type="primary" class="public-navbar-button {{if (eq this.router.currentRouteName 'index') 'selected'}}">Home</BsButton>
             </LinkTo>
-            <BsDropdown class="position-static" as |dd| {{did-insert (action 'setStaticPages')}}>
+            <BsDropdown class="position-static" as |dd| {{did-insert (action this.setStaticPages)}}>
               <dd.button @type="primary" class="public-navbar-button {{if this.onAboutUsPage 'selected'}}">
                 {{t "component.headerNav.aboutUs"}}
               </dd.button>
               <dd.menu class="public-about-us-dropdown" @renderInPlace={{true}} as |ddm|>
-                {{#each-in staticPages as |id title|}}
+                {{#each-in this.staticPages as |id title|}}
                   <ddm.item>
                     <ddm.linkTo @route='static-pages.static-page' @model={{id}} class="btn btn-primary">
                       {{title}}
@@ -42,10 +42,10 @@
               </dd.menu>
             </BsDropdown>
             <LinkTo @route='static-pages.static-page' @model='word-lid' class="page-actions-buttons">
-              <BsButton @type="primary" class="public-navbar-button {{if (eq router.currentURL '/static-pages/word-lid') 'selected'}}">{{t "component.headerNav.becomeMember"}}</BsButton>
+              <BsButton @type="primary" class="public-navbar-button {{if (eq this.router.currentURL '/static-pages/word-lid') 'selected'}}">{{t "component.headerNav.becomeMember"}}</BsButton>
             </LinkTo>
             <LinkTo @route='static-pages.static-page' @model='sponsoring' class="page-actions-buttons">
-              <BsButton @type="primary" class="public-navbar-button {{if (eq router.currentURL '/static-pages/sponsoring') 'selected'}}">{{t "component.headerNav.sponsoring"}}</BsButton>
+              <BsButton @type="primary" class="public-navbar-button {{if (eq this.router.currentURL '/static-pages/sponsoring') 'selected'}}">{{t "component.headerNav.sponsoring"}}</BsButton>
             </LinkTo>
           {{/if}}
         </div>
@@ -53,18 +53,18 @@
 
       <div id='navbar-wormhole'></div>
 
-      {{#unless session.isAuthenticated}}
+      {{#unless this.session.isAuthenticated}}
         <LinkTo @route='login' class='d-none d-md-flex me-2'>
-          <button class='btn btn-primary public-navbar-button {{if (eq router.currentRouteName 'login') 'selected'}}' type='button'>
+          <button class='btn btn-primary public-navbar-button {{if (eq this.router.currentRouteName 'login') 'selected'}}' type='button'>
             {{t 'tag.button.signin'}}
           </button>
         </LinkTo>
       {{/unless}}
     </div>
 
-    {{#unless session.isAuthenticated}}
+    {{#unless this.session.isAuthenticated}}
       <button
-        class='btn btn-locale btn-inverse-locale-{{intl.locale}} me-2'
+        class='btn btn-locale btn-inverse-locale-{{this.intl.locale}} me-2'
         title='{{t "component.headerNav.changeLocale"}}'
         {{action 'toggleLocale'}}
         type='button'>
diff --git a/app/components/header-nav.js b/app/components/header-nav.js
index 3467266d6..576a18e0d 100644
--- a/app/components/header-nav.js
+++ b/app/components/header-nav.js
@@ -1,71 +1,80 @@
 import { inject as service } from '@ember/service';
-import Component from '@ember/component';
+import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { computed } from '@ember/object';
+import { action } from '@ember/object';
 
-export default Component.extend({
-  tagName: 'nav',
-  classNames: 'header-nav',
-  session: service(),
-  layoutManager: service('layout-manager'),
-  media: service(),
-  intl: service(),
-  localStorage: service(),
-  store: service(),
-  router: service(),
-  abilities: service(),
-  staticPages: tracked(),
+export default class HeaderNav extends Component {
+  tagName = 'nav';
+  classNames = 'header-nav';
+  @service session;
+  @service('layout-manager') layoutManager;
+  @service media;
+  @service intl;
+  @service localStorage;
+  @service store;
+  @service router;
+  @service abilities;
+  @tracked staticPages;
 
-  onAboutUsPage: computed('router.{currentRouteName,currentURL}', function () {
+  // computed('router.{currentRouteName,currentURL}'
+  get onAboutUsPage() {
     return (
       this.router.currentRouteName === 'public.room-forum' ||
       (this.router.currentRouteName === 'static-pages.static-page.index' &&
         this.router.currentURL !== '/static-pages/word-lid' &&
         this.router.currentURL !== '/static-pages/sponsoring')
     );
-  }),
+  }
 
-  actions: {
-    handleLogoAction() {
-      if (this.media.isMobile) {
-        this.send('toggleLeftSidebar');
-      } else {
-        this.router.transitionTo('index');
-      }
-    },
-    toggleLeftSidebar() {
-      this.layoutManager.toggleLeftSidebar();
-    },
-    toggleRightSidebar() {
-      this.layoutManager.toggleRightSidebar();
-    },
-    closeSidebars() {
-      this.layoutManager.closeSidebars();
-    },
-    toggleLocale() {
-      const { locale } = this.intl;
-      if (locale[0] === 'nl') {
-        this.set('intl.locale', 'en');
-        localStorage.setItem('locale', 'en-');
-      } else {
-        this.set('intl.locale', 'nl');
-        localStorage.setItem('locale', 'nl');
-      }
-      console.log(this.router);
-    },
-    setStaticPages() {
-      if (!this.session.isAuthenticated && !this.media.isMobile) {
-        this.store.findAll('static-page').then((pages) => {
-          // make key-value pairs for all found static pages that do not appear by itself
-          let staticPages = {};
-          pages.forEach((page) => {
-            if (!['word-lid', 'sponsoring'].includes(page.id)) {
-              staticPages[page.id] = page.title;
-            }
-          });
-          this.staticPages = staticPages;
+  @action
+  handleLogoAction() {
+    if (this.media.isMobile) {
+      this.send('toggleLeftSidebar');
+    } else {
+      this.router.transitionTo('index');
+    }
+  }
+
+  @action
+  toggleLeftSidebar() {
+    this.layoutManager.toggleLeftSidebar();
+  }
+
+  @action
+  toggleRightSidebar() {
+    this.layoutManager.toggleRightSidebar();
+  }
+
+  @action
+  closeSidebars() {
+    this.layoutManager.closeSidebars();
+  }
+
+  @action
+  toggleLocale() {
+    const { locale } = this.intl;
+    if (locale[0] === 'nl') {
+      this.intl.locale = 'en';
+      this.localStorage.setItem('locale', 'en-');
+    } else {
+      this.intl.locale = 'nl';
+      this.localStorage.setItem('locale', 'nl');
+    }
+  }
+
+  @action
+  setStaticPages() {
+    if (!this.session.isAuthenticated && !this.media.isMobile) {
+      this.store.findAll('static-page').then((pages) => {
+        // make key-value pairs for all found static pages that do not appear by itself
+        let staticPages = {};
+        pages.forEach((page) => {
+          if (!['word-lid', 'sponsoring'].includes(page.id)) {
+            staticPages[page.id] = page.title;
+          }
         });
-      }
-    },
-  },
-});
+        this.staticPages = staticPages;
+      });
+    }
+  }
+}
diff --git a/app/styles/components/navbar.scss b/app/styles/components/navbar.scss
index c8388e736..a6566bace 100644
--- a/app/styles/components/navbar.scss
+++ b/app/styles/components/navbar.scss
@@ -1,17 +1,13 @@
-.header-nav {
-  position: fixed;
+.header-nav.navbar {position: fixed;
   top: 0;
+  flex-wrap: nowrap;
   transition: background-color 0.5s ease-in-out;
   z-index: 5;
   background-color: $brand-primary;
   width: 100vw;
 
-  .navbar {
-    flex-wrap: nowrap;
-
-    &.public {
-      border-bottom: 4px solid $brand-secondary;
-    }
+  &.public {
+    border-bottom: 4px solid $brand-secondary;
   }
 }
 
diff --git a/app/templates/public/room-forum.hbs b/app/templates/public/room-forum.hbs
index da141dbec..6b096982d 100644
--- a/app/templates/public/room-forum.hbs
+++ b/app/templates/public/room-forum.hbs
@@ -6,11 +6,11 @@
     @intro="{{t 'component.public.roomForum.intro'}}"
   />
 
-  {{#each model as |roomAdvert|}}
+  {{#each @model as |roomAdvert|}}
     <Cards::PublicRoomAdvertCard @roomAdvert={{roomAdvert}} />
   {{/each}}
 
-  {{#if (eq model.length 0)}}
+  {{#if (eq @model.length 0)}}
     <div class='col-12'>
       <div class='alert alert-warning' role='alert'>
         Momenteel zijn er geen kamer advertenties.
@@ -18,9 +18,9 @@
     </div>
   {{/if}}
 
-  {{#if (gt model.meta.page_count 1)}}
+  {{#if (gt @model.meta.page_count 1)}}
     <div class='row justify-content-center'>
-      <PageNumbers @info={{model.meta}} />
+      <PageNumbers @info={{@model.meta}} />
     </div>
   {{/if}}
 </div>
\ No newline at end of file
diff --git a/app/templates/room-adverts/index.hbs b/app/templates/room-adverts/index.hbs
index 8df338a6d..b0e3ac707 100644
--- a/app/templates/room-adverts/index.hbs
+++ b/app/templates/room-adverts/index.hbs
@@ -3,7 +3,7 @@
 </EmberWormhole>
 
 <div class='row'>
-  {{#each model as |roomAdvert|}}
+  {{#each @model as |roomAdvert|}}
     <div class='d-flex col-md-6 mb-3'>
       <div class='d-flex'>
         <div class='card mb-0'>
@@ -66,7 +66,7 @@
     </div>
   {{/each}}
 
-  {{#if (eq model.length 0)}}
+  {{#if (eq @model.length 0)}}
     <div class='col-12'>
       <div class='alert alert-warning' role='alert'>
         Momenteel zijn er geen kamer advertenties.
@@ -76,5 +76,5 @@
 </div>
 
 <div class='row justify-content-center'>
-  <PageNumbers @info={{model.meta}} />
+  <PageNumbers @info={{@model.meta}} />
 </div>
\ No newline at end of file
diff --git a/app/templates/room-adverts/new.hbs b/app/templates/room-adverts/new.hbs
index 7017a51e4..06ccae418 100644
--- a/app/templates/room-adverts/new.hbs
+++ b/app/templates/room-adverts/new.hbs
@@ -1,7 +1,7 @@
 <Forms::RoomAdvertForm
   @model={{@model}}
   @errorMessage={{this.errorMessage}}
-  @onSubmit={{action 'submit'}}
+  @onSubmit={{action this.submit}}
   @onCancel={{this.cancel}}
-  @onCoverPhotoLoaded={{action 'coverPhotoLoaded'}}
+  @onCoverPhotoLoaded={{action this.coverPhotoLoaded}}
 />
\ No newline at end of file
diff --git a/app/templates/room-adverts/room-advert/edit.hbs b/app/templates/room-adverts/room-advert/edit.hbs
index 005028b47..101df71d6 100644
--- a/app/templates/room-adverts/room-advert/edit.hbs
+++ b/app/templates/room-adverts/room-advert/edit.hbs
@@ -5,8 +5,8 @@
 <Forms::RoomAdvertForm
   @model={{@model}}
   @errorMessage={{this.errorMessage}}
-  @onSubmit={{action 'submit'}}
+  @onSubmit={{action this.submit}}
   @onCancel={{this.cancel}}
-  @onCoverPhotoLoaded={{action 'coverPhotoLoaded'}}
+  @onCoverPhotoLoaded={{action this.coverPhotoLoaded}}
   @groups={{this.groups}}
 />
\ No newline at end of file
diff --git a/translations/en.yaml b/translations/en.yaml
index 9348a8fb2..709ece5bb 100644
--- a/translations/en.yaml
+++ b/translations/en.yaml
@@ -266,8 +266,8 @@ component:
       header: Room forum
       intro-title: Check the available rooms in homes of our members here!
       intro: 
-        Members of Alpha mainly live in student-housing, either in Alpha-houses or other student-houses. 
-        If a room becomes available in an Alpha-house or in a student-house of a member, you will find it here!
+        Members of Alpha mainly live in student housing, either in "Alpha houses" or other student houses.
+        If a room becomes available in an Alpha house or in a student house of a member, you will find it here!
       location: Location
       contact: Contact
       availableFrom: Available from
@@ -302,7 +302,7 @@ mixin:
     activities: Activities
     vacancies: Vacancies
     roomAdverts: Rooms
-    roomForum: Roomforum
+    roomForum: Room forum
     forum: Forum
     photoAlbums: Photo-albums
     polls: Polls