codefordenver/idealab

Queuing app for 3D printing

ideaLab

ideaLab is a queuing app for 3D printing. It includes a user-facing form that allows the user to request a print job. It also consists of an employee-facing app that will enable them to change the statuses of print jobs, view print jobs, and modify print jobs. The web app is frontend React and backend Java Spring.

Getting up and running

Install docker and docker-compose (should be bundled). Clone the project.

Navigate to the ideaLab directory.

Perform the actions described in "Setting up Resource File."

Run the following command: docker-compose up

The project will then build and launch itself. You can access the frontend by going to localhost:3000 in your browser.

For Linux and mac, live reloading should work out of the box. So say you edit a frontend file, it should update automatically as long as it's not a package.json file, same for the java backend.

Cloning

To get started, clone our repo. Using cd and dir (or ls if not on Windows) in your command line, got to the folder you want to clone the repo into and start by typing:
git clone http://github.com/codefordenver/ideaLab.

Code for Denver: Getting Started on Helping Project

To understand more about this project & how you can join, read this PowerPoint: https://docs.google.com/presentation/d/13J6mfre2-HwBbnY5ozxYmMI5CZcK1R_OdZiDlbpZNEA/edit#slide=id.g5e3ebcd7e4_0_111.

Getting The Project Up and Running

Our project is split into 2 sections: frontend & backend. We have our project set up with docker-compose. Navigate to the ideaLab folder and type

docker-compose up

If you are having any issues with getting the api or frontend to show, type

docker-compose stop
docker-compose build
docker-compose up --force-recreate

This should rebuild the images and recreate the containers so you have an up to instance running.

Backend

Our backend is split into 2 sections: our API app & our database. Our API is written in Java Spring & Gradle. Our database uses open source POSTGRES and we have containerized it in Docker.

Setting up Resource File

1. Request the latest dev resource file (if starting a new project see Backend/src/main/resources/sample_dropbox.properties)

⚠️ When contributing to the existing project, make sure to make a copy of the sample properties file and do not rename directly. If you rename and commit it will be deleted from the master branch.

2. Place the resource file and values in /Backend/src/main/resources/dropbox.properties (delete "sample_" if starting a new project)
3. To run dropbox yourself, create a dropbox app using the DBX Platform developer portal and get an access token

• Step 1: Navigate to the DBX Platform and follow the directions to make a new app.
• Step 2: Select the regular Dropbox API
• Step 3: For this project you only need a single App folder
• Step 4: From the console, create an access token and paste that into the dropbox.properties file.

The final directory should like like the following once the dropbox.properties file is setup. ❗ The dropbox.properties file is on the .gitignore so keys will not be commited and the sample_dropbox.properties needs to always be commited for future users):

If they needed to be used elsewhere, the values from the properties file can be accessed using the @Value annotation. i.e.

  @Value("${dropbox.ACCESS_TOKEN}")
  private String ACCESS_TOKEN;

API & Java Spring & Gradle

1. Make sure you have everything downloaded appropriately the first time. Go to our Google docs presentation if you still need to do that.
2. Using CD and DIR (or LS) in your command line, navigate to your local repo of ideaLab/Backend.
3. Once you are in the appropriate folder, type gradlew bootRun in your command line. (You do not need to start up our Docker container with the database because Gradle is automatically doing that for us.)
4. In your browser, type localhost:8080/api/print-jobs. You have arrived at our list of print jobs page.

Database & POSTGRES & Docker

In general, you should not have to go into this section. If for some reason you do, here are the instructions.

1. Once you have docker-compose up and running, in a new command line type in

docker exec -it idealab_postgres_1 bash

2. Type

psql -U postgres

Now you can run basic postgres commands.

Common docker errors for future devs

1. ERROR: Couldn't find env file: /Users/.../dev.env SOLUTION: Add an empty dev.env file in the top-level directory

Frontend

1. The frontend is written in React.If you need help with react, refer to its documentation.
2. To see our page, type into your web browser localhost:3000/#/login.

idealab's Issues

GET request for individual print job

Create a GET request that takes in a print job pk and returns the details for that print job. Should include:
-print job pk
-email
-dropbox file link
-color
-comments
-current status
-time changed to current status
-time job was initially requested

Error page that requires users to be at library

