Table of Contents

• view
  • LoginLanding
  • Surveys
  • Cdn
  • Login
  • Home
  • Dashboard
  • Survey
  • FlowchartEditor
  • Landingpage
• component
  • CDN
    • ServiceableFilePicker
      • Properties
    • ServiceableTable
      • Properties
    • ServiceableTopbar
      • Properties
  • Dashboard
    • Reports
    • RecommendedSurveys
    • AllSurveys
    • LatestSurveys
    • LatestReports
    • IncompleteSurveys
  • Landingpage
    • WhatWeDo
    • WhyThisSite
      • Properties
    • HowWeDoIt
      • Properties
  • Login
    • LoginNavbar
    • Logo
    • LoginForm
      • Properties
  • Core
    • View
    • Footer
    • Drawer
    • Toolbar
  • Material
    • Notification
      • Properties
    • QuestionCard
      • Properties
    • ChartCard
      • Properties
    • RoundCard
      • Properties
    • ImageCard
      • Properties
    • ListCard
      • Properties
    • Card
      • Properties
    • StatsCard
      • Properties
  • Survey
    • Info
    • ImplicationList
    • SurveyInformation
    • Progress
    • EndPage
    • MultipleChoice
    • Question
  • FlowchartForm
    • GenericView
    • ModuleFunctions
    • MultipleChoiceFunctions
    • NotificationFunctions
    • QuestionFunctions
    • GeneralFunctions
    • EdgeFunctions
    • ChoiceFunctions
  • Offset
    • Parameters
  • Animatedbackground
    • Properties
• plugin
  • notification
    • showNotification
      • Parameters
  • theme
  • pdfreporter
    • generateDemoPDF
  • flowchartEditor
    • startEditor
    • setActiveFormatBarmethod
    • theme
    • setDialogState
      • Parameters
    • setActiveFormatBar
      • Parameters
    • setnewSelectedCell
      • Parameters
    • setFlowchartState
      • Parameters
    • getFlowchart
      • Parameters
    • changeQuestionNode
      • Parameters
    • genericChangeNode
      • Parameters
    • changeMultipleChoiceNode
      • Parameters
    • changeEdge
      • Parameters
    • data
• App
• store
  • cdn
    • getServiceablesDataByName
      • Parameters
    • getAllData
      • Parameters
    • getData
      • Parameters
    • deleteData
      • Parameters
    • uploadImage
      • Parameters
  • progress
    • fillProgress
      • Parameters
    • setCurrentQuestion
      • Parameters
    • fillCurrentQuestionBacklog
      • Parameters
    • clearCurrentQuestionBacklog
      • Parameters
    • fillsubQuestionBackLog
      • Parameters
    • clearSubQuestionBackLog
      • Parameters
    • setNotification
      • Parameters
  • answer
    • getAnswers
      • Parameters
    • getAnswerByQuestionID
      • Parameters
    • answerQuestion
      • Parameters
    • deleteLastAnswer
      • Parameters
  • survey
    • getFirstQuestionID
      • Parameters
    • getAllSurveys
      • Parameters
    • getSurveyByID
      • Parameters
  • login
    • GetloggingIn
      • Parameters
    • registerUser
      • Parameters
    • loginUser
      • Parameters
    • switchForms
      • Parameters
  • notificationHandler
    • addNotification
      • Parameters
    • clearNotification
      • Parameters
  • app
    • getDrawer
      • Parameters
    • getBackground
      • Parameters
    • getNewUser
      • Parameters
    • getFooterColor
      • Parameters
    • setDrawer
      • Parameters
    • setBackground
      • Parameters
    • setFooterColor
      • Parameters
    • setNewUser
      • Parameters
  • flowcharteditor
    • setDialog
      • Parameters
    • setFormatBarType
      • Parameters
    • setSelectedCell
      • Parameters
    • getFlowchartByName
      • Parameters
    • saveFlowchart
      • Parameters
• router
• nodeEnum
• implicationEnum

view

The components are used in Vue views to make up a web page.

LoginLanding

returns the login landing page, asking the user wether they want to create an account.

Surveys

Returns the page where new users get offered recommended surveys.

Cdn

Returns the CDN page, where the user can upload and delete serviceables

