Implemented retrieving and displaying account transactions in WebApp
This commit is contained in:
parent
179b7afbf2
commit
2788c0e686
|
|
@ -6,6 +6,7 @@ build/
|
||||||
out/
|
out/
|
||||||
**/out
|
**/out
|
||||||
/captures
|
/captures
|
||||||
|
**/kotlin-js-store
|
||||||
|
|
||||||
.gradle
|
.gradle
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -3,12 +3,6 @@ plugins {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
repositories {
|
|
||||||
mavenCentral()
|
|
||||||
google()
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
dependencies {
|
dependencies {
|
||||||
implementation "org.jetbrains.kotlin:kotlin-stdlib-js"
|
implementation "org.jetbrains.kotlin:kotlin-stdlib-js"
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,56 @@
|
||||||
|
import net.dankito.banking.fints.FinTsClientDeprecated
|
||||||
|
import net.dankito.banking.fints.model.AccountTransaction
|
||||||
|
import net.dankito.banking.fints.model.AddAccountParameter
|
||||||
|
import react.RBuilder
|
||||||
|
import react.RComponent
|
||||||
|
import react.Props
|
||||||
|
import react.State
|
||||||
|
import react.dom.*
|
||||||
|
import styled.styledDiv
|
||||||
|
|
||||||
|
external interface AccountTransactionsViewProps : Props {
|
||||||
|
var client: FinTsClientDeprecated
|
||||||
|
}
|
||||||
|
|
||||||
|
data class AccountTransactionsViewState(val balance: String, val transactions: Collection<AccountTransaction>) : State
|
||||||
|
|
||||||
|
@JsExport
|
||||||
|
class AccountTransactionsView(props: AccountTransactionsViewProps) : RComponent<AccountTransactionsViewProps, AccountTransactionsViewState>(props) {
|
||||||
|
|
||||||
|
|
||||||
|
init {
|
||||||
|
state = AccountTransactionsViewState("", listOf())
|
||||||
|
|
||||||
|
// due to CORS your bank's servers can not be requested directly from browser -> set a CORS proxy url in main.kt
|
||||||
|
// TODO: set your credentials here
|
||||||
|
props.client.addAccountAsync(AddAccountParameter("", "", "", "")) { response ->
|
||||||
|
if (response.successful) {
|
||||||
|
val balance = response.retrievedData.sumOf { it.balance?.amount?.string?.replace(',', '.')?.toDoubleOrNull() ?: 0.0 } // i know, double is not an appropriate data type for amounts
|
||||||
|
|
||||||
|
setState(AccountTransactionsViewState(balance.toString() + " " + (response.retrievedData.firstOrNull()?.balance?.currency ?: ""), response.retrievedData.flatMap { it.bookedTransactions }))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
override fun RBuilder.render() {
|
||||||
|
p {
|
||||||
|
+"Saldo: ${state.balance}"
|
||||||
|
}
|
||||||
|
|
||||||
|
div {
|
||||||
|
state.transactions.forEach { transaction ->
|
||||||
|
div {
|
||||||
|
styledDiv {
|
||||||
|
if (transaction.showOtherPartyName) {
|
||||||
|
div { transaction.otherPartyName }
|
||||||
|
}
|
||||||
|
|
||||||
|
div {
|
||||||
|
+transaction.reference
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,5 +1,20 @@
|
||||||
import kotlinx.browser.document
|
import kotlinx.browser.document
|
||||||
|
import kotlinx.browser.window
|
||||||
|
import net.dankito.banking.fints.FinTsClientDeprecated
|
||||||
|
import net.dankito.banking.fints.callback.SimpleFinTsClientCallback
|
||||||
|
import net.dankito.banking.fints.webclient.KtorWebClient
|
||||||
|
import net.dankito.banking.fints.webclient.ProxyingWebClient
|
||||||
|
import react.dom.render
|
||||||
|
|
||||||
fun main() {
|
fun main() {
|
||||||
document.write("Hello, world!")
|
window.onload = {
|
||||||
|
render(document.getElementById("root")!!) {
|
||||||
|
child(AccountTransactionsView::class) {
|
||||||
|
attrs {
|
||||||
|
// to circumvent CORS we have to use a CORS proxy like https://github.com/Rob--W/cors-anywhere. Set CORS proxy's URL here
|
||||||
|
client = FinTsClientDeprecated(SimpleFinTsClientCallback(), ProxyingWebClient("http://localhost:8082/", KtorWebClient()))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1,11 +1,11 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>fints4k WebApp</title>
|
<title>fints4k WebApp</title>
|
||||||
<script src="WebApp.js"></script>
|
<script src="WebApp.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
package net.dankito.banking.fints.webclient
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* In browsers we cannot request bank servers directly due to CORS. So this 'WebClient' prepends each server url with CORS proxy's url and delegates then the
|
||||||
|
* call to a real IWebClient implementation.
|
||||||
|
*/
|
||||||
|
class ProxyingWebClient(proxyUrl: String, private val delegate: IWebClient) : IWebClient {
|
||||||
|
|
||||||
|
private val proxyUrl = if (proxyUrl.endsWith("/")) proxyUrl else proxyUrl + "/"
|
||||||
|
|
||||||
|
|
||||||
|
override fun post(url: String, body: String, contentType: String, userAgent: String, callback: (WebClientResponse) -> Unit) {
|
||||||
|
delegate.post(proxyUrl + url, body, contentType, userAgent, callback)
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue