sccapstone / webevents Goto Github PK

Repo for 2019-20 Capstone project. This goal of our web application can be found in the Scheduling Application.docx file.

Home Page: http://ec2-3-133-106-204.us-east-2.compute.amazonaws.com/

HTML 4.38% JavaScript 75.41% CSS 20.21%

scheduler webapp react reactjs excelreader capstone babel webpack nodejs expressjs

webevents's Introduction

This project was bootstrapped with Create React App.

server was set up using medium guide: https://medium.com/@maison.moa/setting-up-an-express-backend-server-for-create-react-app-bc7620b20a61
along with: https://programmingwithmosh.com/javascript/react-file-upload-proper-server-side-nodejs-easy/

TO RUN THE APPLICATION

After you download the files, you will first need to cd into the client folder, and npm install from there. From there, you will run sudo npm start, and the application should start in your local host. In another terminal session go into the server folder and npm install node modules, and then run the server using node server.js.

You should not have to this, as the app is currently deployed at: http://ec2-3-133-106-204.us-east-2.compute.amazonaws.com.

To use the application, there are two files attached. First is the Test.csv file, which is the file that was given to us by our client. You will upload this, and then hit the process button to run the algorithm on it followed by the download button to download the processed file.

the client server file structure is:
WebEvents (whole app)
Client(all react frontend stuff there)
-npm install
-sudo npm start
-npm test
Server(template downloads)
-npm install
-node server.js

Available Scripts

In the project directory, remember to change directory to the /client/ directory. This can be done with

'cd client'

Next, the node modules must be installed and migrated. This has to be done once and before 'npm start':

'npm install'

Afterwwards, start the app:

`sudo npm start`

[ By default, the development server is set to start at port 80 on your local machine which requires administrator privilages, you can also specify <PORT_NUMBER> if you wish to change from port 80]

Runs the app in the development mode.
Open http://localhost to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

Testing

`npm test`

Unit testing is located in the source folder in the file App.test.js, while the behavior testing is located in the Tests folder.

For Unit testing, run npm test in the client source folder in the terminal. It will run the App.test.js file, and then give a report on what happened. For Behavior testing go into client/Tests and open the html Document. You need UI.Vision webbrowser app installed to run behavior testing.

See the section about running tests for more information.

`npm run build`

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

`npm run eject`

Note: this is a one-way operation. Once you eject, you can’t go back!

If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.

You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

Deployment

AWS Deployment: We are hosting our client and server under the same AWS EC2 instance. to connect to this instance you must change directory to webevents so you have the key file available with LS run the command: ssh -i "keyServerWebEvents.pem" [email protected] once logged in you must run the screen command to switch between terminal processes. To use screen use 'Ctrl-A' followed by '?' to get the information page.

This section has moved here: https://facebook.github.io/create-react-app/docs/deployment

`npm run build` fails to minify

This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify

webevents's People

Contributors

Stargazers

Watchers

webevents's Issues

User can upload .csv file

Beautify "Instructions" Page

The HOW TO USE page cannot look like this. visit some food recipe sites for inspiration if need be.

If you think you cannot work on this, draw out what you think would look nice or send me a link.
Anyone should be able to work with HTML and CSS

parent issue #82

Add POC Issues

as requested in M7. Requirements.

Checkbox to "force fill" users.

Need to implement a boolean checkbox that the algorithm will use to fill users into groups that are non-optimal.

M13 Feedback

I was able to build and run the testing. I am putting one stack trace here. SS src/App.test.js
✓ renders without crashing (9ms)
sheets component
✓ Matches the snapshot (3ms)

› 1 snapshot obsolete.
• test component Matches the snapshot 1
Snapshot Summary
› 1 snapshot obsolete from 1 test suite. To remove it, press u.
↳ src/App.test.js
• test component Matches the snapshot 1

Test Suites: 1 passed, 1 total
Tests: 2 passed, 2 total
Snapshots: 1 obsolete, 1 passed, 1 total
Time: 0.203s, estimated 1s
Ran all test suites.

Watch Usage: Press w to show more.
The README is not written well. Please mention specific commands to the README for navigation and run tests and deploy. For example: if you want to run the test from client source directory please mention: cd client & then npm test

Architecture feedback

From M8. Architecture

List of URLs you will implement. Explain any search arguments in English. Link (actual hyperlink) each URL to the page it shows in your Detailed Design milestone.

/upload - users use this page to upload their file
/request/:id - after uploading they see their uploaded data in this page, can change data
/schedule/:id - shows the generated schedule

The Database schema: set of tables/documents with list of attributes and their types. Describe each table and attribute in English.

