312 lines
12 KiB
Kotlin
312 lines
12 KiB
Kotlin
@file:OptIn(ExperimentalKtorApi::class)
|
|
|
|
package net.keinekekse.app.books.ui
|
|
|
|
import io.ktor.htmx.*
|
|
import io.ktor.htmx.html.*
|
|
import io.ktor.util.logging.*
|
|
import io.ktor.utils.io.*
|
|
import kotlinx.html.*
|
|
import net.keinekekse.app.core.config.LOGOUT_PATH
|
|
import org.jetbrains.exposed.v1.jdbc.Database
|
|
import kotlin.random.Random
|
|
|
|
val LOG = KtorSimpleLogger("net.keinekekse.app.books.ui.TestPage")
|
|
|
|
//fun FlowContent.programName() {
|
|
//
|
|
// a(classes = "flex") {
|
|
// href = "/"
|
|
// title = "v ${VERSION_books.fullVersion}"
|
|
//
|
|
// img(classes = "h-14 my-2 $bgHeaderIcon") {
|
|
// src = "/static/books.png"
|
|
// }
|
|
// div(classes = "self-center text-right ml-3") {
|
|
// div {
|
|
// div(classes = "text-3xl") {
|
|
// +VERSION_books.displayName
|
|
// }
|
|
// div(classes = "text-xs") {
|
|
// +VERSION_books.version
|
|
// }
|
|
// }
|
|
// }
|
|
// }
|
|
//}
|
|
//
|
|
//fun HTML.testPage(booksDb: Database) {
|
|
//// val booksDb = Dependencies.getBooksDb()
|
|
// LOG.info(" ### building test page")
|
|
//
|
|
// head {
|
|
// stdHead("Test Page")
|
|
// }
|
|
//
|
|
// body {
|
|
// // page
|
|
// div(classes = "$cssFullscreen flex-col") {
|
|
// // header
|
|
// div(classes = "flex flex-row justify-between py-2 px-5 $bgHeader $textHeader") {
|
|
// // header left
|
|
// div(classes = "flex flex-row") {
|
|
// programName()
|
|
// div(classes = "ml-10 flex self-center") {
|
|
// +"MENÜ"
|
|
// }
|
|
// }
|
|
// // header right
|
|
// div(classes = "flex") {
|
|
// div(classes = "self-center text-xl") {
|
|
// materialSymbol("Settings")
|
|
// }
|
|
// }
|
|
// }
|
|
fun HTML.testPage(booksDb: Database) {
|
|
booksPage("Books-DB", mapOf(Pair(navBooks.first, ""))) {
|
|
// content left
|
|
div(classes = "basis-64 px-1 py-2 text-center $bgLeftColumn") {
|
|
div {
|
|
+"some content on the left "
|
|
}
|
|
div {
|
|
button(classes = "$cssButtonStd m-2") {
|
|
attributes.hx {
|
|
// TODO
|
|
get = "/books/testdb"
|
|
target = "#testdb"
|
|
swap = HxSwap.innerHtml
|
|
trigger = "click"
|
|
}
|
|
+"DB test"
|
|
}
|
|
}
|
|
div {
|
|
button(classes = "$cssButtonPri m-2 focus:outline-none focus:outline-orange-800") {
|
|
+"primary button"
|
|
}
|
|
}
|
|
div {
|
|
+"text text "
|
|
button(classes = "$cssLinkText ") { +"click me" }
|
|
+" test test"
|
|
}
|
|
div {
|
|
button(classes = "$cssButtonSec m-2") { +"secondary button" }
|
|
}
|
|
div {
|
|
+"Database: ${booksDb.vendor} ${booksDb.version}"
|
|
}
|
|
div {
|
|
form(action = LOGOUT_PATH, method = FormMethod.post) {
|
|
button(classes = cssLinkText) {
|
|
type = ButtonType.submit
|
|
+"Logout"
|
|
}
|
|
}
|
|
}
|
|
div {
|
|
id = "testdb"
|
|
}
|
|
div(classes = "mt-6") {
|
|
|
|
// script {
|
|
// unsafe {
|
|
// raw(
|
|
// """
|
|
// function toggleField(hideObj,showObj){
|
|
// hideObj.disabled=true;
|
|
// hideObj.style.display='none';
|
|
// showObj.disabled=false;
|
|
// showObj.style.display='inline';
|
|
// showObj.focus();
|
|
// }
|
|
// """.trimIndent()
|
|
// )
|
|
// }
|
|
//
|
|
// }
|
|
|
|
// fkt. nur so lala (onBlur!), lässt sich das hinbiegen?
|
|
// form {
|
|
// attributes.hx {
|
|
// post = "/books/testform"
|
|
// target = "#testForm"
|
|
// swap = HxSwap.innerHtml
|
|
// }
|
|
// name = "BrowserSurvey"
|
|
// select {
|
|
// name = "browser"
|
|
// onChange = """
|
|
// if(this.options[this.selectedIndex].value=='customOption'){
|
|
// toggleField(this,this.nextSibling);
|
|
// this.selectedIndex='0';
|
|
// }
|
|
// """.trimIndent()
|
|
// label { +"Browser: " }
|
|
// option {
|
|
// value = "customOption"
|
|
// +"[type a custom value]"
|
|
// }
|
|
// option {
|
|
// value = "vChrome"
|
|
// +"Chrome"
|
|
// }
|
|
// option {
|
|
// value = "vFirefox"
|
|
// +"Firefox"
|
|
// }
|
|
// option {
|
|
// value = "vInternetExplorer"
|
|
// +"Internet Explorer"
|
|
// }
|
|
// option {
|
|
// value = "vOpera"
|
|
// +"Opera"
|
|
// }
|
|
// }
|
|
// input {
|
|
// type = InputType.text
|
|
// name = "browser"
|
|
// style = "display:none;"
|
|
// disabled = true
|
|
// onBlur = """
|
|
// if(this.value==null || this.value==''){toggleField(this,this.previousSibling);}
|
|
// """.trimIndent()
|
|
// }
|
|
// input(type = InputType.submit) {
|
|
// value = "Submit"
|
|
// }
|
|
// }
|
|
|
|
// klappt, es fehlt halt die "value" -> alpha search ?!
|
|
form {
|
|
attributes.hx {
|
|
post = "/books/testform"
|
|
target = "#testForm"
|
|
swap = HxSwap.innerHtml
|
|
}
|
|
input(
|
|
classes = cssTextInput,
|
|
type = InputType.text
|
|
) {
|
|
name = "testInput"
|
|
list = "lst"
|
|
minLength = "2"
|
|
|
|
dataList {
|
|
id = "lst"
|
|
option(content = "alpha")
|
|
option(content = "beta")
|
|
option(content = "gamma")
|
|
}
|
|
}
|
|
input(type = InputType.submit) {
|
|
value = "Submit"
|
|
}
|
|
}
|
|
div {
|
|
id = "testForm"
|
|
}
|
|
}
|
|
}
|
|
// content right
|
|
div(classes = "flex flex-auto $bgBody") {
|
|
div(classes = "flex flex-col flex-auto") {
|
|
// div {
|
|
// +"some heading"
|
|
// }
|
|
testTable()
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// // footer
|
|
// div(classes = "p-1 text-sm $bgFooter") {
|
|
// div(classes = "col") {
|
|
// +"some footer content"
|
|
// }
|
|
// }
|
|
// }
|
|
//// }
|
|
//
|
|
// }
|
|
//}
|
|
|
|
fun FlowContent.testTable() {
|
|
div(classes = "flex-auto overflow-auto px-1 pb-1 w-0 min-w-1/1") {
|
|
table {
|
|
id = "testtable"
|
|
thead(classes = "$cssFixedTHead ") {
|
|
tr {
|
|
th(classes = "py-3 px-2") { +"#" }
|
|
th(classes = "py-3 px-2") { +"Alias0" }
|
|
th(classes = "py-3 px-2") { +"Score0" }
|
|
th(classes = "py-3 px-2") { +"Alias1" }
|
|
th(classes = "py-3 px-2") { +"Score1" }
|
|
th(classes = "py-3 px-2") { +"Alias2" }
|
|
th(classes = "py-3 px-2") { +"Score2" }
|
|
th(classes = "py-3 px-2") { +"Alias3" }
|
|
th(classes = "py-3 px-2") { +"Score3" }
|
|
th(classes = "py-3 px-2") { +"Alias4" }
|
|
th(classes = "py-3 px-2") { +"Score4" }
|
|
th(classes = "py-3 px-2") {
|
|
a {
|
|
href = navBooksNew.second
|
|
title = navBooksNew.first
|
|
materialSymbolButton(
|
|
"auto_stories",
|
|
"font-weight: bold; font-size: 2em"
|
|
)
|
|
// library_add
|
|
}
|
|
}
|
|
}
|
|
}
|
|
tbody {
|
|
for (i in 0..100) {
|
|
tr {
|
|
td(classes = "border-t-1 $borderTable px-2 py-1") {
|
|
+i.toString()
|
|
}
|
|
td(classes = "border-t-1 $borderTable px-2 py-1") {
|
|
+Random.nextLong().toString()
|
|
}
|
|
td(classes = "border-t-1 $borderTable px-2 py-1") {
|
|
+Random.nextLong().toString()
|
|
}
|
|
td(classes = "border-t-1 $borderTable px-2 py-1") {
|
|
+Random.nextLong().toString()
|
|
}
|
|
td(classes = "border-t-1 $borderTable px-2 py-1") {
|
|
+Random.nextLong().toString()
|
|
}
|
|
td(classes = "border-t-1 $borderTable px-2 py-1") {
|
|
+Random.nextLong().toString()
|
|
}
|
|
td(classes = "border-t-1 $borderTable px-2 py-1") {
|
|
+Random.nextLong().toString()
|
|
}
|
|
td(classes = "border-t-1 $borderTable px-2 py-1") {
|
|
+Random.nextLong().toString()
|
|
}
|
|
td(classes = "border-t-1 $borderTable px-2 py-1") {
|
|
+Random.nextLong().toString()
|
|
}
|
|
td(classes = "border-t-1 $borderTable px-2 py-1") {
|
|
+Random.nextLong().toString()
|
|
}
|
|
td(classes = "border-t-1 $borderTable px-2 py-1") {
|
|
+Random.nextLong().toString()
|
|
}
|
|
td(classes = "border-t-1 $borderTable px-2 py-1 text-nowrap") {
|
|
materialSymbolButton("Edit")
|
|
materialSymbolButton("Delete")
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|