Skip to content

Commit

Permalink
💥 Functionality is done, but the UI is broken now
Browse files Browse the repository at this point in the history
Also the free Jetbrain AI is done 😥
  • Loading branch information
CXwudi committed Dec 13, 2023
1 parent 99b4689 commit 0afae02
Show file tree
Hide file tree
Showing 5 changed files with 142 additions and 81 deletions.
37 changes: 20 additions & 17 deletions doc/Mock UI.drawio
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
<mxfile host="app.diagrams.net" modified="2023-12-01T01:25:17.863Z" agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36 Edg/119.0.0.0" etag="xJyMA4UF4CuHgHSl_sCS" version="22.1.5" type="device">
<mxfile host="app.diagrams.net" modified="2023-12-12T21:26:24.509Z" agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36 Edg/120.0.0.0" etag="KKjtxk33UYW3aVQj_UTB" version="22.1.8" type="device">
<diagram name="Page-1" id="Z9su-IpZnA1WicuIkTZz">
<mxGraphModel dx="1377" dy="815" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
<mxGraphModel dx="1509" dy="891" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
<root>
<mxCell id="0" />
<mxCell id="1" parent="0" />
<mxCell id="SqRquksW2nZ5C89mBwd1-2" value="Song Finder" style="strokeWidth=1;shadow=0;dashed=0;align=center;html=1;shape=mxgraph.mockup.containers.window;align=left;verticalAlign=top;spacingLeft=8;strokeColor2=#008cff;strokeColor3=#c4c4c4;fontColor=#666666;mainText=;fontSize=17;labelBackgroundColor=none;whiteSpace=wrap;" parent="1" vertex="1">
<mxGeometry x="236" y="40" width="810" height="660" as="geometry" />
<mxGeometry x="236" y="40" width="810" height="650" as="geometry" />
</mxCell>
<mxCell id="pZRUgpaE8gb7qNiZiESH-1" value="" style="verticalLabelPosition=bottom;shadow=0;dashed=0;align=center;html=1;verticalAlign=top;strokeWidth=1;shape=mxgraph.mockup.misc.progressBar;fillColor=#cccccc;strokeColor=none;fillColor2=#99ddff;barPos=29.782;" parent="1" vertex="1">
<mxGeometry x="356" y="80" width="580" height="20" as="geometry" />
Expand All @@ -32,16 +32,16 @@
<mxGeometry x="236" y="590" width="810" height="20" as="geometry" />
</mxCell>
<mxCell id="pZRUgpaE8gb7qNiZiESH-12" value="No result found?" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=14;fontFamily=Helvetica;fontColor=default;" parent="1" vertex="1">
<mxGeometry x="250" y="610" width="126" height="30" as="geometry" />
<mxGeometry x="250" y="610" width="110" height="30" as="geometry" />
</mxCell>
<mxCell id="pZRUgpaE8gb7qNiZiESH-13" value="Override the VocaDB Song ID:" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=14;fontFamily=Helvetica;fontColor=default;" parent="1" vertex="1">
<mxGeometry x="250" y="640" width="206" height="30" as="geometry" />
<mxCell id="pZRUgpaE8gb7qNiZiESH-13" value="And override the VocaDB Song ID:" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=14;fontFamily=Helvetica;fontColor=default;" parent="1" vertex="1">
<mxGeometry x="248" y="640" width="230" height="30" as="geometry" />
</mxCell>
<mxCell id="pZRUgpaE8gb7qNiZiESH-14" value="xxx" style="strokeWidth=1;shadow=0;dashed=0;align=center;html=1;shape=mxgraph.mockup.forms.pwField;strokeColor=#999999;mainText=;align=left;fontColor=#666666;fontSize=17;spacingLeft=3;rounded=0;fontFamily=Helvetica;fillColor=none;gradientColor=none;" parent="1" vertex="1">
<mxGeometry x="475" y="640" width="150" height="30" as="geometry" />
<mxGeometry x="648" y="640" width="150" height="30" as="geometry" />
</mxCell>
<mxCell id="pZRUgpaE8gb7qNiZiESH-15" value="Override and continue" style="strokeWidth=1;shadow=0;dashed=0;align=center;html=1;shape=mxgraph.mockup.buttons.button;strokeColor=#666666;fontColor=#ffffff;mainText=;buttonStyle=round;fontSize=17;fontStyle=1;fillColor=#008cff;whiteSpace=wrap;rounded=0;fontFamily=Helvetica;" parent="1" vertex="1">
<mxGeometry x="652" y="640" width="204" height="30" as="geometry" />
<mxGeometry x="822" y="640" width="204" height="30" as="geometry" />
</mxCell>
<mxCell id="pZRUgpaE8gb7qNiZiESH-16" value="" style="rounded=1;whiteSpace=wrap;html=1;fontFamily=Helvetica;fontSize=14;fontColor=default;fillColor=none;gradientColor=none;arcSize=50;" parent="1" vertex="1">
<mxGeometry x="276" y="290" width="350" height="120" as="geometry" />
Expand Down Expand Up @@ -97,38 +97,41 @@
<mxCell id="lM5ClQp3Q17mZf645Zi1-10" value="" style="verticalLabelPosition=bottom;shadow=0;dashed=0;align=center;html=1;verticalAlign=top;strokeWidth=1;shape=mxgraph.mockup.misc.loading_circle_2;pointerEvents=1" parent="1" vertex="1">
<mxGeometry x="884.5" y="245" width="21" height="20" as="geometry" />
</mxCell>
<mxCell id="NflNl1GVBrQC60GzZ1ls-4" value="√ Found 39 results" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;fontSize=14;" vertex="1" parent="1">
<mxCell id="NflNl1GVBrQC60GzZ1ls-4" value="√ Found 39 results" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;fontSize=14;" parent="1" vertex="1">
<mxGeometry x="1070" y="245" width="140" height="30" as="geometry" />
</mxCell>
<mxCell id="NflNl1GVBrQC60GzZ1ls-5" value="Regex Match Mode:" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=14;fontFamily=Helvetica;fontColor=default;" vertex="1" parent="1">
<mxCell id="NflNl1GVBrQC60GzZ1ls-5" value="Regex Match Mode:" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=14;fontFamily=Helvetica;fontColor=default;" parent="1" vertex="1">
<mxGeometry x="261" y="170" width="135" height="30" as="geometry" />
</mxCell>
<mxCell id="NflNl1GVBrQC60GzZ1ls-6" value="&lt;font style=&quot;font-size: 14px;&quot;&gt;Exact Match (^title$)&lt;/font&gt;" style="shape=ellipse;fillColor=#eeeeee;strokeColor=#999999;gradientColor=#cccccc;html=1;align=left;spacingLeft=4;fontSize=14;fontColor=#666666;labelPosition=right;shadow=0;rounded=0;verticalAlign=middle;fontFamily=Helvetica;" vertex="1" parent="1">
<mxCell id="NflNl1GVBrQC60GzZ1ls-6" value="&lt;font style=&quot;font-size: 14px;&quot;&gt;Exact Match (^title$)&lt;/font&gt;" style="shape=ellipse;fillColor=#eeeeee;strokeColor=#999999;gradientColor=#cccccc;html=1;align=left;spacingLeft=4;fontSize=14;fontColor=#666666;labelPosition=right;shadow=0;rounded=0;verticalAlign=middle;fontFamily=Helvetica;" parent="1" vertex="1">
<mxGeometry x="550" y="177.5" width="15" height="15" as="geometry" />
</mxCell>
<mxCell id="NflNl1GVBrQC60GzZ1ls-7" value="&lt;font style=&quot;font-size: 14px;&quot;&gt;Start with (^title.*)&lt;/font&gt;" style="shape=ellipse;fillColor=#eeeeee;strokeColor=#999999;gradientColor=#cccccc;html=1;align=left;spacingLeft=4;fontSize=14;fontColor=#666666;labelPosition=right;shadow=0;rounded=0;verticalAlign=middle;fontFamily=Helvetica;" vertex="1" parent="1">
<mxCell id="NflNl1GVBrQC60GzZ1ls-7" value="&lt;font style=&quot;font-size: 14px;&quot;&gt;Start with (^title.*)&lt;/font&gt;" style="shape=ellipse;fillColor=#eeeeee;strokeColor=#999999;gradientColor=#cccccc;html=1;align=left;spacingLeft=4;fontSize=14;fontColor=#666666;labelPosition=right;shadow=0;rounded=0;verticalAlign=middle;fontFamily=Helvetica;" parent="1" vertex="1">
<mxGeometry x="729" y="177.5" width="15" height="15" as="geometry" />
</mxCell>
<mxCell id="NflNl1GVBrQC60GzZ1ls-8" value="&lt;font style=&quot;font-size: 14px;&quot;&gt;Contains (.*title.*)&lt;/font&gt;" style="shape=ellipse;fillColor=#eeeeee;strokeColor=#999999;gradientColor=#cccccc;html=1;align=left;spacingLeft=4;fontSize=14;fontColor=#666666;labelPosition=right;shadow=0;rounded=0;verticalAlign=middle;fontFamily=Helvetica;" vertex="1" parent="1">
<mxCell id="NflNl1GVBrQC60GzZ1ls-8" value="&lt;font style=&quot;font-size: 14px;&quot;&gt;Contains (.*title.*)&lt;/font&gt;" style="shape=ellipse;fillColor=#eeeeee;strokeColor=#999999;gradientColor=#cccccc;html=1;align=left;spacingLeft=4;fontSize=14;fontColor=#666666;labelPosition=right;shadow=0;rounded=0;verticalAlign=middle;fontFamily=Helvetica;" parent="1" vertex="1">
<mxGeometry x="899" y="177.5" width="15" height="15" as="geometry" />
</mxCell>
<mxCell id="NflNl1GVBrQC60GzZ1ls-9" value="Sort by:" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=14;fontFamily=Helvetica;fontColor=default;" vertex="1" parent="1">
<mxCell id="NflNl1GVBrQC60GzZ1ls-9" value="Sort by:" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=14;fontFamily=Helvetica;fontColor=default;" parent="1" vertex="1">
<mxGeometry x="261" y="210" width="56" height="30" as="geometry" />
</mxCell>
<mxCell id="NflNl1GVBrQC60GzZ1ls-10" value="Searching..." style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=14;fontFamily=Helvetica;fontColor=default;" vertex="1" parent="1">
<mxCell id="NflNl1GVBrQC60GzZ1ls-10" value="Searching..." style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=14;fontFamily=Helvetica;fontColor=default;" parent="1" vertex="1">
<mxGeometry x="900" y="240" width="126" height="30" as="geometry" />
</mxCell>
<mxCell id="NflNl1GVBrQC60GzZ1ls-12" value="" style="endArrow=classic;html=1;rounded=0;fontFamily=Helvetica;fontSize=14;fontColor=default;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" target="NflNl1GVBrQC60GzZ1ls-9">
<mxCell id="NflNl1GVBrQC60GzZ1ls-12" value="" style="endArrow=classic;html=1;rounded=0;fontFamily=Helvetica;fontSize=14;fontColor=default;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" parent="1" target="NflNl1GVBrQC60GzZ1ls-9" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="196" y="170" as="sourcePoint" />
<mxPoint x="206" y="260" as="targetPoint" />
</mxGeometry>
</mxCell>
<mxCell id="NflNl1GVBrQC60GzZ1ls-13" value="Optional for now,&lt;br&gt;let&#39;s sort by date for now" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];fontSize=14;fontFamily=Helvetica;fontColor=default;" vertex="1" connectable="0" parent="NflNl1GVBrQC60GzZ1ls-12">
<mxCell id="NflNl1GVBrQC60GzZ1ls-13" value="Optional for now,&lt;br&gt;let&#39;s sort by date for now" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];fontSize=14;fontFamily=Helvetica;fontColor=default;" parent="NflNl1GVBrQC60GzZ1ls-12" vertex="1" connectable="0">
<mxGeometry x="-0.5837" y="-1" relative="1" as="geometry">
<mxPoint x="-33" y="-41" as="offset" />
</mxGeometry>
</mxCell>
<mxCell id="9b4cRwLbUm540S3hyYDz-1" value="&lt;font style=&quot;font-size: 14px;&quot;&gt;Click &lt;font color=&quot;#3399ff&quot;&gt;here &lt;/font&gt;to add new record to VocaDB site&lt;/font&gt;" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;" vertex="1" parent="1">
<mxGeometry x="365" y="610" width="300" height="30" as="geometry" />
</mxCell>
</root>
</mxGraphModel>
</diagram>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,12 +1,17 @@
package mikufan.cx.songfinder.backend.controller.mainpage

