vaupunkt / cbaspcompanion Goto Github PK

CBASP Companion is an app designed to support people with chronic depression undergoing Cognitive Behavioral Analysis System of Psychotherapy (CBASP) therapy by giving them an app to do different situation-analyses. This App-Project is part of my Capstoneproject for 🐠 @NeueFische's WebDevelopment Bootcamp

Home Page: https://cbasp-companion.vercel.app

JavaScript 100.00%

chartjs nextjs react conversationalform react-awesome-reveal styled-components react-chartjs-2 react-confirm-alert uid react-device-detect

cbaspcompanion's Introduction

I'm Veliko

Loving Nature 🌳 | Urban Mobility 🚴‍♂️ | Sustainability ♻️ | Social Economy ✌🏼 | Pretzels 🥨

Let's team up

📍 Greifswald

cbaspcompanion's People

Contributors

Stargazers

Watchers

cbaspcompanion's Issues

Add a new Analysis-Button

Value proposition

As an User
I want a button on the Start-Page
So that I can create a new Analysis

Description

Acceptance criteria

Have a button on the start page
give it an icon
let it say "new analysis"/"Neue Analyse"
let it redirect the user to the "New Analysis"-Form

delete symptoms

Value proposition

As an User
I want a button to edit my symptom-entries
So that delete wrong ones

Description

Acceptance criteria

Have a edit button on top of the different view pages
be able to click on it
after clicking the user is in an edit mode and can delete symptoms by pressing the x or 🗑️
the user is asked if he is sure to delete
the edit buttonchanges to a save button
by clicking it the user exits editing mode
deleted entries get deleted from the symptoms-array

add the Kieslerkreis

Value proposition

As an User
I want a Kieslerkreis-Diagram
So that I can see, where I would position myself on it, when writing a new analysis

Description

Detail:

Acceptance criteria

use a chart-rendering library like chart.js or recharts
position it on the new analysis form, under the QuestionHeading for Behaviour / "Verhalten"
under the description render a circle/spider-diagramm
have the axis be labeled with "Dominant/offen"(top), "Freundlich/nähe" (right), "Unterwürfig/verschlossen" (bottom), "Feindselig, Distanz" (left)

--> functionality will be part of another user story

Edit Entry

Edit Entries

Value proposition

As an User
I want a Edit-Button
So that I can edit entries if I made mistake or want to change something

Description

Acceptance criteria

The edit button should be visible on the Entry-Page.
The edit button should be clickable.
When the edit button is clicked, the user should be able to edit the entries.
The user should be able to save the changes made.

Tasks

Create a new component for the Edit button.
Add the Edit button component to the page.
Implement the functionality for the Edit button.
Implement the change of the Edit-Button to a Save-Butten
Implement the functionality for editing entries.
Implement the functionality for saving changes made to the data array.

Startpage/Homepage

Value proposition

As an User
I want to see a start-screen
So that I can go to "My Analyses" and choose there between my different analyses (right now from the data-array)

Description

Acceptance criteria

I want to a button on the page that redirects me to my analyses overview
I want to be able to click on it

Tasks

Create the home-page at pages/index.js
create a button "Meine Analysen"
redirect me to the page "Meine Analysen" from US6 - pages/myanalyses

Innere-Analysen-Page

Value proposition

As an user
I want a see a list with the "Innere-Analysen"
So that I can see all "Innere Analysen"

Description

Acceptance criteria

I want to see a list with all entries with the type: "InnerSituationAnalysis"
I want to see a heading with "Innere Analysen"
I want to be able to click on the entry to show its content on the entry-page from US1
I want to see a back button on the entry-page, that takes me back to all "Innere-Analysen"

Tasks

Add a heading
Add a list with entries that have the type: "InnerSituationAnalysis"
have the list item to show its name and date of the entry
have the entry in the list clickable so i reach the single entry page
have a back button on the entry page, that takes me back to the overview

Delete Button on List-Page

Delete Button

Value proposition

As an user
I want a delete-button
So that I can delete unwanted entries on the list-pages

Description

Delete Button

Acceptance criteria

i want an edit button to toggle the delete function
when toggled, I want a button on top of the specific entries
I want to click it
I want a popup to appear that asks me if i am sure to delete this entry
When the "Löschen"-Button is pressed, the entry gets deleted from the data-array
the "Löschen"-Button should be red
have a "Abbrechen" Button to cancel

Tasks

