# Lex-Opt - Intro & Overview ## Documentation index ### A. Introduction and overview ### B. Implementation Guidelines #### - General System #### - Programming #### - Directory Structure #### - Home page & equity windows ### C. Development & System Scheme #### [Phase 0.](.c1_phase_0.md) #### [Phase 1.](./c1_phase_1.md) #### [Phase 2.](./c2_phase_2.md) ### D. [Suggestions for Further Improvement](./d_suggestions_for_improvement.md) ___ ## A. Introduction This document describes the purposes of the project and provides an outlines for programming, development & implementation. The `lex-opt` web application will assist in **investment management** and **options trading** as a tool to: - manage with buying and selling equities, - and to trade options in our portfolios. Lex-opt will initially be used only personally but may eventually be used by others. The application is designed to be scalable, extensible, and responsive. ## B. Implemention Guidelines ### General Guidelines - Development and testing will use a browser and through the **localhost** environment and the existing Apache2 local server. - Debugging will involve executing `lex-opt.html` file on a browser (initially Firefox Developer). - After development and testing, files will be uploaded to the domain `LEX-OPT.com`. - GIT will not be used. - Automated testing will not be used (at present) - perhaps later - Version control will be manually implemented by making copies of functioning project implementation phases. - Minifying of CSS/JS files will not be done until development phases are complete and testing finished. - Security will be limited to verifying data and will only be required during phase 2. ___ ### Programming Principles 1. No external libraries will be used. 2. **Plain vanilla JavaScript** will be used for functions client-side. 3. **PHP** will be used for data access. 4. Styling will use **SCSS** and **CSS**. 5. Data will be stored in `.JSON` files in the `JSONcache` directory. 6. the term "select" will refer to: - on the desktop version - either a single click of the lft button on a mouse or the "enter" key on a keyboard that will activate the selected function, e.g., choose a value from a menu - on the small & touch screen versions, select will be a single tap of the finger ___ ### Directory Structure This is a general structure to be used on all directories. The main directory is `/var/www/html/lex-opt_4.0` and contains the following subdirectories: 1. **Archive**: - Stores permanent data files: - Latest uploads (e.g., `nuData.json`). - Archived data (e.g., `APPL.json`). - Analytical data (e.g., 200-day moving averages). 2. **CSS**: - Contains SCSS files for styling. - Partial SCSS files are prefixed with `_` (e.g., `_kern.scss`). - The `main.scss` file imports all partials. - Contains the css compiled from the SCSS in the html "main.css" 3. **documentation**: - Contains markdown files for creating pages. The detailed implimentation guidelines will be provided later in the development process - at present the sections below offer more detailed overview of these: - `displayPage.md` - `auxiliary.md` - `equityPage.md` 4. **Errors**: - Errors should be documented in text format and stored in the Errors directory - Error messaeiles will be name with the date and the extension .txt 5. **examples**: - Contains HTML files for testing functionalities independently. 6. **JS**: - Contains all JavaScript files. 7. **JSONscripts** - Contains script data files in JSON 8. **PHP**: - Contains PHP files for data access. 9. **textFiles**: - textfiles are comments and refernces that I find interesting or useful ___ ### Home page and equity pages #### Home page (index.html) The home page is determined in the file index.html (see: /lex-opt_4.00/index.html) and opened by - during development by selecting the directory lex-opt and - for operation by writing lex-opt.com in a browser. #### [index.html](./index_html.md) The home page (index.html) contains an empty table with id="homeTable". The presentation (display) will use all of the available space of the window (fill the windows from top to bottom and left to right) and use all the available screen area. Each equity page (namedEquity.html) ["namedEquity" is the ticker symbol] activated by a button on the home page and will have a new window and tab. ## C. Development Procedure The development of the `lex-opt` project is ambitious and divided into **3 phases**. Currently, only instructions for **Phase 0** have been attempted. - Phase 0. - this phase will build the archive with the historical data downloaded from online providers, e.g. alphaVantage, MarketData, NASDAQ, etc. - Phase 1. part a. - check the index.html file for optimization - implement the function detailed in part b. - create the user interface and user interactions part c. - create the forms & functions for: 1 accessing external data through PHP functions 2. implement the storage stategy for assets - Phase 2. - analyze the historical data and experiences to improve the management and employment of equities and options. ### Phase 1 - development The implementation of this phase consists of building three distinct parts: - the displayPage - a table displaying the equities from the local achive - the equityPage - pages constructed dynamically from data in the local archive - the functions to access external data and to create the local archive #### 1. `displayPage` - **Purpose**: The landing page of the web app. - **Description** This page will give an overview of chosen equitie - a tabular display of specific information from external sources for chosen NASDAQ & NYSE equities. - **Features**: - Dynamically constructed table with rows for each equity. - Each row contains brief, current, and summary information of one equity. - Includes current open or watchlisted options information. - a row will contain a button that opens the specific page for this equity - **File Name**: - file to be produced is to be named: `displayPage.html` - **Implementation instructions** - use instructions in file `documentation/md/script_displayPage.text`. #### 2. `equityPage` - **Purpose**: A dynamically constructed dashboard for individual equities. - **Description** - **Individual Equity Pages**: A dynamically constructed page for an equity presented in the displayPage table - the page will be constructed and presented upon selecting a button on the row descibing that equity. - Information includes ticker symbol, equity name, historical data (that will be accessed from the data stored in the `Archives` directory). - Option information will be stored historically - this will be used in Phase 2 to discover patterns. - Data to be displayed will be stored in `.JSON` files (e.g., `APPL.json`). - **Features**: - Built and activated by selecting an equity row in `displayPage`. - Includes notes, analysis, and historical/current option information. - **Implementation instructions** - use instructions in file `documentation/md/script_equityPage.text`. - **File Name**: `equityPage.html` #### 3. `Auxiliary Fcts` - **Purpose**: - Forms, Fucntions for data access & archiving. - Accessible from both `displayPage` and `equityPage`. - **Features**: - Forms for adding/deleting entries from the table in displayPage. - Data stored in `JSONcache` and archived after submission. - **Implementation instructions** - use instructions in file `documentation/md/script_auxiliary.text`. - **File Names**: - JS functions stored in /JS/auxiliaryFcts.js. - PPH functions stored in /PHP/auxiliary.php --- ## E. Suggestions for Further Improvement