This should be based on the error page component card and should not be done until that is complete
Create an error page that says the user must request a print job at the library. Direct them to go to the library and speak with a staff member if they have any questions.

OA-06 Logic for Changing password (admin only)

Create a page that allows the admin to select the account (for now just admin or staff) and change the password for that account.
It should have:
-drop down with list of accounts
-new password
-confirm new password
-submit button

Ensure it checks that the password is a "safe" enough password. (Need to determine what that means). Also, this page needs to have a space to return the message after submitting the new password.

OA-02: DESIGN - Log In / Sign Up / Change Password / Delete User pages

MU-01: Design CSV that will be uploaded

DPLl wants to be able to upload multiple print jobs at the same time. Design a CSV file we will be able to upload. It must have all information.

Create Endpoints for Analysis View

Create a GET request that returns the number of print jobs requested per month (you will likely be using the print job audit table)
The returning JSON should look something like this:
year: 2019
month: Jan
count: 1
month: Feb
count: 3
...

I haven't looked into this very far so let me know if you have any questions!

Fill out models to match with database tables

In our Java Spring app, create a model for each table. Make sure the table names & table fields match exactly with the database itself (or schema).

Create a Docker task in Gradle

Create a Docker task in Gradle so that everytime Gradle is run our Docker container spins up.

OA-05: Update DB schema for oAuth

Update the DB schema for oAuth tables

Build Login Manager

Build out the Login Manager component

GET request for all print jobs

Create a GET request that returns all print jobs ever. This should return
-print job pk
-preferred color
-email address
-current status
-time current status occurred
-when was initially requested
-comments
-Dropbox link

AQ-01: (READ) GET all print requests, save in top AQ Component

Create a page that displays everything in queue. This should include an ability to change the status + submit button. Also need to include a way to tell what staff member did it. Should be interacting with a get request from backend endpoint.
It should include a table that allows you to filter based on date and status.

Database schema

Create a database schema. It needs to be able to hold the following:
-Current user info
-Temporary user info (name will not be saved in long run)
-Job details (color, stamp, comments, etc)
-Status of print job
-Some sort of link to drop box

MU-02: Create a function to parse the CSV file

DPL wants to be able to upload multiple print jobs at the same time. Once the CSV file has been designed, we need a function that can parse through the CSV

Create analysis views

Create a list of analysis views for the library to see. Examples include:
-# of jobs by month/date/etc
-# of jobs by color month/day/etc
-Average time between statuses

OA-08: Functionality for Change Password: Endpoint, JS logic & error handling

Create an endpoint that takes a post request and allows a new password for an account. This should ensure that the requesting user is an admin and that the password is "safe" enough. It should return an error or a success statement.

Backend: PUT request for request

Create a PUT request that allows an employee to change details of a print job. This should allow the following fields to be edited:
-filename
-color
-comments

It should return a response that the PUT request was successful.

Create Frontend Analysis Views

Once the planning has been done for the analysis view, create a single frontend page for it with the different analysis.

