kif/portal
10
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Fix import, add wall

Browse source
This commit is contained in:
Lars Westermann 2019-06-09 19:21:20 +02:00
parent 8a926aeb35
commit 19956ebafb
Signed by: lars.westermann
GPG key ID: 9D417FA5BB9D5E1D
19 changed files with 749 additions and 218 deletions
Download patch file Download diff file Expand all files Collapse all files

21
src/jsMain/kotlin/de/kif/frontend/views/board/Board.kt
View file

@ -1,7 +1,8 @@
package de.kif.frontend.views.board
import de.kif.common.formatDateTime
import de.westermann.kwebview.iterator
import com.soywiz.klock.DateFormat
import com.soywiz.klock.KlockLocale
import com.soywiz.klock.locale.german
import de.westermann.kwebview.interval
import org.w3c.dom.HTMLElement
import org.w3c.dom.get
@ -9,21 +10,29 @@ import kotlin.browser.document
import kotlin.js.Date
fun initBoard() {
val boardSchedules = document.getElementsByClassName("board-schedules")[0] as HTMLElement
//val boardSchedules = document.getElementsByClassName("board-schedules")[0] as HTMLElement
val dateView = document.getElementsByClassName("board-header-date")[0] as HTMLElement
val referenceTime = boardSchedules.dataset["reference"]?.toLongOrNull() ?: 0L
//val referenceTime = boardSchedules.dataset["reference"]?.toLongOrNull() ?: 0L
/*
val scheduleList = mutableListOf<BoardSchedule>()
for (bs in boardSchedules.getElementsByClassName("board-schedule").iterator()) {
scheduleList += BoardSchedule(bs)
}
*/
interval(1000) {
val currentTime = Date.now().toLong()
dateView.innerText = formatDateTime(currentTime)
val currentTime = Date().let {
it.getHours().toString().padStart(2, '0') + ":" + it.getMinutes().toString().padStart(2, '0')
}
dateView.innerText = currentTime
/*
val now = referenceTime - currentTime / 1000
scheduleList.forEach { it.updateTime(now) }
*/
}
}

74
src/jsMain/kotlin/de/kif/frontend/views/calendar/Calendar.kt
View file

