Add timetable page
This commit is contained in:
Ibitoye Rotimi Best
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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: '',
|
||||
}))
|
||||
];
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user