Skip to content

Latest commit

 

History

History
432 lines (409 loc) · 11.1 KB

state.md

File metadata and controls

432 lines (409 loc) · 11.1 KB

Sequence Diagrams

Resources

  • mermaidchart: mermaid chart application that allows click and drag for different types of diagrams

Login View with sign-in click

---
config:
  theme: neo-dark
  themeVariables:
    actorBkg: "#0d6efd"
    actorBorder: white
    actorTextColor: white
    primaryColor: "#0d6efd"
    signalColor: "#0dcaf0"
    sequenceNumberColor: "#0dcaf0"
    signalTextColor: white
    labelBoxBkgColor: "#20c997"
    labelBoxBorderColor: "#ffc107"
    labelTextColor: white
    loopTextColor: white
---
sequenceDiagram
  actor A1 as User
  participant altV as main.ejs
  participant V as login.ejs
  participant CS-JS as client-side.js
  participant SS as index.mjs
  participant DB as database

  links SS: {"Dashboard": "https://dashboard.contoso.com/alice", "document": "/index.mjs"}
  
  autonumber
  A1 ->> V: User clicks Sign in Button
  alt input not valid
    V ->>+ CS-JS: user: "" || pwd: ""
    CS-JS ->>- V: update view<br>invalid
  else input is valid
    V ->>+ CS-JS: user: * && pass: *
    CS-JS ->>- SS: Post Request:<br>username<br>password
  end
  SS ->>+ DB: request query
  DB ->>- SS: return response
  alt response is empty
    SS ->>+ CS-JS: return response
    CS-JS ->>- V: update view<br>invalid
  else response is ok && not empty
    SS ->>+ altV: Valid, redirect to Main View
    
  end
  box darkgrey Client-Side
  participant altV
  participant V
  participant CS-JS
  end
  box darkgrey Server-Side
  participant SS
  participant DB
  end
Loading

Login View User Clicks New User

---
config:
  theme: neo-dark
  themeVariables:
    actorBkg: "#0d6efd"
    actorBorder: white
    actorTextColor: white
    primaryColor: "#0d6efd"
    signalColor: "#0dcaf0"
    sequenceNumberColor: "#0dcaf0"
    signalTextColor: white
    labelBoxBkgColor: "#20c997"
    labelBoxBorderColor: "#ffc107"
    labelTextColor: white
    loopTextColor: white
---
sequenceDiagram
  actor A1 as User
  participant V as login.ejs
  participant CS-JS as client-side.js
  participant SS as index.mjs
  participant DB as database
  autonumber
  A1 ->> V: User clicks Sign Up Button
  V ->>+ CS-JS: 
  CS-JS ->>- V: opens modal for creating User
  alt wait for user input
    V ->> V: 
  end
  V->>+ CS-JS: User Clicks submit button
  CS-JS ->>- SS: send inputs as <br>Post Request
  SS ->>+ DB: send query to DB <br>see if user in db
  DB ->>- SS: respond with query
  alt if response not OK || query returns non-empty
    SS ->>+ CS-JS: send error message
    CS-JS ->>- V: update modal with input vaidation
  else if response OK &&<br> query returns empty
    SS ->> V: render login all over
  end
  box darkgrey Client-Side
    
    participant V
    participant CS-JS
  end
  box darkgrey Server-Side
    participant SS
    participant DB
  end
Loading

Search View User Inputs and Clicks Search Button

---
config:
  theme: neo-dark
  themeVariables:
    actorBkg: "#0d6efd"
    actorBorder: white
    actorTextColor: white
    primaryColor: "#0d6efd"
    signalColor: "#0dcaf0"
    sequenceNumberColor: "#0dcaf0"
    signalTextColor: white
    labelBoxBkgColor: "#20c997"
    labelBoxBorderColor: "#ffc107"
    labelTextColor: white
    loopTextColor: white
---

