diff --git a/client/src/AccountCard.svelte b/client/src/AccountCard.svelte index 2898436..937c728 100644 --- a/client/src/AccountCard.svelte +++ b/client/src/AccountCard.svelte @@ -41,7 +41,12 @@ //todo: CHeck here dispatch("createPopup",{ type: 'send_money', - iban, + account: { + type, + currency, + balance, + iban, + } }); } diff --git a/client/src/App.svelte b/client/src/App.svelte index b4c2c47..21c7b8d 100644 --- a/client/src/App.svelte +++ b/client/src/App.svelte @@ -5,6 +5,8 @@ import CreateAccount from "./CreateAccount.svelte"; import Login from "./Login.svelte"; import MainPage from "./MainPage.svelte"; +import Overlay from "./Overlay.svelte"; +import SendMoney from "./SendMoney.svelte"; import TopBorder from "./TopBorder.svelte"; let loggedin = true; @@ -26,6 +28,15 @@ import TopBorder from "./TopBorder.svelte"; break; case "create_acc_success": + var today = new Date(); + var date = today.getDate()+'/'+(today.getMonth()+1)+'/'+today.getFullYear(); + var time = today.getHours() + ":" + today.getMinutes(); + + notifications.push( + { + text: "The new account '" + event.detail.type+ "' was created successfully!", + time: time + " " + date, + }); isCreatingAccount = false; break; @@ -39,7 +50,7 @@ import TopBorder from "./TopBorder.svelte"; break; case "send_money": - sendingAccount = event.detail.iban; + sendingAccount = event.detail.account; isSendingMoney = true; break; @@ -47,9 +58,8 @@ import TopBorder from "./TopBorder.svelte"; isSendingMoney = false; break; - case "send_money_failed": + case "send_money_success": isSendingMoney = false; - alert(`Sending money failed! Reason: ${event.detail.reason}`); break; case "check_notifications": @@ -68,22 +78,41 @@ import TopBorder from "./TopBorder.svelte";
- {#if isCreatingAccount} - - {:else if isCheckingNotifications} - - {:else if isSendingMoney} - - {/if} +
{#if loggedin} - + + {#if isCreatingAccount} + +
+ +
+
+ {:else if isCheckingNotifications} + +
+ +
+
+ {:else if isSendingMoney} + +
+ +
+
+ {/if} + + + {:else} {/if} + +
+
diff --git a/client/src/CardBG.svelte b/client/src/CardBG.svelte index dec1ccd..3206098 100644 --- a/client/src/CardBG.svelte +++ b/client/src/CardBG.svelte @@ -1,12 +1,13 @@ -
+
diff --git a/client/src/CheckNotifications.svelte b/client/src/CheckNotifications.svelte index 8f84405..3fd21e8 100644 --- a/client/src/CheckNotifications.svelte +++ b/client/src/CheckNotifications.svelte @@ -5,7 +5,7 @@ import Icon from "@iconify/svelte"; import { fade, fly, slide } from 'svelte/transition'; import { flip } from 'svelte/animate'; -import DetailField from "./DetailField.svelte"; + import DetailField from "./DetailField.svelte"; const dispatch = createEventDispatcher(); @@ -19,15 +19,15 @@ import DetailField from "./DetailField.svelte";
-
- +
+

Inbox

-
+
{#each notifications as notification,i (i)}
diff --git a/client/src/CreateAccount.svelte b/client/src/CreateAccount.svelte index 3882661..f955190 100644 --- a/client/src/CreateAccount.svelte +++ b/client/src/CreateAccount.svelte @@ -4,7 +4,10 @@ import CardBG from "./CardBG.svelte"; import InputField from "./InputField.svelte"; import {createEventDispatcher} from 'svelte'; -import Icon from "@iconify/svelte"; + import Icon from "@iconify/svelte"; + import Overlay from "./Overlay.svelte"; + import { fade, fly, slide } from 'svelte/transition'; + import { flip } from 'svelte/animate'; const dispatch = createEventDispatcher(); @@ -24,7 +27,7 @@ import Icon from "@iconify/svelte"; alert("Terms of Service not accepted!"); }else{ //TODO Create account with provided details on the server - dispatch("createPopup",{type:"create_acc_success"}); + dispatch("createPopup",{type:"create_acc_success", account:{type:type, currency:currency, transactions:[]}}); } } @@ -42,39 +45,43 @@ import Icon from "@iconify/svelte"; -
-
- -
-

Open a new account

- -
-
- -
-

Account name:

- -
- -
-

Currency:

- -
-
-

Terms of Service:

- -

I have read and accepted the terms and conditions for creating a new account at FOXBANK.

-
- +
+
+ +
+
+

Open a new account

+ +
+
-
+
+

Account name:

+ +
+ +
+

Currency:

+ +
-
- Confirm -
- - +
+

Terms of Service:

+ +

I have read and accepted the terms and conditions for creating a new account at FOXBANK.

+
+ + +
+
+ +
+
+ Confirm +
+ +
+
+
- -
\ No newline at end of file diff --git a/client/src/MainPage.svelte b/client/src/MainPage.svelte index fb2cda3..9739762 100644 --- a/client/src/MainPage.svelte +++ b/client/src/MainPage.svelte @@ -11,7 +11,7 @@ let username = "Firstname Lastname"; let code = ""; - let totalbalance = "2455,22"; + let totalbalance = "2455.22"; let maincurrency = "RON"; let expandedAccount = null; let showAllAccounts = true; @@ -21,34 +21,31 @@ {time: "15:38 27/11/2021", text: "A notification's text but way longer absdb aybdbaysbdya bybdabs bdabsd absdb aybdbaysbdya bybdabs bdabsd absdb aybdbaysbdya bybdabs bdabsd absdb aybdbaysbdya bybdabs bdabsd absdb aybdbaysbdya bybdabs bdabsd absdb aybdbaysbdya bybdabs bdabsd absdb aybdbaysbdya bybdabs bdabsd absdb aybdbaysbdya bybdabs bdabsd absdb aybdbaysbdya bybdabs bdabsd."}, {time: "15:38 27/11/2021", text: "A notification's text."}, {time: "15:38 27/11/2021", text: "A notification's text."}, - {time: "15:38 27/11/2021", text: "A notification's text."}, - {time: "15:38 27/11/2021", text: "A notification's text."}, - {time: "15:38 27/11/2021", text: "A notification's text."}, + ]; let accounts = [ - {type:"RON Account", currency:"RON", balance:"420,42", iban:"RONFOX62188921", + {type:"RON Account", currency:"RON", balance:"420.42", iban:"RONFOX62188921", transactions: [ - {title:"Transaction Name#1", status:"PROCESSED", amount:"-45,09", time:"15:38 27/11/2021", type:"send"}, - {title:"Transaction Name#2", status:"PENDING", amount:"+25,00", time:"15:38 27/11/2021", type:"received"}, - {title:"Transaction Name#3", status:"CANCELLED", amount:"-469,09", time:"15:38 27/11/2021", type:"send"}, - {title:"Transaction Name#1", status:"PROCESSED", amount:"-45,09", time:"15:38 27/11/2021", type:"send"}, - {title:"Transaction Name#2", status:"PENDING", amount:"+25,00", time:"15:38 27/11/2021", type:"received"}, - {title:"Transaction Name#3", status:"CANCELLED", amount:"-469,09", time:"15:38 27/11/2021", type:"send"}, - {title:"Transaction Name#1", status:"PROCESSED", amount:"-45,09", time:"15:38 27/11/2021", type:"send"}, - {title:"Transaction Name#2", status:"PENDING", amount:"+25,00", time:"15:38 27/11/2021", type:"received"}, - {title:"Transaction Name#3", status:"CANCELLED", amount:"-469,09", time:"15:38 27/11/2021", type:"send"}, + {title:"Transaction Name#1", status:"PROCESSED", amount:"-45.09", time:"15:38 27/11/2021", type:"send"}, + {title:"Transaction Name#2", status:"PENDING", amount:"+25.00", time:"15:38 27/11/2021", type:"received"}, + {title:"Transaction Name#3", status:"CANCELLED", amount:"-469.09", time:"15:38 27/11/2021", type:"send"}, + {title:"Transaction Name#1", status:"PROCESSED", amount:"-45.09", time:"15:38 27/11/2021", type:"send"}, + {title:"Transaction Name#2", status:"PENDING", amount:"+25.00", time:"15:38 27/11/2021", type:"received"}, + {title:"Transaction Name#3", status:"CANCELLED", amount:"-469.09", time:"15:38 27/11/2021", type:"send"}, + {title:"Transaction Name#1", status:"PROCESSED", amount:"-45.09", time:"15:38 27/11/2021", type:"send"}, + {title:"Transaction Name#2", status:"PENDING", amount:"+25.00", time:"15:38 27/11/2021", type:"received"}, + {title:"Transaction Name#3", status:"CANCELLED", amount:"-469.09", time:"15:38 27/11/2021", type:"send"}, ] }, {type:"EUR Account", currency:"EUR", balance:"620,42", iban:"EURFOX62188921", transactions: [ - {title:"Transaction Name#2", status:"PENDING", amount:"+25,00", time:"15:38 27/11/2021", type:"received"}, - {title:"Transaction Name#1", status:"PROCESSED", amount:"-45,09", time:"15:38 27/11/2021", type:"send"}, - {title:"Transaction Name#3", status:"CANCELLED", amount:"-469,09", time:"15:38 27/11/2021", type:"send"}, + {title:"Transaction Name#2", status:"PENDING", amount:"+25.00", time:"15:38 27/11/2021", type:"received"}, + {title:"Transaction Name#1", status:"PROCESSED", amount:"-45.09", time:"15:38 27/11/2021", type:"send"}, + {title:"Transaction Name#3", status:"CANCELLED", amount:"-469.09", time:"15:38 27/11/2021", type:"send"}, ] }, ]; - function dispatchLogout(){ //todo: CHeck here @@ -99,7 +96,7 @@ {#if showAllAccounts} {#each accounts as account,i}
- expanded(i)}> + expanded(i)} on:createPopup>
{/each} {/if} diff --git a/client/src/OrangeButton.svelte b/client/src/OrangeButton.svelte index ae163b4..3fe1471 100644 --- a/client/src/OrangeButton.svelte +++ b/client/src/OrangeButton.svelte @@ -1,11 +1,12 @@ -
+
diff --git a/client/src/Overlay.svelte b/client/src/Overlay.svelte new file mode 100644 index 0000000..b3f3c16 --- /dev/null +++ b/client/src/Overlay.svelte @@ -0,0 +1,36 @@ + + +
+
+ +
+
+ + \ No newline at end of file diff --git a/client/src/SendMoney.svelte b/client/src/SendMoney.svelte index 3882661..c912bad 100644 --- a/client/src/SendMoney.svelte +++ b/client/src/SendMoney.svelte @@ -4,77 +4,89 @@ import CardBG from "./CardBG.svelte"; import InputField from "./InputField.svelte"; import {createEventDispatcher} from 'svelte'; -import Icon from "@iconify/svelte"; + import Icon from "@iconify/svelte"; + import Overlay from "./Overlay.svelte"; + import TextareaField from "./TextareaField.svelte"; + import { fade, fly, slide } from 'svelte/transition'; + import { flip } from 'svelte/animate'; const dispatch = createEventDispatcher(); - let type = ""; - let currencies = ["RON", "EUR"]; - let currency = currencies[0]; - let termsAccepted = false; + export let account={type: "", currency:"", balance:0}; + let receivername=""; + let receiveriban=""; + let amount=0.00; + let description=""; + + let send_details={receivername:"", receiveriban:"", amount:0, description:""}; function create(){ - if(type == "" || type == null) { - alert("Account Name field can not be empty!"); - console.debug(`account name: ${type}`) - }else if(!currencies.includes(currency)){ - alert("Currency is not supported!"); - }else if (!termsAccepted){ - alert("Terms of Service not accepted!"); + if(receivername == "" || receivername == null) { + alert("Receiver's name field can not be empty!"); + }else if(receiveriban == "" || receiveriban == null){ + alert("Receiver's iBan field can not be empty!"); + }else if (amount > parseFloat(account.balance) ){ + alert("Not enough money in your account!"); + }else if (amount <= 0.00 ){ + alert("Insert a valid amount!"); }else{ //TODO Create account with provided details on the server - dispatch("createPopup",{type:"create_acc_success"}); + send_details={receivername:receivername, receiveriban:receiveriban, amount:amount, description:description} + dispatch("createPopup",{type:"send_money_success", send_details:{send_details}}); } } - function cancelCreate(){ - dispatch("createPopup",{type:"create_acc_cancelled"}); + function cancelSend(){ + dispatch("createPopup",{type:"send_money_cancelled"}); } - function failCreate(){ - dispatch("createPopup",{type:"create_acc_failed", reason:"Invalid arguments. [type: "+type+", currency: "+currency}); - } - - function termsOfService() { - termsAccepted = !termsAccepted; - } -
-
- -
-

Open a new account

- + +
+ +
+
+

Send money

+ from + {account.type} +
- +
-

Account name:

- +

Receiver's full name:

+
-

Currency:

- -
- -
-

Terms of Service:

- -

I have read and accepted the terms and conditions for creating a new account at FOXBANK.

+

IBAN:

+
+ +
+

Amount:

+ + {account.currency} + +
- -
- -
- Confirm +
+

Description:

+
- - -
- -
\ No newline at end of file +
+ + +
+ +
+
+ Confirm +
+ + +
+ diff --git a/client/src/TextareaField.svelte b/client/src/TextareaField.svelte new file mode 100644 index 0000000..c034ad8 --- /dev/null +++ b/client/src/TextareaField.svelte @@ -0,0 +1,48 @@ + + +
+ +
+ + +