Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Transaction details modal. #19

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Transaction details modal. #19

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
29f27a1
Transaction details modal.
mh7x May 14, 2023
8694701
Minigame.
kkeroo May 14, 2023
3a1cab2
Merge branch 'jasa' into tomaz
kkeroo May 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
156 changes: 144 additions & 12 deletions frontend/src/GroupView.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React, { useState } from "react";
import { Button, Modal } from "react-bootstrap";
import { useNavigate } from 'react-router-dom';

const GROUP_USERS = [
{
Expand Down Expand Up @@ -28,16 +29,19 @@ const GROUP_TRANSACTIONS = [
{
id: "t1",
name: "Gas",
owner: "Regan Short",
amount: "70,00",
},
{
id: "t2",
name: "Groceries",
owner: "Sadia Bruce",
amount: "35,23",
},
{
id: "t3",
name: "Tickets",
owner: "Jonah Potts",
amount: "60,60",
},
];
Expand All @@ -48,13 +52,29 @@ const GroupView = (props) => {
const [showFundsModal, setShowFundsModal] = useState(false);
const [showTransactionModal, setShowTransactionModal] = useState(false);
const [showPeopleModal, setShowPeopleModal] = useState(false);
const [showDetailsModal, setShowDetailsModal] = useState(false);
const [transactionDetails, setTransactionDetails] = useState();
const [showCloseModal, setShowCloseModal] = useState(false);
const [showMinigameModal, setshowMinigameModal] = useState(false);
const [firstPress, setFirstPress] = useState(false);
const [score, setScore] = useState(0);
const [startTime, setStartTime] = useState(0);
const [finishGame, setFinishGame] = useState(false);

const hideFundsModal = () => setShowFundsModal(false);
const openFundsModal = () => setShowFundsModal(true);
const hideTransactionModal = () => setShowTransactionModal(false);
const openTransactionModal = () => setShowTransactionModal(true);
const hidePeopleModal = () => setShowPeopleModal(false);
const openPeopleModal = () => setShowPeopleModal(true);
const hideDetailsModal = () => setShowDetailsModal(false);
const openDetailsModal = () => setShowDetailsModal(true);
const hideCloseModal = () => setShowCloseModal(false);
const openCloseModal = () => setShowCloseModal(true);
const hideMinigameModal = () => setshowMinigameModal(false);
const openMinigameModal = () => setshowMinigameModal(true);

let timer = null;

const [groupUsers, setGroupUsers] = useState(GROUP_USERS);
const addUser = () => {
Expand Down Expand Up @@ -92,7 +112,8 @@ const GroupView = (props) => {
const newTransaction = {
id: "t4",
name: transactionName,
amount: transactionAmount,
owne: "Sadia Bruce",
amount: transactionAmount
};

const newValue = groupAmount - transactionAmount;
Expand All @@ -101,8 +122,17 @@ const GroupView = (props) => {
hideTransactionModal();
};


const handleShowDetails = (transaction) => {
openDetailsModal();
setTransactionDetails(transaction);
}

const navigate = useNavigate();


const transactionList = groupTransactions.map((transaction) => (
<div className="list-item d-flex flex-row justify-content-between" key={transaction.id}>
<div className="list-item d-flex flex-row justify-content-between" key={transaction.id} onClick={() => handleShowDetails(transaction)} >
<div>
<div className="list-item__title">{transaction.name}</div>
<div className="list-item__desc light subtitle">Amount: {transaction.amount}</div>
Expand All @@ -111,6 +141,36 @@ const GroupView = (props) => {
</div>
));

const playMinigame = () => {
hideCloseModal();
openMinigameModal();
setFirstPress(false);
setScore(0);
};

const handleClickMe = () => {
let time = new Date();
if (!firstPress) {
setFirstPress(true);
setScore(1);
setStartTime(time);
}
else {
let diff = Math.abs(time.getTime() - startTime.getTime()) / 1000;
if (diff > 3) {
setFinishGame(true);
}
else {
setScore(score + 1);
}

}
}

const endGame = () => {
alert(score);
}

return (
<div className="mb-5">
<Modal show={showFundsModal} onHide={hideFundsModal}>
Expand Down Expand Up @@ -141,7 +201,7 @@ const GroupView = (props) => {
</div>
</div>
</Modal.Body>
<Modal.Footer className="justify-content-center">
<Modal.Footer className="justify-content-center border-0">
<Button className="btn btn-primary btn-icon my-1" onClick={addFunds}>
Add funds
<img src="./assets/img/icons/check.svg" />
Expand All @@ -154,22 +214,56 @@ const GroupView = (props) => {
<Modal.Title>Add transaction</Modal.Title>
</Modal.Header>
<Modal.Body className="p-4">
<div className="input-group my-2">
<div className="input-group mb-3">
<input type="text" className="form-control input input-text" id="transactionName" placeholder="Transaction name" />
</div>
<div className="input-group input-group-icon my-4">
<div className="input-group input-group-icon mb-3">
<input type="number" className="form-control input input-icon" id="transactionAmount" placeholder="Price" />
<img src="./assets/img/icons/currency-eur.svg" className="img-fluid" height="20" width="20" />
</div>
</Modal.Body>
<Modal.Footer className="justify-content-center">
<Modal.Footer className="justify-content-center border-0">
<Button className="btn btn-primary btn-icon my-1" onClick={addTransaction}>
Add transaction
<img src="./assets/img/icons/check.svg" />
</Button>
</Modal.Footer>
</Modal>

<Modal show={showCloseModal} onHide={hideCloseModal}>
<Modal.Header closeButton>
<Modal.Title>Close group</Modal.Title>
</Modal.Header>
<Modal.Body className="p-4">
</Modal.Body>
<Modal.Footer className="justify-content-center">
<Button className="btn btn-primary btn-icon my-1" onClick={playMinigame}>
Play minigame
<img src="./assets/img/icons/check.svg" />
</Button>
<Button className="btn btn-dark btn-icon my-1" onClick={addTransaction}>
Split equally
<img src="./assets/img/icons/cash-multiple.svg" />
</Button>
</Modal.Footer>
</Modal>

<Modal show={showMinigameModal} onHide={hideMinigameModal}>
<Modal.Header closeButton>
<Modal.Title>Minigame</Modal.Title>
</Modal.Header>
<Modal.Body className="p-4 text-center">
<div class="subtitle">Play minigame and win the remaining funds. Press the button as many times as you can in 3 seconds.</div>
<div className="title my-2">Score: <span class="primary">{score}</span></div>
<a onClick={handleClickMe} hidden={finishGame} class="btn btn-primary btn-icon my-3">
Click me!
<img src="./assets/img/icons/check.svg" />
</a>
<div className="subtitle my-2" hidden={!finishGame}>Your score is <span className="primary">{score}</span>, which is more than your friends.<br /> You get <span className="title">{AMOUNT}</span> €.</div>
<a hidden={!finishGame} onClick={() => navigate('/home')} class="btn btn-dark btn-text my-1">Back to home screen</a>
</Modal.Body>
</Modal>

<Modal show={showPeopleModal} onHide={hidePeopleModal}>
<Modal.Header closeButton>
<Modal.Title>Add user</Modal.Title>
Expand All @@ -180,14 +274,42 @@ const GroupView = (props) => {
<div className="label">You can add up to 10 users.</div>
</div>
</Modal.Body>
<Modal.Footer className="justify-content-center">
<Modal.Footer className="justify-content-center border-0">
<Button className="btn btn-primary btn-icon my-1" onClick={addUser}>
Add user
<img src="./assets/img/icons/check.svg" />
</Button>
</Modal.Footer>
</Modal>

<Modal show={showDetailsModal} onHide={hideDetailsModal}>
<Modal.Header closeButton>
<Modal.Title>Transaction details</Modal.Title>
</Modal.Header>
<Modal.Body className="p-4">
<div className="transaction-modal">
<div className="transaction-info mb-3">
<div className="transaction-info__label subtitle primary">Transaciton title</div>
<div className="transaction-info__text title">{transactionDetails.name}</div>
</div>
<div className="transaction-info mb-3">
<div className="transaction-info__label subtitle primary">Transaciton creator</div>
<div className="transaction-info__text title">{transactionDetails.owner}</div>
</div>
<div className="transaction-info">
<div className="transaction-info__label subtitle primary">Amount</div>
<div className="transaction-info__text title">{transactionDetails.amount}</div>
</div>
</div>
</Modal.Body>
<Modal.Footer className="justify-content-center border-0">
<Button className="btn btn-dark btn-icon my-1" onClick={hideDetailsModal}>
Close
<img src="./assets/img/icons/window-close.svg" />
</Button>
</Modal.Footer>
</Modal>

<div className="container mt-3">
<a className="breadcrumbs d-flex flex-row mb-3" href="#">
<img src="./assets/img/icons/back-arrow.svg" className="img-fluid me-2" />
Expand Down Expand Up @@ -217,11 +339,15 @@ const GroupView = (props) => {
<div className="mt-5 col-12 col-md-4 text-center">
<div className="title">Group users</div>
<div className="group-users">
<div className="row">{usersList}</div>
<Button onClick={openPeopleModal} className="btn btn-dark btn-icon mt-3">
Add user
<img src="./assets/img/icons/plus.svg" />
</Button>
<div className="row">
{usersList}
<div className="col-4">
<div onClick={openPeopleModal} className="user add-user d-flex flex-column justify-content-evenly align-items-center text-center my-2 p-3 cursor-pointer">
<img src="./assets/img/icons/plus.svg" className="img-fluid" height="40" width="40" />
<div className="user-username">Add user</div>
</div>
</div>
</div>
</div>
</div>
<div className="mt-5 col-12 col-md-4">
Expand All @@ -231,6 +357,12 @@ const GroupView = (props) => {
</div>
</div>
</div>
<div className="text-center mt-5">
<a onClick={openCloseModal} class="btn btn-dark btn-icon my-1">
Close group
<img src="./assets/img/icons/window-close.svg" />
</a>
</div>
</div>
</div>
);
Expand Down
6 changes: 3 additions & 3 deletions frontend/src/Home.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const NewGroup = (props) => {

const handleAddGroup = () => {
props.setGroups([
{gid: '1', name: 'Summer Ibiza 2k23', budget: 450, users: ['2131', 'sada', '23121', 'sd', 's']},
{gid: '1', name: 'Summer Ibiza 2k23', budget: 402.52, users: ['2131', 'sada', '23121', 'sd', 's']},
{gid: '2', name: 'Skiing 2k22', budget: 1000, users: ['2131', 'sada']},
{gid: '3', name: 'Trip to Vienna', budget: 500, users: ['Sadia Bruce', 'Eryn Hobbs', 'Everly Clark']}
])
Expand Down Expand Up @@ -54,7 +54,7 @@ const NewGroup = (props) => {
const Home = (props) => {
const navigate = useNavigate();
const [groups, setGroups] = useState([
{gid: '1', name: 'Summer Ibiza 2k23', budget: 450, users: ['2131', 'sada', '23121', 'sd', 's']},
{gid: '1', name: 'Summer Ibiza 2k23', budget: 402.52, users: ['2131', 'sada', '23121', 'sd', 's']},
{gid: '1', name: 'Skiing 2k22', budget: 1000, users: ['2131', 'sada']}
]);
const [show, setShow] = useState(false);
Expand All @@ -66,7 +66,7 @@ const Home = (props) => {
<div className="col-md-4 mt-4">
<div class="list list-group">
{groups.map((group, i) => {
return (<div class="list-item" key={group.gid} onClick={() => {navigate('/group-details')}}>
return (<div class="list-item" key={group.gid} onClick={() => {navigate('/group')}}>
<div class="list-item__title">{group.name}</div>
<div class="list-item__details d-flex flex-row justify-content-between">
<div class="details-people primary subtitle">{group.users.length} users</div>
Expand Down
4 changes: 4 additions & 0 deletions frontend/src/assets/scss/base/_body.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,4 +29,8 @@ a {

.primary {
color: $brand-primary;
}

.transaction-info__text {
line-height: 1;
}
5 changes: 4 additions & 1 deletion frontend/src/assets/scss/components/_list-items.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@
border-bottom: none;
}


&:only-of-type {
border: 1px solid #4e4e4e26 !important;
}
Expand All @@ -23,6 +22,10 @@
border-top: none;
}

&:hover {
cursor: pointer;
}

img.info, .invite-accept {
filter: brightness(0) saturate(100%) invert(78%) sepia(17%) saturate(1454%) hue-rotate(344deg) brightness(90%) contrast(89%);
}
Expand Down
7 changes: 7 additions & 0 deletions frontend/src/assets/scss/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,10 @@ a:hover {
color: #DBA553;
}

.transaction-info__text {
line-height: 1;
}

/*!
* Bootstrap v5.3.0-alpha3 (https://getbootstrap.com/)
* Copyright 2011-2023 The Bootstrap Authors
Expand Down Expand Up @@ -12068,6 +12072,9 @@ textarea.form-control-lg {
border-bottom-right-radius: 10px;
border-top: none;
}
.list-item:hover {
cursor: pointer;
}
.list-item img.info, .list-item .invite-accept {
filter: brightness(0) saturate(100%) invert(78%) sepia(17%) saturate(1454%) hue-rotate(344deg) brightness(90%) contrast(89%);
}
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/assets/scss/style.css.map
View file
Open in desktop

Large diffs are not rendered by default.