• Create a section on the left nav that lets you go to the analysis section
• Create a graph that lets you split by month (you will be given 12 months by backend) and then it is a stacked bar graph by color (example: https://www.google.com/search?q=stacked+bar+graph&client=firefox-b-1-d&sxsrf=ACYBGNRte054JZ-OCs9il-DG7zB29HVgTA:1576546173024&source=lnms&tbm=isch&sa=X&ved=2ahUKEwiYv_WUxLvmAhXQZs0KHaQ2BssQ_AUoAXoECBIQAw&biw=1536&bih=728#imgrc=2qqZEWzi4j_MZM: but I don't care if it is actually that one)

Request form POST request

The user request form needs to be submitted to a post request to the backend. It then needs to received the message back and either state that the job has been successfully requested or state the error.

Create database and tables

Create database & tables based on schema. This will be done in Firebase (Google product). The Firebase project has already been created. Reach out to @hannahkamundson to gain access

Backend: DELETE request to delete a job

Create a DELETE request that allows an employee to delete a request. It should return a response that indicates whether the delete was successful.

Create docker for app + db

for postgres database + app.

AQ-03 Staff can EDIT a print job

Create a page that allows an employee to edit a print job. It should allow the following to be edited:
-Name
-File
-Preferred color
-Comments

The page should automatically populate with that information once a drop down with the correct print job is selected. Then there should be a submit button. It should receive a response that states whether it was successful or not.

AQ-05: DESIGN - Queue Card

GET request for deletable print jobs

Create a GET request for delatable print jobs. This should be print jobs that are in either In Progress status or Pending status. Only needs to return:
-print job pk
-email
-time job was initially requested

OA-03: Sign Up Functionality (must be logged in as admin)

Create request form

Create the request form for the user. It should include the following fields:
-Name
-Email address
-File to print (button)
-Preferred color (drop down)
-Comments
-Submit button

The submit button needs to have a space to return the error.

Plan the user authentication

Figure out the design for user authentication & create a plan for it.

Backend: Change status POST/PUT request

Create either a POST or PUT request (look into it) that allows an employee to change the status of a print job. This should include both the employee making the request + the new status.

Backend: POST request for user print request

Create a POST request for the user print request. Make sure to work with the person doing this on the frontend. The request should include the following:
-Name
-Email
-File
-Preferred color
-Time stamping
-Comments

Ensure the file has a .STL extension. Ensure the email address has not already created a print request that day. Day is defined as that day (not as 24 hours).

OA-04 Delete An Existing User (admin only)

OA-06: Create user authentication for each get/post/etc request

Create user authentication based on plan. This should be for each get/post/etc request.

GET request all active print jobs

Create a GET request that returns all active print jobs. This is anything In Progress or Pending. Should return:
-print job pk
-email
-dropbox file link
-color
-comments
-current status
-time changed to current status
-time job was initially requested

AQ-08: Ordering Logic for multi-prints from same user

IdeaLab has made the request that if the same person requests multiple print jobs in one day:

• First job is added to queue as normal.
• Any other jobs are pushed to bottom of queue. Any new requests coming in take priority over user's second print.
• Once first request is done, second print can start moving up in queue
• No more than 5 prints per 24 hours.

Create a component for error pages

Use a general notification library or component to display general errors.

• Throw in some toast

AQ-04 DESIGN: Container/ overall queue

Create the design for employee facing website. This should include:
-page that shows all tasks; this should be able to filter down by status (pending, in progress, completed); this should be able to allow the employee to change the status of a job and somehow submit their name so we can know what staff changed the status
-log in page
-change password page
-page to delete a print job
-page to edit a print job
-page to upload a CSV for mass quantity upload
-basic analysis page that lets them see basic analytics (# this month, # per month over time, favorite color, color by month, etc)

MU-02: Create endpoint for CSV upload

Create an endpoint for the frontend to be able to upload CSV file. POST request.

Change testing for PrintJobControllerTest

This is generic. We need to update it to correctly test the PrintJobController

OA-07: POST request for changed password

Create a post request that allows an admin to change a password. It will need to send
-account (for example username)
-new password

After the post request it needs to get the response. Was it successful?

Design the user facing frontend

Create a design for the user facing frontend. This should consist of:
-form that asks for name, email, upload file, preferred color, comments
-error page (where we can put different text in depending on error)

Dropbox interaction

When a file is uploaded, have it created in Dropbox. Make sure a link to that file in Dropbox is added to our table

Ensure the POST request only allows 1 dropbox file unless admin

Ensure the post request for the user print request only has one file unless the requesting user is an admin.

OA-01: Log In Submit Button Functionality

Create a log in page for employee. Should return a statement if there is an error.

MU-01: Create page to mass upload CSV

Create a page where the staff member will be able to upload CSV file. It should interact with the backend endpoint. Make sure only accessible by admin (not staff)

AQ-02 When print status is changed to 'done', pop up confirming email should be sent

• Create link to backend sending of email
• Create popup that asks if you want to send email if status changes to completed

Delete Button design & logic

-Delete button can only show if card has WAITING status
-Add are you sure pop up

• DELETE request

Error page if request more than 5 print job per day

This card should use the general error page component from the other card
Each person (determined by email) is only allowed to request one 3D print job per day. Create an error page if a user requests more than 5 job in a given day that explains the situation and directs them to speak with a staff member.

• Done after Submission form
• Check for error in request
• Use error notification component to display the error that they submitted more than 5

Email user when status changes

When the status changes for a print job, automatically email the associated email.

AQ-07: Individual Card Save Logic

Currently iterating through designs. Will separate this task as we know more.

Setup database to java connection

Connect Java Spring app to docker image with our database