create the edit button
give every entry a delete-button-component
create a popup, that asks the User if he is sure to delete the entry
if Löschen is pressed delete the entry from the data-array
if Abbrechen is pressed return to the list
use destructuring to delete the selected entry from the data array

wanted outcome - extra field

Value proposition

As an User
I want a extra-input
So that I can write why I didn't reach my wanted outcome in an situation

Description

Acceptance criteria

add the radio buttons and the functionality to the input forms "Vergangenheitsanalyse", Zukunftsanalyse" "Innere Situationsanalyse"
I want a Yes and No button/radio-Input on the question "Did I reach my wanted outcome?"
with a click on no i want a input-field where I can write the reason why the wanted outcome was not reached

Tasks

add symptom-questionBot

Value proposition

As an User
I want a ChatBot that wants to know my symptoms
So that I can type in my different symptoms

Description

Acceptance criteria

have a button on the overview page to add a symptom
the user should be asked for the type of symptom to add
the user shoud be able to type in his symptoms
the page is reached with the add-button on the symptoms-page

Zukunftsanalysen-Page

Value proposition

As an user
I want a see a list with the "Zukunftsanalysen"
So that concentrate on reading only them

Description

Acceptance criteria

I want to have delete button/option (will be an own US)
I want to be able to click on the entry to show its content on the entry-page
I want to see a back button on the entry-page, that takes me back to all "Zukunftsanalysen"

Tasks

Add a heading
Add a list with entries that have the type: "FutureAnalysis"
have the option to delete a entry (will be an own US)
have the list item to show its name and date of the entry
have the entry in the list clickable so i reach the single entry page
have a back button on the entry page, that takes me back to the overview

add Kieslerkreis OverviewPage

Value proposition

As an User
I want to have a page with all my Kieslerkreis-Results
So that I can see my behavior, my wanted behavior and more information about the kieslerkreis

Description

Acceptance criteria

have a new page where i see the kieslerkreis
have the results from the entries mapped on the kieslerkreis
take the results from behaviorKieslerkreis and behaviorChangedKieslerkreis
have a description about the kieslerkreis to the bottom

mySymptomsPage

add mySymptomsPage

Value proposition

As an User
I want a Page where I can see an overview for the different sections of symptoms
So that later add and read about my symptoms

Description

Acceptance criteria

have a page that shows the 4 different types of symptoms. they will lead in the next step to filtered views of the entered symptoms

add styling

Value proposition

As an User
I want a good experience
So that enjoy using the app

Description

add an overall fitting style and color-scheme to the app

Acceptance criteria

Styling should add some animations
colors should be used as variables so they are consistent through the whole app

add Kieslerkreis to resultspage

Value proposition

As a user
I want to see in older analyses where I was on the Kieslerkreis
So that I can review my behaviour and learn from it

Description

Acceptance criteria

In an entry of My Analysis have the Kieslerkreis
the user should see the point where he positioned himself
the user should see a description of the position under the diagram

create ConversationalForm

Value proposition

As an user
I want a chatbot to ask me questions
So that I can fill out the form more natural

Description

Acceptance criteria

use ConversationalForm or something similar
rework all form-questions to chatbot questions
save the answered questions in the end as a new entry

My Analyses Page

Value proposition

As an User
I want a Page for my different types of analyses
So that I can filter for the different analyses and to find all

Description

Acceptance criteria

Have a heading
have three buttons for "Zukunftsanalysen", "Vergangenheitsanalysen", "Innere Situationen"
have the buttons lead to the different list-pages
have a button to see all analyses

Tasks

add heading
add "Zukunftsanalysen"-Button
add "Vergangenheitsanalysen"-Button
add "Innere Situationen"-Button
add "alle" Button
add a link to each button for the different list pages:

pages/futureanalyses

pages/pastanalyses

pages/inneranalyses

New InnereSituationsanalyse-Form

New Innere Situationsanalyse-Form

Value proposition

As an User
I want to click on "Innere Situationsanalyse"
So that I can start filling out everything for a new Innere Situationsanalyse/InnerSituationAnalysis

Description

Acceptance criteria

have the fields to be required so i can not submit an empty form
take at least 1 interpretation
have a max. amount of symbols on the input fields
have the max. amount set to 500 for tall fields and to 200 for shorter inputs
in the revision part have fields with the interpretations as values and the posibility for me to revise these interpretations and change them
on submit save the files to an array "entries" with an unique id and type: "InnerSituationAnalysis"
use the entry-component to display the submitted data under the form