@ -13,33 +13,43 @@ import kotlin.browser.window
class Calendar(calendar: HTMLElement) : View(calendar) {
var autoScroll = true
val day: Int = calendar.dataset["day"]?.toIntOrNull() ?: -1
private val htmlTag = document.body as HTMLElement
val calendarTable = calendar.getElementsByClassName("calendar-table")[0] as HTMLElement
val calendarTableHeader = calendar.getElementsByClassName("calendar-header")[0] as HTMLElement
private val calendarTableHeader = calendar.getElementsByClassName("calendar-header")[0] as HTMLElement
fun scrollVerticalBy(pixel: Double, scrollBehavior: ScrollBehavior = ScrollBehavior.SMOOTH) {
htmlTag.scrollBy(ScrollToOptions(0.0, pixel, scrollBehavior))
scrollAllVerticalBy(pixel, scrollBehavior)
}
fun scrollHorizontalBy(pixel: Double, scrollBehavior: ScrollBehavior = ScrollBehavior.SMOOTH) {
calendarTable.scrollBy(ScrollToOptions(pixel, 0.0, scrollBehavior))
scrollAllHorizontalBy(pixel, scrollBehavior)
}
fun scrollVerticalTo(pixel: Double, scrollBehavior: ScrollBehavior = ScrollBehavior.SMOOTH) {
htmlTag.scrollTo(ScrollToOptions(0.0, pixel, scrollBehavior))
scrollAllVerticalTo(pixel, scrollBehavior)
}
fun scrollHorizontalTo(pixel: Double, scrollBehavior: ScrollBehavior = ScrollBehavior.SMOOTH) {
calendarTable.scrollTo(ScrollToOptions(pixel, 0.0, scrollBehavior))
scrollAllHorizontalTo(pixel, scrollBehavior)
}
val editable = calendar.dataset["editable"]?.toBoolean() ?: false
val body = CalendarBody(this, calendar.getElementsByClassName("calendar-body")[0] as HTMLElement)
val orientation: Orientation = if (document.getElementsByClassName("time-to-room").length > 0) {
Orientation.TIME_TO_ROOM
} else {
Orientation.ROOM_TO_TIME
}
init {
scroll += calendarTable
if (editable) {
CalendarEdit(this, calendar.querySelector(".calendar-edit") as HTMLElement)
}
@ -60,6 +70,8 @@ class Calendar(calendar: HTMLElement) : View(calendar) {
}
onWheel {
autoScroll = false
val multiplier = when (it.deltaMode) {
1 -> 16.0
2 -> window.innerHeight.toDouble()
@ -95,8 +107,56 @@ class Calendar(calendar: HTMLElement) : View(calendar) {
}
}
}
enum class Orientation {
/**
* Columns contains time
* Rows contains rooms
*
* Like the old kif tool
*/
TIME_TO_ROOM,
/**
* Columns contains rooms
* Rows contains time
*
* Like the congress schedule
*/
ROOM_TO_TIME
}
companion object {
private var scroll = listOf<HTMLElement>()
private fun scrollAllVerticalBy(pixel: Double, scrollBehavior: ScrollBehavior = ScrollBehavior.SMOOTH) {
println("scroll ${scroll.size} elemenets")
for (calendarTable in scroll) {
calendarTable.scrollBy(ScrollToOptions(0.0, pixel, scrollBehavior))
}
}
private fun scrollAllHorizontalBy(pixel: Double, scrollBehavior: ScrollBehavior = ScrollBehavior.SMOOTH) {
for (calendarTable in scroll) {
calendarTable.scrollBy(ScrollToOptions(pixel, 0.0, scrollBehavior))
}
}
private fun scrollAllVerticalTo(pixel: Double, scrollBehavior: ScrollBehavior = ScrollBehavior.SMOOTH) {
for (calendarTable in scroll) {
calendarTable.scrollTo(ScrollToOptions(0.0, pixel, scrollBehavior))
}
}
private fun scrollAllHorizontalTo(pixel: Double, scrollBehavior: ScrollBehavior = ScrollBehavior.SMOOTH) {
for (calendarTable in scroll) {
calendarTable.scrollTo(ScrollToOptions(pixel, 0.0, scrollBehavior))
}
}
}
}
fun initCalendar() {
Calendar(document.getElementsByClassName("calendar")[0] as? HTMLElement ?: return)
document.getElementsByClassName("calendar").iterator().forEach { Calendar(it) }
}

72
src/jsMain/kotlin/de/kif/frontend/views/calendar/CalendarBody.kt
View file

@ -3,9 +3,13 @@ package de.kif.frontend.views.calendar
import de.kif.frontend.launch
import de.kif.frontend.repository.ScheduleRepository
import de.westermann.kwebview.ViewCollection
import de.westermann.kwebview.async
import de.westermann.kwebview.interval
import de.westermann.kwebview.iterator
import org.w3c.dom.HTMLElement
import org.w3c.dom.INSTANT
import org.w3c.dom.SMOOTH
import org.w3c.dom.ScrollBehavior
import kotlin.browser.document
import kotlin.js.Date
import kotlin.math.max
@ -81,6 +85,44 @@ class CalendarBody(val calendar: Calendar, view: HTMLElement) : ViewCollection<C
}
}
fun update(scroll: ScrollBehavior) {
val currentTime = Date().let {
it.getHours() * 60 + it.getMinutes()
}
val rowTime = (currentTime / 15) * 15
var activeRow: CalendarRow? = null
for (row in this) {
if (row.time == rowTime) {
row.classList.clear()
for (str in row.classList) {
if ("now" in str) {
row.classList -= str
}
}
row.classList += "calendar-row"
row.classList += "calendar-now"
row.classList += "calendar-now-${currentTime - rowTime}"
activeRow = row
} else {
for (str in row.classList) {
if ("now" in str) {
row.classList -= str
}
}
}
}
if (calendar.autoScroll && activeRow != null) {
if (calendar.orientation == Calendar.Orientation.ROOM_TO_TIME) {
calendar.scrollVerticalTo((activeRow.offsetTop).toDouble(), scroll)
} else {
calendar.scrollHorizontalTo((activeRow.offsetLeft - 100).toDouble(), scroll)
}
}
}
init {
calendarEntries = document.getElementsByClassName("calendar-entry")
.iterator().asSequence().map { CalendarEntry(this, it) }.toList()
@ -118,6 +160,7 @@ class CalendarBody(val calendar: Calendar, view: HTMLElement) : ViewCollection<C
updateRows()
}
}
ScheduleRepository.onDelete {
for (entry in calendarEntries) {
if (entry.scheduleId == it) {
@ -131,31 +174,12 @@ class CalendarBody(val calendar: Calendar, view: HTMLElement) : ViewCollection<C
}
}
interval(1000) {
val currentTime = Date().let {
it.getHours() * 60 + it.getMinutes()
}
val rowTime = (currentTime / 15) * 15
async {
update(ScrollBehavior.INSTANT)
}
for (row in this) {
if (row.time == rowTime) {
row.classList.clear()
for (str in row.classList) {
if ("now" in str) {
row.classList -= str
}
}
row.classList += "calendar-row"
row.classList += "calendar-now"
row.classList += "calendar-now-${currentTime - rowTime}"
} else {
for (str in row.classList) {
if ("now" in str) {
row.classList -= str
}
}
}
}
interval(1000) {
update(ScrollBehavior.SMOOTH)
}
}
}

