diff --git a/Dev Logs.md b/Dev Logs.md deleted file mode 100644 index 8cfb71b..0000000 --- a/Dev Logs.md +++ /dev/null @@ -1,509 +0,0 @@ -# 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 10: 8/24/20 - 8/28/20 -### This Week's Goals -- Onboard Jacob -- Set path for frontend documentation - - - - ---- - -### Monday 8/24/20 -- Began onboarding Jacob -- Continued work on integrating styleguidist - -### Tuesday 8/25/20 -- Continued onboarding Jacob -- Continued work on integrating styleguidist - -### Wednesday 8/26/20 -- Continued onboarding Jacob; assigned independent task for [this issue](https://github.itap.purdue.edu/ECN/webqueue2/issues/36) -- Decided to shift from styleguidist to docz because styleguidist is not maintainable. - - - - - - -## Week 9: 8/17/20 - 8/21/20 -### This Week's Goals -- Finish lingering documentation tasks -- Automate documentation generation for API -- Choose documentation standard for JSX - - - -- Begin porting codebase to stylguidist, more work needed - ---- - -### Monday 8/17/20 -- Experimented with [React Styleguidist](https://react-styleguidist.js.org/) for React styleguide generation. - - Will need to restructure `/src` directory and create modular components - _Example:_ - ``` - /src/components/ - ├── ComponentName - │   ├── ComponentName.css Component CSS (if used) - │   ├── ComponentName.js Componenet - │   ├── ComponentName.md Styleguidist Content - │   └── index.js Exports Component - ``` -- Created ItemLockAlert to show when an item is locked -- Began using dense AppBars - -### Tueday 8/18/20 -- Began implementing react-styleguidist documentation system (starting with ItemTable) -- Began rewriting JSDoc doclets for JS[X] components. See [this article](https://2ality.com/2011/08/jsdoc-intro.html) for an overview of doclet format and tags. -- Began destructuring exisiting componennts -- Created proper MUI theme wrapper - -### Wednesday 8/19/20 -- Tied Stylgudist into npm. Stylgudisit can be run with `npm run start:docs` -- Updated stylegudist configuartion: - - Now launches a browser on a local machine - - Added title, version, sections, template (for favicon) - - Created style and theme config. These can be hot loaded while the server is running. -- Moved UI snapshots and updated README snapshot - -## 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 -- Finished responsive two panel view -- Updated documentation following GitHub transfer -- Updated dependencies for API -- Separated ItemViewAppBar and ItemMetadataView into separate components -- Gathered resources for onboarding new hire -- Began working 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 - -### Tuesday 8/11/20 -- Finished responsive two panel view -- Experiemented with using a scroll trigger to toggle AppBar elevation; descided to use fixed elevation for now and revisit this later. -- Separated ItemViewAppBar from ItemView -- Added spacing in ItemView for readability - -### Wednesday 8/12/20 -- Added docs for: - - [#31 Fix AppBar positioning in Safari](https://github.itap.purdue.edu/ECN/webqueue2/issues/31) - - [#32 Remove scrollbars from column views](https://github.itap.purdue.edu/ECN/webqueue2/issues/32) - - [#33 Implement assignment controls in ItemView](https://github.itap.purdue.edu/ECN/webqueue2/issues/33) -- Out in the afternoon. - -### Thursday 8/13/20 -- Gathered resources for new hire including: - - [React: Getting Started on Pluralsight](https://app.pluralsight.com/library/courses/react-js-getting-started/table-of-contents) - - [Intro to React on YouTube](https://www.youtube.com/watch?v=QFaFIcGhPoM&list=PLC3y8-rFHvwgg3vaYJgHGnModB54rxOk3) - - [Getting Started w/ Material UI](https://www.youtube.com/watch?v=pHclLuRolzE) - - [Getting Started w/ Flask-SQLAlchemy](https://www.youtube.com/watch?v=jTiyt6W1Qpo) -- Updated internal tooling to consolidate pieces into npm control - -### Friday 8/14/20 -- Separated ItemView metadata content into its own component -- Added conditional alert if item is locked -- Experiemented with hiding scrollbars - - - - -## 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 -- Finish read-only API - -### This Week's Recap -- Finished initial Item View -- Finished initial read-only API -- Gave first public demo of API and UI - ---- - -### Monday 7/27/20 -- Set errors to replace mode when opening encountering UnicodeDecodeError while reading item files. -- Replaced `json.dumps()` and `jsonpickle` in favor of returning standard serializable datatypes. -- Implemented `/api/` endpoint for a whole queue -- Implemented `/api//` endpoint for a single item - -### 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 -### This Week's Goals -- Finish Item View -- Finish read-only API - -### This Week's Recap -- ECNQueue has been rewritten and can do everything the old module could except strip attachments. -- Significant progress on the API was acheived by implementing JSON safe representations of Item and Queue classes in ECNQueue module - ---- - -### Monday - 7/20/20 -- Began rewritting ECNQueue.py - - Decided on an object structure of: - - Items: Individual items with headers, content, and attachments - - Queues: Collection of all active items from one queue - -### Tuesday - 7/21/20 -- Added `requirements.txt` to Python environment for reproducable builds. -- 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 -- Implemented path building and modification time in Item class in ECNQueue module -- Started porting email attachment processing; deferring for Friday's demo -- Started header processing - -### Thursday - 7/23/20 -- Finished header processing -- 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 -- Initial ECNQueue module completed - - Public Item Attributes: - - lastUpdated - - headers - - content - - isLocked w/ lockfile details - - Private Item Attributes and Methods - - __path - - __getLastUpdated() - - __getRawItem() - - __parseHeaders() - - __getContent() - - __isLocked() - -### Sunday - 7/26/20 -- Added React dev server proxy for API -- Implemented several new attributes and methods in Item class: - - Item.userEmail and Item.userName via Item.__parseFromData() - - Item.userAlias via Item.__getUserAlias() - - Item.assignedTo via Item.__getAssignedTo() - - Item.subject, Item.department, Item.building, Item.dateReceived from headers. -- Replaced all instanced of returning None with empty data structures -- Implement JSON safe representations of Item and Queue via toJson() methods - -## Week 4: 7/13/20 - 7/19/20 -### This Week's Goals -- Finish Item View -- Finish read-only API - -### This Week's Recap -- Created a working and reproducable environment to run Flask and WSGI apps in Python 3 using virtual environments and gunicorn - ---- - -### Monday - 7/13/20 -- Got python virtual environments to work with mod_python under Apache - - **Note:** Commands run through the virtual environment's interpreter MUST be run on templeton. -- Found that Flask will not run under mod_python. I need mod_wsgi. Tomorrow will be spent making sure this works before requesting it. - -### Tuesday - 7/14/20 -- Experiemented with mod_wsgi configuration - -### Wednesday - 7/15/20 -- 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 -- Successfully ran Flask in a Python 3 virtual environment and proxied api requests to a Flask app via gunicorn. Plan to proceed with this method. - -## 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: -- Item view was not worked on; I spent too much time on the table. -- ECNQueue.py migration was started -- Development environment was created -- Automated deployment was not worked on -- Semantic versioning started to be used -- Decided to stop working on a responsive table using material-table - - Instead, the non-responsive table will be used for now - - react-table might be a better option for the future -- Began using Python, Flask and Flask-RESTful for API development - ---- - -### 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 -- 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 -- Developed a working version of an API using Python as a CGI script -- Began implementing ECNQueue.py login in the API - -## 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 - -### 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. - - - **Utility:** With a private repo, scripted access to a repo requires authentication credentials to be stored with the script leaving those credentials vulnerable. Since the business logic of webqueue2 is not confidential, moving to a public repo would allow simpler scripted access. - - - **Docs:** GitHub allows easy integration into various doc generation systems. Interaction with these tools is much more accessile with a public repo. - -- Removed sensitive item info from git commit logs in preparation for making a public repo. - -### 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. - -- Drafted new UI mockups. - -- Decided to move to ReactJS after reading [this article comparing ReactJS and jQuery](https://academind.com/learn/javascript/jquery-future-angular-react-vue/) because: - - - ReactJS controls the DOM through declarative creation and selctive rendering rather tha jQuery's query-based modification. - - - ReactJS appears to be better suited for long term support. - -- Began building React data tables. - -### Wednesday - 06/24/20 - -- 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 - -- Finished [React Getting Started](https://app.pluralsight.com/library/courses/react-js-getting-started/table-of-contents) course on Pluralsight. - -- 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/).