Tasks

create the if-case to render the form by click on the radio-button "Innere Situationsanalyse"
render the form for the Innere Situationsanalyse by using descriptions and headlines according to the analysis-type
create input-fields and give them the prop long or short
give the long-input-fields the maxlength 500
give the short-input-fields the maxlength 200
create a submit-function
add the data to allEntries with destructuring and setAllEntries
redirect in the submit-function to the entry-page by using the [id].js-dynamic-route

filtered symptoms-view

Value proposition

As an User
I want to have different views of my symptoms
So that I can see all of them or just different symptoms for different categorys

Description

Acceptance criteria

by clicking on the different categorys i want to see a list of the symptoms
when there are no symptoms have a placeholder and a button that leads to the add-form for new symptoms

new Zukunftsanalyse-Form

New Zukunftsanalyse-Form

Value proposition

As an User
I want to click on "Zukunftsanalyse"
So that I can start filling out everything for a new Zukunftsanalyse/FutureAnalysis

Description

Acceptance criteria

have the fields to be required so i can not submit an empty form
take at least 1 interpretation
have a max. amount of symbols on the input fields
have the max. amount set to 500 for tall fields and to 200 for shorter inputs
on submit save the files to an array "entries" with an unique id and the type="FutureAnalysis"
redirect the user after the click to the page with the entry

Tasks

create the if-case to render the form by click on the radio-button "zukunftsanalyse"
render the form for the zukunftsanalyse by using descriptions and headlines according to the analysis-type
create input-fields and give them the prop long or short
give the long-input-fields the maxlength 500
give the short-input-fields the maxlength 200
create a submit-function
add the data to allEntries with destructuring and setAllEntries
redirect in the submit-function to the entry-page by using the [id].js-dynamic-route

add hover/onClick on Kieslerkreis-Diagramm

Value proposition

As an User
I want to click on different parts of the kieslerkreis
So that I can define my position in the situationanalysis

Description

Acceptance criteria

have a area under the kieslerkreis where the value of the selected area is rendered
have a hover and/or onClick behaviour for the different circle-sections
have the description/value to be rendered after selecting the section

add Readme-File

Value proposition

As an Developer
I want to a have a Readme-File on GitHub
So that I can see, what the app is about

Acceptance criteria

Rewrite the existing Readme-File
Explain the used packages
Explain what you can do in the app
Explain CBASP-Therapie
explain the different analysis-types
explain the Kieslerkreis

add more Interpretations

Value proposition

As an User
I want a button
So that I can add more Interpretations in the forms where I add new analyses

Description

Acceptance criteria

in the form at the interpretations-point give the user a button
have three interpretations as standard
let the user add more than standard three interpretations
after a click more input fields appear

Tasks

add a button in the interpretations-section
give it a text "mehr Interpretationen hinzufügen"
write a function that adds a input field above the button
the input field should be inside the <ol>of the interpretations-section

New VergangenheitsAnalyse-Form

Value proposition

As an User
I want to click on "Vergangenheitsanalyse"
So that I can start filling out everything for a new Vergangenheitsanalyse/Past-Analysis

Description

Acceptance criteria

have the fields to be required so i can not submit an empty form
take at least 1 interpretation
have a max. amount of symbols on the input fields
have the max. amount set to 500 for tall fields and to 200 for shorter inputs
in the revision part have fields with the interpretations as values and the possibility for me to revise these interpretations and change them
on submit save the files to an array "entries" with an unique id and type: "PastAnalysis",
use the entry-component to display the submitted data under the form

Tasks

Create a new form called “PastAnalysisForm”.
Add fields to the form and make them required so that the user cannot submit an empty form.
Have at least one interpretation field as required.
Set the maximum amount of symbols to 500 for tall fields and 200 for shorter inputs.
Add fields revision with the interpretations as values and the possibility for the user to revise these interpretations
Save the files to an array “entries” with a unique id and type: “PastAnalysis” on submit.
Use the entry-component to display the submitted data under the form.

Profilpage

Value proposition

As an User
I want a Profilpage
So that I can find links to my entries and other features

Description

Acceptance criteria

I want to see links to other options
I want to be able to click on "my analysis"
i want to be able to click on "my symptoms"
i want to be able to click on "kieslerkreis"
i want them to link to the corresponding page
I want a button to go back to the Main/Homepage

