Commit 6fd15a3e authored by Lukas Budginas's avatar Lukas Budginas Committed by Kristupas Bobraitis
Browse files

add bem naming

parent 3a674e99
......@@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
import styles from "./App.module.css";
import Parameters from "../Parameters/Parameters"; // <==== HERE PAREMETERS = INPUT FIELDS
import moment from "moment";
import Charts from "../Charts";
import Charts from "../Charts/Charts";
import { Alert, AlertTitle } from "@mui/material";
export default function App() {
......@@ -22,7 +22,7 @@ export default function App() {
// ////////////////////////////////// Get data of all names
const accountNamesData = JSON.stringify({ _partial_account_name: value });
console.log(currentStartBlock, currentEndBlock);
// fetch account names
useEffect(() => {
fetch("http://localhost:3000/rpc/find_matching_accounts", {
......@@ -52,22 +52,25 @@ export default function App() {
setFindCurrency37(() => currency.filter((num) => num === 37 && num));
};
const renderContent = () => {
function renderContent() {
if (accountName) {
if (currentStartBlock < currentEndBlock) {
return true;
} else if (currentStartDate < currentEndDate) {
return true;
} else {
} else if (currentStartBlock >= currentEndBlock) {
return false;
} else if (currentStartDate >= currentEndDate) {
return false;
} else if (startBlock === "" || endBlock === "") {
return false;
}
}
};
}
return (
<div>
<div className={styles.container}>
<div className={styles.container__input}>
<div className={styles.container__form}>
<Parameters
startBlock={startBlock}
endBlock={endBlock}
......@@ -90,18 +93,12 @@ export default function App() {
</div>
{renderContent() === true ? (
<>
<div
style={{
display: "flex",
flexDirection: "column",
textAlign: "center",
}}
>
<div className={styles.content}>
<h1>Showing balances for {accountName}</h1>
<Alert severity="info">
<div style={{ textAlign: "left" }}>
<div className={styles.alert}>
<AlertTitle>Information</AlertTitle>
<p style={{ color: "red" }}>
<p className={styles.alert__paragraph}>
IMPORTANT : When switching from blocks to dates , you may
need to reset chart !
</p>
......@@ -111,24 +108,15 @@ export default function App() {
in case no values is shown
</li>
<li>
ZOOM IN button zooms chart 5% on every click and always
showing 1000 points on chart X axis. If you want to zoom in
any exact point, use your mouse wheel, or pinch
ZOOM IN button zooms chart on every click and always showing
1000 points on chart X axis. If you want to zoom in any
exact point, use your mouse wheel, or pinch
</li>
</div>
</Alert>
</div>
<div
className="charts-container"
style={{
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
marginTop: "50px",
}}
>
<div className={styles.content__charts}>
<Charts
accountName={accountName}
currentStartBlock={currentStartBlock}
......
......@@ -5,14 +5,28 @@
align-items: center;
}
.container__input {
.container__form {
margin-bottom: 50px;
}
.hide {
display: none;
.content {
display: flex;
flex-direction: column;
text-align: center;
}
.alert {
text-align: left;
}
.alert__paragraph {
color: red;
}
.showChart {
display: block;
.content__charts {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 50px;
}
......@@ -11,6 +11,7 @@ import {
import zoomPlugin from "chartjs-plugin-zoom";
import { Line } from "react-chartjs-2";
import { Button, Stack } from "@mui/material";
import styles from "./chartForCoin.module.css";
Chart.register(
CategoryScale,
......@@ -176,22 +177,15 @@ export default function LineChart({
};
return (
<div
style={{
width: "70vw",
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
>
<div className={styles.chartFor13}>
<Line
data={showingBlocksChart === true ? chartData13 : chartDatesData13}
options={chartOptions13}
ref={chartRef13}
/>
<Stack style={{ marginLeft: "50px" }} spacing={2}>
<Stack className={styles.chartFor13__stack} spacing={2}>
<Button
style={{ marinBottom: "25px" }}
className={styles["stack__button--reset"]}
variant="outlined"
onClick={handleResetChartFor13}
>
......
......@@ -11,6 +11,7 @@ import {
import zoomPlugin from "chartjs-plugin-zoom";
import { Line } from "react-chartjs-2";
import { Button, Stack } from "@mui/material";
import styles from "./chartForCoin.module.css";
Chart.register(
CategoryScale,
......@@ -177,22 +178,15 @@ export default function LineChart({
};
return (
<div
style={{
width: "70vw",
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
>
<div className={styles.chartFor21}>
<Line
data={showingBlocksChart === true ? chartData21 : chartDatesData21}
options={chartOptions21}
ref={chartRef21}
/>
<Stack style={{ marginLeft: "50px" }} spacing={2}>
<Stack className={styles.chartFor21__stack} spacing={2}>
<Button
style={{ marinBottom: "25px" }}
className={styles["stack__button--reset"]}
variant="outlined"
onClick={handleResetChartFor21}
>
......
......@@ -11,6 +11,7 @@ import {
import zoomPlugin from "chartjs-plugin-zoom";
import { Line } from "react-chartjs-2";
import { Button, Stack } from "@mui/material";
import styles from "./chartForCoin.module.css";
Chart.register(
CategoryScale,
......@@ -178,22 +179,15 @@ export default function LineChart({
};
return (
<div
style={{
width: "70vw",
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
>
<div className={styles.chartFor37}>
<Line
data={showingBlocksChart === true ? chartData37 : chartDatesData37}
options={chartOptions37}
ref={chartRef37}
/>
<Stack style={{ marginLeft: "50px" }} spacing={2}>
<Stack className={styles.chartFor37__stack} spacing={2}>
<Button
style={{ marinBottom: "25px" }}
className={styles["stack__button--reset"]}
variant="outlined"
onClick={handleResetChartFor37}
>
......
.chartFor13,
.chartFor21,
.chartFor37 {
width: 70vw;
display: flex;
justify-content: center;
align-items: center;
}
.chartFor13__stack,
.chartFor21__stack,
.chartFor37__stack {
margin-left: 50px;
}
.stack__button--reset {
margin-bottom: 25px;
}
import React from "react";
import ChartFor13 from "./ChartForCoin/ChartFor13";
import ChartFor21 from "./ChartForCoin/ChartFor21";
import ChartFor37 from "./ChartForCoin/ChartFor37";
import styles from "./App/App.module.css";
import ChartFor13 from "../ChartForCoin/ChartFor13";
import ChartFor21 from "../ChartForCoin/ChartFor21";
import ChartFor37 from "../ChartForCoin/ChartFor37";
import styles from "./charts.module.css";
export default function AllChartsSecond({
accountName,
......@@ -15,17 +15,13 @@ export default function AllChartsSecond({
currentEndDate,
}) {
return (
<div
style={{
width: "70vw",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
}}
>
<div className={styles.charts}>
<div
className={findCurrency13[0] === 13 ? styles.showChart : styles.hide}
className={
findCurrency13[0] === 13
? styles["charts--show"]
: styles["charts--hidden"]
}
>
<ChartFor13
accountName={accountName}
......@@ -37,7 +33,11 @@ export default function AllChartsSecond({
/>
</div>
<div
className={findCurrency21[0] === 21 ? styles.showChart : styles.hide}
className={
findCurrency21[0] === 21
? styles["charts--show"]
: styles["charts--hidden"]
}
>
<ChartFor21
accountName={accountName}
......@@ -49,7 +49,11 @@ export default function AllChartsSecond({
/>
</div>
<div
className={findCurrency37[0] === 37 ? styles.showChart : styles.hide}
className={
findCurrency37[0] === 37
? styles["charts--show"]
: styles["charts--hidden"]
}
>
<ChartFor37
accountName={accountName}
......
.charts--hidden {
display: none;
}
.charts--show {
display: block;
}
.charts {
width: 70vw;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
import React from "react";
import {
List,
ListItem,
ListItemButton,
ListItemText,
Divider,
} from "@mui/material";
import styles from "./Dropdown.module.css";
export default function Dropdown({ names, value, setValue }) {
const renderDropdown = () => {
if (names === null) {
return console.log("No Names");
}
if (!value || value === names[0]) {
return styles["dropdown__container-hide"];
}
if (value.length >= 1) {
return styles["dropdown__container-show"];
}
};
return (
<>
<div className={renderDropdown()} aria-label="secondary mailbox folders">
<List className={styles["dropdown__list"]}>
{names ? (
names.map((name, index) => {
function handleOnClickName() {
setValue(name);
}
return (
<div key={index}>
<ListItem disablePadding>
<ListItemButton onClick={handleOnClickName}>
<ListItemText primary={name} />
</ListItemButton>
</ListItem>
<Divider />
</div>
);
})
) : (
<div className={styles.noNamesError}>
<p>No Names</p>
</div>
)}
</List>
</div>
</>
);
}
.dropdown__list {
padding: 0 !important;
}
.dropdown__container-show {
display: block;
max-height: 200px;
width: 198px;
position: absolute;
left: 367px;
top: 105px;
overflow: auto;
border-left: 1px solid rgba(0, 0, 0, 0.23);
border-right: 1px solid rgba(0, 0, 0, 0.23);
border-bottom: 1px solid rgba(0, 0, 0, 0.23);
border-bottom-left-radius: 4px !important;
border-bottom-right-radius: 4px !important;
}
.dropdown__container-hide {
display: none;
}
.noNamesError {
color: red;
margin-left: 20px;
}
......@@ -3,7 +3,7 @@ import styles from "./ErrorUI.module.css";
export default function ErrorUI() {
return (
<div className={styles["error--container"]}>
<div className={styles.container}>
<h1>Oops... Something went wrong !</h1>
<p> Go to homepage and try again !</p>
<a href="/">Homepage</a>
......
.error--container {
.container {
display: flex;
flex-direction: column;
justify-content: center;
......
......@@ -39,22 +39,6 @@ export default function Parameters({
const re = /^[0-9\b]+$/; ///<==== type only numbers validation //
// const startBlockErrors = () => {
// if (startBlock > endBlock) {
// return true && "Start block must be lower than End block";
// }
// };
// const endBlockErrors = () => {
// if (currentStartBlock > currentEndBlock) {
// return true && "End block must be higher than start block";
// }
// if (currentEndBlock !== "" && currentStartBlock === currentEndBlock) {
// return true && "block can't be equal";
// }
// };
return (
<>
<form required onSubmit={handleSubmit}>
......@@ -132,7 +116,7 @@ export default function Parameters({
currentStartDate > currentEndDate &&
"Start date must be lower than end date"
}
className={styles["input--date"]}
className={styles["input__date"]}
{...params}
/>
)}
......@@ -147,7 +131,7 @@ export default function Parameters({
currentStartDate > currentEndDate &&
"End date must be higher than start date"
}
className={styles["input--date"]}
className={styles["input__date"]}
{...params}
/>
)}
......@@ -155,17 +139,10 @@ export default function Parameters({
</LocalizationProvider>
</div>
</Stack>
<div
style={{
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
}}
>
<div className={styles.form__buttons}>
<Button
size="small"
style={{ margin: "25px" }}
className={styles["form__button--show-dates"]}
onClick={handleDatesButton}
type="button"
color="warning"
......
......@@ -3,19 +3,20 @@
margin: 20px 20px 0px 20px !important;
}
.input--date {
.input__date {
width: 300px;
margin: 20px 20px 0px 20px !important;
}
.form__buttons {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
/* .dates_parameters {
display: "block";
} */
.form__button--show-dates {
margin: 25px !important;
}
.hidden {
display: "none";
}
/* .date-time--picker {
margin-top: 20px;
} */
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment