selfdevs / accountability-dashboard Goto Github PK

We need a header which provides the labels for the columns. They need to be aligned with the columns and rows.
Use the dedicated HTML markup:
https://www.w3schools.com/tags/tag_th.asp

Currently the Scratchpad is saving the text locally in the browser, but user want to have shared data across all their devices. Before modifying the front-end, we need a field in database to store the text.

This field can be bound to user as a property of it, because there is only one Scratchpad per user.

Be sure the data can be updated via some route, probably PATCH /user.

I write pretty big entries and going back to edit some text on the block is very tedious

Textarea might be a good option imo.

Each row gets four values from the data object.
The (1) 'date' value (and full size) is predefined according to the current month and can't be changed.

The (2) 'goal' value should be an input field which has to be filled by the user. The goal is to make the user roughly plan their month. It probably will be a dynamic double number like (1, 1.5, 10) which stand for one unit of your goal (workouts, chapters read, hours invested..)

The actual time / work invested will be documented in (3) as the 'done' value. Input field for the user. Similar unit like (2).

The (4) 'comments' value should be an input field as well and any row should be editable at any point in time.

The user should be able to write something into the input fields and the values will be submitted and saved on 'enter' or leaving the the input field.

Values:
(1) date
(2) goal
(3) done
(4) comments

a user should be able to sign up as a new user from the frontend landingpage which will send a request to the backend returning an user token on success, saving the data in the userDB

• Unless it's the desired behavior I believe the filled-in fields should be cleared after successfully adding an entry.

Demo preview

Current behavior

Currently when you click on the delete icon along an entry, it instantly destroys the line.

Desired behavior

We want any kind of confirmation to prevent miss-click.

deciding on a framework to build the backend (flask, django, fastapi)

We need a component which takes in the data from the 3 columns of the tables (date, goal, done) and converts them into line 2 charts and updates it in real-time.

x-axis: date
y-axis: goal

(1) goal-linechart: date / goal
(2) done-linechart: date /done

decide on deployment type (RPI, cloud, vps, heroku, ...) so the frontend can connect and manipulate the data with the DB

So i was thinking about how it would look if people would be able to choose the category of work they are working on, for instance, if you're playing piano, the category could be hobby and if you're working, it can be work. At the end of the month, a pie chart can show how much time the user is investing on each of their tasks or something like that.
It can be a nice way of time management or for reference i guess
each of their tasks according to the category they choose

The chart needs the x- and y axis. The values for those components come from the data object. The values are coming from the 'table' object from the data object.

"table": {
"date": ["01.01.2021", "02.01.2021"],
"goal": ["1","2"],
"done": ["0","2"],
"notes": []
},

x-axis: date
y-axis: goal

It is necessary that the padding of each label on the axis is evenly distributed to a clean and simple visualisation remains. The arrows for the x/y axis are not needed.

This issue depends on #53 ⚠️

On the front-end side, instead of storing data to the localstorage, send a request to the back-end to save the text contained in the scratchpad. Also, don't forget to retrieve those data when the user is visiting the page!

We want the dashboard to be visible under https://dashboard.theselfdev.com/.

• Configure A Record to IP on the subdomain @longinteger017
• Generate SSL certificate @longinteger017
• Install SSL certificate on the server @cchampou
• Modify env @cchampou

In order to be able to retrieve personal data of each of the users, we need to have a router set up.

For example, if I go to URL /dashboard/longlikeshort, I must see Long's progress.

We need a scratch-board where the user can write free notes for himself.

It should consist in a title and a multi-line input.

For now, we don't want to do anything with the data. Just have it sitting there.

When we click on the "edit" icon of a row, it's confusing because at first sight you don't know you need to use the bottom fields.

We could mitigate this by making the row editable.

Adding an extra step to confirm deleting the entry is essential. I've just accidentally deleted an entry and it hurts 😭

Click this will result in me 'visiting' my own page whilst I am the owner of it

creating custom APIs to access/transfer the data from/into DB (REST API/graphQL) using the mockdata

setup the backend python environment (flask, mongodb), setting up requirements.txt, install modules...

If for example I visit Long's Dashboard the page does not load, and in the inspector console it sais:

Further investigation: Might be the username from the route.

Here is the following error that occurs when logging in via discord auth.

the api call /api/auth/discord (inlcuding the payload of the query-parameter code) after accepting the auth, returns this error:

{ "message": "User validation failed: scratchpad: Path `scratchpad` is required." }

Not really for me, since I don't own a smartphone, but I think it will be useful for those who don't use laptop/desktop much.

Do we wanna keep scratchpad component for mobiles?

Currently when a user login with Discord, he will be given an access token to use for following requests. But no refresh token so when it expires, the user need to login once again. Given the current lifespan of an access token is set to 3600 seconds, so one hour, it's quite annoying.

We need a component to display the profile of the current user. This component should take different props

• The username
• A profile picture URL
• A Youtube link url

Usage example:

<SocialCard
    username="longlikeshort"
    profilePicture="https://www.blabla.com/picture.png"
    youtubeUrl="https://www.youtube.com/c/longlikeshort"
/>

UI mock-up

give the user the possibility to sign up with a Discord account (using existing frameworks like 'flask-google-login' and 'flask-discord')

We need a title component taking a text as childen. It should have a decent font size.

This component should be created in the component folder

Usage example:

<Title>Make 4 Youtube videos</Title>

UI example:

create new mockup file suggested by M123 with array of objects