You are implementing a scheduling algorithm. It needs data: Constraints and Events. Where are these stored? What do they look like. Even if you are able to get around using a database (you won't) you still need a Model for the Constraints and Events. For example:

class Event {
    private DateTime start;
    private DateTime end;
   private int roomSize;
.....more stuff....

and so on. Of course, and Event is just the start, you also need Constraints. How do you implement Constraints?

This is a readme issue. After you read it, unassign yourself from this issue. If you are the last person assigned to this issue then close it. After 2 weeks this issue can be closed even if there are still people assigned.

Some 3rd-scheduling algorithm

Coffee shop, doctor, etc..

Visual Improvements for RC1

We need to buckle down and actually work out the different pages on the website. Everything should be working differently and presentable to the end user, not just to the development team.

Welcome USCneXtPlatform

Hi USCneXtPlatform Capstone team,

Welcome to our REACT JS web app, our website is hosted at the following URL:

http://ec2-3-133-106-204.us-east-2.compute.amazonaws.com

and should look like this:

If there's any general questions about our web app or our goals, feel free to ask them here.

Minimal description for each screen

Please add more description for each screen

M14 Feedback

"I am able to upload a .xlsx and .csv file. However, once the file is uploaded, once I press the process uploaded file the app gets stuck. The downloaded file is empty. User can select options on the file and download the finished file. The sheduling algorithm does not seem to be working as it returns an empty file. #73

Add RC1 Issues

Please add all your Issues for the RC1 milestone and set their Milestone to RC1.

Close this Issue when you are done.

Deadline is Sunday, March 29.

App.test.js file doesn't work with workflow

Check our workflow. there is an ongoing fail on every commit test.

./client/components/App.test.js

User can download finished file

User can download the file after the changes are applied to it.

Update Personal Log

Your Personal Log has not been updated in 3 weeks.

M10 feedback

Here too:

You have a copy of the users' Calendar. Most will assume their calendar is private data.

Beautify "HOME" Page

This is not acceptable, going to assign this to myself.

Going to see how this will be.

Rough Design feedback

So, the user uploads a file, then downloads it. The whole thing can and should be done with one page. Not much need for a webapp. In fact, the youtube upload page is all you need:

But, as we discussed in the meeting, that is not enough functionality for this class. Your client is satisfied with the 1 simple feature. Good. But you need to add more. We discussed building this app for many clients. Some of the problems you have to solve for that to work:

How do you communicate to the user the specific format that the spreadsheet has to be in? Your app will not work unless the spreadsheet meets some very specific requirements. How do you force the users to comply? Obviously, simply telling them in a big text page is the worst possible way of doing it. What are better ways?
How do you allow flexibility in schedule creation? Some people might want to schedule Capstone teams (5 students, 1 prof in common with all), others might want to schedule shifts at the coffeeshop (3 people on at all times during the day, 2 at night, 6 hour shifts), etc. This will impact the previous point.
Other way to import preferences? say by importing people's calendars? Google Calendar, Outlook, Apple Calendar, etc. allow users to export/share calendars. People already keep all their events in their calendar. Can you use it?

Alternatively, find your own ways to add some functionality to a scheduling webapp.

Scheduler type selector should show selection

App should should the currently selected scheduler type.

Which framework will you use?

If you have questions just ask, right here.

Beautify "About Us" Page

The about page cannot look like this. This is unacceptable. We need to make the page feel more modern, visit some other websites for potential inspiration

UI: A bar appears in the middle of the screen

A bar appears in the middle of the screen once I click links for page (contacts, instructions etc)

M9: No merge commits

The commit log does not contain any merge commits.

Scheduler gives bad schedule

Using the scheduler on the left-hand column, I created a new input file
mysheet.xlsx and submitted it with group size=3, Seminar Scheduler, allow multiple events. I got
results.xlsx which has the first 2 events scheduled correctly but leaves 4 people unassigned, 3 of which could have been assigned.

Algorithm doesn't give groups to people that can have groups

We gave the client a version of our app, and he said he not everyone was given a group for his test files.

Populate the contact us page

The contact us page looks as follows. Could someone fill out this page?

M15 Feedback

I am able to access the link. All the links are working. Uploads and downloads are working. It might be better to add some more instructions about how to use your app and what exactly it does. There is a weird bar in the middle of the screen once one clicks any page link #111. Once "process uploaded excel file" link is clicked it might be better to have some pop up or message that processing is completed. Text formatting of the pages are not same.

Beautify the Home page (minor)

I did most of the heavy work on the home page, please try to finish the rest of the page

Design feedback

Also, I don't know what those "Options" on the left-hand bar are for.

Note that your Requirements document should have more features than you list in the Design document, just to make it complex enough for this class. So, if your client has no more features for you then just think of some features you want to implement.

Field-scheduling algorithm

Algorithm to schedule a team/person to a field at a single time

M1: Form Teams

Goals:
-Establish schedule
-Reach out to customer
-Organization of project
-Elect team captain
-Set up wiki

M11: POC Unable to launch app on local host

unable to launch the app. I get an error about No module named firebase. Unable to fix it at the moment. Can you please provide some more detailed build instructions? Also there might be a version conflict due to node.js.

Remove node_modules from git. Fix gitignore

WebEvents/server/node_modules should not be in git.

Update Personal Log

Your Personal Log has not been updated in 3 weeks.

Create template file and download links for them.

have multiple template files on server so users can pull it from server endpoints.

M11: proof of concept

app is running on heroku. Links are working. Options link does not do anything. File can be uploaded and it gets displayed correctly. Download is working. Even in case of empty file clicking the download always shows downloaded. Export is also working. The UI can be improved.

Refactor all Global Variables

Variables need to be pulled into the views/.js files and not stored in any component/.js files

Deployment to the internet

Add newlines

You can make this

look better by adding some newlines.

In markdown when you want to insert a <br /> break, you end a line with two or more spaces, then type return. The next line will be in its own line but without an empty line in between.
See my MarkdownTips.md for tips and links to markdown tutorials.

When done reporting, close this Issue. I might re-open it later if I have questions.

Deadline is the day of scheduled meeting or the day after if you are having issues.

sccapstone / webevents Goto Github PK

webevents's Introduction

TO RUN THE APPLICATION

Available Scripts

'cd client'

'npm install'

sudo npm start

Testing

npm test

npm run build

npm run eject

Learn More

Code Splitting

Analyzing the Bundle Size

Making a Progressive Web App

Advanced Configuration