sequenceDiagram
  actor U as User
  participant altV as movieDescription.ejs
  participant V as searchContent.ejs
  participant cJS as client-side.js
  participant SS as index.mjs
  participant DB as database
  participant API as omdb's API
  autonumber
  U ->> V: User inputs:<br>search<br>typeOfContent<br>&<br>click's search button
  alt input validation
    V->>cJS: search="" [invalid]
    cJS->>V: update view showing invalidity
  else
    V->>cJS: search="*" [valid]
    cJS->>+SS: POST Request to server for:<br>search & type
  end
  SS->>+API: GET Request of<br>search & type
  
  API->>-SS: GET Response
  alt empty GET response
    SS->>-cJS: POST Repsonse
    cJS->>V: update view showing no response
  else valid GET response
    SS->>altV: redirect to movieDescription.ejs
  end

  box darkgrey Client-Side
    #participant altV
    participant V
    participant cJS
  end
  box darkgrey Server-Side
    participant SS
    participant DB
  end
Loading

Search Results View

---
config:
  theme: neo-dark
  themeVariables:
    actorBkg: "#0d6efd"
    actorBorder: white
    actorTextColor: white
    primaryColor: "#0d6efd"
    signalColor: "#0dcaf0"
    sequenceNumberColor: "#0dcaf0"
    signalTextColor: white
    labelBoxBkgColor: "#20c997"
    labelBoxBorderColor: "#ffc107"
    labelTextColor: white
    loopTextColor: white
---
sequenceDiagram
  actor U as User
  #participant altV as movieDescription.ejs
  participant V as searchResults.ejs
  participant cJS as reviewModal.js # [path to file](/public/js/reviewModal.js)
  #participant SS as index.mjs
  #participant DB as database
  #participant API as omdb's API
  autonumber
  U ->> V: User clicks write review button
  V ->> cJS: click event sent<br> [stop propogation]
  cJS ->> V: review Modal triggered
  box grey Client-Side
    #participant altV
    participant V
    participant cJS
  end
  #box grey Server-Side
    #participant SS
    #participant DB
  #end
Loading

Search Results View: Review Modal

---
config:
  theme: neo-dark
  themeVariables:
    actorBkg: "#0d6efd"
    actorBorder: white
    actorTextColor: white
    primaryColor: "#0d6efd"
    signalColor: "#0dcaf0"
    #sequenceNumberColor: "#0dcaf0"
    signalTextColor: white
    labelBoxBkgColor: "#20c997"
    labelBoxBorderColor: "#ffc107"
    labelTextColor: white
    loopTextColor: white   
---

sequenceDiagram
  actor U as User
  #participant altV as movieDescription.ejs
  participant V as searchResults.ejs
  participant cJS as reviewModal.js
  participant SS as index.mjs
  participant DB as database
  participant API as omdb's API
  autonumber
  U ->> V: User inputs:<br>title & rating & review<br>clicks submit on modal
  V->>cJS: validation check
  alt invalidation of inputs
    cJS->>V: update and show invalidation
  end
  cJS ->> SS: POST Request<br>data: title, rating, review, movie_id
  SS ->>+ DB: QUERY<br> if movie_id<br> exists in movie table
  DB ->> SS: response
  alt doesn't exist in DB
    SS->>API: GET request for movie details
    API->>SS: GET response for movie detals
    SS->>DB: insert movie into movie table
  end
  SS ->>+ DB: QUERY<br>movie_id in user's watchlist table
  DB ->>- SS: response
  alt doesn't exist in DB
    SS ->> DB: INSERT<br>movie_id, user_id into watchlist table
    
  end
  SS->>DB: INSERT<br> review into review table
  SS->>cJS: POST Response
  alt response not ok
    cJS->>V: show alert indicating review not recorded
  else response ok
    cJS->>V: close Modal, show Toast indicating review recorded
  end

  links SS: {"Dashboard": "https://dashboard.contoso.com/alice", "document": "/index.mjs"}

  box grey Client-Side
    #participant altV
    participant V
    participant cJS
  end
  box grey Server-Side
    participant SS
    participant DB
  end