import androidx.compose.runtime.State
import mikufan.cx.songfinder.backend.statemodel.SearchInputStateModel
import org.springframework.stereotype.Controller

@Controller
class ResultOverridingController(
private val resultSelectedIntermediateController: ResultSelectedIntermediateController,
inputStateModel: SearchInputStateModel,
) {

val currentInputState: State<String> = inputStateModel.currentInputState

suspend fun overrideResultAndContinue(id: ULong) {
resultSelectedIntermediateController.writeRecordAndMoveOn(id)
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ import mikufan.cx.songfinder.backend.statemodel.SearchRegexOption
import mikufan.cx.songfinder.backend.statemodel.SearchStatus
import mikufan.cx.songfinder.getSpringBean
import mikufan.cx.songfinder.ui.common.ColumnWithSpacing
import mikufan.cx.songfinder.ui.common.FillInSpacer
import mikufan.cx.songfinder.ui.theme.MyAppTheme
import java.time.LocalDateTime

Expand All @@ -41,7 +40,6 @@ fun RealMainScreen(isAllFinished: State<Boolean>) = ColumnWithSpacing(
SearchBar()
RegexMatchOption()
ResultPanel()
FillInSpacer()
Divider()
ResultOverridingPanel()
})
Expand Down Expand Up @@ -100,9 +98,8 @@ fun PreviewMainScreen() {
) {
RealResultGridCell(it, ResultCellCallbacks({}, { Result.success(ThumbnailInfo("url", {})) }))
}
FillInSpacer()
Divider()
RealResultOverridingPanel(ResultOverridingPanelModel({}))
RealResultOverridingPanel(ResultOverridingPanelModel({}, mutableStateOf("unknown title")))
}
}
}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,22 +1,124 @@
package mikufan.cx.songfinder.ui.component.main