Login

Returns the login page, where the user can login or register

Home

Is a leftover page from the original template

Dashboard

Returns the dashboard page where users will go to after logging in.

Survey

Returns the survey page, where the user can answere questions to fill in a survey.

FlowchartEditor

Returns the flowchart page, where the user can create and edit flowcharts

Landingpage

Returns the landing page, the page most users see when the open the website.

component

The components are used in Vue views to make up a web page.

CDN

The components used in the CDN view.

ServiceableFilePicker

This is a textfield modded to act like a filepicker.

Properties

• imageName string name of the image
• imageUrl string Base64 string
• imageFile Object file object

ServiceableTable

Returns the table used in the CDN page. displays serviceables

Properties

• serviceables Array<Serviceable> the serviceables that are going to be displayed

ServiceableTopbar

Returns the top-bar used in the CDN page, this contains a small form with a name field and a filepicker

Properties

• valid boolean
• form topbarForm

Dashboard

The components used in the Dashboard view.

Reports

Marco/Sueño garbage, nobody really knows its purpose.

Meta

• deprecated: removed in the next version.

RecommendedSurveys

Returns a view containing all of the recommended surveys, these are currently hard-coded.

AllSurveys

Returns a view containing all surveys.

LatestSurveys

Returns a view containing all of the latest surveys, this is currently all mock data.

LatestReports

Returns a view containing all of the latest reports, this is currently all mock data.

IncompleteSurveys

Returns a view containing all incomplete surveys, this is currently all mock data.

Landingpage

The components used in the landingpage view.

WhatWeDo

Provides part of the landing page's information.

WhyThisSite

Provides part of the landing page's information.

Properties

• stats String an image from the cdn

HowWeDoIt

Provides part of the landing page's information.

Properties

• Students String an image from the cdn.
• Startups String an image from the cdn.
• LawFirms String an image from the cdn.

Login

The components used in the Login view.

LoginNavbar

Returns the Login navbar

Logo

Returns the logo used on the login page.

LoginForm

Returns the login form.

Properties

• onclick function
• callback function
• name String
• email Boolean
• firstname Boolean
• password Boolean
• confirmpassword Boolean

Core

The core components.

View

Returns the core-view used in the root component

Footer

Returns the footer with links to other places.

Drawer

Returns the drawer that is used in the dashboard.

Toolbar

returns a topbar that contains common things like notifications, accounts, etc

Meta

• deprecated: this is no longer used.

Material

The material design components.

Notification

Returns a temporary notification

Properties

• activated boolean

QuestionCard

Returns a question card.

Properties

• text String
• image String
• answer Object

ChartCard

Returns a card that contains a chart.

Properties

• data Object
• eventHandlers Array
• options Object
• ratio String
• responsiveOptions Array
• type String

RoundCard

Returns a round card.

Properties

• redirecturl String
• imagename String
• text String
• cardWidth String
• imageSize String
• imageWidth String
• imageHeight String
• direction String

ImageCard

Returns a card containing an image

Properties

• redirecturl String
• imagename String
• text String
• cardWidth String
• imageSize String
• imageWidth String
• imageHeight String
• direction String

ListCard

Returns a list cards.

Properties

• imageWidth String
• redirecturl String
• imagename String
• text String
• title String
• description String
• orientation String
• progress String

Card

Returns a material design card to be used in other components

Properties

• color String
• elevation Number
• inline Boolean
• fullWidth Boolean
• offset Number
• title String
• text String
• icon String

StatsCard

Return a card with stats

Properties

• color String
• elevation Number
• inline Boolean
• fullWidth Boolean
• offset Number
• title String
• text String
• icon String
• subIcon String
• subIconColor String
• subTextColor String
• subText String
• value String
• smallValue String

Survey

The components used in the Survey view.

Info

Returns an 'info' view used in the survey.

ImplicationList

Returns a list containing all implications.

SurveyInformation

Returns an 'survey information' view used in the survey

Progress

Returns an 'progress' view used in the survey.

EndPage

Returns an 'endpage' view used after the survey.

MultipleChoice

Returns an 'multiplechoice' view used in the survey.

Question

Returns an 'question' view used in the survey.

