Initial commit
commit
63f6a55de1
|
|
@ -0,0 +1,4 @@
|
||||||
|
.gradle/
|
||||||
|
.idea/
|
||||||
|
build/
|
||||||
|
|
||||||
|
|
@ -0,0 +1,33 @@
|
||||||
|
plugins {
|
||||||
|
kotlin("js") version "1.6.10"
|
||||||
|
kotlin("plugin.serialization") version "1.6.10"
|
||||||
|
}
|
||||||
|
|
||||||
|
group = "nl.kallestruik"
|
||||||
|
version = "1.0"
|
||||||
|
|
||||||
|
repositories {
|
||||||
|
mavenCentral()
|
||||||
|
}
|
||||||
|
|
||||||
|
dependencies {
|
||||||
|
testImplementation(kotlin("test"))
|
||||||
|
implementation("org.jetbrains.kotlin-wrappers:kotlin-react:17.0.2-pre.240-kotlin-1.5.30")
|
||||||
|
implementation("org.jetbrains.kotlin-wrappers:kotlin-react-dom:17.0.2-pre.240-kotlin-1.5.30")
|
||||||
|
implementation("org.jetbrains.kotlin-wrappers:kotlin-styled:5.3.1-pre.240-kotlin-1.5.30")
|
||||||
|
implementation("org.jetbrains.kotlin-wrappers:kotlin-react-router-dom:5.2.0-pre.240-kotlin-1.5.30")
|
||||||
|
implementation("org.jetbrains.kotlin-wrappers:kotlin-redux:4.1.0-pre.240-kotlin-1.5.30")
|
||||||
|
implementation("org.jetbrains.kotlin-wrappers:kotlin-react-redux:7.2.4-pre.240-kotlin-1.5.30")
|
||||||
|
implementation("org.jetbrains.kotlinx:kotlinx-serialization-json:1.3.2")
|
||||||
|
}
|
||||||
|
|
||||||
|
kotlin {
|
||||||
|
js(IR) {
|
||||||
|
binaries.executable()
|
||||||
|
browser {
|
||||||
|
commonWebpackConfig {
|
||||||
|
cssSupport.enabled = true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
kotlin.code.style=official
|
||||||
|
kotlin.js.generate.executable.default=false
|
||||||
Binary file not shown.
|
|
@ -0,0 +1,5 @@
|
||||||
|
distributionBase=GRADLE_USER_HOME
|
||||||
|
distributionPath=wrapper/dists
|
||||||
|
distributionUrl=https\://services.gradle.org/distributions/gradle-7.3-bin.zip
|
||||||
|
zipStoreBase=GRADLE_USER_HOME
|
||||||
|
zipStorePath=wrapper/dists
|
||||||
|
|
@ -0,0 +1,185 @@
|
||||||
|
#!/usr/bin/env sh
|
||||||
|
|
||||||
|
#
|
||||||
|
# Copyright 2015 the original author or authors.
|
||||||
|
#
|
||||||
|
# Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
|
# you may not use this file except in compliance with the License.
|
||||||
|
# You may obtain a copy of the License at
|
||||||
|
#
|
||||||
|
# https://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
#
|
||||||
|
# Unless required by applicable law or agreed to in writing, software
|
||||||
|
# distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
# See the License for the specific language governing permissions and
|
||||||
|
# limitations under the License.
|
||||||
|
#
|
||||||
|
|
||||||
|
##############################################################################
|
||||||
|
##
|
||||||
|
## Gradle start up script for UN*X
|
||||||
|
##
|
||||||
|
##############################################################################
|
||||||
|
|
||||||
|
# Attempt to set APP_HOME
|
||||||
|
# Resolve links: $0 may be a link
|
||||||
|
PRG="$0"
|
||||||
|
# Need this for relative symlinks.
|
||||||
|
while [ -h "$PRG" ] ; do
|
||||||
|
ls=`ls -ld "$PRG"`
|
||||||
|
link=`expr "$ls" : '.*-> \(.*\)$'`
|
||||||
|
if expr "$link" : '/.*' > /dev/null; then
|
||||||
|
PRG="$link"
|
||||||
|
else
|
||||||
|
PRG=`dirname "$PRG"`"/$link"
|
||||||
|
fi
|
||||||
|
done
|
||||||
|
SAVED="`pwd`"
|
||||||
|
cd "`dirname \"$PRG\"`/" >/dev/null
|
||||||
|
APP_HOME="`pwd -P`"
|
||||||
|
cd "$SAVED" >/dev/null
|
||||||
|
|
||||||
|
APP_NAME="Gradle"
|
||||||
|
APP_BASE_NAME=`basename "$0"`
|
||||||
|
|
||||||
|
# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
|
||||||
|
DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
|
||||||
|
|
||||||
|
# Use the maximum available, or set MAX_FD != -1 to use that value.
|
||||||
|
MAX_FD="maximum"
|
||||||
|
|
||||||
|
warn () {
|
||||||
|
echo "$*"
|
||||||
|
}
|
||||||
|
|
||||||
|
die () {
|
||||||
|
echo
|
||||||
|
echo "$*"
|
||||||
|
echo
|
||||||
|
exit 1
|
||||||
|
}
|
||||||
|
|
||||||
|
# OS specific support (must be 'true' or 'false').
|
||||||
|
cygwin=false
|
||||||
|
msys=false
|
||||||
|
darwin=false
|
||||||
|
nonstop=false
|
||||||
|
case "`uname`" in
|
||||||
|
CYGWIN* )
|
||||||
|
cygwin=true
|
||||||
|
;;
|
||||||
|
Darwin* )
|
||||||
|
darwin=true
|
||||||
|
;;
|
||||||
|
MSYS* | MINGW* )
|
||||||
|
msys=true
|
||||||
|
;;
|
||||||
|
NONSTOP* )
|
||||||
|
nonstop=true
|
||||||
|
;;
|
||||||
|
esac
|
||||||
|
|
||||||
|
CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
|
||||||
|
|
||||||
|
|
||||||
|
# Determine the Java command to use to start the JVM.
|
||||||
|
if [ -n "$JAVA_HOME" ] ; then
|
||||||
|
if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
|
||||||
|
# IBM's JDK on AIX uses strange locations for the executables
|
||||||
|
JAVACMD="$JAVA_HOME/jre/sh/java"
|
||||||
|
else
|
||||||
|
JAVACMD="$JAVA_HOME/bin/java"
|
||||||
|
fi
|
||||||
|
if [ ! -x "$JAVACMD" ] ; then
|
||||||
|
die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
|
||||||
|
|
||||||
|
Please set the JAVA_HOME variable in your environment to match the
|
||||||
|
location of your Java installation."
|
||||||
|
fi
|
||||||
|
else
|
||||||
|
JAVACMD="java"
|
||||||
|
which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
|
||||||
|
|
||||||
|
Please set the JAVA_HOME variable in your environment to match the
|
||||||
|
location of your Java installation."
|
||||||
|
fi
|
||||||
|
|
||||||
|
# Increase the maximum file descriptors if we can.
|
||||||
|
if [ "$cygwin" = "false" -a "$darwin" = "false" -a "$nonstop" = "false" ] ; then
|
||||||
|
MAX_FD_LIMIT=`ulimit -H -n`
|
||||||
|
if [ $? -eq 0 ] ; then
|
||||||
|
if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then
|
||||||
|
MAX_FD="$MAX_FD_LIMIT"
|
||||||
|
fi
|
||||||
|
ulimit -n $MAX_FD
|
||||||
|
if [ $? -ne 0 ] ; then
|
||||||
|
warn "Could not set maximum file descriptor limit: $MAX_FD"
|
||||||
|
fi
|
||||||
|
else
|
||||||
|
warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT"
|
||||||
|
fi
|
||||||
|
fi
|
||||||
|
|
||||||
|
# For Darwin, add options to specify how the application appears in the dock
|
||||||
|
if $darwin; then
|
||||||
|
GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\""
|
||||||
|
fi
|
||||||
|
|
||||||
|
# For Cygwin or MSYS, switch paths to Windows format before running java
|
||||||
|
if [ "$cygwin" = "true" -o "$msys" = "true" ] ; then
|
||||||
|
APP_HOME=`cygpath --path --mixed "$APP_HOME"`
|
||||||
|
CLASSPATH=`cygpath --path --mixed "$CLASSPATH"`
|
||||||
|
|
||||||
|
JAVACMD=`cygpath --unix "$JAVACMD"`
|
||||||
|
|
||||||
|
# We build the pattern for arguments to be converted via cygpath
|
||||||
|
ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null`
|
||||||
|
SEP=""
|
||||||
|
for dir in $ROOTDIRSRAW ; do
|
||||||
|
ROOTDIRS="$ROOTDIRS$SEP$dir"
|
||||||
|
SEP="|"
|
||||||
|
done
|
||||||
|
OURCYGPATTERN="(^($ROOTDIRS))"
|
||||||
|
# Add a user-defined pattern to the cygpath arguments
|
||||||
|
if [ "$GRADLE_CYGPATTERN" != "" ] ; then
|
||||||
|
OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)"
|
||||||
|
fi
|
||||||
|
# Now convert the arguments - kludge to limit ourselves to /bin/sh
|
||||||
|
i=0
|
||||||
|
for arg in "$@" ; do
|
||||||
|
CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -`
|
||||||
|
CHECK2=`echo "$arg"|egrep -c "^-"` ### Determine if an option
|
||||||
|
|
||||||
|
if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then ### Added a condition
|
||||||
|
eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"`
|
||||||
|
else
|
||||||
|
eval `echo args$i`="\"$arg\""
|
||||||
|
fi
|
||||||
|
i=`expr $i + 1`
|
||||||
|
done
|
||||||
|
case $i in
|
||||||
|
0) set -- ;;
|
||||||
|
1) set -- "$args0" ;;
|
||||||
|
2) set -- "$args0" "$args1" ;;
|
||||||
|
3) set -- "$args0" "$args1" "$args2" ;;
|
||||||
|
4) set -- "$args0" "$args1" "$args2" "$args3" ;;
|
||||||
|
5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;;
|
||||||
|
6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;;
|
||||||
|
7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;;
|
||||||
|
8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;;
|
||||||
|
9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;;
|
||||||
|
esac
|
||||||
|
fi
|
||||||
|
|
||||||
|
# Escape application args
|
||||||
|
save () {
|
||||||
|
for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done
|
||||||
|
echo " "
|
||||||
|
}
|
||||||
|
APP_ARGS=`save "$@"`
|
||||||
|
|
||||||
|
# Collect all arguments for the java command, following the shell quoting and substitution rules
|
||||||
|
eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS"
|
||||||
|
|
||||||
|
exec "$JAVACMD" "$@"
|
||||||
|
|
@ -0,0 +1,89 @@
|
||||||
|
@rem
|
||||||
|
@rem Copyright 2015 the original author or authors.
|
||||||
|
@rem
|
||||||
|
@rem Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
|
@rem you may not use this file except in compliance with the License.
|
||||||
|
@rem You may obtain a copy of the License at
|
||||||
|
@rem
|
||||||
|
@rem https://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
@rem
|
||||||
|
@rem Unless required by applicable law or agreed to in writing, software
|
||||||
|
@rem distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
@rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
@rem See the License for the specific language governing permissions and
|
||||||
|
@rem limitations under the License.
|
||||||
|
@rem
|
||||||
|
|
||||||
|
@if "%DEBUG%" == "" @echo off
|
||||||
|
@rem ##########################################################################
|
||||||
|
@rem
|
||||||
|
@rem Gradle startup script for Windows
|
||||||
|
@rem
|
||||||
|
@rem ##########################################################################
|
||||||
|
|
||||||
|
@rem Set local scope for the variables with windows NT shell
|
||||||
|
if "%OS%"=="Windows_NT" setlocal
|
||||||
|
|
||||||
|
set DIRNAME=%~dp0
|
||||||
|
if "%DIRNAME%" == "" set DIRNAME=.
|
||||||
|
set APP_BASE_NAME=%~n0
|
||||||
|
set APP_HOME=%DIRNAME%
|
||||||
|
|
||||||
|
@rem Resolve any "." and ".." in APP_HOME to make it shorter.
|
||||||
|
for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
|
||||||
|
|
||||||
|
@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
|
||||||
|
set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
|
||||||
|
|
||||||
|
@rem Find java.exe
|
||||||
|
if defined JAVA_HOME goto findJavaFromJavaHome
|
||||||
|
|
||||||
|
set JAVA_EXE=java.exe
|
||||||
|
%JAVA_EXE% -version >NUL 2>&1
|
||||||
|
if "%ERRORLEVEL%" == "0" goto execute
|
||||||
|
|
||||||
|
echo.
|
||||||
|
echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
|
||||||
|
echo.
|
||||||
|
echo Please set the JAVA_HOME variable in your environment to match the
|
||||||
|
echo location of your Java installation.
|
||||||
|
|
||||||
|
goto fail
|
||||||
|
|
||||||
|
:findJavaFromJavaHome
|
||||||
|
set JAVA_HOME=%JAVA_HOME:"=%
|
||||||
|
set JAVA_EXE=%JAVA_HOME%/bin/java.exe
|
||||||
|
|
||||||
|
if exist "%JAVA_EXE%" goto execute
|
||||||
|
|
||||||
|
echo.
|
||||||
|
echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
|
||||||
|
echo.
|
||||||
|
echo Please set the JAVA_HOME variable in your environment to match the
|
||||||
|
echo location of your Java installation.
|
||||||
|
|
||||||
|
goto fail
|
||||||
|
|
||||||
|
:execute
|
||||||
|
@rem Setup the command line
|
||||||
|
|
||||||
|
set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
|
||||||
|
|
||||||
|
|
||||||
|
@rem Execute Gradle
|
||||||
|
"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %*
|
||||||
|
|
||||||
|
:end
|
||||||
|
@rem End local scope for the variables with windows NT shell
|
||||||
|
if "%ERRORLEVEL%"=="0" goto mainEnd
|
||||||
|
|
||||||
|
:fail
|
||||||
|
rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
|
||||||
|
rem the _cmd.exe /c_ return code!
|
||||||
|
if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1
|
||||||
|
exit /b 1
|
||||||
|
|
||||||
|
:mainEnd
|
||||||
|
if "%OS%"=="Windows_NT" endlocal
|
||||||
|
|
||||||
|
:omega
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,3 @@
|
||||||
|
|
||||||
|
rootProject.name = "DConfig-Web"
|
||||||
|
|
||||||
|
|
@ -0,0 +1,26 @@
|
||||||
|
import components.jsonSchemaRoot
|
||||||
|
import react.dom.render
|
||||||
|
import kotlinx.browser.document
|
||||||
|
import kotlinx.browser.window
|
||||||
|
|
||||||
|
fun main() {
|
||||||
|
//TODO:
|
||||||
|
// - Parse and render description
|
||||||
|
// - Check constraints?
|
||||||
|
// - Defaults?
|
||||||
|
// - Make things look nice
|
||||||
|
|
||||||
|
|
||||||
|
window.onload = {
|
||||||
|
render(document.getElementById("root")) {
|
||||||
|
jsonSchemaRoot("/arena.schema.json")
|
||||||
|
// child(SchemaPart::class) {
|
||||||
|
// attrs {
|
||||||
|
// source = "/arena.schema.json"
|
||||||
|
// name = "ROOT"
|
||||||
|
// required = true
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
import kotlinx.serialization.json.JsonElement
|
||||||
|
|
||||||
|
data class NameChangeEvent(
|
||||||
|
val id: String,
|
||||||
|
val name: String,
|
||||||
|
)
|
||||||
|
|
@ -0,0 +1,219 @@
|
||||||
|
import kotlinx.html.InputType
|
||||||
|
import kotlinx.html.js.onChangeFunction
|
||||||
|
import kotlinx.html.js.onClickFunction
|
||||||
|
import kotlinx.serialization.decodeFromString
|
||||||
|
import kotlinx.serialization.json.Json
|
||||||
|
import org.w3c.dom.HTMLInputElement
|
||||||
|
import org.w3c.xhr.XMLHttpRequest
|
||||||
|
import react.*
|
||||||
|
import react.dom.option
|
||||||
|
import schema.JsonSchema
|
||||||
|
import schema.JsonType
|
||||||
|
import styled.*
|
||||||
|
|
||||||
|
external interface SchemaPartProps : Props {
|
||||||
|
var source: String?
|
||||||
|
var name: String
|
||||||
|
var schema: JsonSchema?
|
||||||
|
var required: Boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
data class SchemaPartState(
|
||||||
|
var source: String?,
|
||||||
|
var name: String,
|
||||||
|
var schema: JsonSchema?,
|
||||||
|
var required: Boolean,
|
||||||
|
var arrayItems: MutableList<JsonSchema> = mutableListOf(),
|
||||||
|
var mapItems: MutableMap<String, JsonSchema> = mutableMapOf(),
|
||||||
|
var nextMapItem: String= "",
|
||||||
|
): State
|
||||||
|
|
||||||
|
class SchemaPart(props: SchemaPartProps) : RComponent<SchemaPartProps, SchemaPartState>(props) {
|
||||||
|
|
||||||
|
init {
|
||||||
|
this.state = SchemaPartState(
|
||||||
|
source = props.source,
|
||||||
|
name = props.name,
|
||||||
|
schema = props.schema,
|
||||||
|
required = props.required,
|
||||||
|
)
|
||||||
|
|
||||||
|
val json = Json {
|
||||||
|
ignoreUnknownKeys = true
|
||||||
|
prettyPrint = true
|
||||||
|
}
|
||||||
|
|
||||||
|
val xmlHttp = XMLHttpRequest()
|
||||||
|
if (state.source != null) {
|
||||||
|
xmlHttp.open("GET", "${props.source}")
|
||||||
|
xmlHttp.onload = {
|
||||||
|
val schema: JsonSchema = json.decodeFromString(xmlHttp.responseText)
|
||||||
|
setState {
|
||||||
|
this.schema = schema
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
xmlHttp.send()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
override fun RBuilder.render() {
|
||||||
|
if (state.name == "\$schema")
|
||||||
|
return
|
||||||
|
|
||||||
|
styledDiv {
|
||||||
|
css {
|
||||||
|
+SchemaPartStyles.schemaPart
|
||||||
|
}
|
||||||
|
|
||||||
|
if (state.schema?.type == JsonType.NUMBER) {
|
||||||
|
styledDiv {
|
||||||
|
if (state.required)
|
||||||
|
+"*"
|
||||||
|
|
||||||
|
+state.name
|
||||||
|
|
||||||
|
styledInput(InputType.number) {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return@styledDiv
|
||||||
|
}
|
||||||
|
|
||||||
|
if (state.schema?.type == JsonType.STRING) {
|
||||||
|
styledDiv {
|
||||||
|
if (state.required)
|
||||||
|
+"*"
|
||||||
|
|
||||||
|
+state.name
|
||||||
|
|
||||||
|
if (state.schema?.enum?.isNotEmpty() == true) {
|
||||||
|
styledSelect {
|
||||||
|
for (opt in state.schema!!.enum) {
|
||||||
|
option("", opt)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
styledInput(InputType.text) {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return@styledDiv
|
||||||
|
}
|
||||||
|
|
||||||
|
if (state.schema?.type == JsonType.BOOLEAN) {
|
||||||
|
styledDiv {
|
||||||
|
if (state.required)
|
||||||
|
+"*"
|
||||||
|
|
||||||
|
+state.name
|
||||||
|
|
||||||
|
styledInput(InputType.checkBox) {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return@styledDiv
|
||||||
|
}
|
||||||
|
|
||||||
|
styledSpan {
|
||||||
|
css {
|
||||||
|
+SchemaPartStyles.schemaName
|
||||||
|
}
|
||||||
|
if (state.required)
|
||||||
|
+"*"
|
||||||
|
|
||||||
|
+state.name
|
||||||
|
}
|
||||||
|
|
||||||
|
styledDiv {
|
||||||
|
var type = state.schema?.type
|
||||||
|
if (type == null || type == JsonType.UNKNOWN)
|
||||||
|
type = state.schema?.conditionIf?.type
|
||||||
|
|
||||||
|
if (!(type == JsonType.OBJECT || type == JsonType.ARRAY))
|
||||||
|
+"Type: $type"
|
||||||
|
}
|
||||||
|
|
||||||
|
if (state.schema != null) {
|
||||||
|
// Object properties
|
||||||
|
for (property in state.schema!!.properties) {
|
||||||
|
child(SchemaPart::class) {
|
||||||
|
attrs {
|
||||||
|
name = property.key
|
||||||
|
schema = property.value
|
||||||
|
required = state.schema?.required?.contains(property.key) ?: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Array entries
|
||||||
|
if (state.schema?.type == JsonType.ARRAY) {
|
||||||
|
styledButton {
|
||||||
|
+"+"
|
||||||
|
attrs.onClickFunction = {
|
||||||
|
setState {
|
||||||
|
arrayItems.add(state.schema!!.items!!)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Object map elements
|
||||||
|
if (state.schema?.additionalProperties != null) {
|
||||||
|
styledInput {
|
||||||
|
attrs.onChangeFunction = {
|
||||||
|
state.nextMapItem = (it.target as HTMLInputElement).value
|
||||||
|
}
|
||||||
|
}
|
||||||
|
styledButton {
|
||||||
|
+"+"
|
||||||
|
attrs.onClickFunction = {
|
||||||
|
setState {
|
||||||
|
mapItems[state.nextMapItem] = state.schema!!.additionalProperties!!
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
for (child in state.arrayItems) {
|
||||||
|
child(SchemaPart::class) {
|
||||||
|
attrs {
|
||||||
|
name = "Item"
|
||||||
|
schema = child
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
for (child in state.mapItems) {
|
||||||
|
child(SchemaPart::class) {
|
||||||
|
attrs {
|
||||||
|
name = child.key
|
||||||
|
schema = child.value
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// styledDiv {
|
||||||
|
// css {
|
||||||
|
// +WelcomeStyles.textContainer
|
||||||
|
// }
|
||||||
|
// +"Hello, ${state.name}"
|
||||||
|
// }
|
||||||
|
// styledInput {
|
||||||
|
// css {
|
||||||
|
// +WelcomeStyles.textInput
|
||||||
|
// }
|
||||||
|
// attrs {
|
||||||
|
// type = InputType.text
|
||||||
|
// value = state.name
|
||||||
|
// onChangeFunction = { event ->
|
||||||
|
// setState(
|
||||||
|
// WelcomeState(name = (event.target as HTMLInputElement).value)
|
||||||
|
// )
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
import kotlinx.css.*
|
||||||
|
import styled.StyleSheet
|
||||||
|
|
||||||
|
object SchemaPartStyles : StyleSheet("SchemaPartStyles", isStatic = true) {
|
||||||
|
val schemaPart by css {
|
||||||
|
margin(0.px, 0.px, 10.px, 20.px)
|
||||||
|
padding(5.px)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
val schemaName by css {
|
||||||
|
padding(5.px)
|
||||||
|
backgroundColor = rgba(0, 0, 0, 0.2)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,107 @@
|
||||||
|
import kotlinx.css.*
|
||||||
|
import kotlinx.css.properties.border
|
||||||
|
import styled.CssHolder
|
||||||
|
import styled.StyleSheet
|
||||||
|
|
||||||
|
object Styles : StyleSheet("Styles", isStatic = true) {
|
||||||
|
val inputContainer by css {
|
||||||
|
display = Display.inlineBlock
|
||||||
|
position = Position.relative
|
||||||
|
textAlign = TextAlign.left
|
||||||
|
width = LinearDimension.fitContent
|
||||||
|
paddingTop = 10.px
|
||||||
|
margin(5.px, 10.px, 5.px, 10.px)
|
||||||
|
|
||||||
|
input {
|
||||||
|
display = Display.block
|
||||||
|
border(2.px, BorderStyle.solid, Color.white, 5.px)
|
||||||
|
padding(10.px)
|
||||||
|
backgroundColor = rgb(21, 21, 21)
|
||||||
|
color = Color.white
|
||||||
|
fontWeight = FontWeight.normal
|
||||||
|
|
||||||
|
focus {
|
||||||
|
outline = Outline.none
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
select {
|
||||||
|
display = Display.block
|
||||||
|
border(2.px, BorderStyle.solid, Color.white, 5.px)
|
||||||
|
padding(10.px)
|
||||||
|
backgroundColor = rgb(21, 21, 21)
|
||||||
|
color = Color.white
|
||||||
|
fontWeight = FontWeight.normal
|
||||||
|
|
||||||
|
focus {
|
||||||
|
outline = Outline.none
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
position = Position.absolute
|
||||||
|
textTransform = TextTransform.capitalize
|
||||||
|
top = (-5).px
|
||||||
|
left = 10.px
|
||||||
|
padding(0.px, 2.px)
|
||||||
|
backgroundColor = rgb(21, 21, 21)
|
||||||
|
color = Color.white
|
||||||
|
}
|
||||||
|
|
||||||
|
focusWithin {
|
||||||
|
color = hex(0xCD23F8)
|
||||||
|
|
||||||
|
input {
|
||||||
|
borderColor = hex(0xCD23F8)
|
||||||
|
}
|
||||||
|
|
||||||
|
select {
|
||||||
|
borderColor = hex(0xCD23F8)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
val jsonContainer by css {
|
||||||
|
margin(10.px, 20.px, 10.px, 20.px)
|
||||||
|
}
|
||||||
|
|
||||||
|
val objectHeader by css {
|
||||||
|
display = Display.flex
|
||||||
|
alignContent = Align.center
|
||||||
|
alignItems = Align.center
|
||||||
|
justifyContent = JustifyContent.spaceBetween
|
||||||
|
backgroundColor = rgb(32, 32, 32)
|
||||||
|
padding(5.px)
|
||||||
|
}
|
||||||
|
|
||||||
|
val objectContainer by css {
|
||||||
|
borderWidth = 2.px
|
||||||
|
borderStyle = BorderStyle.solid
|
||||||
|
margin(10.px)
|
||||||
|
}
|
||||||
|
|
||||||
|
val descriptionContainer by css {
|
||||||
|
display = Display.flex
|
||||||
|
margin(10.px)
|
||||||
|
backgroundColor = rgb(6, 25, 80)
|
||||||
|
}
|
||||||
|
|
||||||
|
val descriptionIconContainer by css {
|
||||||
|
display = Display.inlineFlex
|
||||||
|
alignItems = Align.center
|
||||||
|
alignContent = Align.center
|
||||||
|
backgroundColor = hex(0x114683)
|
||||||
|
boxSizing = BoxSizing.borderBox
|
||||||
|
padding(15.px)
|
||||||
|
}
|
||||||
|
|
||||||
|
val descriptionText by css {
|
||||||
|
display = Display.inlineBlock
|
||||||
|
padding(10.px)
|
||||||
|
alignSelf = Align.center
|
||||||
|
}
|
||||||
|
|
||||||
|
val descriptionLine by css {
|
||||||
|
margin(0.px)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
import kotlinx.serialization.json.JsonElement
|
||||||
|
|
||||||
|
data class ValueChangeEvent(
|
||||||
|
val id: String,
|
||||||
|
val value: JsonElement,
|
||||||
|
)
|
||||||
|
|
@ -0,0 +1,47 @@
|
||||||
|
import kotlinx.html.InputType
|
||||||
|
import kotlinx.html.js.onChangeFunction
|
||||||
|
import org.w3c.dom.HTMLInputElement
|
||||||
|
import react.Props
|
||||||
|
import react.RBuilder
|
||||||
|
import react.RComponent
|
||||||
|
import react.State
|
||||||
|
import react.dom.attrs
|
||||||
|
import styled.css
|
||||||
|
import styled.styledDiv
|
||||||
|
import styled.styledInput
|
||||||
|
|
||||||
|
external interface WelcomeProps : Props {
|
||||||
|
var name: String
|
||||||
|
}
|
||||||
|
|
||||||
|
data class WelcomeState(val name: String) : State
|
||||||
|
|
||||||
|
class Welcome(props: WelcomeProps) : RComponent<WelcomeProps, WelcomeState>(props) {
|
||||||
|
|
||||||
|
init {
|
||||||
|
state = WelcomeState(props.name)
|
||||||
|
}
|
||||||
|
|
||||||
|
override fun RBuilder.render() {
|
||||||
|
styledDiv {
|
||||||
|
css {
|
||||||
|
+WelcomeStyles.textContainer
|
||||||
|
}
|
||||||
|
+"Hello, ${state.name}"
|
||||||
|
}
|
||||||
|
styledInput {
|
||||||
|
css {
|
||||||
|
+WelcomeStyles.textInput
|
||||||
|
}
|
||||||
|
attrs {
|
||||||
|
type = InputType.text
|
||||||
|
value = state.name
|
||||||
|
onChangeFunction = { event ->
|
||||||
|
setState(
|
||||||
|
WelcomeState(name = (event.target as HTMLInputElement).value)
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
import kotlinx.css.*
|
||||||
|
import styled.StyleSheet
|
||||||
|
|
||||||
|
object WelcomeStyles : StyleSheet("WelcomeStyles", isStatic = true) {
|
||||||
|
val textContainer by css {
|
||||||
|
padding(5.px)
|
||||||
|
|
||||||
|
backgroundColor = rgb(8, 97, 22)
|
||||||
|
color = rgb(56, 246, 137)
|
||||||
|
}
|
||||||
|
|
||||||
|
val textInput by css {
|
||||||
|
margin(vertical = 5.px)
|
||||||
|
|
||||||
|
fontSize = 14.px
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,67 @@
|
||||||
|
package components
|
||||||
|
|
||||||
|
import Styles
|
||||||
|
import kotlinx.html.classes
|
||||||
|
import react.Props
|
||||||
|
import react.RBuilder
|
||||||
|
import react.RComponent
|
||||||
|
import react.State
|
||||||
|
import react.dom.attrs
|
||||||
|
import styled.css
|
||||||
|
import styled.styledDiv
|
||||||
|
import styled.styledI
|
||||||
|
import styled.styledP
|
||||||
|
|
||||||
|
external interface DescriptionBlockProps: Props {
|
||||||
|
var description: List<String>
|
||||||
|
}
|
||||||
|
|
||||||
|
class DescriptionBlock(props: DescriptionBlockProps): RComponent<DescriptionBlockProps, State>() {
|
||||||
|
|
||||||
|
override fun RBuilder.render() {
|
||||||
|
if (props.description.isEmpty())
|
||||||
|
return
|
||||||
|
|
||||||
|
styledDiv {
|
||||||
|
css {
|
||||||
|
+Styles.descriptionContainer
|
||||||
|
}
|
||||||
|
|
||||||
|
styledDiv {
|
||||||
|
css {
|
||||||
|
+Styles.descriptionIconContainer
|
||||||
|
}
|
||||||
|
|
||||||
|
styledI {
|
||||||
|
attrs {
|
||||||
|
classes = setOf("ri-information-line", "ri-xl")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
styledDiv {
|
||||||
|
css {
|
||||||
|
+Styles.descriptionText
|
||||||
|
}
|
||||||
|
|
||||||
|
for (line in props.description) {
|
||||||
|
styledP {
|
||||||
|
css {
|
||||||
|
+Styles.descriptionLine
|
||||||
|
}
|
||||||
|
+line
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
fun RBuilder.descriptionBlock(description: List<String>?) {
|
||||||
|
child(DescriptionBlock::class) {
|
||||||
|
attrs {
|
||||||
|
this.description = description?: listOf()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,159 @@
|
||||||
|
package components
|
||||||
|
|
||||||
|
import ValueChangeEvent
|
||||||
|
import kotlinx.css.*
|
||||||
|
import kotlinx.css.properties.border
|
||||||
|
import kotlinx.html.classes
|
||||||
|
import kotlinx.html.js.onClickFunction
|
||||||
|
import kotlinx.serialization.json.JsonElement
|
||||||
|
import kotlinx.serialization.json.buildJsonArray
|
||||||
|
import react.*
|
||||||
|
import react.dom.attrs
|
||||||
|
import schema.ConfigSchema
|
||||||
|
import styled.*
|
||||||
|
import kotlin.random.Random
|
||||||
|
|
||||||
|
external interface JsonArrayProps: Props {
|
||||||
|
var schema: ConfigSchema
|
||||||
|
var name: String
|
||||||
|
var data: kotlinx.serialization.json.JsonArray?
|
||||||
|
var id: String
|
||||||
|
var handleChange: (event: ValueChangeEvent) -> Unit
|
||||||
|
var level: Int
|
||||||
|
}
|
||||||
|
|
||||||
|
data class JsonArrayState(
|
||||||
|
var entries: MutableMap<Int, ConfigSchema> = mutableMapOf(),
|
||||||
|
var data: kotlinx.serialization.json.JsonArray?,
|
||||||
|
var realData: MutableMap<Int, JsonElement> = mutableMapOf(),
|
||||||
|
var showChildren: Boolean = true,
|
||||||
|
var nextId: Int = 0,
|
||||||
|
): State
|
||||||
|
|
||||||
|
|
||||||
|
class JsonArray(props: JsonArrayProps): RComponent<JsonArrayProps, JsonArrayState>() {
|
||||||
|
init {
|
||||||
|
this.state = JsonArrayState(
|
||||||
|
data = props.data,
|
||||||
|
)
|
||||||
|
|
||||||
|
props.data?.forEachIndexed { index, element ->
|
||||||
|
state.entries[index] = props.schema.items!!
|
||||||
|
state.realData[index] = element
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
override fun RBuilder.render() {
|
||||||
|
styledDiv {
|
||||||
|
css {
|
||||||
|
borderColor = hsl((props.level * 40) % 256, 100, 15)
|
||||||
|
+Styles.objectContainer
|
||||||
|
}
|
||||||
|
styledDiv {
|
||||||
|
css {
|
||||||
|
+Styles.objectHeader
|
||||||
|
}
|
||||||
|
styledI {
|
||||||
|
attrs {
|
||||||
|
classes = if (state.showChildren) {
|
||||||
|
setOf("ri-arrow-down-s-line", "ri-xl")
|
||||||
|
} else {
|
||||||
|
setOf("ri-arrow-right-s-line", "ri-xl")
|
||||||
|
}
|
||||||
|
|
||||||
|
onClickFunction = {
|
||||||
|
setState {
|
||||||
|
showChildren = !showChildren
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//ri-delete-bin-7-line
|
||||||
|
|
||||||
|
if (props.name != "") {
|
||||||
|
styledLabel {
|
||||||
|
css {
|
||||||
|
textTransform = TextTransform.capitalize
|
||||||
|
}
|
||||||
|
+props.name
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
styledI {
|
||||||
|
css {
|
||||||
|
color = hex(0x4caf50)
|
||||||
|
alignSelf = Align.center
|
||||||
|
}
|
||||||
|
attrs {
|
||||||
|
classes = setOf("ri-add-line", "ri-xl")
|
||||||
|
onClickFunction = {
|
||||||
|
setState {
|
||||||
|
entries[state.nextId] = props.schema.items!!
|
||||||
|
nextId++
|
||||||
|
showChildren = true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
styledDiv {
|
||||||
|
css {
|
||||||
|
if (!state.showChildren)
|
||||||
|
display = Display.none
|
||||||
|
}
|
||||||
|
|
||||||
|
descriptionBlock(props.schema.description)
|
||||||
|
|
||||||
|
state.entries.forEach {
|
||||||
|
jsonArrayEntry(
|
||||||
|
schema = it.value,
|
||||||
|
data = state.realData[it.key],
|
||||||
|
id = it.key.toString(),
|
||||||
|
handleChange = ::handleChange,
|
||||||
|
onDelete = ::handleDelete,
|
||||||
|
level = props.level + 1,
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
fun handleChange(event: ValueChangeEvent) {
|
||||||
|
state.realData[event.id.toInt()] = event.value
|
||||||
|
state.data = buildJsonArray {
|
||||||
|
state.realData.forEach {
|
||||||
|
add(it.value)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
props.handleChange(ValueChangeEvent(props.id, state.data!!))
|
||||||
|
}
|
||||||
|
|
||||||
|
fun handleDelete(id: String) {
|
||||||
|
state.realData.remove(id.toInt())
|
||||||
|
state.data = buildJsonArray {
|
||||||
|
state.realData.forEach {
|
||||||
|
add(it.value)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
setState {
|
||||||
|
entries.remove(id.toInt())
|
||||||
|
}
|
||||||
|
|
||||||
|
props.handleChange(ValueChangeEvent(props.id, state.data!!))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
fun RBuilder.jsonArray(schema: ConfigSchema, name: String, data: kotlinx.serialization.json.JsonArray?, id: String, handleChange: (event: ValueChangeEvent) -> Unit, level: Int) {
|
||||||
|
child(JsonArray::class) {
|
||||||
|
attrs {
|
||||||
|
this.schema = schema
|
||||||
|
this.name = name
|
||||||
|
this.data = data
|
||||||
|
this.id = id
|
||||||
|
this.handleChange = handleChange
|
||||||
|
this.level = level
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,129 @@
|
||||||
|
package components
|
||||||
|
|
||||||
|
import ValueChangeEvent
|
||||||
|
import kotlinx.css.*
|
||||||
|
import kotlinx.html.classes
|
||||||
|
import kotlinx.html.js.onClickFunction
|
||||||
|
import kotlinx.serialization.json.JsonElement
|
||||||
|
import react.*
|
||||||
|
import react.dom.attrs
|
||||||
|
import schema.ConfigSchema
|
||||||
|
import schema.ConfigValueType
|
||||||
|
import schema.JsonType
|
||||||
|
import styled.*
|
||||||
|
|
||||||
|
external interface JsonArrayEntryProps: Props {
|
||||||
|
var name: String
|
||||||
|
var schema: ConfigSchema
|
||||||
|
var data: JsonElement?
|
||||||
|
var id: String
|
||||||
|
var handleChange: (event: ValueChangeEvent) -> Unit
|
||||||
|
var onDelete: (id: String) -> Unit
|
||||||
|
var level: Int
|
||||||
|
}
|
||||||
|
|
||||||
|
data class JsonArrayEntryState(
|
||||||
|
var data: JsonElement?,
|
||||||
|
var showChildren: Boolean = true,
|
||||||
|
): State
|
||||||
|
|
||||||
|
class JsonArrayEntry(props: JsonArrayEntryProps): RComponent<JsonArrayEntryProps, JsonArrayEntryState>() {
|
||||||
|
|
||||||
|
init {
|
||||||
|
this.state = JsonArrayEntryState(
|
||||||
|
data = props.data,
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
override fun RBuilder.render() {
|
||||||
|
styledDiv {
|
||||||
|
css {
|
||||||
|
margin(0.px, 0.px, 10.px, 20.px)
|
||||||
|
padding(5.px)
|
||||||
|
display = Display.flex
|
||||||
|
alignContent = Align.center
|
||||||
|
alignItems = Align.center
|
||||||
|
}
|
||||||
|
|
||||||
|
if (props.schema.type != ConfigValueType.OBJECT)
|
||||||
|
styledI {
|
||||||
|
css {
|
||||||
|
color = Color.red
|
||||||
|
}
|
||||||
|
attrs {
|
||||||
|
classes = setOf("ri-delete-bin-7-line ri-xl")
|
||||||
|
onClickFunction = {
|
||||||
|
props.onDelete(props.id)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
styledDiv {
|
||||||
|
css {
|
||||||
|
display = Display.inlineBlock
|
||||||
|
if (props.schema.type == ConfigValueType.OBJECT) {
|
||||||
|
borderColor = hsl((props.level * 40) % 256, 100, 15)
|
||||||
|
+Styles.objectContainer
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (props.schema.type == ConfigValueType.OBJECT)
|
||||||
|
styledDiv {
|
||||||
|
css {
|
||||||
|
+Styles.objectHeader
|
||||||
|
}
|
||||||
|
styledI {
|
||||||
|
attrs {
|
||||||
|
classes = if (state.showChildren) {
|
||||||
|
setOf("ri-arrow-down-s-line", "ri-xl")
|
||||||
|
} else {
|
||||||
|
setOf("ri-arrow-right-s-line", "ri-xl")
|
||||||
|
}
|
||||||
|
|
||||||
|
onClickFunction = {
|
||||||
|
setState {
|
||||||
|
showChildren = !showChildren
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
styledI {
|
||||||
|
css {
|
||||||
|
color = Color.red
|
||||||
|
}
|
||||||
|
attrs {
|
||||||
|
classes = setOf("ri-delete-bin-7-line")
|
||||||
|
onClickFunction = {
|
||||||
|
props.onDelete(props.id)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (state.showChildren)
|
||||||
|
jsonSchema(
|
||||||
|
schema = props.schema,
|
||||||
|
name = "",
|
||||||
|
data = state.data,
|
||||||
|
id = props.id,
|
||||||
|
handleChange = props.handleChange,
|
||||||
|
level = props.level,
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
fun RBuilder.jsonArrayEntry(schema: ConfigSchema, data: JsonElement?, id: String, handleChange: (event: ValueChangeEvent) -> Unit, onDelete: (id: String) -> Unit, level: Int) {
|
||||||
|
child(JsonArrayEntry::class) {
|
||||||
|
attrs {
|
||||||
|
this.schema = schema
|
||||||
|
this.data = data
|
||||||
|
this.id = id
|
||||||
|
this.handleChange = handleChange
|
||||||
|
this.onDelete = onDelete
|
||||||
|
this.level = level
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,85 @@
|
||||||
|
package components
|
||||||
|
|
||||||
|
import ValueChangeEvent
|
||||||
|
import kotlinx.css.portal
|
||||||
|
import kotlinx.html.InputType
|
||||||
|
import kotlinx.html.id
|
||||||
|
import kotlinx.html.js.onChangeFunction
|
||||||
|
import kotlinx.serialization.json.JsonPrimitive
|
||||||
|
import kotlinx.serialization.json.booleanOrNull
|
||||||
|
import org.w3c.dom.HTMLInputElement
|
||||||
|
import react.*
|
||||||
|
import react.dom.attrs
|
||||||
|
import schema.ConfigSchema
|
||||||
|
import schema.JsonType
|
||||||
|
import styled.css
|
||||||
|
import styled.styledDiv
|
||||||
|
import styled.styledInput
|
||||||
|
import styled.styledLabel
|
||||||
|
|
||||||
|
external interface JsonBooleanProps: Props {
|
||||||
|
var schema: ConfigSchema
|
||||||
|
var name: String
|
||||||
|
var data: JsonPrimitive?
|
||||||
|
var id: String
|
||||||
|
var handleChange: (event: ValueChangeEvent) -> Unit
|
||||||
|
}
|
||||||
|
|
||||||
|
data class JsonBooleanState(
|
||||||
|
var value: Boolean = false,
|
||||||
|
var data: JsonPrimitive?,
|
||||||
|
): State
|
||||||
|
|
||||||
|
|
||||||
|
class JsonBoolean(props: JsonBooleanProps): RComponent<JsonBooleanProps, JsonBooleanState>() {
|
||||||
|
init {
|
||||||
|
val default = props.schema.default?.booleanOrNull ?: false
|
||||||
|
this.state = JsonBooleanState(
|
||||||
|
value = props.data?.booleanOrNull ?: default,
|
||||||
|
data = props.data,
|
||||||
|
)
|
||||||
|
|
||||||
|
props.handleChange(ValueChangeEvent(props.id, JsonPrimitive(state.value)))
|
||||||
|
}
|
||||||
|
|
||||||
|
override fun RBuilder.render() {
|
||||||
|
styledDiv {
|
||||||
|
styledInput {
|
||||||
|
attrs {
|
||||||
|
id = "${props.id}-input"
|
||||||
|
type = InputType.checkBox
|
||||||
|
checked = state.value
|
||||||
|
onChangeFunction = {
|
||||||
|
val value = (it.target as HTMLInputElement).checked
|
||||||
|
setState {
|
||||||
|
this.value = value
|
||||||
|
}
|
||||||
|
props.handleChange(ValueChangeEvent(props.id, JsonPrimitive(value)))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (props.name != "") {
|
||||||
|
styledLabel {
|
||||||
|
+props.name
|
||||||
|
attrs {
|
||||||
|
htmlFor = "${props.id}-input"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
fun RBuilder.jsonBoolean(schema: ConfigSchema, name: String, data: JsonPrimitive?, id: String, handleChange: (event: ValueChangeEvent) -> Unit) {
|
||||||
|
child(JsonBoolean::class) {
|
||||||
|
attrs {
|
||||||
|
this.schema = schema
|
||||||
|
this.name = name
|
||||||
|
this.data = data
|
||||||
|
this.id = id
|
||||||
|
this.handleChange = handleChange
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,219 @@
|
||||||
|
package components
|
||||||
|
|
||||||
|
import NameChangeEvent
|
||||||
|
import ValueChangeEvent
|
||||||
|
import kotlinx.css.*
|
||||||
|
import kotlinx.html.InputType
|
||||||
|
import kotlinx.html.classes
|
||||||
|
import kotlinx.html.js.onChangeFunction
|
||||||
|
import kotlinx.html.js.onClickFunction
|
||||||
|
import kotlinx.serialization.json.buildJsonObject
|
||||||
|
import org.w3c.dom.HTMLInputElement
|
||||||
|
import react.*
|
||||||
|
import react.dom.attrs
|
||||||
|
import schema.ConfigSchema
|
||||||
|
import styled.*
|
||||||
|
import kotlin.random.Random
|
||||||
|
|
||||||
|
external interface JsonMapProps: Props {
|
||||||
|
var schema: ConfigSchema
|
||||||
|
var name: String
|
||||||
|
var data: kotlinx.serialization.json.JsonObject?
|
||||||
|
var id: String
|
||||||
|
var handleChange: (event: ValueChangeEvent) -> Unit
|
||||||
|
var level: Int
|
||||||
|
}
|
||||||
|
|
||||||
|
data class JsonMapState(
|
||||||
|
var entries: MutableMap<String, ConfigSchema> = mutableMapOf(),
|
||||||
|
var names: MutableMap<String, String> = mutableMapOf(),
|
||||||
|
var data: kotlinx.serialization.json.JsonObject?,
|
||||||
|
var showChildren: Boolean = true,
|
||||||
|
): State
|
||||||
|
|
||||||
|
|
||||||
|
class JsonMap(props: JsonMapProps): RComponent<JsonMapProps, JsonMapState>() {
|
||||||
|
init {
|
||||||
|
this.state = JsonMapState(
|
||||||
|
data = props.data,
|
||||||
|
)
|
||||||
|
|
||||||
|
val random = Random(Random.nextInt())
|
||||||
|
state.data = buildJsonObject {
|
||||||
|
props.data?.forEach { entry ->
|
||||||
|
val index = random.nextInt().toString()
|
||||||
|
state.entries[index] = props.schema.items!!
|
||||||
|
state.names[index] = entry.key
|
||||||
|
put(index, entry.value)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
override fun RBuilder.render() {
|
||||||
|
styledDiv {
|
||||||
|
css {
|
||||||
|
borderColor = hsl((props.level * 40) % 256, 100, 15)
|
||||||
|
+Styles.objectContainer
|
||||||
|
}
|
||||||
|
|
||||||
|
styledDiv {
|
||||||
|
css {
|
||||||
|
+Styles.objectHeader
|
||||||
|
}
|
||||||
|
styledI {
|
||||||
|
attrs {
|
||||||
|
classes = if (state.showChildren) {
|
||||||
|
setOf("ri-arrow-down-s-line", "ri-xl")
|
||||||
|
} else {
|
||||||
|
setOf("ri-arrow-right-s-line", "ri-xl")
|
||||||
|
}
|
||||||
|
|
||||||
|
onClickFunction = {
|
||||||
|
setState {
|
||||||
|
showChildren = !showChildren
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (props.name != "") {
|
||||||
|
styledLabel {
|
||||||
|
css {
|
||||||
|
textTransform = TextTransform.capitalize
|
||||||
|
marginLeft = 10.px
|
||||||
|
}
|
||||||
|
+props.name
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
styledI {
|
||||||
|
css {
|
||||||
|
color = hex(0x4caf50)
|
||||||
|
marginLeft = 10.px
|
||||||
|
alignSelf = Align.center
|
||||||
|
}
|
||||||
|
attrs {
|
||||||
|
classes = setOf("ri-add-line", "ri-xl")
|
||||||
|
onClickFunction = {
|
||||||
|
val id = Random.nextInt().toString()
|
||||||
|
setState {
|
||||||
|
entries[id] = props.schema.items!!
|
||||||
|
names[id] = ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
styledDiv {
|
||||||
|
css {
|
||||||
|
if (!state.showChildren)
|
||||||
|
display = Display.none
|
||||||
|
}
|
||||||
|
|
||||||
|
descriptionBlock(props.schema.description)
|
||||||
|
|
||||||
|
for (entry in state.entries) {
|
||||||
|
jsonMapEntry(
|
||||||
|
schema = entry.value,
|
||||||
|
key = state.names[entry.key] ?: "",
|
||||||
|
data = state.data?.get(entry.key),
|
||||||
|
id = entry.key,
|
||||||
|
handleChange = ::handleChange,
|
||||||
|
onNameChange = ::handleNameChange,
|
||||||
|
onDelete = ::handleDelete,
|
||||||
|
allowedKeys = props.schema.constraints.allowedKeys?.filter { it.intersect(state.names.values.toSet()).isEmpty() },
|
||||||
|
usePredefinedKeys = !props.schema.constraints.allowedKeys.isNullOrEmpty(),
|
||||||
|
level = props.level,
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
fun handleChange(event: ValueChangeEvent) {
|
||||||
|
state.data = buildJsonObject {
|
||||||
|
if (state.data != null)
|
||||||
|
for (entry in state.data!!) {
|
||||||
|
put(entry.key, entry.value)
|
||||||
|
}
|
||||||
|
|
||||||
|
put(event.id, event.value)
|
||||||
|
}
|
||||||
|
|
||||||
|
val newData = buildJsonObject {
|
||||||
|
if (state.data != null) {
|
||||||
|
for (entry in state.data!!) {
|
||||||
|
if (entry.key in state.names)
|
||||||
|
put(state.names[entry.key]!!, entry.value)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
props.handleChange(ValueChangeEvent(props.id, newData))
|
||||||
|
}
|
||||||
|
|
||||||
|
fun handleNameChange(event: NameChangeEvent) {
|
||||||
|
setState {
|
||||||
|
names[event.id] = event.name
|
||||||
|
}
|
||||||
|
|
||||||
|
val newData = buildJsonObject {
|
||||||
|
if (state.data != null) {
|
||||||
|
for (entry in state.data!!) {
|
||||||
|
if (entry.key == event.id) {
|
||||||
|
put(event.name, entry.value)
|
||||||
|
continue
|
||||||
|
}
|
||||||
|
if (entry.key in state.names)
|
||||||
|
put(state.names[entry.key]!!, entry.value)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
props.handleChange(ValueChangeEvent(props.id, newData))
|
||||||
|
}
|
||||||
|
|
||||||
|
fun handleDelete(id: String) {
|
||||||
|
setState {
|
||||||
|
data = buildJsonObject {
|
||||||
|
if (state.data != null)
|
||||||
|
for (entry in state.data!!) {
|
||||||
|
if (entry.key == id)
|
||||||
|
continue
|
||||||
|
|
||||||
|
put(entry.key, entry.value)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
names.remove(id)
|
||||||
|
entries.remove(id)
|
||||||
|
}
|
||||||
|
|
||||||
|
val newData = buildJsonObject {
|
||||||
|
if (state.data != null) {
|
||||||
|
for (entry in state.data!!) {
|
||||||
|
if (entry.key == id) {
|
||||||
|
continue
|
||||||
|
}
|
||||||
|
if (entry.key in state.names)
|
||||||
|
put(state.names[entry.key]!!, entry.value)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
props.handleChange(ValueChangeEvent(props.id, newData))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
fun RBuilder.jsonMap(schema: ConfigSchema, name: String, data: kotlinx.serialization.json.JsonObject?, id: String, handleChange: (event: ValueChangeEvent) -> Unit, level: Int) {
|
||||||
|
child(JsonMap::class) {
|
||||||
|
attrs {
|
||||||
|
this.schema = schema
|
||||||
|
this.name = name
|
||||||
|
this.data = data
|
||||||
|
this.id = id
|
||||||
|
this.handleChange = handleChange
|
||||||
|
this.level = level
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,175 @@
|
||||||
|
package components
|
||||||
|
|
||||||
|
import NameChangeEvent
|
||||||
|
import ValueChangeEvent
|
||||||
|
import kotlinx.css.*
|
||||||
|
import kotlinx.html.InputType
|
||||||
|
import kotlinx.html.classes
|
||||||
|
import kotlinx.html.id
|
||||||
|
import kotlinx.html.js.onChangeFunction
|
||||||
|
import kotlinx.html.js.onClickFunction
|
||||||
|
import kotlinx.serialization.json.JsonElement
|
||||||
|
import kotlinx.serialization.json.JsonPrimitive
|
||||||
|
import org.w3c.dom.HTMLInputElement
|
||||||
|
import org.w3c.dom.HTMLSelectElement
|
||||||
|
import react.*
|
||||||
|
import react.dom.attrs
|
||||||
|
import react.dom.option
|
||||||
|
import schema.ConfigSchema
|
||||||
|
import styled.*
|
||||||
|
import kotlin.random.Random
|
||||||
|
|
||||||
|
external interface JsonMapEntryProps: Props {
|
||||||
|
var name: String
|
||||||
|
var schema: ConfigSchema
|
||||||
|
var data: JsonElement?
|
||||||
|
var id: String
|
||||||
|
var handleChange: (event: ValueChangeEvent) -> Unit
|
||||||
|
var onNameChange: (event: NameChangeEvent) -> Unit
|
||||||
|
var onDelete: (id: String) -> Unit
|
||||||
|
var allowedKeys: List<List<String>>?
|
||||||
|
var usePredefinedKeys: Boolean
|
||||||
|
var level: Int
|
||||||
|
}
|
||||||
|
|
||||||
|
data class JsonMapEntryState(
|
||||||
|
var data: JsonElement?,
|
||||||
|
var showChildren: Boolean = true,
|
||||||
|
var name: String,
|
||||||
|
): State
|
||||||
|
|
||||||
|
class JsonMapEntry(props: JsonMapEntryProps): RComponent<JsonMapEntryProps, JsonMapEntryState>() {
|
||||||
|
|
||||||
|
init {
|
||||||
|
this.state = JsonMapEntryState(
|
||||||
|
data = props.data,
|
||||||
|
name = props.name,
|
||||||
|
)
|
||||||
|
|
||||||
|
if (!props.allowedKeys.isNullOrEmpty() && props.name.isBlank()) {
|
||||||
|
val name = props.allowedKeys?.getOrNull(0)?.getOrNull(0) ?: ""
|
||||||
|
console.log("Defaulting name to $name")
|
||||||
|
this.state.name = name
|
||||||
|
|
||||||
|
props.onNameChange(NameChangeEvent(props.id, name))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
override fun RBuilder.render() {
|
||||||
|
styledDiv {
|
||||||
|
css {
|
||||||
|
borderColor = hsl((props.level * 40) % 256, 100, 15)
|
||||||
|
+Styles.objectContainer
|
||||||
|
}
|
||||||
|
|
||||||
|
styledDiv {
|
||||||
|
css {
|
||||||
|
+Styles.objectHeader
|
||||||
|
}
|
||||||
|
styledI {
|
||||||
|
attrs {
|
||||||
|
classes = if (state.showChildren) {
|
||||||
|
setOf("ri-arrow-down-s-line", "ri-xl")
|
||||||
|
} else {
|
||||||
|
setOf("ri-arrow-right-s-line", "ri-xl")
|
||||||
|
}
|
||||||
|
|
||||||
|
onClickFunction = {
|
||||||
|
setState {
|
||||||
|
showChildren = !showChildren
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (props.usePredefinedKeys) {
|
||||||
|
styledSelect {
|
||||||
|
if (state.name.isNotBlank()){
|
||||||
|
option("", state.name)
|
||||||
|
}
|
||||||
|
|
||||||
|
for (optGroup in props.allowedKeys!!) {
|
||||||
|
for (opt in optGroup)
|
||||||
|
option("", opt)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
attrs {
|
||||||
|
value = state.name
|
||||||
|
onChangeFunction = {
|
||||||
|
val value = (it.target as HTMLSelectElement).value
|
||||||
|
setState {
|
||||||
|
this.name = value
|
||||||
|
}
|
||||||
|
|
||||||
|
props.onNameChange(NameChangeEvent(props.id, value))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
styledInput {
|
||||||
|
attrs {
|
||||||
|
type = InputType.text
|
||||||
|
value = state.name
|
||||||
|
onChangeFunction = {
|
||||||
|
val value = (it.target as HTMLInputElement).value
|
||||||
|
setState {
|
||||||
|
this.name = value
|
||||||
|
}
|
||||||
|
|
||||||
|
props.onNameChange(NameChangeEvent(props.id, value))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
styledI {
|
||||||
|
css {
|
||||||
|
color = Color.red
|
||||||
|
marginLeft = 10.px
|
||||||
|
alignSelf = Align.center
|
||||||
|
}
|
||||||
|
attrs {
|
||||||
|
classes = setOf("ri-delete-bin-7-line")
|
||||||
|
onClickFunction = {
|
||||||
|
props.onDelete(props.id)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
styledDiv {
|
||||||
|
css {
|
||||||
|
if (!state.showChildren)
|
||||||
|
display = Display.none
|
||||||
|
}
|
||||||
|
jsonSchema(
|
||||||
|
schema = props.schema,
|
||||||
|
name = "",
|
||||||
|
data = state.data,
|
||||||
|
id = props.id,
|
||||||
|
handleChange = props.handleChange,
|
||||||
|
level = props.level
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
fun RBuilder.jsonMapEntry(schema: ConfigSchema, key: String, data: JsonElement?, id: String, handleChange: (event: ValueChangeEvent) -> Unit, onNameChange: (event: NameChangeEvent) -> Unit, onDelete: (id: String) -> Unit, allowedKeys: List<List<String>>?, usePredefinedKeys: Boolean, level: Int) {
|
||||||
|
child(JsonMapEntry::class) {
|
||||||
|
attrs {
|
||||||
|
this.schema = schema
|
||||||
|
this.name = key
|
||||||
|
this.data = data
|
||||||
|
this.id = id
|
||||||
|
this.handleChange = handleChange
|
||||||
|
this.onNameChange = onNameChange
|
||||||
|
this.onDelete = onDelete
|
||||||
|
this.allowedKeys = allowedKeys
|
||||||
|
this.usePredefinedKeys = usePredefinedKeys
|
||||||
|
this.level = level
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,95 @@
|
||||||
|
package components
|
||||||
|
|
||||||
|
import ValueChangeEvent
|
||||||
|
import kotlinx.css.portal
|
||||||
|
import kotlinx.html.InputType
|
||||||
|
import kotlinx.html.id
|
||||||
|
import kotlinx.html.js.onChangeFunction
|
||||||
|
import kotlinx.serialization.json.JsonPrimitive
|
||||||
|
import kotlinx.serialization.json.doubleOrNull
|
||||||
|
import kotlinx.serialization.json.floatOrNull
|
||||||
|
import kotlinx.serialization.json.intOrNull
|
||||||
|
import org.w3c.dom.HTMLInputElement
|
||||||
|
import react.*
|
||||||
|
import react.dom.attrs
|
||||||
|
import schema.ConfigSchema
|
||||||
|
import schema.JsonType
|
||||||
|
import styled.css
|
||||||
|
import styled.styledDiv
|
||||||
|
import styled.styledInput
|
||||||
|
import styled.styledLabel
|
||||||
|
|
||||||
|
external interface JsonNumberProps: Props {
|
||||||
|
var schema: ConfigSchema
|
||||||
|
var name: String
|
||||||
|
var data: JsonPrimitive?
|
||||||
|
var id: String
|
||||||
|
var handleChange: (event: ValueChangeEvent) -> Unit
|
||||||
|
}
|
||||||
|
|
||||||
|
data class JsonNumberState(
|
||||||
|
var value: Double = 0.0,
|
||||||
|
var data: JsonPrimitive?,
|
||||||
|
): State
|
||||||
|
|
||||||
|
|
||||||
|
class JsonNumber(props: JsonNumberProps): RComponent<JsonNumberProps, JsonNumberState>() {
|
||||||
|
init {
|
||||||
|
val default = props.schema.default?.doubleOrNull ?: 0.0
|
||||||
|
|
||||||
|
this.state = JsonNumberState(
|
||||||
|
value = props.data?.content?.toDoubleOrNull() ?: default,
|
||||||
|
data = props.data,
|
||||||
|
)
|
||||||
|
|
||||||
|
props.handleChange(ValueChangeEvent(props.id, JsonPrimitive(state.value)))
|
||||||
|
}
|
||||||
|
|
||||||
|
override fun RBuilder.render() {
|
||||||
|
styledDiv {
|
||||||
|
css {
|
||||||
|
+Styles.inputContainer
|
||||||
|
}
|
||||||
|
if (props.name != "") {
|
||||||
|
styledLabel {
|
||||||
|
+props.name
|
||||||
|
attrs {
|
||||||
|
htmlFor = "${props.id}-input"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
styledInput {
|
||||||
|
attrs {
|
||||||
|
id = "${props.id}-input"
|
||||||
|
type = InputType.number
|
||||||
|
value = state.value.toString()
|
||||||
|
onChangeFunction = {
|
||||||
|
val value = (it.target as HTMLInputElement).value.toDoubleOrNull()
|
||||||
|
if (value != null) {
|
||||||
|
setState {
|
||||||
|
this.value = value
|
||||||
|
this.data = JsonPrimitive(value)
|
||||||
|
}
|
||||||
|
|
||||||
|
props.handleChange(ValueChangeEvent(props.id, JsonPrimitive(value)))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
fun RBuilder.jsonNumber(schema: ConfigSchema, name: String, data: JsonPrimitive?, id: String, handleChange: (event: ValueChangeEvent) -> Unit) {
|
||||||
|
child(JsonNumber::class) {
|
||||||
|
attrs {
|
||||||
|
this.schema = schema
|
||||||
|
this.name = name
|
||||||
|
this.data = data
|
||||||
|
this.id = id
|
||||||
|
this.handleChange = handleChange
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,126 @@
|
||||||
|
package components
|
||||||
|
|
||||||
|
import ValueChangeEvent
|
||||||
|
import kotlinx.css.*
|
||||||
|
import kotlinx.html.classes
|
||||||
|
import kotlinx.html.js.onClickFunction
|
||||||
|
import kotlinx.serialization.json.buildJsonObject
|
||||||
|
import react.*
|
||||||
|
import react.dom.attrs
|
||||||
|
import schema.ConfigSchema
|
||||||
|
import styled.*
|
||||||
|
|
||||||
|
external interface JsonObjectProps: Props {
|
||||||
|
var schema: ConfigSchema
|
||||||
|
var name: String
|
||||||
|
var data: kotlinx.serialization.json.JsonObject?
|
||||||
|
var id: String
|
||||||
|
var handleChange: (event: ValueChangeEvent) -> Unit
|
||||||
|
var level: Int
|
||||||
|
}
|
||||||
|
|
||||||
|
data class JsonObjectState(
|
||||||
|
var data: kotlinx.serialization.json.JsonObject?,
|
||||||
|
var showChildren: Boolean = true,
|
||||||
|
): State
|
||||||
|
|
||||||
|
class JsonObject(props: JsonObjectProps): RComponent<JsonObjectProps, JsonObjectState>() {
|
||||||
|
init {
|
||||||
|
this.state = JsonObjectState(
|
||||||
|
data = props.data,
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
override fun RBuilder.render() {
|
||||||
|
styledDiv {
|
||||||
|
css {
|
||||||
|
if (props.name != "") {
|
||||||
|
borderColor = hsl((props.level * 40) % 256, 100, 15)
|
||||||
|
+Styles.objectContainer
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (props.name != "") {
|
||||||
|
|
||||||
|
styledDiv {
|
||||||
|
css {
|
||||||
|
+Styles.objectHeader
|
||||||
|
}
|
||||||
|
styledI {
|
||||||
|
attrs {
|
||||||
|
classes = if (state.showChildren) {
|
||||||
|
setOf("ri-arrow-down-s-line", "ri-xl")
|
||||||
|
} else {
|
||||||
|
setOf("ri-arrow-right-s-line", "ri-xl")
|
||||||
|
}
|
||||||
|
|
||||||
|
onClickFunction = {
|
||||||
|
setState {
|
||||||
|
showChildren = !showChildren
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
styledLabel {
|
||||||
|
css {
|
||||||
|
textTransform = TextTransform.capitalize
|
||||||
|
}
|
||||||
|
+props.name
|
||||||
|
}
|
||||||
|
|
||||||
|
styledDiv {
|
||||||
|
css {
|
||||||
|
width = 24.px
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
styledDiv {
|
||||||
|
css {
|
||||||
|
if (!state.showChildren)
|
||||||
|
display = Display.none
|
||||||
|
}
|
||||||
|
|
||||||
|
descriptionBlock(props.schema.description)
|
||||||
|
|
||||||
|
for (property in props.schema.children!!) {
|
||||||
|
jsonSchema(
|
||||||
|
schema = property.value,
|
||||||
|
name = property.key,
|
||||||
|
data = state.data?.get(property.key),
|
||||||
|
id = property.key,
|
||||||
|
handleChange = ::handleChange,
|
||||||
|
level = props.level + 1,
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
fun handleChange(event: ValueChangeEvent) {
|
||||||
|
state.data = buildJsonObject {
|
||||||
|
if (state.data != null)
|
||||||
|
for (entry in state.data!!) {
|
||||||
|
put(entry.key, entry.value)
|
||||||
|
}
|
||||||
|
|
||||||
|
put(event.id, event.value)
|
||||||
|
}
|
||||||
|
|
||||||
|
props.handleChange(ValueChangeEvent(props.id, state.data!!))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
fun RBuilder.jsonObject(schema: ConfigSchema, name: String, data: kotlinx.serialization.json.JsonObject?, id: String, handleChange: (event: ValueChangeEvent) -> Unit, level: Int) {
|
||||||
|
child(JsonObject::class) {
|
||||||
|
attrs {
|
||||||
|
this.schema = schema
|
||||||
|
this.name = name
|
||||||
|
this.data = data
|
||||||
|
this.id = id
|
||||||
|
this.handleChange = handleChange
|
||||||
|
this.level = level
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,59 @@
|
||||||
|
package components
|
||||||
|
|
||||||
|
import ValueChangeEvent
|
||||||
|
import kotlinx.serialization.json.*
|
||||||
|
import kotlinx.serialization.json.JsonArray
|
||||||
|
import kotlinx.serialization.json.JsonObject
|
||||||
|
import react.Props
|
||||||
|
import react.RBuilder
|
||||||
|
import react.RComponent
|
||||||
|
import react.State
|
||||||
|
import schema.ConfigSchema
|
||||||
|
import schema.ConfigValueType
|
||||||
|
|
||||||
|
external interface ConfigSchemaComponentProps: Props {
|
||||||
|
var schema: ConfigSchema
|
||||||
|
var name: String
|
||||||
|
var data: JsonElement?
|
||||||
|
var id: String
|
||||||
|
var handleChange: (event: ValueChangeEvent) -> Unit
|
||||||
|
var level: Int
|
||||||
|
}
|
||||||
|
|
||||||
|
data class ConfigSchemaComponentState(
|
||||||
|
var data: JsonElement?,
|
||||||
|
): State
|
||||||
|
|
||||||
|
class ConfigSchemaComponent(props: ConfigSchemaComponentProps): RComponent<ConfigSchemaComponentProps, ConfigSchemaComponentState>() {
|
||||||
|
init {
|
||||||
|
this.state = ConfigSchemaComponentState(
|
||||||
|
data = props.data,
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
override fun RBuilder.render() {
|
||||||
|
when (props.schema.type) {
|
||||||
|
ConfigValueType.STRING -> jsonString(props.schema, props.name, state.data as JsonPrimitive?, props.id, props.handleChange)
|
||||||
|
ConfigValueType.BOOLEAN -> jsonBoolean(props.schema, props.name, state.data as JsonPrimitive?, props.id, props.handleChange)
|
||||||
|
ConfigValueType.OBJECT -> jsonObject(props.schema, props.name, state.data as JsonObject?, props.id, props.handleChange, props.level)
|
||||||
|
ConfigValueType.LIST -> jsonArray(props.schema, props.name, state.data as JsonArray?, props.id, props.handleChange, props.level)
|
||||||
|
ConfigValueType.MAP -> jsonMap(props.schema, props.name, state.data as JsonObject?, props.id, props.handleChange, props.level)
|
||||||
|
ConfigValueType.INTEGER -> jsonNumber(props.schema, props.name, state.data as JsonPrimitive?, props.id, props.handleChange)
|
||||||
|
ConfigValueType.FLOAT -> jsonNumber(props.schema, props.name, state.data as JsonPrimitive?, props.id, props.handleChange)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
fun RBuilder.jsonSchema(schema: ConfigSchema, name: String, data: JsonElement?, id: String, handleChange: (event: ValueChangeEvent) -> Unit, level: Int = 0, attributes: ConfigSchemaComponentProps.() -> Unit = {}) {
|
||||||
|
child(ConfigSchemaComponent::class) {
|
||||||
|
attrs {
|
||||||
|
this.schema = schema
|
||||||
|
this.name = name
|
||||||
|
this.data = data
|
||||||
|
this.id = id
|
||||||
|
this.handleChange = handleChange
|
||||||
|
this.level = level
|
||||||
|
attributes(this)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,137 @@
|
||||||
|
package components
|
||||||
|
|
||||||
|
import ValueChangeEvent
|
||||||
|
import kotlinx.browser.window
|
||||||
|
import kotlinx.css.*
|
||||||
|
import kotlinx.html.InputType
|
||||||
|
import kotlinx.html.classes
|
||||||
|
import kotlinx.html.js.onChangeFunction
|
||||||
|
import kotlinx.html.js.onClickFunction
|
||||||
|
import kotlinx.serialization.decodeFromString
|
||||||
|
import kotlinx.serialization.encodeToString
|
||||||
|
import kotlinx.serialization.json.Json
|
||||||
|
import kotlinx.serialization.json.JsonObject
|
||||||
|
import org.w3c.dom.HTMLInputElement
|
||||||
|
import org.w3c.dom.url.URL
|
||||||
|
import org.w3c.dom.url.URLSearchParams
|
||||||
|
import org.w3c.files.Blob
|
||||||
|
import org.w3c.files.File
|
||||||
|
import org.w3c.files.FileReader
|
||||||
|
import org.w3c.files.get
|
||||||
|
import org.w3c.xhr.XMLHttpRequest
|
||||||
|
import react.*
|
||||||
|
import react.dom.attrs
|
||||||
|
import schema.ConfigSchema
|
||||||
|
import styled.css
|
||||||
|
import styled.styledDiv
|
||||||
|
import styled.styledI
|
||||||
|
import styled.styledInput
|
||||||
|
|
||||||
|
external interface JsonSchemaRootProps: Props {
|
||||||
|
var source: String
|
||||||
|
}
|
||||||
|
|
||||||
|
data class JsonSchemaRootState(
|
||||||
|
var schema: ConfigSchema? = null,
|
||||||
|
var data: JsonObject = JsonObject(mapOf()),
|
||||||
|
var showJson: Boolean = false,
|
||||||
|
): State
|
||||||
|
|
||||||
|
|
||||||
|
class JsonSchemaRoot(props: JsonSchemaRootProps): RComponent<JsonSchemaRootProps, JsonSchemaRootState>() {
|
||||||
|
init {
|
||||||
|
this.state = JsonSchemaRootState()
|
||||||
|
|
||||||
|
val json = Json {
|
||||||
|
ignoreUnknownKeys = true
|
||||||
|
prettyPrint = true
|
||||||
|
}
|
||||||
|
|
||||||
|
val xmlHttp = XMLHttpRequest()
|
||||||
|
xmlHttp.open("GET", props.source)
|
||||||
|
xmlHttp.onload = {
|
||||||
|
val schema: ConfigSchema = json.decodeFromString(xmlHttp.responseText)
|
||||||
|
setState {
|
||||||
|
this.schema = schema
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
xmlHttp.send()
|
||||||
|
}
|
||||||
|
|
||||||
|
override fun RBuilder.render() {
|
||||||
|
styledDiv {
|
||||||
|
css {
|
||||||
|
backgroundColor = Color.black
|
||||||
|
width = 100.pct
|
||||||
|
fontSize = 2.rem
|
||||||
|
}
|
||||||
|
|
||||||
|
styledI {
|
||||||
|
css {
|
||||||
|
|
||||||
|
}
|
||||||
|
attrs {
|
||||||
|
classes = setOf("ri-folder-open-line")
|
||||||
|
}
|
||||||
|
|
||||||
|
styledInput {
|
||||||
|
attrs {
|
||||||
|
type = InputType.file
|
||||||
|
onChangeFunction = {
|
||||||
|
val reader = FileReader()
|
||||||
|
reader.onloadend = {
|
||||||
|
setState {
|
||||||
|
data = Json.decodeFromString(reader.result as String)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
reader.readAsText((it.target as HTMLInputElement).files!![0]!!)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
styledI {
|
||||||
|
css {
|
||||||
|
|
||||||
|
}
|
||||||
|
attrs {
|
||||||
|
classes = setOf("ri-save-3-line")
|
||||||
|
onClickFunction = {
|
||||||
|
setState {
|
||||||
|
showJson = !showJson
|
||||||
|
}
|
||||||
|
val encoded = Json.encodeToString(state.data)
|
||||||
|
console.log(encoded)
|
||||||
|
// //TODO: Send to the server and have to server respond with the data and a
|
||||||
|
// // Content-Disposition: attachment header. This should open a save dialog
|
||||||
|
//// window.location.assign("data:application/json;charset=utf-8,$encoded")
|
||||||
|
// js("window.open(\"data:application/json;charset=utf-8,\" + encodeURI(encoded), \"_blank\")")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (state.showJson) {
|
||||||
|
styledDiv {
|
||||||
|
+Json.encodeToString(state.data)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (state.schema != null)
|
||||||
|
jsonSchema(state.schema!!, "", state.data, "", ::handleChange) {
|
||||||
|
key = state.data.toString()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
fun handleChange(event: ValueChangeEvent) {
|
||||||
|
state.data = event.value as JsonObject
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
fun RBuilder.jsonSchemaRoot(source: String) {
|
||||||
|
child(JsonSchemaRoot::class) {
|
||||||
|
attrs {
|
||||||
|
this.source = source
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,111 @@
|
||||||
|
package components
|
||||||
|
|
||||||
|
import ValueChangeEvent
|
||||||
|
import kotlinx.css.portal
|
||||||
|
import kotlinx.html.InputType
|
||||||
|
import kotlinx.html.id
|
||||||
|
import kotlinx.html.js.onChangeFunction
|
||||||
|
import kotlinx.serialization.json.JsonPrimitive
|
||||||
|
import kotlinx.serialization.json.contentOrNull
|
||||||
|
import org.w3c.dom.HTMLInputElement
|
||||||
|
import org.w3c.dom.HTMLSelectElement
|
||||||
|
import react.*
|
||||||
|
import react.dom.attrs
|
||||||
|
import react.dom.option
|
||||||
|
import schema.ConfigSchema
|
||||||
|
import schema.JsonType
|
||||||
|
import styled.*
|
||||||
|
|
||||||
|
external interface JsonStringProps: Props {
|
||||||
|
var schema: ConfigSchema
|
||||||
|
var name: String
|
||||||
|
var data: JsonPrimitive?
|
||||||
|
var id: String
|
||||||
|
var handleChange: (event: ValueChangeEvent) -> Unit
|
||||||
|
}
|
||||||
|
|
||||||
|
data class JsonStringState(
|
||||||
|
var value: String = "",
|
||||||
|
var data: JsonPrimitive?,
|
||||||
|
): State
|
||||||
|
|
||||||
|
|
||||||
|
class JsonString(props: JsonStringProps): RComponent<JsonStringProps, JsonStringState>() {
|
||||||
|
init {
|
||||||
|
val default: String = props.schema.default?.contentOrNull ?: ""
|
||||||
|
|
||||||
|
this.state = JsonStringState(
|
||||||
|
value = props.data?.content ?: default,
|
||||||
|
data = props.data,
|
||||||
|
)
|
||||||
|
|
||||||
|
props.handleChange(ValueChangeEvent(props.id, JsonPrimitive(state.value)))
|
||||||
|
}
|
||||||
|
|
||||||
|
override fun RBuilder.render() {
|
||||||
|
styledDiv {
|
||||||
|
css {
|
||||||
|
+Styles.inputContainer
|
||||||
|
}
|
||||||
|
if (props.name != "") {
|
||||||
|
styledLabel {
|
||||||
|
+props.name
|
||||||
|
attrs {
|
||||||
|
htmlFor = "${props.id}-input"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
if (!props.schema.constraints.enum.isNullOrEmpty()) {
|
||||||
|
styledSelect {
|
||||||
|
for (opt in props.schema.constraints.enum!!) {
|
||||||
|
option("", opt)
|
||||||
|
}
|
||||||
|
|
||||||
|
attrs {
|
||||||
|
id = "${props.id}-input"
|
||||||
|
value = state.value
|
||||||
|
onChangeFunction = {
|
||||||
|
val value = (it.target as HTMLSelectElement).value
|
||||||
|
setState {
|
||||||
|
this.value = value
|
||||||
|
this.data = JsonPrimitive(value)
|
||||||
|
}
|
||||||
|
|
||||||
|
props.handleChange(ValueChangeEvent(props.id, JsonPrimitive(value)))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
styledInput {
|
||||||
|
attrs {
|
||||||
|
id = "${props.id}-input"
|
||||||
|
type = InputType.text
|
||||||
|
value = state.value
|
||||||
|
onChangeFunction = {
|
||||||
|
val value = (it.target as HTMLInputElement).value
|
||||||
|
setState {
|
||||||
|
this.value = value
|
||||||
|
}
|
||||||
|
|
||||||
|
props.handleChange(ValueChangeEvent(props.id, JsonPrimitive(value)))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
fun RBuilder.jsonString(schema: ConfigSchema, name: String, data: JsonPrimitive?, id: String, handleChange: (event: ValueChangeEvent) -> Unit) {
|
||||||
|
child(JsonString::class) {
|
||||||
|
attrs {
|
||||||
|
this.schema = schema
|
||||||
|
this.name = name
|
||||||
|
this.data = data
|
||||||
|
this.id = id
|
||||||
|
this.handleChange = handleChange
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,14 @@
|
||||||
|
package schema
|
||||||
|
|
||||||
|
import kotlinx.serialization.Serializable
|
||||||
|
import kotlinx.serialization.json.JsonPrimitive
|
||||||
|
|
||||||
|
@Serializable
|
||||||
|
data class ConfigSchema(
|
||||||
|
val type: ConfigValueType,
|
||||||
|
val description: List<String>? = null,
|
||||||
|
val children: Map<String, ConfigSchema>? = null,
|
||||||
|
val items: ConfigSchema? = null,
|
||||||
|
val default: JsonPrimitive? = null,
|
||||||
|
val constraints: ConfigValueConstraints = ConfigValueConstraints(),
|
||||||
|
)
|
||||||
|
|
@ -0,0 +1,14 @@
|
||||||
|
package schema
|
||||||
|
|
||||||
|
import kotlinx.serialization.Serializable
|
||||||
|
|
||||||
|
@Serializable
|
||||||
|
data class ConfigValueConstraints(
|
||||||
|
val enum: List<String>? = null,
|
||||||
|
val allowedKeys: List<List<String>>? = null,
|
||||||
|
val maxLength: Int? = null,
|
||||||
|
val maxValueInt: Long? = null,
|
||||||
|
val minValueInt: Long? = null,
|
||||||
|
val maxValueFloat: Double? = null,
|
||||||
|
val minValueFloat: Double? = null,
|
||||||
|
)
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
package schema
|
||||||
|
|
||||||
|
enum class ConfigValueType {
|
||||||
|
STRING,
|
||||||
|
MAP,
|
||||||
|
LIST,
|
||||||
|
OBJECT,
|
||||||
|
BOOLEAN,
|
||||||
|
INTEGER,
|
||||||
|
FLOAT
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,34 @@
|
||||||
|
package schema
|
||||||
|
|
||||||
|
import kotlinx.serialization.SerialName
|
||||||
|
import kotlinx.serialization.Serializable
|
||||||
|
import kotlinx.serialization.json.JsonObject
|
||||||
|
|
||||||
|
@Serializable
|
||||||
|
data class JsonSchema(
|
||||||
|
@SerialName("\$schema")
|
||||||
|
val schema: String = "",
|
||||||
|
val type: JsonType = JsonType.UNKNOWN,
|
||||||
|
val properties: Map<String, JsonSchema> = mapOf(),
|
||||||
|
val additionalProperties: JsonSchema? = null,
|
||||||
|
val definitions: Map<String, JsonObject> = mapOf(),
|
||||||
|
val required: List<String> = listOf(),
|
||||||
|
val items: JsonSchema? = null,
|
||||||
|
val description: String = "",
|
||||||
|
val enum: List<String> = listOf(),
|
||||||
|
@SerialName("if") val conditionIf: JsonSchema? = null,
|
||||||
|
@SerialName("then") val conditionThen: JsonSchema? = null,
|
||||||
|
@SerialName("else") val conditionElse: JsonSchema? = null,
|
||||||
|
)
|
||||||
|
|
||||||
|
@Serializable
|
||||||
|
enum class JsonType {
|
||||||
|
@SerialName("unknown") UNKNOWN,
|
||||||
|
@SerialName("string") STRING,
|
||||||
|
@SerialName("number") NUMBER,
|
||||||
|
@SerialName("boolean") BOOLEAN,
|
||||||
|
@SerialName("object") OBJECT,
|
||||||
|
@SerialName("array") ARRAY,
|
||||||
|
@SerialName("null") NULL,
|
||||||
|
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,12 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>JS Client</title>
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body style="background-color: #151515;font-family: sans-serif; color: white; margin: 0">
|
||||||
|
<script src="DConfig-Web.js"></script>
|
||||||
|
<div id="root"></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue