week03/app/controllers/login.js

+import Controller from '@ember/controller';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+/**
+* Provides backend functionality for Login Route
+*/
+export default class LoginController extends Controller {
+    @tracked email = '';
+    @tracked password = '';
+    @tracked loginInvalid = false;
+    classLabel = 'is-invalid-label';
+    classInput = 'is-invalid-input';
+
+    /**
+    * Handles the user submitting the login form.
+    * Suppresses standard behaviour.
+    * Tests the email/password and updates the UI.
+    */
+    @action
+    login(event) {
+        event.preventDefault();
+        if(this.email === 'test@example.com' && this.password === 'password') {
+            this.loginInvalid = false;
+        } else {
+            this.loginInvalid = true;
+        }
+    }
+
+    /**
+    * Handles the user typing in the email/password input fields.
+    * Resets the ''loginInvalid'' property to improve the usability.
+    */
+    @action
+    typing() {
+        this.loginInvalid = false;
+    }
+}

week03/app/controllers/modules.js

+import Controller from '@ember/controller';
+
+export default class ModulesController extends Controller {
+}

week03/app/index.html

@@ -6,6 +6,7 @@
     <title>Week03</title>
     <meta name="description" content="">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="https://cdn.materialdesignicons.com/2.8.94/css/materialdesignicons.min.css"/>
 
     {{content-for "head"}}
 

week03/app/router.js

@@ -7,4 +7,6 @@ export default class Router extends EmberRouter {
 }
 
 Router.map(function() {
+  this.route('login');
+  this.route('modules');
 });

week03/app/routes/login.js

+import Route from '@ember/routing/route';
+
+export default class LoginRoute extends Route {
+}

week03/app/routes/modules.js

+import Route from '@ember/routing/route';
+
+export default class ModulesRoute extends Route {
+    model() {
+        return [
+          {
+            code: 'INF.06528.01',
+            name: 'Cient-seitige Web-Anwendungen',
+            actions: {
+                'delete': {
+                    title: 'Delete this module',
+                    icon: 'mdi mdi-delete warning'
+                }
+            },
+            sections: {
+                'dates': {
+                    title: 'Show all dates',
+                    icon: 'mdi mdi-calendar-clock'
+                },
+                'documents': {
+                    title: 'Show all documents',
+                    icon: 'mdi mdi-file-document-box-multiple-outline'
+                },
+                'excercises': {
+                    title: 'Show all excercises',
+                    icon: 'mdi mdi-test-tube'
+                },
+                'participants': {
+                    title: 'Show all participants',
+                    icon: 'mdi mdi-account-multiple'
+                }
+            }
+          },
+          {
+            code: 'INF.05370.01',
+            name: 'Informatik in den Geistes- und Kulturwissenschaften',
+            actions: {
+                'delete': {
+                    title: 'Delete this module',
+                    icon: 'mdi mdi-delete warning'
+                }
+            },
+            sections: {
+                'dates': {
+                    title: 'Show all dates',
+                    icon: 'mdi mdi-calendar-clock'
+                },
+                'documents': {
+                    title: 'Show all documents',
+                    icon: 'mdi mdi-file-document-box-multiple-outline'
+                },
+                'excercises': {
+                    title: 'Show all excercises',
+                    icon: 'mdi mdi-test-tube'
+                },
+                'participants': {
+                    title: 'Show all participants',
+                    icon: 'mdi mdi-account-multiple'
+                }
+            }  
+          },
+          {
+            code: 'INF.06450.01',
+            name: 'eHumanities Grundlagen',
+            actions: {
+                'delete': {
+                    title: 'Delete this module',
+                    icon: 'mdi mdi-delete warning'
+                }
+            },
+            sections: {
+                'dates': {
+                    title: 'Show all dates',
+                    icon: 'mdi mdi-calendar-clock'
+                },
+                'documents': {
+                    title: 'Show all documents',
+                    icon: 'mdi mdi-file-document-box-multiple-outline'
+                },
+                'excercises': {
+                    title: 'Show all excercises',
+                    icon: 'mdi mdi-test-tube'
+                },
+                'participants': {
+                    title: 'Show all participants',
+                    icon: 'mdi mdi-account-multiple'
+                }
+            }  
+          }
+        ]
+      }
+}