FlowchartForm

The form used in the flowchart editor.

GenericView

Generic flowchart form view.

ModuleFunctions

View used for 'Module' cells

MultipleChoiceFunctions

View used for 'MultipleChoice' cells.

NotificationFunctions

View used for 'Notification' cells.

QuestionFunctions

View used for 'Question' cells.

GeneralFunctions

View used for general action / no cells.

EdgeFunctions

View used for 'Edge' cells.

ChoiceFunctions

View used for 'Choice' cells.

Offset

Provided an offset in a view

Parameters

• fullWidth boolean
• offset number

Animatedbackground

returns a nice animated background with moving particles that are connected to each other. This is used on the landing page.

Properties

• colorA String
• colorB String
• colorC String

plugin

The plugins used in Vue that are called from the components

notification

Notifiation plugin used to show notifications

showNotification

Shows notification, takes in a message to display. Gets the root app component references and looks for the notification component. Calls the showNotification function of that component.

Parameters

• message
• type

theme

Exports the theme with default colours

pdfreporter

PdfReporter plugin used to create PDF's and offer them as a download.

generateDemoPDF

Creates a demo PDF

flowchartEditor

The flowchart editor plugin, used in the flowchart editor pages This script is used for a loose connection between the plugin and Vue.js It will provide the nescesarry information to the flowcharteditor plugin by looking at the store in the plugin. So if you want to use the flowcharteditor than this should be a complete configuration for your Vue.js setup. The advantage this plugin script provides is the ability to modify the looks of the editor's formatbar and

startEditor

Starts the flowchart editor, and inits defaults

setActiveFormatBarmethod

register to the variable that will change when the variable changes. When something changes in the store of the flowchart editor this function will be called in order to update the Vue store

theme

Give the flowchart editor the veutify theme of the linked vue.js project

setDialogState

Sets the correct dialogState. Its used for the import dialog. Whenever the import has succeeded and the flowchart plugin is converting the data to a visual flowchart it will close the dialog window by this method.

Parameters

• val dialogState is a boolean

setActiveFormatBar

Function for flowchart plugin callbacks. Its used to activate the correct formatbar for instance the QuestionNode formatbar. For clarification the instance is a Vue component. This method should call a store action that will change a state.

Parameters

• val FormatBarType

setnewSelectedCell

Sets the new selected cell. Its used to retrieve cell information to fill the formatbar with. This method should call a store action that will change a state.

Parameters

• val SelectedCell a MXGraph cell class

setFlowchartState

Sets the new flowchart that has been found by an API call to the back-end This will start the flowchart importation in the flowchart plugin by the state trigger in the Main.js script

Parameters

• val FlowchartState is the JSON of a flowchart

getFlowchart

Exports the flowchart that has been made by the editor into a JSON format.

Parameters

• name String of the flowchart
• description String of the flowchart

changeQuestionNode

Changes the selected question nodes data. This will be called from a QuestionNode Formatbar Vue component

Parameters

• questionNode String the value of the selected question cell
• question String the question that will be asked in the survey front-end
• reason String the reason why you ask the question

genericChangeNode

Changes the selected node data of a generic node. For instance a notification node.

Parameters

• nodeName String the value of the selected generic cell
• name String the value that will be used in the survey front-end

changeMultipleChoiceNode

Changes the selected multi choice node data.

Parameters

• nodeName String the value of the selected multichoice cell
• title String the title of the multi choice, this will also be the question asked in the front-end
• amountOfChoices Number the amount of choices this multi choice contains
• reason String the reason why you ask the question
• loopSubQuestions Boolean used in order to loob the same subquestion if there are any.

changeEdge

Change the selected edge data

Parameters

• name String the value of the selected edge
• implication String the implication of the edge/ answer of questioin
• implicationLevel String the level of the implication (warning, info, etc...)
• implicationColor String the hex color you want to turn the edge into

data

This contains some enums that can be used in the Vue project

App

The root component, all over components get interpolated into this.

store

The store file is the main script that combines all the submodules into one big store. From here you can enter the different submodules by using the standard vuex methods (e.g. mapActions)

cdn

The cdn module contains actions that make API calls to the CDN Service This sub module is used in the following components:

• ServiceableTable (getAllData, delete)
• ServiceableTopbar (uploadImage)

getServiceablesDataByName

Returns the specific data with a specific name from the serviceables array

Parameters

• state

getAllData

Retrieves all metadata from the CDN service

Parameters

• $0 Object
  • $0.commit
  • $0.dispatch

getData

Retrieves the metadata from a specific ID in the cdn service

Parameters

• $0 Object
  • $0.commit
  • $0.dispatch
  • $0.getters
• id

deleteData

Attempts to delete an serviceable from the CDN service

Parameters

• $0 Object
  • $0.commit
  • $0.dispatch
• serviceable

uploadImage

Attempts to push a new serviceable to the CDN service

Parameters

• $0 Object
  • $0.dispatch
• $1 Object
  • $1.file
  • $1.name
  • $1.type

progress

The Progress module contains the progress of the survey and the backlog of questions that need to be asked to the user. It also has some extra states that are node specific (e.g. notification and options) This submodule is used in the following view:

• Survey (mapState currentquestion, progress, notification, options and mapActions fillProgress, setCurrenQuestion, fillCurrentQuestionBacklog, clearSubQuestionBacklog)

fillProgress

Calculates the new progress and sets the progress bar

Parameters

• $0 Object
  • $0.commit
  • $0.state
• $1 Object
  • $1.addedDepth
  • $1.survey

setCurrentQuestion

Sets the current question that the user can answere

Parameters

• $0 Object
  • $0.commit
  • $0.state
• $1 Object
  • $1.question
  • $1.nodes

fillCurrentQuestionBacklog

Fills the current question backlog

Parameters

• $0 Object
  • $0.commit
  • $0.dispatch
• $1 Object
  • $1.firstSubQuestion
  • $1.backLogQuestion
  • $1.nodes

clearCurrentQuestionBacklog

Clears the current question backlog

Parameters

• $0 Object
  • $0.commit

fillsubQuestionBackLog

Fills the sub-question backlog

Parameters

• $0 Object
  • $0.commit
• futureSubQuestions

clearSubQuestionBackLog

Clears the current sub-question backlog

Parameters

• $0 Object
  • $0.commit

setNotification

Sets a new notification

Parameters

• $0 Object
  • $0.commit
• notification

answer

The answer module contians all the answers of the survey that has been made These answers will be used for the PDF generation and can be stored in the questionaire service This submodule is used in the following views:

• Survey (mapState all and mapActions deleteLastAnswer, answerQuestion)

getAnswers

Retrieves all answeres from the store

Parameters

• state

getAnswerByQuestionID

Retrieves a question from the store with a specific ID

Parameters

• state

answerQuestion

Pushes an answere to the store. This should also contain the user's entered data.

Parameters

• $0 Object
  • $0.commit
  • $0.dispatch
• $1 Object
  • $1.answer
  • $1.question

deleteLastAnswer

Removes the last pushed answere from the store.

Parameters

• $0 Object
  • $0.commit

survey

The survey module contains the survey that the user wants to make and also the first question that needs to be asked because a flowchart can start with a start node or something else instead of a question (or multichoice, etc.) node This submodule is used in the following views/ components:

• Survey (mapState all and mapGetters getFirstQuestionID and mapActions getSurveyByID)
• AllSurveys/ IncompleteSurveys/ LatestReports (mapState all, mapActions getAllSurveys)

getFirstQuestionID

Gets the first upcoming questionID out of the current state.

Parameters

• state

getAllSurveys

Retrieves all available surveys from the server.

Parameters

• $0 Object
  • $0.commit
  • $0.dispatch

getSurveyByID

Retrieves a survey by ID from the server.

Parameters

• $0 Object
  • $0.commit
  • $0.dispatch
• surveyID

login

The login module contains the login/ register API calls to the account service and contians feedback of these calls and if the user wants to register or login This submodule is used in the following view:

• Login (mapState loggingIn, logginrText, alert and MapActions registerUser, loginUser, switchForms)

GetloggingIn

Returns the isLogging in boolean which is false if the user is attempting to register.

Parameters

• state

registerUser

Attempts to create a new account at the server from the user data

Parameters

