changes to frontend.

frontend/components/logo.js

@@ -1,36 +1,33 @@
 const Logo = () => (
-  <div className="logo">
-    <span id="circle">u</span>
-    <span id="text">fit</span>
+  <div className='logo'>
+    <span id='circle'>u.</span>
+    <span id='text'>fit</span>
     <style jsx>{`
       .logo {
         display: grid;
-        grid-template-columns: 50px 100px;
+        grid-template-columns: 60px 60px;
         grid-auto-flow: column;
-        grid-gap: 5px;
-        font-size: 30px;
+        grid-gap: 10px;
+        font-size: 36px;
         font-weight: bold;
-        justify-items: left;
-        align-items: bottom;
       }
 
       #circle {
-        box-sizing: border-box;
-        padding: 5px;
         color: white;
-        font-size: 30px;
         background-color: red;
-        width: 50px;
-        height: 50px;
-        border-radius: 25px;
+        width: 60px;
+        height: 60px;
+        border-radius: 30px;
+        text-align: right;
+        vertical-align: text-bottom;
       }
 
       #text {
-        height: 50px;
-        box-sizing: border-box;
+        height: 60px;
+        vertical-align: text-bottom;
       }
     `}</style>
   </div>
-);
+)
 
-export default Logo;
+export default Logo

frontend/components/nav.js

@@ -1,37 +1,26 @@
 import React from 'react'
 import Link from 'next/link'
