diff --git a/Dev Environment Setup Guide.md b/Dev Environment Setup Guide.md index dce5e06..ca7a484 100644 --- a/Dev Environment Setup Guide.md +++ b/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`: **THIS IS NON-REVERSABLE**: 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 \ No newline at end of file +## 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. \ No newline at end of file diff --git a/Dev Logs.md b/Dev Logs.md index add0a87..111ff2a 100644 --- a/Dev Logs.md +++ b/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 + + + + +--- + +### 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 + + + + + + + + + + + + +## 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 [``](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 [``](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 ( + + + + {/* Content ... */} + + + {/* Content ... */} + + +); +``` + +### 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 +- 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 diff --git a/README.md b/README.md index ff045b7..5e6e57b 100644 --- a/README.md +++ b/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) diff --git a/api/api.py b/api/api.py index bcb2eef..29a4492 100644 --- a/api/api.py +++ b/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__) diff --git a/api/requirements.txt b/api/requirements.txt index e4e0060..4554304 100644 --- a/api/requirements.txt +++ b/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 diff --git a/docs/Browser Poll Data 8:5:20.png b/docs/Browser Poll Data 8:5:20.png new file mode 100644 index 0000000..5e07f57 Binary files /dev/null and b/docs/Browser Poll Data 8:5:20.png differ diff --git a/docs/ItemView Annimation Examples/Desktop-Animated.gif b/docs/ItemView Annimation Examples/Desktop-Animated.gif new file mode 100644 index 0000000..11c0e82 Binary files /dev/null and b/docs/ItemView Annimation Examples/Desktop-Animated.gif differ diff --git a/docs/ItemView Annimation Examples/Desktop-Non-Animated.gif b/docs/ItemView Annimation Examples/Desktop-Non-Animated.gif new file mode 100644 index 0000000..146cb93 Binary files /dev/null and b/docs/ItemView Annimation Examples/Desktop-Non-Animated.gif differ diff --git a/docs/ItemView Annimation Examples/Mobile-Animated.gif b/docs/ItemView Annimation Examples/Mobile-Animated.gif new file mode 100644 index 0000000..a3fbe5b Binary files /dev/null and b/docs/ItemView Annimation Examples/Mobile-Animated.gif differ diff --git a/docs/ItemView Annimation Examples/Mobile-Non-Animated.gif b/docs/ItemView Annimation Examples/Mobile-Non-Animated.gif new file mode 100644 index 0000000..7f422fd Binary files /dev/null and b/docs/ItemView Annimation Examples/Mobile-Non-Animated.gif differ diff --git a/docstring-format.mustache b/docstring-format.mustache new file mode 100644 index 0000000..9a318e0 --- /dev/null +++ b/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}} \ No newline at end of file diff --git a/src/App.js b/src/App.js index 1c1b8dd..5e8ffcb 100644 --- a/src/App.js +++ b/src/App.js @@ -1,31 +1,67 @@ -import React, { useState, useEffect } from "react"; +import React, { useState } from "react"; import { ThemeProvider, createMuiTheme } from "@material-ui/core/styles"; -import { Grid } from "@material-ui/core" +import { Box, makeStyles } from "@material-ui/core"; import CustomAppBar from "./CustomAppBar"; import ItemTable from "./ItemTable"; -import ItemView from "./ItemView" +import ItemView from "./ItemView"; +import clsx from "clsx"; +import { objectIsEmpty } from "./utilities" function App(){ const [darkMode, setDarkMode] = useState(false); - const [activeItem, setActiveItem] = useState({}) + const [activeItem, setActiveItem] = useState({}); + const [sidebarOpen, setSidebarOpen] = useState(false) const theme = createMuiTheme({ "palette": { "type": darkMode ? "dark" : "light", } - }) + }); + + const transitionWidth = theme.transitions.create(["width"], { + duration: theme.transitions.duration.enteringScreen, + easing: theme.transitions.easing.easeInOut + }); + + const useStyles = makeStyles({ + "leftCol": { + overflow: "auto", + width: "100vw", + height: "100vh", + transition: transitionWidth + }, + "rightCol": { + overflow: "hidden", + width: "0", + height: "100vh", + transition: transitionWidth + }, + "rightColShift": { + overflow: "auto", + width: "100vw", + flexShrink: "0", + transition: transitionWidth + }, + [theme.breakpoints.up("md")]: { + "rightColShift": { + width: "40vw", + } + }, + }); + + const classes = useStyles(); return ( - - - - - - - - - + + + + + + + + + ); } diff --git a/src/CustomAppBar.js b/src/CustomAppBar.js index 575633b..10e78ef 100644 --- a/src/CustomAppBar.js +++ b/src/CustomAppBar.js @@ -7,18 +7,12 @@ import LightModeIcon from '@material-ui/icons/Brightness7'; export default function CustomAppBar(props){ const useStyles = makeStyles((theme) => ({ - root: { - flexGrow: 1, - }, menuButton: { marginLeft: theme.spacing(2), }, title: { - flexGrow: 1, + flexGrow: "1" }, - tooltip: { - fontSize: theme.typography.pxToRem(14), - } })); const classes = useStyles(props.theme); @@ -26,8 +20,8 @@ export default function CustomAppBar(props){ const toggleDarkMode = () => props.setDarkMode(!props.darkMode); return( -
- + <> + {props.title} @@ -35,7 +29,6 @@ export default function CustomAppBar(props){ @@ -49,8 +42,6 @@ export default function CustomAppBar(props){ - {/* Empty toolbar is to offset content below AppBar */} - -
+ ); } \ No newline at end of file diff --git a/src/ItemTable.js b/src/ItemTable.js index 468babd..14f59c6 100644 --- a/src/ItemTable.js +++ b/src/ItemTable.js @@ -39,7 +39,10 @@ function ItemTable(props) { data={data} title={"Demo Table"} options={options} - onRowClick={(event, rowData) => props.setActiveItem(rowData)} + onRowClick={(event, rowData) => { + props.setActiveItem(rowData); + props.setSidebarOpen(true); + }} /> ); } diff --git a/src/ItemView.js b/src/ItemView.js index f375698..72b7fd6 100644 --- a/src/ItemView.js +++ b/src/ItemView.js @@ -1,20 +1,19 @@ -import React, { useState, useEffect } from 'react'; +import React from 'react'; import { ListItem, ListItemIcon, ListItemText, Paper, Typography, Divider } from '@material-ui/core'; -import FolderIcon from '@material-ui/icons/Folder'; import PersonIcon from '@material-ui/icons/Person'; import CalendarIcon from '@material-ui/icons/CalendarToday'; import AssignmentdIcon from '@material-ui/icons/AssignmentInd'; import InfoIcon from '@material-ui/icons/Info'; import ClockIcon from '@material-ui/icons/QueryBuilder'; +import ItemViewAppBar from './ItemViewAppBar' function ItemView(props){ return( - - - {props.activeItem["queue"] + " " + props.activeItem["number"]} - - + diff --git a/src/ItemViewAppBar.js b/src/ItemViewAppBar.js new file mode 100644 index 0000000..e1411a6 --- /dev/null +++ b/src/ItemViewAppBar.js @@ -0,0 +1,39 @@ +import React from "react"; +import {makeStyles, Tooltip, Typography, AppBar, Toolbar, IconButton, Zoom} from "@material-ui/core" +import CloseItemViewIcon from '@material-ui/icons/ChevronRight'; + + +export default function ItemViewAppBar(props){ + const useStyles = makeStyles((theme) => ({ + closeButton: { + marginRight: theme.spacing(2), + }, + title: { + flexGrow: "1" + }, + })); + + const classes = useStyles(props.theme); + + return( + <> + + + props.setSidebarOpen(false)} + TransitionComponent={Zoom} + > + + + + + + + {props.title} + + + + + ); +} \ No newline at end of file diff --git a/src/utilities.js b/src/utilities.js new file mode 100644 index 0000000..550f6ff --- /dev/null +++ b/src/utilities.js @@ -0,0 +1,10 @@ +/** + * Returns true if object has no entries, otherwise false. + * @param {Object} objectToCheck The object to check. + * @returns true if object has no entries, otherwise false. + */ +function objectIsEmpty(objectToCheck) { + return Object.entries(objectToCheck).length === 0; +} + +export { objectIsEmpty }; \ No newline at end of file