import androidx.compose.runtime.Composable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Warning
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalUriHandler
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.KeyboardType
import kotlinx.coroutines.launch
import mikufan.cx.songfinder.backend.controller.mainpage.ResultOverridingController
import mikufan.cx.songfinder.getSpringBean
import mikufan.cx.songfinder.ui.common.MyDefaultAlertDialog
import mikufan.cx.songfinder.ui.common.RowCentralizedWithSpacing
import mikufan.cx.songfinder.ui.theme.spacing

@Composable
fun ResultOverridingPanel(
controller: ResultOverridingController = getSpringBean(),
) {
val model = ResultOverridingPanelModel(controller::overrideResultAndContinue)
val model = ResultOverridingPanelModel(controller::overrideResultAndContinue, controller.currentInputState)
RealResultOverridingPanel(model)
}

@Composable
fun RealResultOverridingPanel(model: ResultOverridingPanelModel) {
// TODO
Column(
verticalArrangement = Arrangement.spacedBy(MaterialTheme.spacing.spacing),
modifier = Modifier
) {
TitleRow()
DoubleCheckHint(model.currentInputState)
GuideToCreateNewSong()
OverrideResultRow(model.onOverride)
}
}

@Composable
fun TitleRow() = RowCentralizedWithSpacing {
Text("No result found?", style = MaterialTheme.typography.bodyMedium.copy(fontWeight = FontWeight.Bold))
}

@Composable
fun DoubleCheckHint(currentInputState: State<String>) = RowCentralizedWithSpacing {
val uriHandler = LocalUriHandler.current
Text("Please check again on the official VocaDB site")
OutlinedButton(onClick = { uriHandler.openUri("https://vocadb.net/Search?searchType=Song&filter=${currentInputState.value}") }) {
Text("Search on VocaDB")
}
}

@Composable
fun GuideToCreateNewSong() = RowCentralizedWithSpacing {
Text("If you are 100% sure this song is not on VocaDB, then")
val uriHandler = LocalUriHandler.current
OutlinedButton(onClick = { uriHandler.openUri("https://vocadb.net/Song/Create") }) {
Text("Create new song on VocaDB")
}
}

@Composable
fun OverrideResultRow(onOverride: suspend (ULong) -> Unit) = RowCentralizedWithSpacing {
var inputValueState by remember { mutableStateOf(0uL) }
val scope = rememberCoroutineScope()
Text("And override the result with any VocaDB Song ID")
VocaDbIdOverridingTextField(inputValueState) { inputValueState = it }
OutlinedButton(onClick = {
scope.launch { onOverride(inputValueState) }
inputValueState = 0uL
}) {
Text("Override and continue")
}
}

@Composable
fun VocaDbIdOverridingTextField(
initialInputValue: ULong,
onValueChange: (ULong) -> Unit,
) {
var inputValue by mutableStateOf(initialInputValue.toLong())

OutlinedTextField(
value = inputValue.toString(),
onValueChange = {
inputValue = if (it.isBlank()) 0L else it.toLongOrNull() ?: return@OutlinedTextField
val toSetValue = if (inputValue >= 0L) inputValue.toULong() else 0UL
onValueChange(toSetValue)
},
keyboardOptions = KeyboardOptions.Default.copy(keyboardType = KeyboardType.Number),
)
val showNegativeNumberDialog by remember { derivedStateOf { inputValue < 0L } }
if (showNegativeNumberDialog) {
MyDefaultAlertDialog(
title = {
Row(
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(MaterialTheme.spacing.spacing),
) {
Icon(Icons.Default.Warning, contentDescription = "Warning")
Text(
"Invalid Song ID",
fontSize = MaterialTheme.typography.titleMedium.fontSize,
color = MaterialTheme.colorScheme.error
)
}
},
text = { Text("The VocaDB Song ID cannot be negative.") },
) {
inputValue = 0L
}
}
}


data class ResultOverridingPanelModel(
val onOverride: suspend (ULong) -> Unit,
val currentInputState: State<String>,
)
Loading

0 comments on commit 0afae02

Please sign in to comment.