7
src/jsMain/resources/images/logo.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 13 KiB

171
src/jsMain/resources/style/components/_board.scss
View file

@ -1,90 +1,73 @@
@import "../config";
.board-header {
line-height: 3rem;
flex-grow: 1;
font-family: "Bungee", sans-serif;
font-weight: normal;
font-size: 1.1rem;
padding-left: 0.3rem;
}
.board-card {
background-color: var(--background-card-color);
box-shadow: 0 0.1rem 0.2rem var(--shadow-color);
border-radius: $border-radius;
overflow: hidden;
}
.board {
padding: 1rem 0.4rem 2rem;
display: flex;
top: 0;
left: 0;
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
height: calc(100vh - 0.5rem);
& > div {
flex-grow: 1;
flex-basis: 0;
padding: 0 0.4rem;
&:nth-child(1) {
flex-grow: 5;
}
&:nth-child(2) {
flex-grow: 4;
}
&:nth-child(3) {
flex-grow: 4;
}
}
}
.board-twitter {
.board-card {
height: calc(100% - 1.3rem);
& > * {
margin-top: -1px !important;
}
}
}
.board-post {
margin-bottom: 0.5rem;
.post-name {
top: 0.5rem;
}
padding-top: 2.5rem;
padding-bottom: 0.5rem;
}
.board-schedule-box {
margin-bottom: 0.5rem;
padding: 1rem 1rem 0.5rem;
table {
border-collapse: collapse;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
& > div {
position: relative;
overflow: hidden;
&:first-child {
width: 70%;
float: left;
}
&:last-child {
width: 30%;
float: right;
}
}
}
}
.board-card-header {
font-family: 'Montserrat', sans-serif;
font-weight: 600;
line-height: 1.5rem;
.board-header {
height: 8rem !important;
& > div {
height: 100%;
}
}
.board-content {
top: 8rem !important;
bottom: 0;
height: auto !important;
}
.board-logo {
img {
height: 6rem;
width: 6rem;
position: absolute;
top: 50%;
left: 4rem;
margin-top: -3rem;
margin-left: -3rem;
}
}
.board-running {
column-count: 2;
}
.board-schedule {
line-height: 1.3rem;
height: 2rem;
&:not(:last-child) {
border-bottom: solid 1px var(--table-border-color)
}
min-width: 10rem;
display: flex;
border-bottom: solid 1px var(--table-border-color)
}
.board-schedule-color {
@ -112,4 +95,46 @@
width: 4rem;
text-align: right;
color: var(--text-secondary-color)
}
}
.board-calendar {
height: 100% !important;
margin-top: 0 !important;
.calendar-table {
overflow: hidden;
}
.calendar-table-box {
width: 100%;
}
.calendar-row {
width: 100% !important;
height: 0.7rem !important;
}
.calendar-cell {
&:not(:first-child) {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
}
}
.calendar-entry::after {
content: none;
}
}
.board-header-date {
position: absolute;
line-height: 2rem;
font-size: 2rem;
top: 50%;
margin-top: -1rem;
left: 8rem;
}
.board-twitter {
& > * {
margin-top: -1px !important;
}
}

