Merge branch 'development' into ben/fix/cosmetic-tweaks

README.md

@@ -1,43 +1,30 @@
-# LocalSpend - Web Application
+# LocalLoop Web Interface
 
-This repository contains the Web application for the LocalSpend system.
+This is the repository for the LocalLoop web interface, for traders and
-
+customers to see and submit data to the service.
-## Current Status
 
 | Branch | Status |
 | --- | --- |
-| `master` | [![Build Status](https://travis-ci.org/Pear-Trading/FoodLoop-Web.svg?branch=master)](https://travis-ci.org/Pear-Trading/FoodLoop-Web) |
+| *Master:* | [![Build Status](https://travis-ci.org/Pear-Trading/FoodLoop-Web.svg?branch=master)](https://travis-ci.org/Pear-Trading/FoodLoop-Web) |
-| `development` | [![Build Status](https://travis-ci.org/Pear-Trading/FoodLoop-Web.svg?branch=development)](https://travis-ci.org/Pear-Trading/FoodLoop-Web) |
+| *Development:* | [![Build Status](https://travis-ci.org/Pear-Trading/FoodLoop-Web.svg?branch=development)](https://travis-ci.org/Pear-Trading/FoodLoop-Web) |
-
-## Contents
-
-1. [Getting Started](#getting-started)
-1. [Environments](#environments)
-1. [Testing](#testing)
-1. [Troubleshooting](#troubleshooting)
-1. [Licences](#licenses)
 
 ## Getting Started
 
-To get started with development, you will need an up-to-date version of
+To get started with development, you will need an up to date version of
-Node.js, git, and access to either the backend dev. server or a local
+node.js, git, and access to either the backend dev server, or a local running
-copy of it from the [LocalSpend Server][LocalLoop-Server] repo.
+copy of the backend server from [LocalLoop Server][LocalLoop-Server].
 
-For your local Node.js, we recommend using:
+For your local node.js, We reccomend using [n][tj/n] on \*nix and Mac, for
-- [n][tj/n] for \*nix and Mac; and
+Windows take a look at [nodist][marcelklehr/nodist] - although other options
-- [nodist][marcelklehr/nodist] for Windows.
+exist. We reccomend Node.js version 8.0.0+ and npm version 5.3.0+.
 
-We reccomend Node.js version 8.0.0+ and npm version 5.3.0+.
+To get this repository set up, first clone it and then run the following
+commands:
 
-To get this repository set up:
+```
-
+npm install -g @angular/cli
-1. Clone it
+npm install
-2. Install the dependencies:
+```
-  - `npm install -g @angular/cli`
-  - `npm install`
-3. Start the application:
-  - `npm start`
-  - The app. will automatically reload after source file changes
 
 [LocalLoop-Server]:https://github.com/Pear-Trading/Foodloop-Server
 [tj/n]:https://github.com/tj/n
@@ -45,18 +32,12 @@ To get this repository set up:
 
 ## Environments
 
-The app defaults to using the development server. For other options, see 
+The app defaults to using the development server. For other options, see
-`src/environments/environments.ts`.
+`src/environments/environments.ts`
-
-## Build
-
-Run `ng build` to build the project; the resulting files will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
 
 ## Testing
 
-There are two types of test in this codebase:
+There are two types of test in this codebase, unit tests (using Karma) and E2E tests (using Protractor).
-- unit tests (using Karma); and
-- E2E tests (using Protractor).
 
 ### Karma Unit Tests
 
@@ -66,25 +47,15 @@ These tests are a long-running process, and will automatically run on file chang
 
 ### Protractor E2E Tests
 
-To run these, you will need to run the following command:
+To run these, you will need to run the following:
 
-- `webdriver-manager update`
+```
+webdriver-manager update
+```
 
-This will download the correct webdriver for you (we use chromedriver), and 
+This will download the correct webdriver for you (we use chromedriver), and any other dependencies it needs. After that, you can run the tests with `npm run e2e`. Note these run once, and will need to be re-run every time you want to run an e2e test. You will also need to run the 
-any other dependencies it needs.
-After that, you can run the tests with `npm run e2e`.
-Note these run once, and will need to be re-run every time you want to run an 
-e2e test.
 
-These tests are best run regularly, and should show if any issues have emerged 
+These tests are best run regularly, and should show if any issues have emerged in other parts of the application that you are not aware of, or if some part of the flow through the app has changed sufficiently. 
-in other parts of the application that you are not aware of, or if some part 
-of the flow through the app has changed significantly. 
-
-## Troubleshooting
-
-### ‘Error: EACCES: permission denied, access '/usr/local/lib'’ when installing dependencies
-
-Change npm's default directory by following [these steps](https://docs.npmjs.com/resolving-eacces-permissions-errors-when-installing-packages-globally#manually-change-npms-default-directory).
 
 ## Licences
 
@@ -94,3 +65,35 @@ The interface itself is based off of [CoreUI][core-ui] which is MIT Licenced.
 For information, see `LICENCE.MIT` included in this repo.
 
 [core-ui]: http://coreui.io
+
+# Old README
+
+This is the old README with some minor tips on getting started, and more reading.
+
+## Angular2DevelopmentCLI
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.0.0-beta.32.3.
+
+### Development server
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+
+### Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive/pipe/service/class/module`.
+
+### Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
+
+### Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+### Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
+Before running the tests make sure you are serving the app via `ng serve`.
+
+### Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).

src/app/dashboard/add-data.component.html

@@ -1,16 +1,22 @@
 <div class="animated fadeIn">
   <div class="row">
-    <div class="col-lg-12">
+    <div class="col-lg-6 col-md-8">
       <div class="card">
         <div class="card-header">
-          <strong>Submit Transaction</strong>
+          <strong>Record Transaction</strong>
           <small>Required Data marked in <strong>bold</strong>.</small>
         </div>
         <div class="card-block">
           <div class="form-group row">
             <label class="col-md-3 form-control-label" for="text-input"><strong>Time of Transaction</strong></label>
             <div class="col-md-9">
-              <input type="datetime-local" class="form-control" [min]="minDate" [(ngModel)]="myDate" (ngModelChange)="transactionFormValidate()">
+              <input 
+                type="datetime-local" 
+                class="form-control" 
+                [min]="minDate" 
+                [(ngModel)]="myDate" 
+                (ngModelChange)="transactionFormValidate()"
+              >
               <span class="help-block">Enter the date and time the transaction occurred.</span>
             </div>
           </div>
@@ -21,7 +27,7 @@
                 <span class="input-group-addon"><i class="fa fa-gbp"></i></span>
                 <input type="number" min="0.00" step="0.01" class="form-control" placeholder="0.00" [(ngModel)]="amount" (ngModelChange)="transactionFormValidate()">
               </div>
-              <span class="help-block">Enter the amount spent, such as 5.35 for £5.35.</span>
+              <span class="help-block">Enter the amount spent, such as &lsquo;5.35&rsquo; for &pound;5.35.</span>
             </div>
           </div>
 
@@ -29,7 +35,7 @@
             <label class="col-md-3 form-control-label" for="text-input">Essential Purchase</label>
             <div class="col-md-9">
               <div class="input-group">
-                <input type="checkbox" class="mr-auto" [(ngModel)]="essentialPurchase" (ngModelChange)="transactionFormValidate()">
+                <input type="checkbox" class="mr-1" [(ngModel)]="essentialPurchase" (ngModelChange)="transactionFormValidate()">
                 <span class="help-block">Tick if the purchase is deemed an essential purchase for budgeting purposes.</span>
               </div>
             </div>
@@ -38,7 +44,7 @@
             <label class="col-md-3 form-control-label" for="text-input">Recurring Purchase</label>
             <div class="col-md-9">
               <div class="input-group">
-                <input type="checkbox" class="mr-auto" [(ngModel)]="recurringPurchase" (ngModelChange)="transactionFormValidate()">
+                <input type="checkbox" class="mr-1" [(ngModel)]="recurringPurchase" (ngModelChange)="transactionFormValidate()">
                 <span class="help-block">Tick if the purchase frequently recurs, such as monthly.</span>
               </div>
             </div>

src/app/dashboard/dashboard.routing.ts

@@ -48,7 +48,7 @@ const routes: Routes = [
       {
         path: 'add-data',
         component: AddDataComponent,
-        data: { title: 'Add Transaction' },
+        data: { title: 'Record Transaction' },
       },
       {
         path: 'leaderboard',
@@ -85,7 +85,7 @@ const routes: Routes = [
       {
         path: 'feedback',
         component: FeedbackComponent,
-        data: { title: 'Give Feedback' },
+        data: { title: 'Submit Feedback' },
       },
       {
         path: 'suppliers',

src/app/dashboard/feedback.component.html

@@ -1,9 +1,9 @@
 <div class="animated fadeIn">
   <div class="row">
-    <div class="col-lg-12">
+    <div class="col-lg-6 col-md-8">
       <div class="card">
         <div class="card-header">
-          <strong>Submit Transaction</strong>
+          <strong>Submit Feedback</strong>
           <small>Required Data marked in <strong>bold</strong>.</small>
         </div>
         <form class="form-horizontal" [formGroup]="feedbackForm" (ngSubmit)="onSubmit()">

src/app/dashboard/more-graphs-and-tables.component.html

@@ -27,7 +27,7 @@
           <table class="table table-striped table-hover">
             <thead>
               <tr>
-                <th>Ward</th>
+                <th>Type</th>
                 <th>Amount of Transactions</th>
                 <th>Sum of Transactions</th>
               </tr>

src/app/dashboard/suppliers.component.html

@@ -1,6 +1,6 @@
 <div class="animated fadeIn">
   <div class="row">
-    <div class="col-lg-12">
+    <div class="col-lg-6 col-md-8">
       <div class="card">
         <div class="card-header">
           <h4>Search Suppliers</h4>
@@ -20,7 +20,7 @@
 </div>
 <div class="animated fadeIn">
   <div class="row">
-    <div class="col-lg-12">
+    <div class="col-lg-6 col-md-8">
       <div class="card">
         <div class="card-header">
           <h4>List of Suppliers</h4>

src/app/dashboard/transaction-log.component.html

@@ -101,7 +101,7 @@
         <div class="card-header">
           <strong>Log of Outgoing Transactions</strong>
           <small>This lists all purchases that have been submitted.</small>
-            <button *ngIf="accountType == 'organisation'" class="btn pull-right btn-sm" (click)="toggleShowMeta()">
+            <button class="btn pull-right btn-sm" (click)="toggleShowMeta()">
               <span *ngIf="!showMeta">Show</span><span *ngIf="showMeta">Hide</span> Details
             </button>
         </div>

src/app/dashboard/transaction-log.component.ts

@@ -29,7 +29,6 @@ export class TransactionLogComponent implements OnInit {
   transactionFormStatusSuccess: string;
   transactionFormStatusError = 'Error received, please try again.';
   updatedTime: string;
-  accountType: any;
   showMeta = false;
 
   public paginateConfig: PaginationInstance = {
@@ -59,7 +58,6 @@ export class TransactionLogComponent implements OnInit {
 
   ngOnInit(): void {
     this.loadTransactions(1);
-    this.accountType = localStorage.getItem('usertype');
   }
 
   loadTransactions(logPage: number) {

src/app/layouts/full-layout.component.html

@@ -38,19 +38,17 @@
             </div>
           </a>
         </li>
-        <li *ngIf="accountType == 'organisation'" class="nav-item">
+      </ul>
-          <a class="nav-link" routerLinkActive="active" [routerLink]="['/more-graphs-and-tables']">
+
-            <div class="row no-gutters align-items-center">
+      <hr>
-              <div class="col-2"><i class="icon-map"></i></div>
+
-              <div class="col-10">Infographics</div>
+      <ul class="nav">
-            </div>
+        <strong class="nav-title">Actions</strong>
-          </a>
-        </li>
         <li class="nav-item">
           <a class="nav-link" routerLinkActive="active" [routerLink]="['/add-data']">
             <div class="row no-gutters align-items-center">
               <div class="col-2"><i class="icon-basket"></i></div>
-              <div class="col-10">Add Transaction</div>
+              <div class="col-10">Record Transaction</div>
             </div>
           </a>
         </li>
@@ -58,7 +56,21 @@
           <a class="nav-link" routerLinkActive="active" [routerLink]="['/feedback']">
             <div class="row no-gutters align-items-center">
               <div class="col-2"><i class="icon-envelope-letter"></i></div>
-              <div class="col-10">Enter Feedback</div>
+              <div class="col-10">Submit Feedback</div>
+            </div>
+          </a>
+        </li>
+      </ul>
+
+      <hr>
+
+      <ul class="nav">
+        <strong class="nav-title">Info</strong>
+        <li class="nav-item">
+          <a class="nav-link" routerLinkActive="active" [routerLink]="['/more-graphs-and-tables']">
+            <div class="row no-gutters align-items-center">
+              <div class="col-2"><i class="icon-map"></i></div>
+              <div class="col-10">Infographics</div>
             </div>
           </a>
         </li>
@@ -94,7 +106,7 @@
             </div>
           </a>
         </li>
-        <li *ngIf="accountType == 'customer'" class="nav-item">
+        <li class="nav-item">
           <a class="nav-link" routerLinkActive="active" [routerLink]="['/category-month']">
             <div class="row no-gutters align-items-center">
               <div class="col-2"><i class="icon-basket"></i></div>
@@ -102,7 +114,7 @@
             </div>
           </a>
         </li>
-        <li *ngIf="accountType == 'organisation'" class="nav-item">
+        <li class="nav-item">
             <a class="nav-link" routerLinkActive="active" [routerLink]="['/suppliers']">
               <div class="row no-gutters align-items-center">
                 <div class="col-2"><i class="icon-speedometer"></i></div>
@@ -139,6 +151,6 @@
 </div>
 
 <footer class="app-footer">
-  <a href="http://www.peartrade.org" target="_blank">&copy; 2017 Pear Trading Ltd.</a>
+  <a href="http://www.peartrade.org" target="_blank">&copy; 2020 Pear Trading Ltd.</a>
   <span class="float-right">Powered by <a href="http://coreui.io">CoreUI</a></span>
 </footer>

src/scss/bootstrap/_button-group.scss

@@ -11,6 +11,7 @@
     position: relative;
     flex: 0 1 auto;
     margin-bottom: 0;
+    cursor: pointer;
 
     // Bring the hover, focused, and "active" buttons to the fron to overlay
     // the borders properly

src/scss/bootstrap/_buttons.scss

@@ -32,10 +32,12 @@
     @include box-shadow(none);
   }
 
-  &:active,
+  :enabled {
-  &.active {
+    &:active,
-    background-image: none;
+    &.active {
-    @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
+      background-image: none;
+      @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
+    }
   }
 }
 

src/scss/bootstrap/_card.scss

@@ -70,6 +70,10 @@
   &:first-child {
     @include border-radius($card-border-radius-inner $card-border-radius-inner 0 0);
   }
+
+  small {
+    padding-left: 1em;
+  }
 }
 
 .card-footer {

src/scss/bootstrap/_input-group.scss

@@ -23,6 +23,16 @@
       z-index: 3;
     }
   }
+
+  input[type="radio"],
+  input[type="checkbox"] {
+    cursor: pointer;
+  }
+}
+
+.help-block {
+  font-size: 0.8em;
+  font-style: italic;
 }
 
 .input-group-addon,

src/scss/bootstrap/_tables.scss

@@ -80,6 +80,8 @@
 
 .table-hover {
   tbody tr {
+    cursor: pointer;
+  
     @include hover {
       background-color: $table-bg-hover;
     }