Vergangenheitsanalysen-Page

Value proposition

As an user
I want to see a list with the "Vergangenheitsanalysen"
So that I can concentrate on reading only them

Description

Acceptance criteria

I want to have delete button/option
I want to be able to click on the entry to show its content on the entry-page
I want to see a back button on the entry-page, that takes me back to all "Vergangenheitsanalysen"

Tasks

Add a heading
Add a list with entries that have the type: "PastAnalysis"
have the option to delete a entry
have the list item to show its name and date of the entry
have the entry in the list clickable so i reach the single entry page
have a back button on the entry page, that takes me back to the overview

edit the kieslerkreis-position in entries

Value proposition

As an User
I want to edit my position on the kieslerkreis in older entries
So that I can change it if i made a mistake

Description

Acceptance criteria

after click on the edit button - go into editMode
add the kieslerkreis-component from the addAnalysis component to change the position on the diagram
save the new position after editing to the entries-array

Entry Page

Value proposition

As an User
I want to see the content of an entry
So that I can read and edit the content

Description

Acceptance criteria

Have a title at the top
have the title fixed to stay at top
have the date of the entry displayed
Have the content of the entry displayed
have smaller headlines for each category

Tasks

create a title
make it fixed on top of the screen
display the content of the entry with labels
display the date of the entry beneath the header

New Analysis-Page

Value proposition

As an User
I want a page
So that I can choose, which kind of analysis I want to create

Description

New-Analysis Page

Button on Start-Page to get to New Analysis

Acceptance criteria

have a new page for the new analysis
with a back-button, that takes me back to the start-page
have a input field for title
have a input field for date
ask the User which kind of analysis he wants to take
let there be radio buttons for the user to choose between the three types
have the start page link to the new page

add kieslerkreis to chatbot

Value proposition

As an User
I want to select my position on the kieslerkreis
So that reflect my behaviour

Description

Acceptance criteria

Get to the Question about the behavior
Save the up to this point added data
redirect the user to a kieslerkreis-page where he can input his behavior on the circle
give the user a button
save the data from the kieslerkreis
after clicking the button redirect the user again to the chatbot and let him fill out the rest of the questions

Delete Button on Entry Page

Value proposition

As an User
I want a Delete Button on the Entry-Page
So that I can delete the opened entry

Description

Acceptance criteria

I want a button to delete the whole entry
the button is at the top of the entry under the header
the button opens a window, where i get asked if i am sure to delete this entry
if i click yes, the entry gets deleted from the data array and i will be automatically redirected to my overview of entries

Tasks

Create a button to delete an entry.
Place the button at the top of the entry under the header.
Make sure that when clicked, a window pops up asking if you are sure you want to delete this entry.
If yes is clicked, delete the entry from the data array.
Automatically redirect to overview of entries after deletion.

moreInformation Page

Value proposition

As an User
I want a Page
So that I can learn more about depression, where to get help and about the cbasp therapy

Description

Acceptance criteria

have a link on the mainpage
have a new page, with an infotext

All Entries Page

Value proposition

As an user
I want to see all my entries that i made
So that I can view them

Description

Acceptance criteria

without entries show a placeholder "no entries yet"
I want to see a list of my entries, if there are any
I want to be able to click on the entry to show its content on the entry-page
I want to see a back button on the entry-page, that takes me back to all entries

Tasks

Add a heading
Add a list with entries
if the list is empty, show a placeholder
have the list item to show its name and date of the entry

add more actionInterpretations

Value proposition

As an User
I want to get "Action Interpretations" from older analyses as I type
So that I can see and choose previous Action Interpretations if one fits for this analysis again

Description

Acceptance criteria

add the input & functionality to the input forms "Vergangenheitsanalyse", Zukunftsanalyse" "Innere Situationsanalyse"
let the user type into the input field
As the user types have a dropdown appear where he can choose fitting interpretations

Tasks

create a array with all older actionInterpretations
with onChange or onInput create a function that searches the array for the string the user inputs

remove more interpretations

Value proposition

As an user
I want a button
So that i can delete unused interpretations if I added to many

Description

Acceptance criteria

with a click on the x-button delete the added interpretations
always have at least 3 interpretation-fields, only be able to delete the "extra"/added ones
get asked if the user is sure to delete

Tasks

have a delete-button next to the added input-field to remove the added field
have a pop up appear
have the user asked if he is sure to delete
make the input field disappear after a click on delete