-
-const links = [
-  { href: 'https://zeit.co/now', label: 'ZEIT' },
-  { href: 'https://github.com/zeit/next.js', label: 'GitHub' }
-].map(link => {
-  link.key = `nav-link-${link.href}-${link.label}`
-  return link
-})
+import Logo from '../components/logo'
 
 const Nav = () => (
   <nav>
     <ul>
+      <li>
+        <Logo />
+      </li>
       <li>
         <Link href='/'>
           <a>Home</a>
         </Link>
       </li>
-      {links.map(({ key, href, label }) => (
-        <li key={key}>
-          <a href={href}>{label}</a>
-        </li>
-      ))}
     </ul>
 
     <style jsx>{`
       :global(body) {
         margin: 0;
-        font-family: -apple-system, BlinkMacSystemFont, Avenir Next, Avenir,
-          Helvetica, sans-serif;
       }
       nav {
-        text-align: center;
+        grid-area: header;
       }
       ul {
         display: flex;

frontend/components/sidebar.js

@@ -0,0 +1,7 @@
+const Sidebar = props => (
+  <div>
+    <p>Sidebar</p>
+  </div>
+)
+
+export default Sidebar

frontend/components/training.js

@@ -1,28 +1,31 @@
-function calculateRating(ratings) {
-  numberOfRatings = ratings.length;
-  sumOfRatings = ratings.reduce((accumulator, value) => accumulator + value);
-  return sumOfRatings / numberOfRatings;
+function calculateRating (ratings) {
+  const numberOfRatings = ratings.length
+  const sumOfRatings = ratings.reduce(
+    (accumulator, rating) => accumulator + rating.value,
+    0
+  )
+  console.log(ratings, sumOfRatings, numberOfRatings)
+  return sumOfRatings / numberOfRatings
 }
 
 const TrainingArchive = props => (
   <div>
     <h2>Training Archive</h2>
-    {console.log("archive", props)}
+    {console.log('archive', props)}
     <ol>
       {props.trainings.map(training => (
         <TrainingHint key={training.id} training={training} />
       ))}
     </ol>
   </div>
-);
+)
 
 const TrainingHint = props => (
   <div>
-    {console.log("hint", props)}
     <div>{props.training.date}</div>
     <div>{props.training.title}</div>
   </div>
-);
+)
 
 const Training = props => (
   <div>
@@ -33,7 +36,7 @@ const Training = props => (
     <p>Rating: {calculateRating(props.training.ratings)}</p>
     <p>Content</p>
   </div>
-);
+)
 
-export { TrainingArchive };
-export default Training;
+export { TrainingArchive }
+export default Training

frontend/initial-data.js

@@ -2,26 +2,53 @@ const data = {
   trainings: [
     {
       id: 0,
-      title: "Indoor HIIT + Core",
+      title: 'Indoor HIIT + Core',
       date: 1572345900000,
-      location: "Yoga Room",
+      location: 'Yoga Room',
       participants: [0, 2],
       ratings: [
         {
           user: 0,
           createdAt: 1572621963544,
-          rating: 5,
-          comment: "Best training ever."
+          value: 5,
+          comment: 'Best training ever.'
         }
       ],
       content: [
         {
-          name: "Warmup",
+          name: 'Warmup',
           duration: 153,
           track: {
-            artist: "Sam & Dave",
+            artist: 'Sam & Dave',
             title: "Hold on, I'm coming",
-            link: "https://www.youtube.com/watch?v=AREppyQf5uw"
+            link: 'https://www.youtube.com/watch?v=AREppyQf5uw'
+          },
+          exercises: [0]
+        }
+      ]
+    },
+    {
+      id: 1,
+      title: 'Indoor HIIT + Core',
+      date: 1572345900000,
+      location: 'Yoga Room',
+      participants: [0, 2],
+      ratings: [
+        {
+          user: 0,
+          createdAt: 1572621963544,
+          value: 5,
+          comment: 'Best training ever.'
+        }
+      ],
+      content: [
+        {
+          name: 'Warmup',
+          duration: 153,
+          track: {
+            artist: 'Sam & Dave',
+            title: "Hold on, I'm coming",
+            link: 'https://www.youtube.com/watch?v=AREppyQf5uw'
           },
           exercises: [0]
         }
@@ -31,26 +58,26 @@ const data = {
   exercises: [
     {
       id: 0,
-      name: "Burpee",
-      description: "Squat, kick legs back, bring legs back forward, stand up.",
+      name: 'Burpee',
+      description: 'Squat, kick legs back, bring legs back forward, stand up.',
       video: null
     }
   ],
   people: [
     {
       id: 0,
-      name: "Tomi",
-      password: "hacked",
-      phone: "077 665 54 43"
+      name: 'Tomi',
+      password: 'hacked',
+      phone: '077 665 54 43'
     },
     {
       id: 2,
-      name: "Marius",
-      password: "hacked",
-      phone: "077 766 55 44"
+      name: 'Marius',
+      password: 'hacked',
+      phone: '077 766 55 44'
     }
   ],
   polls: []
-};
+}
 
-export default data;
+export default data

frontend/pages/index.js

@@ -1,86 +1,61 @@
-import React from "react";
-import Head from "next/head";
-import Nav from "../components/nav";
-import Poll from "../components/poll";
-import Training from "../components/training";
-import { TrainingArchive } from "../components/training";
-import Exercise from "../components/exercise";
-import { ExerciseList } from "../components/exercise";
-import { PeopleList } from "../components/people";
-import Logo from "../components/logo";
-import data from "../initial-data.js";
+import React from 'react'
+import Head from 'next/head'
+import Nav from '../components/nav'
+import Sidebar from '../components/sidebar'
+import Poll from '../components/poll'
+import Training from '../components/training'
+import { TrainingArchive } from '../components/training'
+import Exercise from '../components/exercise'
+import { ExerciseList } from '../components/exercise'
+import { PeopleList } from '../components/people'
+import data from '../initial-data.js'
 
 const Home = () => (
   <div>
     <Head>
       <title>Home</title>
-      <link rel="icon" href="/favicon.ico" />
+      <link
+        href='https://fonts.googleapis.com/css?family=Noto+Sans&display=swap'
+        rel='stylesheet'
+      />
+      <link rel='icon' href='/favicon.ico' />
     </Head>
-    <Nav />
-    <Logo />
 
-    <Poll />
-    <TrainingArchive trainings={data.trainings} />
-    <ExerciseList exercises={data.exercises} />
-    <PeopleList people={data.people} />
+    <Nav />
+    <Sidebar />
+    <div id='content'>
+      <Poll />
+      <TrainingArchive trainings={data.trainings} />
+      <ExerciseList exercises={data.exercises} />
+      <PeopleList people={data.people} />
+      <Training training={data.trainings[data.trainings.length - 1]} />
+    </div>
 
     <style jsx>{`
-      html {
+      :global(html) {
+        font-family: 'Noto Sans', sans-serif;
         box-sizing: border-box;
       }
 
-      *,
-      *:before,
-      *:after {
+      :global(*),
+      :global(*:before),
+      :global(*:after) {
         box-sizing: inherit;
       }
 
-      .hero {
-        width: 100%;
-        color: #333;
-      }
-      .title {
-        margin: 0;
-        width: 100%;
-        padding-top: 80px;
-        line-height: 1.15;
-        font-size: 48px;
-      }
-      .title,
-      .description {
-        text-align: center;
-      }
-      .row {
-        max-width: 880px;
-        margin: 80px auto 40px;
-        display: flex;
-        flex-direction: row;
-        justify-content: space-around;
+      :global(body) {
+        display: grid;
+        grid-template-columns: 250px 1fr;
+        grid-template-areas:
+          'header header'
+          'sidebar content';
       }
-      .card {
-        padding: 18px 18px 24px;
-        width: 220px;
-        text-align: left;
-        text-decoration: none;
-        color: #434343;
-        border: 1px solid #9b9b9b;
-      }
-      .card:hover {
-        border-color: #067df7;
-      }
-      .card h3 {
-        margin: 0;
-        color: #067df7;
-        font-size: 18px;
-      }
-      .card p {
-        margin: 0;
-        padding: 12px 0 0;
-        font-size: 13px;
-        color: #333;
+
+      #content {
+        grid-area: content;
       }
     `}</style>
   </div>
-);
+)
 
-export default Home;
+export default Home