week03/app/styles/app.scss

+@import "settings";
+@import 'foundation-sites/foundation';
+@include foundation-everything;
+
+/*
+* Menu styles
+*/
+ul[role="menu"] {
+   @include menu-base;
+   @include menu-direction('vertical');
+
+   &.horizontal {
+       @include menu-direction('horizontal');
+   }
+
+   li {
+       &.menu-text{
+           @include menu-text;
+       }
+
+       &[role="separator"] {
+           padding-bottom: $global-padding;
+       }
+
+       a {
+           &.active {
+               @include menu-state-active;
+           }
+       }
+   }
+}
+
+/*
+ * Icon styles
+ */
+ .mdi.warning:link, .mdi.warning:visited {
+    color: get-color('alert');
+}
+.mdi.warning:hover, .mdi.warning:focus {
+    color: lighten(get-color('alert'), 10%);
+}
\ No newline at end of file

week03/app/templates/application.hbs

+<header class="top-bar">
+  <nav class="top-bar-left" aria-label="Main">
+    <ul class="horizontal" role="menu" aria-label="Main">
+      <li class="menu-text">Athena - Study Portal</li>
+      <li><a href="" role="menuitem" tabindex="0" class="active">My Modules</a></li>
+      <li><a href="" role="menuitem" tabindex="-1">My Exams</a></li>
+    </ul>
+  </nav>
+  <nav class="top-bar-right" aria-label="User">
+    <ul class="horizontal" role="menu" aria-label="User">
+      <li><a role="menuitem" tabindex="0">Profile</a></li>
+      <li><a role="menuitem" tabindex="-1">Logout</a></li>
+    </ul>
+  </nav>
+</header>
+
+
 {{outlet}}
\ No newline at end of file

week03/app/templates/login.hbs

