diff options
author | Adrián Oliva <adrian.oliva@cimat.mx> | 2023-05-29 22:54:18 -0600 |
---|---|---|
committer | Adrián Oliva <adrian.oliva@cimat.mx> | 2023-05-29 22:54:18 -0600 |
commit | 7d513ea7f0df7e295f8fd8ebe5d202530199f924 (patch) | |
tree | d00edef59401bab195b5722fd0d51bdd06f76a9d /src/ToDo-UI | |
parent | ac0d9f421f1304306d9b3a264a225966fa9d5677 (diff) | |
download | ToDo-App-FE-d4912ffe1f3a651f0f930b6edb2c0689be093056.tar.gz ToDo-App-FE-d4912ffe1f3a651f0f930b6edb2c0689be093056.zip |
It displays the time in average of completing to dos.
Diffstat (limited to '')
-rw-r--r-- | src/ToDo-UI/averageTime.jsx | 52 |
1 files changed, 52 insertions, 0 deletions
diff --git a/src/ToDo-UI/averageTime.jsx b/src/ToDo-UI/averageTime.jsx new file mode 100644 index 0000000..688522b --- /dev/null +++ b/src/ToDo-UI/averageTime.jsx @@ -0,0 +1,52 @@ +import { useState } from "react"; +import { get_average_time_function } from "../api/axios_methods"; + +function write_average_time(prefix, time) { + return ( + <> + <p>{prefix}</p> + <p>{time}</p> + </> + ); +} + +export function Average() { + const get_av_time_api = get_average_time_function(); + + const [time_all, set_time_all] = useState(""); + const [time_low, set_time_low] = useState(""); + const [time_med, set_time_med] = useState(""); + const [time_high, set_time_high] = useState(""); + + get_av_time_api(set_time_all, "All"); + get_av_time_api(set_time_low, "Low"); + get_av_time_api(set_time_med, "Medium"); + get_av_time_api(set_time_high, "High"); + + return ( + <div + className="container mt-3 mb-3" + style={{ + border: "2px solid black", + textAlign: "center", + padding: "15px", + }} + > + <div className="row"> + {write_average_time("Average time to finish tasks:", time_all)} + </div> + + <div className="row"> + <div className="col"> + {write_average_time("Low Priority:", time_low)} + </div> + <div className="col"> + {write_average_time("Medium Priority:", time_med)} + </div> + <div className="col"> + {write_average_time("High Priority:", time_high)} + </div> + </div> + </div> + ); +} |