• $0 Object
  • $0.commit
  • $0.dispatch
• registerData

loginUser

Attempts to log the user in based on the entered information.

Parameters

• $0 Object
  • $0.commit
  • $0.dispatch
• loginData

switchForms

Displays the correct form based on the loggingIn boolean.

Parameters

• $0 Object
  • $0.commit
• loggingIn

notificationHandler

The notificationHandler module contains actions that store any notification (error, success, warning) that you want the user to know and gives any new notifications to the user as a snackbar. This sub module is used in the following components:

• cdn.js (addNotification)
• flowcharteditor.js (addNotification)
• login.js (addNotification)
• survey.js (addNotification)
• answer.js (addNotification) Hoort dit in deze handler of is het beter om dit apart te houden aangezien dit niet bij het systeem hoort maar een bepaalde user zijn survey

addNotification

Adds notification to the notifications array and shows it to the user

Parameters

• $0 Object
  • $0.commit
• newNotification

clearNotification

Clears all the notifications from the array

Parameters

• $0 Object
  • $0.commit

app

The app module are some standard methods and states that are used for the look of the site This submodule is used in the following views:

• CDN (setBackground, setFooterColor)
• FlowchartEditor (setBackground, setFooterColor)
• LandingPage (setBackground)
• Login (setBackground)
• Survey (setBackground, setFooterColor)
• Surveys (setBackground)
• Dashboard (setBackground)

The states are watched by the following views and components

• App (background and newUser state, also setBackground)
• Footer (footerColor)
• Drawer (drawerOpen)

getDrawer

Returns the drawer from the state

Parameters

• state

getBackground

Returns the background from the state

Parameters

• state

getNewUser

Returns the new user from the state

Parameters

• state

getFooterColor

Returns the footer colour

Parameters

• state

setDrawer

Sets the drawer to the state

Parameters

• $0 Object
  • $0.commit
• drawerOpen

setBackground

Sets the background to the state

Parameters

• $0 Object
  • $0.commit
• newBg

setFooterColor

Sets the footer colour to the state

Parameters

• $0 Object
  • $0.commit
• newColor

setNewUser

Sets the new user to the state

Parameters

• $0 Object
  • $0.commit
• newUser

flowcharteditor

The flowcharteditor module contains methods and states used for displaying the right UI component (Formatbar) and also saving and import a flowchart from the module service This submodule is used in the following views:

• FlowchartEditor (mapState formatBarType)
• FlowchartForm (mapState dialog, flowchart and mapActions setDialog, getFlowchartByName)
• GeneralFunction (mapActions saveFlowchart)
• All the other components (mapState selectedCell, formatBarType)
• plugins/flowchareditor script (mapActions setDialog, setFormatBarType, setSelectedCell)

The following actions are called from the plugin/flowcharteditor script who gets its info from the flowcharteditor store in the libs folder. We chose to do it this way so that you have a lose connection between the flowcharteditor plugin and Vue.js (like using an interface in Java) But if you want to seperate the flowchart editor and Vue.js completly you cant use Vuetify to render the formatbar and you would be forced to generate HTML within js which will get large and messy. A downside of this design choice is that the library is not completly seperated/SOLID

setDialog

Sets the new dialog, attached to the import button.

Parameters

• $0 Object
  • $0.commit
• dialogState

setFormatBarType

Sets the formatbar type

Parameters

• $0 Object
  • $0.commit
• newType

setSelectedCell

sets the new selected cell in the flowchart editor

Parameters

• $0 Object
  • $0.commit
• newCell

getFlowchartByName

This actions returns a flowchart. The FlowchartForm view will pass this from the plugins/flowcharteditor to the flowchart editor plugin.

Parameters

• $0 Object
  • $0.commit
  • $0.dispatch
• name

saveFlowchart

Vue.js gets the flowchart JSON from the plugin and make the API call to the module service

Parameters

• $0 Object
  • $0.dispatch
• flowchart

router

The router used to serve the user the correct views the authentication and admin requirements are also set here per page.

nodeEnum

The nodeEnum can be used to alter between node format bar types or just to specify a certain node type

implicationEnum

The implicationEnum can be used to keep track of all the different implications that are avaialble on an edge