+<div class="grid-x grid-padding-x">
+  <form class="cell large-2 large-offset-5" {{on "submit" this.login}}>
+    <div class="callout">
+        <h1>Login</h1>
+        <label class={{if loginInvalid this.classLabel}}>E-Mail
+            <Input type="email" @value={{this.email}} class={{if loginInvalid this.classInput}} {{on "keypress" this.typing}}/>
+            {{#if loginInvalid}}
+                <span class="form-error is-visible">No user exists with the e-mail address {{this.email}} or the password is incorrect.</span>
+            {{/if}}
+        </label>
+        <label class={{if loginInvalid this.classLabel}}>Password
+            <Input type="password" @value={{this.password}} class={{if loginInvalid this.classInput}} {{on "keypress" this.typing}} />
+            {{#if loginInvalid}}
+                <span class="form-error is-visible">No user exists with the e-mail address {{this.email}} or the password is incorrect.</span>
+            {{/if}}
+        </label>
+        <div class="text-right">
+            <button class="button">Login</button>
+        </div>
+    </div>
+  </form>
+</div>
\ No newline at end of file

week03/app/templates/modules.hbs

+<main class="grid-container">
+  <div class="grid-x grid-padding-x">
+    <h1 class="cell">My Modules</h1>
+  </div>
+  <div class="grid-x grid-padding-x">
+    <nav class="cell shrink" aria-label="Modules">
+      <ul role="menu" aria-label="Modules">
+        <li><a href="" tabindex="0" role="menuitem" class="active">Current Semester</a></li>
+        <li><a href="" tabindex="-1" role="menuitem">Last Semester</a></li>
+        <li role="separator"></li>
+        <li><a href="" tabindex="-1" role="menuitem">Enroll in Module</a></li>
+      </ul>
+    </nav>
+    <section class="cell auto">
+        <table>
+          <thead>
+            <tr>
+              <th>Code</th>
+              <th>Name</th>
+              <th>Sections</th>
+              <th>Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {{#each model as |module|}}
+            <tr>
+              <td><a href="">{{module.code}}</a></td>
+              <td><a href="">{{module.name}}</a></td>
+              <td>
+                <nav aria-label="Sections of {{module.name}}">
+                  <ul role="menu" class="horizontal" aria-label="Sections">
+                    {{#each-in module.sections as |section display|}}
+                        <li><a href="" role="menuitem" aria-label={{display.title}} title={{display.title}} class={{display.icon}} tabindex="0"></a></li>
+                    {{/each-in}}
+                  </ul>
+                </nav>
+              </td>
+              <td>
+                <nav aria-label="Actions for {{module.name}}">
+                  <ul role="menu" class="horizontal" aria-label="Actions">
+                    {{#each-in module.actions as |action display|}}
+                        <li><a href="" role="menuitem" aria-label={{display.title}} title={{display.title}} class={{display.icon}} tabindex="0"></a></li>
+                    {{/each-in}}
+                  </ul>
+                </nav>
+              </td>
+            </tr>
+            {{/each}}
+          </tbody>
+        </table>
+    </section>
+  </div>
+</main>
+
+{{outlet}}
\ No newline at end of file

week03/ember-cli-build.js

@@ -4,6 +4,9 @@ const EmberApp = require('ember-cli/lib/broccoli/ember-app');
 
 module.exports = function(defaults) {
   let app = new EmberApp(defaults, {
+    'ember-cli-foundation-6-sass': {
+        'foundationJs': 'all'
+    }
     // Add options here
   });
 

week03/package.json

@@ -26,13 +26,13 @@
     "@glimmer/tracking": "^1.0.2",
     "babel-eslint": "^10.1.0",
     "broccoli-asset-rev": "^3.0.0",
+    "broccoli-clean-css": "^2.0.1",
     "ember-auto-import": "^1.6.0",
     "ember-cli": "~3.22.0",
-    "broccoli-clean-css": "^2.0.1",
-    "cypress": "^5.6.0",
     "ember-cli-app-version": "^4.0.0",
     "ember-cli-babel": "^7.22.1",
     "ember-cli-dependency-checker": "^3.2.0",
+    "ember-cli-foundation-6-sass": "0.0.27",
     "ember-cli-htmlbars": "^5.3.1",
     "ember-cli-inject-live-reload": "^2.0.2",
     "ember-cli-sass": "^6.2.0",
@@ -51,6 +51,7 @@
     "eslint": "^7.11.0",
     "eslint-plugin-ember": "^9.3.0",
     "eslint-plugin-node": "^11.1.0",
+    "foundation-sites": "^6.6.3",
     "loader.js": "^4.7.0",
     "npm-run-all": "^4.1.5",
     "qunit-dom": "^1.5.0"
@@ -60,8 +61,5 @@
   },
   "ember": {
     "edition": "octane"
-  },
-  "dependencies": {
-    "cypress": "^6.1.0"
   }
 }

week03/tests/unit/controllers/login-test.js

+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Controller | login', function(hooks) {
+  setupTest(hooks);
+
+  // TODO: Replace this with your real tests.
+  test('it exists', function(assert) {
+    let controller = this.owner.lookup('controller:login');
+    assert.ok(controller);
+  });
+});

week03/tests/unit/controllers/modules-test.js

+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Controller | modules', function(hooks) {
+  setupTest(hooks);
+
+  // TODO: Replace this with your real tests.
+  test('it exists', function(assert) {
+    let controller = this.owner.lookup('controller:modules');
+    assert.ok(controller);
+  });
+});

week03/tests/unit/routes/login-test.js

+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Route | login', function(hooks) {
+  setupTest(hooks);
+
+  test('it exists', function(assert) {
+    let route = this.owner.lookup('route:login');
+    assert.ok(route);
+  });
+});

week03/tests/unit/routes/modules-test.js

+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Route | modules', function(hooks) {
+  setupTest(hooks);
+
+  test('it exists', function(assert) {
+    let route = this.owner.lookup('route:modules');
+    assert.ok(route);
+  });
+});