Merge branch 'main' of https://github.com/ORNL-AMO/TTech-Green-Button

README.md

@@ -1,28 +1,39 @@
-# TN Tech Green Button Initiative - Codename: "TranswarpConduit"
+# TN Tech Green Button Initiative
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.0.0.
+## Overview
 
-## Development server
+The TN Tech Green Button Initiative focuses on solving energy management challenges in line with the Better Plants program. Utilizing the Verifi system developed by ORNL, this application processes data retrieved from utility APIs. It aligns with the Green Button data standard to assist industries in monitoring and verifying energy savings.
 
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
+![Green Button UI](src/assets/images/GreenButton.png)
 
-## Code scaffolding
 
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+## Features
 
-## Build
+- Seamless integration with UtilityAPI and adherence to the Green Button standard for energy data acquisition.
+- Capabilities to conduct three distinct types of data exports.
+- A feature for searching and retrieving new energy data records.
 
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
+## Setup and Installation
 
-## Running unit tests
+To get started with the Green Button Initiative project on your local system, please follow these steps:
 
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+1. Clone the repository: `git clone https://github.com/ORNL-AMO/TTech-Green-Button.git`.
+2. Change directory to the project: `cd TTech-Green-Button`.
+3. Install necessary dependencies: `npm install`.
+4. Launch the development server using `ng serve`. Open `http://localhost:4200/` in your browser. The application will automatically update if any source files are changed.
 
-## Running end-to-end tests
+## Development Commands
 
-Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
+- **Code Scaffolding:** Execute `ng generate component component-name` or use other `ng generate` commands to scaffold Angular entities such as directives, pipes, services, and more.
+- **Building:** Run `ng build` to compile the project. The compiled output will be found in the `dist/` directory.
+- **Running Unit Tests:** Use `ng test` to run unit tests via [Karma](https://karma-runner.github.io).
+- **Running End-to-End Tests:** Use `ng e2e` to execute end-to-end tests after setting up the appropriate testing package.
 
-## Further help
+## Authorization Key
 
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
-=======
+Users must obtain a unique authorization key from their UtilityAPI account to use this application. Substitute `<your_key>` in the application with your individual key. 
+- **Enter your access token before using:** Make sure to change the accessToken field in the app.component.ts file before using.
+
+## Acknowledgments
+
+- Thanks to UtilityAPI for facilitating data integration.

src/app/app.component.html

@@ -26,27 +26,23 @@ <h4>Loading...</h4>
             </form>
           </div>
           <div class="container">
-            <form id="inputFile">
+            <form id="inputFile" class="col-8">
               <div class="row">
-                <div class="import-button">
-                  <label class="btn btn-primary btn-lg" for="dataFile" style="width: 160px;">Import Data</label>
-                  <input type="file" id="dataFile" style="display: none;" #importedFile (change)="onChange($event)">
-                </div>
                 <div ngbDropdown class="export-button">
-                  <button type="button" class="btn btn-primary btn-lg" id="exportDropdown" style="width: 160px;"
+                  <button type="button" class="btn btn-primary btn-lg col-10 mt-2" id="exportDropdown"
                     ngbDropdownToggle>Export Data</button>
-                  <div ngbDropdownMenu aria-labelledby="exportDropdown">
+                  <div ngbDropdownMenu aria-labelledby="exportDropdown" class="col-10">
                     <div class="d-grid">
-                      <button ngbDropdownItem type="button" id="btnExportExcel" (click)="exportAsExcel()">Export as XLSX</button>
-                      <button ngbDropdownItem type="button" (click)="exportAsJson()">Export as JSON</button>
+                      <button ngbDropdownItem type="button" class="col-10" (click)="exportAsExcel()">Export as XLSX</button>
+                      <button ngbDropdownItem type="button"  (click)="exportAsJson()">Export as JSON</button>
                       <button ngbDropdownItem type="button" (click)="exportAsXML()">Export as XML</button>
                     </div>
                   </div>
                 </div>
               </div>
             </form>
           </div>
-          <div class="row col-10 mt-2">
+          <div class="row col-8 mt-2">
             <p class="text-light">Enter Email below to search for authorization key:</p>
             <div id="divSearching" class="text-light" style="display: none;">
               <h4>Searching...</h4>
@@ -58,7 +54,7 @@ <h4>Searching...</h4>
           </div>
         </div>
         <div class="right-section"  style="white-space: pre;">
-          <div style="max-height: 900px; overflow-y: auto;" [innerHTML]="displayFile">
+          <div style="max-height: 900px; max-width: 700px; overflow-y: auto; overflow-x: hidden;" [innerHTML]="displayFile">
 
           </div>
         </div>

src/app/app.component.less

@@ -22,13 +22,9 @@
 }
 
 .import-button, .export-button {
-  padding: 10px;
+  padding: 0px;
 }
 
-.import-button {
-  flex: 1;
-  width: 200px;
-}
 
 .export-button {
   flex: 1;