Loading

View Edit User: password update

  • as a note updating of password should be similar, simply replace any instance of password with password instead
---
config:
  theme: neo-dark
  themeVariables:
    actorBkg: "#0d6efd"
    actorBorder: white
    actorTextColor: white
    primaryColor: "#0d6efd"
    signalColor: "#0dcaf0"
    #sequenceNumberColor: "#0dcaf0"
    signalTextColor: white
    labelBoxBkgColor: "#20c997"
    labelBoxBorderColor: "#ffc107"
    labelTextColor: white
    loopTextColor: white  
---
sequenceDiagram
  actor U as User
  #participant altV as movieDescription.ejs
  participant V as editUser.ejs
  participant cJS as client-side.js
  participant SS as index.mjs
  participant DB as database
  #participant API as omdb's API
  autonumber
  U ->> V: User inputs:<br>new password<br>clicks Update for password
  V->>cJS: input validation
  alt input invalid
    cJS->>V: update view<br>indicating invalidation
  else input valid
    cJS->>SS: POST<br>Request<br>update password
  end
  SS->>DB: UPDATE<br>new value into password<br>of user table
  DB->>SS: query response
  SS->>cJS: POST<br>Response
  cJS->>V: DISPLAY<br> toast<br>password changed
  box grey Client-Side
    #participant altV
    participant V
    participant cJS
  end
  box grey Server-Side
    participant SS
    participant DB
  end
Loading

View User Edit: an Edit Review is clicked

---
config:
  theme: neo-dark
  themeVariables:
    actorBkg: "#0d6efd"
    actorBorder: white
    actorTextColor: white
    primaryColor: "#0d6efd"
    signalColor: "#0dcaf0"
    #sequenceNumberColor: "#0dcaf0"
    signalTextColor: white
    labelBoxBkgColor: "#20c997"
    labelBoxBorderColor: "#ffc107"
    labelTextColor: white
    loopTextColor: white
---
sequenceDiagram
  actor U as User
  #participant altV as movieDescription.ejs
  participant V as editUser.ejs
  participant cJS as client-side.js
  participant SS as index.mjs
  participant DB as database
  #participant API as omdb's API
  autonumber
  U ->> V: User clicks edit button<br>on a review
  V->> cJS: handle event
  cJS->> SS: POST Request for full Review info
  SS->>DB: query review details
  DB->>SS: query Response
  SS->>cJS: POST Response
  cJS->>V: modal to edit pops up<br> pre-filled with data from database
  box grey Client-Side
    #participant altV
    participant V
    participant cJS
  end
  box grey Server-Side
    participant SS
    participant DB
  end
Loading

View User Edit: an Edit Review Modal is Filled and Submitted

---
config:
  theme: neo-dark
  themeVariables:
    actorBkg: "#0d6efd"
    actorBorder: white
    actorTextColor: white
    primaryColor: "#0d6efd"
    signalColor: "#0dcaf0"
    #sequenceNumberColor: "#0dcaf0"
    signalTextColor: white
    labelBoxBkgColor: "#20c997"
    labelBoxBorderColor: "#ffc107"
    labelTextColor: white
    loopTextColor: white
---
sequenceDiagram
  actor U as User
  #participant altV as movieDescription.ejs
  participant V as editUser.ejs
  participant cJS as client-side.js
  participant SS as index.mjs
  participant DB as database
  #participant API as omdb's API
  autonumber
  U ->> V: User Edits old Review<br> in edit modal
  V->> cJS: handle event
  cJS->> SS: POST Request to UPDATE Review
  SS->>DB: query UDPATE review details
  DB->>SS: query Response of UDPATE
  SS->>cJS: POST Response of UPDATE
  cJS->>V: toast shown<br>Review has been updated
  box grey Client-Side
    #participant altV
    participant V
    participant cJS
  end
  box grey Server-Side
    participant SS
    participant DB
  end
Loading

< Back to Docs << Back to Main Page