18
src/jsMain/resources/style/components/_calendar.scss
View file

@ -50,15 +50,16 @@
width: 100%;
position: relative;
margin-top: 1rem;
height: 100vh;
}
.calendar-table {
width: 100%;
overflow-x: scroll;
overflow-y: visible;
overflow: scroll;
padding-bottom: 1rem;
position: relative;
transition: width $transitionTime;
height: 100%;
}
.calendar-edit {
@ -301,7 +302,6 @@
flex-wrap: nowrap;
flex-direction: column;
width: max-content;
height: max-content;
.calendar-header, .calendar-row {
display: flex;
@ -325,10 +325,15 @@
line-height: 2rem;
height: 2rem;
width: 100%;
position: sticky;
top: 0;
background-color: var(--background-secondary-color);
z-index: 5;
border-bottom: solid 1px var(--table-border-color);
.calendar-cell:first-child {
flex-grow: 1;
text-align: center;
width: 6rem;
}
.calendar-cell:not(:first-child) {
@ -347,6 +352,10 @@
}
}
.calendar-body {
margin-top: -1px;
}
.calendar-row {
line-height: 2rem;
height: 1.3rem;
@ -438,6 +447,7 @@
}
.calendar-header {
.calendar-cell {
position: relative;
width: 6rem;

78
src/jsMain/resources/style/components/_wall.scss Normal file
View file

@ -0,0 +1,78 @@
@import "../config";
.wall {
top: 0;
left: 0;
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
.wall-box {
width: 100%;
height: calc(33.3333% - 1rem);
overflow: hidden;
border-bottom: solid 2px var(--input-border-color);
&:first-child {
height: calc(33.3333% + 2rem);
}
&:not(:first-child) {
.calendar-row, .calendar-header {
.calendar-cell:first-child {
display: none;
}
}
}
.calendar-row, .calendar-header {
height: 100%;
display: flex;
flex-direction: column;
line-height: 2rem;
}
.calendar-entry {
top: 0 !important;
margin-top: -0.5rem !important;
bottom: 0 !important;
}
.calendar-entry::after {
content: none;
}
.calendar-table-box {
height: 100%;
}
.calendar-body {
display: flex;
}
.calendar-row {
width: 100%;
flex-basis: 0;
flex-grow: 1;
flex-shrink: 1;
}
.calendar-cell {
flex-basis: 0;
flex-grow: 1;
flex-shrink: 1;
line-height: 2rem;
width: 100%;
}
}
.wall-calendar {
margin-top: 0 !important;
height: 100% !important;
.calendar-table {
overflow: hidden;
padding: 0;
}
}

4
src/jsMain/resources/style/style.scss
View file

@ -3,12 +3,13 @@
@include color-setting;
@import "components/board";
@import "components/calendar";
@import "components/form";
@import "components/menu";
@import "components/overview";
@import "components/table-layout";
@import "components/board";
@import "components/wall";
body, html {
color: var(--text-primary-color);
@ -143,6 +144,7 @@ a {
margin-top: -2rem;
position: absolute;
top: 48%;
left: 0;
span {
display: block;