Add timetable page

src/components/LeftNav.svelte

@@ -3,6 +3,7 @@
   import Home32 from "carbon-icons-svelte/lib/Home32";
   import SendAlt32 from "carbon-icons-svelte/lib/SendAlt32";
   import UserAvatar32 from "carbon-icons-svelte/lib/UserAvatar32";
+  import Calendar32 from "carbon-icons-svelte/lib/Calendar32";
   export let segment;
   let navClass = "";
 
@@ -39,6 +40,14 @@
         ><UserAvatar32 class="carbon-icon" /> <span>Профиль</span></a
       >
     </li>
+    <li>
+      <a
+        class="block"
+        aria-current={segment === "timetable" ? "page" : undefined}
+        href="timetable"
+        ><Calendar32 class="carbon-icon" /> <span>Расписание</span></a
+      >
+    </li>
     <li>
       <a
         class="flex items-center"

src/components/TimeTable/Input.svelte

@@ -0,0 +1,54 @@
+<script>
+  export let className, value, editing;
+</script>
+
+{#if editing == false}
+  <span class={`input ${className}`}> {value}</span>
+{:else}
+  <input
+    type="text"
+    class={`rounded-lg border border-1 border-gray focus:outline-none input ${className}`}
+    {value}
+  />
+{/if}
+
+<style>
+  .small {
+    width: 100%;
+  }
+  .large {
+    width: 100%;
+    text-align: center;
+  }
+
+  .input {
+    margin: 2px;
+    position: relative;
+  }
+
+  span.alignRight {
+    text-align: right;
+  }
+
+  span.current::before {
+    border-radius: 15px;
+    content: " ";
+    width: 10px;
+    height: 10px;
+    position: absolute;
+    left: 0;
+    top: 25%;
+    animation: blink 2s step-start 0s infinite;
+    -webkit-animation: blink 2s step-start 0s infinite;
+  }
+  @keyframes blink {
+    50% {
+      background-color: red;
+    }
+  }
+  @-webkit-keyframes blink {
+    50% {
+      background-color: red;
+    }
+  }
+</style>

src/components/TimeTable/Row.svelte

@@ -0,0 +1,20 @@
+<script>
+  import RowItem from "./RowItem.svelte";
+
+  export let items, current;
+</script>
+
+<div class="rowRoot">
+  {#each items as item, i}
+    <RowItem {item} current={i === 3 && current} />
+  {/each}
+</div>
+
+<style>
+  .rowRoot {
+    display: flex;
+    width: 100%;
+    justify-content: space-evenly;
+    height: 150px;
+  }
+</style>

src/components/TimeTable/RowItem.svelte

@@ -0,0 +1,68 @@
+<script>
+  import Input from "./Input.svelte";
+
+  export let item, current;
+  let editing = false;
+
+  function toggle() {
+    editing = !editing;
+  }
+</script>
+
+<div class="rowItem">
+  <div class="rowItemHeader">
+    <Input className="small" value={item.lessonType} {editing} />
+    <Input className="small alignRight" value={item.lectureHall} {editing} />
+  </div>
+
+  <div class="rowItemHeader">
+    <Input
+      className={`large ${current && "current"}`}
+      value={item.subject}
+      {editing}
+    />
+  </div>
+
+  <div class="rowItemHeader">
+    <div class="rowItemFooter" style="width: 70%">
+      <Input className="small" value={item.lecturerOne} {editing} />
+      <Input className="small" value={item.lecturerTwo} {editing} />
+    </div>
+    <button on:click={toggle}>
+      {!editing ? "✏️" : "💾"}
+    </button>
+  </div>
+</div>
+
+<style>
+  .rowItem {
+    border-right: 1px solid;
+    border-bottom: 1px solid;
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+    width: 100%;
+    min-width: 150px;
+  }
+  .rowItem button {
+    display: none;
+    height: fit-content;
+  }
+  .rowItem:hover button {
+    display: block;
+    cursor: pointer;
+  }
+
+  .rowItemHeader {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+  }
+
+  .rowItemFooter {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+</style>

src/components/TimeTable/data.js

@@ -0,0 +1,38 @@
+export default [
+    {
+      lessonType: '1-9 leture',
+      lectureHall: '402F',
+      subject: 'Mathematics',
+      lecturerOne: 'Peter Pitrovich',
+      lecturerTwo: 'Pragma James',
+    },
+    {
+      lessonType: '1-9 Pra.',
+      lectureHall: '202F',
+      subject: 'Physics',
+      lecturerOne: 'Anicimov',
+      lecturerTwo: '',
+    },
+    {
+      lessonType: '1-9 leture',
+      lectureHall: '301F',
+      subject: 'Algorithm',
+      lecturerOne: 'Babilunga Sharon',
+      lecturerTwo: 'Alex Jonard',
+    },
+    {
+      lessonType: '1-9 leture',
+      lectureHall: '222F',
+      subject: 'Computer Aided system',
+      lecturerOne: 'Godovichecko Heroku',
+      lecturerTwo: '',
+      
+    },
+    ...Array(4 * 4).fill(0).map((a, i) => ({
+      lessonType: '1-9 leture',
+      lectureHall: '222F',
+      subject: 'Computer Aided system',
+      lecturerOne: 'Godovichecko Heroku',
+      lecturerTwo: '',
+    }))
+  ];

src/components/TimeTable/index.svelte

@@ -0,0 +1,100 @@
+<script>
+  import { stores } from "@sapper/app";
+  import Row from "./Row.svelte";
+  import data from "./data";
+
+  const { page } = stores();
+  let tab = "";
+  $: tab = $page.query.tab || "mine";
+</script>
+
+<div class="root">
+  <div class="header flex justify-between mb-2">
+    <h4 class="title">Расписание</h4>
+    <div class="flex justify-evenly items-center">
+      <a
+        class="mr-5 text-sm {tab === 'mine' && 'active'}"
+        href="/timetable?tab=mine"
+      >
+        Мои
+      </a>
+      <a
+        class="mr-5 text-sm {tab === 'saved' && 'active'}"
+        href="/timetable?tab=saved"
+      >
+        Сохранение
+      </a>
+    </div>
+  </div>
+  <h4>АИ-153</h4>
+  <div class="container">
+    <div class="col">
+      <div class="colItem">Пн</div>
+      <div class="colItem">Вт</div>
+      <div class="colItem">Ср</div>
+      <div class="colItem">Чт</div>
+      <div class="colItem">Пя</div>
+    </div>
+    <div class="table">
+      <Row items={data.slice(0, 4)} />
+      <Row items={data.slice(4, 8)} />
+      <Row current items={data.slice(8, 12)} />
+      <Row items={data.slice(12, 16)} />
+      <Row items={data.slice(16, 20)} />
+    </div>
+  </div>
+</div>
+
+<style>
+  .root {
+    margin: 0 auto;
+    border-left: 1px solid #eaecef;
+    border-right: 1px solid #eaecef;
+  }
+  .root .header {
+    border-bottom: 1px solid #eaecef;
+    padding: 15px;
+  }
+
+  .active {
+    position: relative;
+    display: inline-block;
+  }
+
+  .active::after {
+    position: absolute;
+    content: "";
+    width: 100%;
+    height: 3px;
+    background-color: #3182ce;
+    display: block;
+  }
+  .table {
+    border: 1px solid;
+    border-bottom: none;
+    border-right: none;
+    width: 100%;
+  }
+  .container {
+    display: flex;
+    min-width: fit-content;
+    overflow: auto;
+    font-size: 12px;
+  }
+  .col {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+  }
+  .colItem {
+    border-right: none;
+    border-bottom: none;
+    display: flex;
+    align-items: center;
+    height: 100%;
+    padding: 20px;
+    width: 30px;
+    /* margin: 0 auto; */
+    justify-content: center;
+  }
+</style>

src/routes/timetable.svelte

@@ -0,0 +1,9 @@
+<script>
+  import TimeTable from "../components/TimeTable/index.svelte";
+</script>
+
+<svelte:head>
+  <title>Расписание</title>
+</svelte:head>
+
+<TimeTable />