Merge pull request #1 from ECN/feature-configure-reactjs

Merge Feature configure reactjs

.gitignore

@@ -1,2 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
 .DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

Dev Environment Setup Guide.md

@@ -0,0 +1,10 @@
+# Dev Environment Setup Guice
+
+## Prerequisites
+- [NodeJS](https://nodejs.org/en/) >= v14.2.0
+- npm >= v6.14.4
+- npx >= v6.14.4
+
+## Setup
+**Note:** webqueue2 uses npm and  create-react-app to manage itself. You can learn more about npm [here](https://nodesource.com/blog/an-absolute-beginners-guide-to-using-npm/) and create-react-app [here](https://create-react-app.dev/docs/getting-started/).
+

Dev Logs.md

@@ -1,12 +1,139 @@
 # Dev Logs
 These are daily and weekly summaries of the work thats been done on webqueue2. They start on 6/23 because that's whe this document was started but other work was done before this time.
 
-## 6/22/20 - 6/28/20
-This Week's Goals:
+## Week 3: 7/6/20 - 7/12/20
+### This Week's Goals:
+- Finish item view
+- Rewrite ECNQueue.py as a CGI script that can receive requests from webqueue2 an return JSON data
+
+**If there is time:**
+
+- Create development environment setup guide
+- Work on automated deployment tooling
+
+<!-- ### This Week's Recap: -->
+
+---
+
+### Monday - 7/6/20
+- Decided to use [Semantc Versioning](https://semver.org/) guidelines for releases
+	- Format: [Major].[Minor].[Patch]-[Release Identifier]
+	- Major is bumped for considerable feature additions
+	- Minor is bumped for minor feature additions/improvements
+	- Patch is bumped for bug fixes
+	- Release Identifier can be:
+		- **alpha**: buggy, incomplete changes, not meant for general use
+		- **beta**: testing, should be complete but room to grow
+		- **release**: ready for general consumption
+- Began using [CssBaseline](https://material-ui.com/api/css-baseline/#cssbaseline-api) componenet from MUI as a CSS normalizer
+- Worked on creating a fluid drawer for item views similar to [this MUI example](https://material-ui.com/components/drawers/#persistent-drawer)
+	- [This video](https://www.youtube.com/watch?v=k_AN49fA9g0) about the `makeStyles` and `useStyles` hooks was quite helpful in explaining how to extend [MUI's default theme](https://material-ui.com/customization/default-theme/).
+
+### Tuesday - 7/7/20
+- Continued work on a fluid drawer
+- Began working on a responsive table similiar to [this project](https://github.com/ArsenyYankovsky/react-responsive-cards-table)
+- After many hours of experimenting with [material-table's styling options](https://material-table.com/#/docs/features/styling) it seems that the options exposed do not provid the granularity needed for a resonsive table. Options are:
+	- Forego a responsive table at this point and leave it for further version, opting for scrolling tables on mobile
+	- Implement a CSS workaround by manually assigning styles to the table via an external styling source
+	- Look for an implement another library that allows for more desired behavior
+	- Implement a custom solution for this searchable table
+- Because of time and a need to get something out, I will forego a responsive table for now
+- Tomorrow should be spent working on a reponsive drawer interface
+
+### Wednesday - 7/8/20
+- Continues working on a responsive drawer interface
+- A truly responsive drawer interface seems would be something that adapts to every discrete viewport width. This does not seem an easy way forward. However, breakpoints can be considered instead. Using MUI's [`useMediaQuery()` hook](https://material-ui.com/components/use-media-query/) and predetermined percentage values I can create a usable though limited alternative.
+	- _Ex:_ 
+	```js
+	drawer: {
+		[theme.breakpoints.up('xl')]: {
+      		width: `calc(60%)`,
+      		flexShrink: 0,
+    	},
+  	},
+	```
+- Implemented custom toolbar with stateful action buttons
+- Added dark mode toggle using custom toolbar
+
+### Thursday - 7/9/20
+- Continued work on responsive table
+- More than two weeks have been spent trying to make the material-table library work, another library shuld be considered for what is needed here. [react-table](https://github.com/tannerlinsley/react-table) looks functionally promising thought thematically challenging.
+- Moved from feature-configure-reactjs back to master
+
+<!-- ### Friday - 7/10/20 -->
+<!-- ### Saturday - 7/11/20 -->
+<!-- ### Sunday - 7/12/20 -->
+
+## Week 2: 6/29/20 - 7/5/20
+### This Week's Goals:
+- Configure automated deployment systems
+- Create dev environment setup walkthrough
+- Rewrite ECNQueue.py (from origial webqueue) for inital item reading support
+- Create final UI mockups for v1
+
+### This Week's Recap:
+- Automated deployment systems have not been addressed; static builds transfered over FTP are the current solution
+- Dev environment setup walkthrough was not completed
+- ECNQueue.py rewrite was not started
+- UI mockups were not completed
+- Moved from GitHub.com to RCAC GitHub
+- Created simple branding for webqueue
+- Integrated [Material UI](https://material-ui.com/) and [material-table](https://material-table.com/)
+- Pushed first proof of concept to qwebtest using [Material UI](https://material-ui.com/) and [material-table](https://material-table.com/)
+
+
+---
+
+### Monday - 6/29/20
+- Found [this article](https://skryvets.com/blog/2018/09/20/an-elegant-solution-of-deploying-react-app-into-a-subdirectory/) on deplying a React app to a subdirectory.
+- Looked into automated deployment methods:
+	- Decided git hooks aren't the way to go b/c they aren't comitted to version control and wouldn't be ubiquitous
+	- GitHub Webhooks and RESTful APIs might be a route for the future after reading [Deploy Web Applications Automatically Using GitHub Webhooks](https://www.toptal.com/devops/deploy-web-applications-automatically-using-github-webhooks)
+	- Manual `npm run build` and copying from the build directory to production will work for now
+- Created and initial branded app
+	- Color/font info from [Purdue's brand guide](https://brand.purdue.edu/visual/)
+	- Icon design available [here on Google Slides](https://docs.google.com/presentation/d/1bTom3z9NgdabBS6pAAgiBTMOpCpgmkbg_NFGUXHO1ZU/edit?usp=sharing)
+	- Generated images using [favicon.io](https://favicon.io/)
+- The decision to move from GitHub proper to RCAC GitHub was made and started. Next actions to be taken after accounts are created tomorrow.
+
+### Tuesday - 6/30/20
+- Move to RCAC GitHub was completed. Deployment tools were updated.
+- Decided to move forward with Material UI framwork
+- Integrated MUI into project and set bare bones example
+- Studied MUI components, appbars, drawers and tables can makeup the UI
+- Should consider React Router for more complicated navigations (like per ticket views in separate windows)
+
+### Wednesday - 7/01/20
+- This day's time was carried over from last week's overtime
+- Played with MUI during flights
+
+### Thursday - 7/02/20
+- Integrated [material-table](https://material-table.com/) for viewing and filtering items
+- Pushed alpha to qwebtest
+- Need to customize views for mobile and replace filter icons with search icons
+
+### Friday - 7/03/20
+- No work was done because of the holiday
+
+### Saturday - 7/04/20
+- Worked on a responsive drawer for active items views; incomplete work
+
+## Week 1: 6/22/20 - 6/28/20
+### This Week's Goals:
 - Move existing jQuery/DataTables view to React Components
 - Rewrite ECNQueue.py (from origial webqueue) for inital item reading support
 
-**Mon - 6/22/20**
+### This Week's Recap:
+- Moved from a private to public repo and sanitized comitt logs
+- Drafted new UI mockups to move forward with in React
+- Completed [React Getting Started](https://app.pluralsight.com/library/courses/react-js-getting-started/table-of-contents) course on Pluralsight
+- Moved from server-side to client-side rendering.
+- Finalized development toolchait with [Create React App](https://github.com/facebook/create-react-app) and VS Code
+- Built successful proof of concept for client-side rendering
+
+---
+
+### Monday - 6/22/20
 - Decided to move to a public repo for:
 
 	- **Reference-ability:** With a private repo, if I want to share code I need to either send snippets and screenshare. With a public repo I can simply link to the up to date code.
@@ -17,7 +144,7 @@ This Week's Goals:
 
 - Removed sensitive item info from git commit logs in preparation for making a public repo.
 
-**Tuesday - 06/23/20**
+### Tuesday - 06/23/20
 - Finished the move from a private to public repo.
 
 - Recreated non-sensitive commit logs for previous work. Many previosu commits were consolidated for simplicity.
@@ -32,12 +159,30 @@ This Week's Goals:
 
 - Began building React data tables.
 
-**Wednesday - 06/24/20**
+### Wednesday - 06/24/20
 
-- Worke through [React Getting Started](https://app.pluralsight.com/library/courses/react-js-getting-started/table-of-contents) course on Pluralsight.
+- Worked through [React Getting Started](https://app.pluralsight.com/library/courses/react-js-getting-started/table-of-contents) course on Pluralsight.
 
-**Thursday - 06/25/20**
+### Thursday - 06/25/20
 
 - Finished [React Getting Started](https://app.pluralsight.com/library/courses/react-js-getting-started/table-of-contents) course on Pluralsight.
 
-- Decided to implement ReactJS with client side rendering because NodeJS is not available on the web host.
+- Began implementing ReactJS with client side rendering because NodeJS is not available on the web host.
+
+### Friday - 06/26/20
+
+- Set initial toolchain and development environment
+	- **ReactJS**: for UI development
+	- **ESLint**: for JSX, JavaScript linting
+	- **Babel**: to compile JSX to JavaScript and JavaScript to <=ES6 for backwards compatibility.
+	- **Autoprefixer**: for automagic CSS prefixing.
+	- **Webpack**: to combines and minimize all assets into production bundles
+	- **Jest**: for testng
+	- **NodeJS**: as a runtime for all the needed tools.
+
+- [Create React App](https://github.com/facebook/create-react-app) provides all of this and more easily.
+
+### Saturday 06/27/20
+- Finalized development environment
+
+- Built first successful production package and tested successfuly on [qwebtest](https://engineering.purdue.edu/qwebtest/).

README.md

@@ -1,2 +1,6 @@
 # webqueue2
 A re-write of Purdue ECN's webqueue
+
+See the test at [https://engineering.purdue.edu/qwebtest/](https://engineering.purdue.edu/qwebtest/)
+
+Read the [Dev Logs](https://github.rcac.purdue.edu/ECN/webqueue2/blob/feature-configure-reactjs/Dev%20Logs.md)