Merge pull request #29 from ECN/feature-create-drawer-system

Feature create drawer system

Dev Environment Setup Guide.md

@@ -2,58 +2,71 @@
 
 ## Prerequisites
 - [VS Code](https://code.visualstudio.com/download)
+- [git](https://git-scm.com/downloads)
 - [NodeJS](https://nodejs.org/en/) >= v14.2.0
 - npm >= v6.14.4
 - npx >= v6.14.4
-- Python 3
+- [Python](https://www.python.org/downloads/) >= 3.7
+
 
 ## 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/).
+- The webqueue2 API uses `gunicorn` as a WSGI server and this does not run on Windows. If you're developing on Windows, look into Ubuntu on [WSL2](https://docs.microsoft.com/en-us/windows/wsl/wsl2-index) or use a virtual machine.
+
+- 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/).
 
+---
 
-### Step 1: Create and enter a project directory
-```bash
-mkdir project-dir && cd project-dir
+### Step 1: Close the Reposistory
+```
+git clone https://github.itap.purdue.edu/ECN/webqueue2.git
 ```
+**Note:** github.itap.purdue.edu is only accessible on Purdue's campus or via the [AnyConnect webvpn](https://webvpn.purdue.edu/).
 
-### Step 2: Close the Reposistory
-```bash
-git clone https://github.rcac.purdue.edu/ECN/webqueue2.git
+### Step 2: Move to the project directory
+```
+cd webqueue2
 ```
 
 ### Step 3: Install npm Packages
-```bash
+```
 npm install
 ```
 
 #### Using npm
-There are three built in npm scripts that come from create-react-app:
+There are four npm scripts included in this project:
 
-1. `npm run start`: This will start a local development server on [localhost:3000](http://localhost:3000) and launch your default browser at that address. As you save changes in /public and/or /src you'll see your changes in the browser.
+- `npm run start`: This will start a local development server on [localhost:3000](http://localhost:3000) and launch your default browser at that address. As you save changes in /public and/or /src you'll see your changes in the browser. (API requests are automatically proxied to the API server.)
 
-1. `npm run build`: This will build a static version of the site in /build ready to be placed in the document root of any web server.
+- `npm run start-api`: This will start a local WSGI server on [localhost:5000](http://localhost:5000) to access the API. **Note:** You will need to add Python to your PATH variable.
 
-1. `npm run test`: This will run any tests (using the [Jest](https://jestjs.io/) tester). There are currently no defined tests.
+- `npm run build`: This will build a static version of the site in /build ready to be placed in the document root of any web server.
 
-1. `npm run eject`: <span style="background-color: #fff394">**THIS IS NON-REVERSABLE**</span>: This will abstract all of the build environment settings and make them available to you. See the [create-reacte-app docs on ejecting](https://create-react-app.dev/docs/available-scripts#npm-run-eject) for more information.
+- `npm run test`: This will run any tests (using the [Jest](https://jestjs.io/) tester). There are currently no defined tests.
 
 ### Step 4: Setup Python for API
 Go to the API directory
-```bash
+```
 cd api/
 ```
 
+Create Python virtual environment
+```
+python3 -m venv venv
+```
+
 Activate the Python virtual environment
-```bash
+```
 source venv/bin/activate
 ```
 
 Install Python requiements
-```bash
+```
 pip install -r requirements.txt
 ```
 
-### Step 5: Configure VS Code
+**Note:** You can deactivate the Python virtual environment by running `deactivate`.
+
+### Step 5: Install VS Code extentions
 
 #### Installing Plugins
 - [ES Lint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) for JavaScript linting
@@ -65,7 +78,30 @@ Optionally:
 - [Remote - SSH](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-ssh) for directly editing files on remote machine
 - [Markdown Preview GitHub Styling](https://marketplace.visualstudio.com/items?itemName=bierner.markdown-preview-github-styles) for previewing Markdown as it will appear on GitHub
 
-#### Configuring Environemnt
-- Python will need some workspace and debugger configuration to work. See [Getting Started with Python in VS Code](https://code.visualstudio.com/docs/python/python-tutorial) for more info.
-- Remote - SSH will requires hosts to be added to your SSH config file. See [this guide](https://linuxize.com/post/using-the-ssh-config-file/) for more info.
-- ES Lint, Babel JavaScript and Markdown Preview GitHub Styling will work without further configuration
+## Configuring Environemnt
+ES Lint, Babel JavaScript and Markdown Preview GitHub Styling will work without further configuration
+
+### Step 1: Configure VS Code's Python Extension
+Create a folder called .vscode in the project root
+```
+mkdir .vscode
+```
+
+Create a file in the .vscode folder called settings.json
+```
+nano .vscode/settings.json
+```
+
+Add the path to the virtual environment Python interpreter
+```
+{
+	"python.pythonPath": "./api/venv/bin/python3"
+}
+```
+For more information on the Python extension and details on how to use the debugger see: [Getting Started with Python in VS Code](https://code.visualstudio.com/docs/python/python-tutorial) for more info.
+
+### Step 2: Configure Python Docstring Generator
+In Settings > Extensions> Python Docstring Generator set the Custom Template Path to `./docstring-format.mustache`
+
+### Step 3 (Optional): Configure Remote - SSH Plugin
+Remote - SSH will requires hosts to be added to your SSH config file. See [this guide](https://linuxize.com/post/using-the-ssh-config-file/) for more info.

Dev Logs.md

@@ -1,6 +1,113 @@
 # 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.
 
+## Week 8: 8/10/20 - 8/16/20
+### This Week's Goals
+- Finish responsive two panel view
+- Start on ItemView rewrite
+
+<!-- ### This Week's Recap -->
+
+
+---
+
+### Monday 8/10/20
+- Updated Dev Environment Setup Guide to include Python and VS Code setup
+- Updated requirements for API virtual environment
+- Fixed broken links post GitHub migration
+
+<!-- ### Tuesday 8/11/20 -->
+
+<!-- ### Wednesday 8/12/20 -->
+
+<!-- ### Thursday 8/13/20 -->
+
+<!-- ### Friday 8/14/20 -->
+
+
+
+
+## Week 7: 8/3/20 - 8/9/20
+### This Week's Goals
+- Finish responsive two panel view
+- Start on ItemView rewrite
+
+### This Week's Recap
+- Responsive two panel view is mostly complete, breakpoints are needed.
+- Migrated from RCAC GitHub to ITaP GitHub
+
+
+---
+
+### Monday 8/3/20
+- Experimented with [`<Grid>`](https://material-ui.com/components/grid/#grid) based two column layout: works for fixed grid counts but not fluid.
+- Experimented with flexbox two column layout: `flex-grow`, `flex-shrink` and `flex-basis` properties behave inconsistantly sometimes not respective responsive units.
+- Built a drawer based UI example
+
+### Tuesday 8/4/20
+- Watched [Introduction to CSS by Scott Alan](https://app.pluralsight.com/library/courses/css-intro/table-of-contents) on Pluralsight.
+- Experimented with [`<Slide>`](https://material-ui.com/components/transitions/#slide) transitions in Material UI for showing and hiding ItemView.
+- Found a working combination of `flex-basis` and `flex-shrink` that makes widths behave expectedly (thanks to @dhallet.)
+```jsx
+// Create state variable for openning ItemView
+const [sidebarOpen, setSidebarOpen] = useState(false)
+
+// Create JSS Styles
+const useStyles = makeStyles({
+"leftCol": {
+	backgroundColor: "lightgreen"
+},
+"rightCol": {
+	backgroundColor: "lightblue",
+	overflow: "hidden",
+	width: "0"
+},
+"rightColShift": {
+	flexShrink: "0",
+	width: "50%"
+},
+"transition-width": {
+	transition: theme.transitions.create(["width"], {
+		duration: theme.transitions.duration.enteringScreen,
+		easing: theme.transitions.easing.enteringScreen
+	})
+}
+});
+
+const classes = useStyles();
+
+// Render UI
+return (
+	<Button variant="contained" color="primary" onClick={() => setSidebarOpen(!sidebarOpen)}>Toggle</Button>
+	<Box display="flex">
+		<Box className={clsx(classes.leftCol, classes["transition-width"])} >
+			{/* Content ... */}
+		</Box>
+		<Box className={clsx(classes.rightCol, classes["transition-width"], sidebarOpen && classes.rightColShift)}>
+			{/* Content ... */}
+		</Box>
+	</Box>
+);
+```
+
+### Wednesday 8/5/20
+- Gathered data about browser usage among ECN staff
+![Poll Data Results](https://github.itap.purdue.edu/ECN/webqueue2/raw/feature-create-drawer-system/docs/Browser%20Poll%20Data%208:5:20.png)
+- Created scalable ItemTable AppBar
+
+### Thursday 8/6/20
+- Working version of responsive drawer system
+	- Still need to set breakpoints
+- Populated [project issues](https://github.itap.purdue.edu/ECN/webqueue2/issues) for visibility and accessibility
+- Populated (and automated) [projects](https://github.itap.purdue.edu/ECN/webqueue2/projects) for visibility
+
+### Friday 8/7/20
+- Simplified issues/projects in GitHub by using tags instead of individual projects.
+- Migrated from RCAC GitHub to ITaP Github
+
+
+
+
 ## Week 6: 7/27/20 - 8/2/20
 ### This Week's Goals
 - Finish Item View
@@ -22,9 +129,12 @@ These are daily and weekly summaries of the work thats been done on webqueue2. T
 ### Tuesday 7/28/20
 - Gave public demo for initial UI and API
 
-<!-- ### Friday 7/31/20 -->
-
+### Friday 7/31/20
+- Found [this](https://gist.github.com/crearlink/f483dee7970364b0160f11d69e2201f5#file-medium-transitions-create-params-md) documentation for Material UI's undocumented `theme.transitions.create()` method.
+- Began working on repsonive drawer interface.
 
+### Saturday 8/1/20
+- After reading [How we launched docs.github.com](https://github.blog/2020-07-02-how-we-launched-docs-github-com/) by GitHub and seeing [their REST API docs](https://docs.github.com/en/rest/reference/repos) I think it would make sense moving forward to develop a usable docs site.
 
 
 ## Week 5: 7/20/20 - 7/26/20
@@ -46,7 +156,7 @@ These are daily and weekly summaries of the work thats been done on webqueue2. T
 
 ### Tuesday - 7/21/20
 - Added `requirements.txt` to Python environment for reproducable builds.
-- Updated [Dev Environment Setup Guide](https://github.rcac.purdue.edu/ECN/webqueue2/blob/master/Dev%20Environment%20Setup%20Guide.md) to include Python and VS Code setup.
+- Updated [Dev Environment Setup Guide](https://github.itap.purdue.edu/ECN/webqueue2/blob/master/Dev%20Environment%20Setup%20Guide.md) to include Python and VS Code setup.
 - Decided to use Google style Python docstrings according to [section 3.8 of this styleguide](https://google.github.io/styleguide/pyguide.html#s3.8-comments-and-docstrings)
 
 ### Wednesday - 7/22/20
@@ -56,7 +166,7 @@ These are daily and weekly summaries of the work thats been done on webqueue2. T
 
 ### Thursday - 7/23/20
 - Finished header processing
-- Updated [Dev Environment Setup Guide](https://github.rcac.purdue.edu/ECN/webqueue2/blob/master/Dev%20Environment%20Setup%20Guide.md) to include Python Docstring Generator plugin for VS Code
+- Updated [Dev Environment Setup Guide](https://github.itap.purdue.edu/ECN/webqueue2/blob/master/Dev%20Environment%20Setup%20Guide.md) to include Python Docstring Generator plugin for VS Code
 - Implemented initial section parsing in Item class of ECNQueue module
 
 ### Friday - 7/24/20
@@ -103,7 +213,7 @@ These are daily and weekly summaries of the work thats been done on webqueue2. T
 - Experiemented with mod_wsgi configuration
 
 ### Wednesday - 7/15/20
-- Got mod_wsgi-py3 running under Ubutnu 18.04. See [installation notes](https://github.rcac.purdue.edu/ECN/webqueue2/blob/master/docs/Installing%20Apache2%20and%20mod_wsgi%20on%20Ubuntu%2018.04.md).
+- Got mod_wsgi-py3 running under Ubutnu 18.04. See [installation notes](https://github.itap.purdue.edu/ECN/webqueue2/blob/master/docs/Installing%20Apache2%20and%20mod_wsgi%20on%20Ubuntu%2018.04.md).
 - Got mod_wsgi-p2 running under CentOS 6.10.
 
 ### Thursday - 7/16/20
@@ -176,7 +286,7 @@ These are daily and weekly summaries of the work thats been done on webqueue2. T
 - 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
-- Finished [Dev Environment Setup Guide](https://github.rcac.purdue.edu/ECN/webqueue2/blob/master/Dev%20Environment%20Setup%20Guide.md)
+- Finished [Dev Environment Setup Guide](https://github.itap.purdue.edu/ECN/webqueue2/blob/master/Dev%20Environment%20Setup%20Guide.md)
 
 ### Friday - 7/10/20
 - Decided to use Python, Flask and Flask-RESTful in a virtual environment for the API

README.md

@@ -1,8 +1,8 @@
 # webqueue2
 A re-write of Purdue ECN's webqueue
 
-The current branch is [feature-create-drawer-system](https://github.rcac.purdue.edu/ECN/webqueue2/tree/feature-create-drawer-system)
+The current branch is [feature-create-drawer-system](https://github.itap.purdue.edu/ECN/webqueue2/tree/feature-create-drawer-system)
 
-Get involed by reading the [Dev Environment Setup Guide](https://github.rcac.purdue.edu/ECN/webqueue2/blob/master/Dev%20Environment%20Setup%20Guide.md)
+Get involed by reading the [Dev Environment Setup Guide](https://github.itap.purdue.edu/ECN/webqueue2/blob/master/Dev%20Environment%20Setup%20Guide.md)
 
-Read the [Dev Logs](https://github.rcac.purdue.edu/ECN/webqueue2/blob/master/Dev%20Logs.md)
+Read the [Dev Logs](https://github.itap.purdue.edu/ECN/webqueue2/blob/master/Dev%20Logs.md)

api/api.py

@@ -1,6 +1,6 @@
 from flask import Flask
 from flask_restful import Api, Resource
-import ECNQueue, jsonpickle
+import ECNQueue
 
 # Create Flask App
 app = Flask(__name__)

api/requirements.txt

@@ -3,6 +3,7 @@ astroid==2.4.2
 click==7.1.2
 Flask==1.1.2
 Flask-RESTful==0.3.8
+gunicorn==20.0.4
 isort==4.3.21
 itsdangerous==1.1.0
 Jinja2==2.11.2

docstring-format.mustache

@@ -0,0 +1,38 @@
+{{! Google Docstring Template }}
+{{summaryPlaceholder}}
+
+{{extendedSummaryPlaceholder}}
+
+Example:
+	[example]
+
+{{#parametersExist}}
+Args:
+{{#args}}
+    {{var}} ({{typePlaceholder}}): {{descriptionPlaceholder}}
+{{/args}}
+{{#kwargs}}
+    {{var}} ({{typePlaceholder}}, optional): {{descriptionPlaceholder}}. Defaults to {{&default}}.
+{{/kwargs}}
+{{/parametersExist}}
+
+{{#exceptionsExist}}
+Raises:
+{{#exceptions}}
+    {{type}}: {{descriptionPlaceholder}}
+{{/exceptions}}
+{{/exceptionsExist}}
+
+{{#returnsExist}}
+Returns:
+{{#returns}}
+    {{typePlaceholder}}: {{descriptionPlaceholder}}
+{{/returns}}
+{{/returnsExist}}
+
+{{#yieldsExist}}
+Yields:
+{{#yields}}
+    {{typePlaceholder}}: {{descriptionPlaceholder}}
+{{/yields}}
+{{/yieldsExist}}