Compare commits

...
This repository has been archived on 2023-08-16. You can view files and clone it, but cannot push or open issues or pull requests.

213 commits

Author SHA1 Message Date
Rumperuu
94ee509b43
Merge pull request #114 from Pear-Trading/ben/update-readme
Update and clean up README
2020-10-19 20:39:21 +01:00
bab6b9f354 Merge branch 'development' into ben/update-readme 2020-10-19 20:27:50 +01:00
a0c0c7e032 Remove old readme section 2020-10-18 14:48:43 +01:00
90f0a91f50 Reformat build status table 2020-10-18 14:46:21 +01:00
067f0543d4 Add table of contents 2020-10-18 14:45:03 +01:00
Rumperuu
792e431fad
Merge pull request #110 from Pear-Trading/ben/fix/sidebar-links
Correct which links are shown for different users
2020-10-18 14:40:40 +01:00
a19ddcb1b7 Add property to component 2020-10-18 14:03:23 +01:00
Rumperuu
49e5951747
Merge branch 'development' into ben/fix/sidebar-links 2020-10-18 13:33:54 +01:00
Rumperuu
e6f7ba4b65
Merge pull request #111 from Pear-Trading/ben/fix/postcode-validation
Capitalise entered postcodes
2020-10-18 13:32:21 +01:00
e839ab28b6 Capitalise entered postcodes 2020-10-17 16:41:10 +01:00
7be68c3fc0 Correct which links are shown for different users 2020-10-17 16:21:05 +01:00
0dd7ab1e34 Clean up README 2020-10-17 14:39:57 +01:00
Tom Bloor
53db04dd9c
Merge pull request #103 from Pear-Trading/finn/fixes
Bring dependencies up to date
2020-08-13 16:52:20 +01:00
Tom Bloor
da30036d4e
Merge branch 'development' into finn/fixes 2020-08-13 16:31:57 +01:00
Tom Bloor
2a5e790e3d
Fix e2e test and actually check login works 2020-08-13 16:24:49 +01:00
Finn Kempers
e4dcc2e664 fixing agm 2020-08-12 13:27:34 +01:00
Finn Kempers
a0e28cb440 Fixes to declaration name of agm markers 2020-08-12 13:12:11 +01:00
Finn Kempers
4312f2ad8b fixed a variable 2020-08-10 10:11:22 +01:00
Finn Kempers
20ec21f8cb npm audit fix run 2020-08-10 09:49:27 +01:00
Finn Kempers
ee88c8c31a package-lock automatic update 2020-08-10 09:48:41 +01:00
Finn Kempers
55eb053b08 package fixes due to missing peer & npm warnings 2020-07-29 20:13:08 +01:00
Finn Kempers
fba44b237a Additional fix needed for clusters 2020-07-29 14:55:20 +01:00
Finn Kempers
20f7e5dc0f angular json fix 2020-07-29 14:50:43 +01:00
Finn Kempers
d4540e7650 Upgrade to Angular 10 2020-07-29 14:40:01 +01:00
Finn Kempers
611dbc4bac changed agm cluster and updated agm dependencies
the changelog didnt mention this properly to do but as seen in change 7982bfbcf0 the module was renamed and needed changing.
2020-07-29 14:32:51 +01:00
Finn Kempers
7c651e1522 package updates to match angular v 2020-07-29 14:08:12 +01:00
Finn Kempers
3ed88a4d5e ng update to 9 2020-07-29 13:31:46 +01:00
Finn Kempers
e9c81dc428 ng update angular 8 done 2020-07-29 13:03:09 +01:00
Finn Kempers
8a4e7872fb reverting updates 2020-07-29 13:01:24 +01:00
Finn Kempers
208a85c5a5 fix to get ng update to work 2020-07-29 12:56:49 +01:00
Finn Kempers
839d322327 rxjs update 2020-07-29 12:54:28 +01:00
Finn Kempers
28b575e819 npm audit fix fixes 2020-07-29 12:44:33 +01:00
Finn
0f190a70d7 package fixes 2020-01-08 20:00:57 +00:00
Finn
326e4ec322 testing stuff 2020-01-08 18:27:54 +00:00
Thomas Bloor
fe125c812f
Merge branch 'master' into development 2019-09-16 13:05:26 +01:00
Thomas Bloor
b91de60175
Merge branch 'Release-v0.1.13' 2019-09-16 13:02:07 +01:00
Thomas Bloor
5abf5d29b3
Updated changelog and package version 2019-09-16 13:01:04 +01:00
Finn
891bb0aee4 fixes quill audit issue 2019-09-11 14:10:53 +01:00
Thomas Bloor
50b9cfdc31
update webdriver-manager 2019-09-11 13:54:22 +01:00
Thomas Bloor
53aae6fc07
Updated api key for deploy build 2019-09-11 13:11:52 +01:00
Thomas Bloor
5e92829a7a
use package config in script 2019-09-09 21:39:58 +01:00
Thomas Bloor
ace6900145
Fix prod configuration name 2019-09-09 21:33:28 +01:00
Tom Bloor
893bdca736
Merge pull request #85 from Pear-Trading/TBSliver/CIFixes
CI Update
2019-09-09 21:26:20 +01:00
Thomas Bloor
75edb86abe
update secret files 2019-09-09 21:19:51 +01:00
Thomas Bloor
66388593e6
note even sure why that was there 2019-09-09 21:09:47 +01:00
Thomas Bloor
f697b2243d
more CI fixes 2019-09-09 21:08:49 +01:00
Thomas Bloor
abdbfda56c
change to use latest node for compilation 2019-09-09 21:00:30 +01:00
Thomas Bloor
bad4f7f83c
fix CI config 2019-09-09 20:55:21 +01:00
Thomas Bloor
87160f5387
remove uneccessary stuff and work on CI 2019-09-09 20:45:24 +01:00
Thomas Bloor
bab670f60b
Merge branch 'finn/wards' into development 2019-09-09 19:56:26 +01:00
Thomas Bloor
7883dbb169
Fix a large amount of things in the ui 2019-09-09 19:52:38 +01:00
Finn
52bce4dd0a Added initial working table for transaction types 2019-09-09 16:13:34 +01:00
Finn
5c85d5aae9 ward import fixed 2019-09-05 17:18:52 +01:00
Finn
db5f982ed3 BROKEN: Added wards table 2019-09-04 18:21:21 +01:00
Tom Slater
1dc46a55e0 Misc chart work
Search feature on both suppliers and the pagination feature on the spend history still not functional
2019-08-30 16:50:19 +01:00
Tom Slater
420174e953 chart work 2019-08-28 10:47:44 +01:00
Tom Slater
5e91665e0b Merge remote-tracking branch 'origin/tyu-tyu/charts' into tyu-tyu/charts 2019-08-23 11:42:39 +01:00
Tom Slater
301f706365 Chart improvements
Minor fixes  + refresh on supplier spend chart
2019-08-22 16:59:51 +01:00
Tom Slater
ade578d78b Merge remote-tracking branch 'origin/tyu-tyu/char' into tyu-tyu/charts 2019-08-21 11:53:53 +01:00
Tom Slater
8859c6977c Colour fixes 2019-08-21 11:51:10 +01:00
Tom Slater
9fbe36e401 Misc chart work 2019-08-20 16:47:20 +01:00
Finn
55e62a6b87
properly displaying essential purchases dataset 2019-08-20 16:43:53 +01:00
Finn
03e9e365fc
removed console logs that show password 2019-08-20 14:33:44 +01:00
Tom Slater
4181a09b96 Merge remote-tracking branch 'origin/felix/customranges' into tyu-tyu/char 2019-08-19 13:48:47 +01:00
Tom Slater
4b42a08af1 Chart work update
working on essential purchase graph
2019-08-19 12:30:36 +01:00
Tom Slater
156a2f3764 Misc Chart work 2019-08-16 16:58:35 +01:00
Felix
7c5eedaa87 removed test graph 2019-08-16 15:55:22 +01:00
Felix
301a6e619a commented out console.logs 2019-08-16 15:24:49 +01:00
Felix
12a72c00eb added loading spinner for when graph is loading 2019-08-16 15:23:18 +01:00
Tom Slater
e9334cec6d Merge branch 'tyu-tyu/chart' into felix/customranges 2019-08-16 13:58:13 +01:00
Tom Slater
1dd17e7a7a Chart work
Misc Chart work
2019-08-16 12:27:05 +01:00
Felix
ab72264521 IT WORKS! (date range picker) 2019-08-16 12:13:43 +01:00
Felix
6f801d20de more debugging 2019-08-16 11:32:45 +01:00
Felix
93b21d2547 debugging caching 2019-08-16 10:51:47 +01:00
Felix
277c058450 caching data from server to increase speed 2019-08-16 10:27:49 +01:00
Felix
ce64a9140e turns out the brackets were the wrong way around 2019-08-15 16:51:06 +01:00
Felix
5ffffbfe08 date pickers work 2019-08-15 16:34:13 +01:00
Felix
a5b32936bd forgot to grab important change from dev server 2019-08-15 15:10:48 +01:00
Felix
5b50803a25 more debugging 2019-08-15 14:51:10 +01:00
Felix
88bd12157b fixed incorrect initial value 2019-08-15 14:33:56 +01:00
Felix
6a338d41a4 removed unnecessary console.log() 2019-08-15 14:23:28 +01:00
Felix
a8cd23cf5c bubble chart updates on new dates entered to field
but is slowwwwwwww
2019-08-15 14:22:33 +01:00
Felix
a2f8f90513 custom dateRange code works 2019-08-15 12:37:49 +01:00
Felix
6e21cf8746 debugging custom range 2019-08-15 12:09:46 +01:00
Felix
e2960a3fcf fetching the right data this time at least 2019-08-14 16:36:02 +01:00
Felix
b6c0e1b6dd debugging options 2019-08-14 16:27:28 +01:00
Felix
00889b2104 fetches correct date ranges 2019-08-14 16:06:09 +01:00
Felix
263d3d15ab yeet 2019-08-14 15:43:41 +01:00
Tom Slater
fe6964fb8d WIP event timepicker 2019-08-14 15:34:08 +01:00
Finn
6c807194bc
fixed errors with ngModel 2019-08-14 14:18:53 +01:00
Tom Slater
a605d66d37 work on date picker bubble chart 2019-08-14 12:07:05 +01:00
Tom Slater
d550bf5e12 Work on date picker function on bubble chart 2019-08-14 09:49:18 +01:00
Tom Slater
c206a394d2 Added time filter options + Chart Labels
Cleaned up graphs that aren't relevant to this particular page, added chart labels and a WIP time filter option
2019-08-09 10:21:40 +01:00
Tom Slater
7ee0b64351 Chart Labels and clean up
Added axis labels and cleaned up charts a little.
2019-08-07 16:21:40 +01:00
Tom Slater
3248caed07 Misc Chart Improvements
Fixed doughnut chart colour loading issues, added WIP dashboard charts, few other misc changes
2019-08-06 16:51:44 +01:00
Tom Bloor
0dcf98fed3
Various updates 2019-07-15 12:38:06 +01:00
Tom Bloor
5cd0db3faf
More graphs with testing data 2019-07-15 01:17:01 +01:00
Finn
b1790a2fe9
Added meta data to transaction list 2019-07-12 20:47:01 +01:00
Finn
75ba91379d
made fixes to imports and supplier list 2019-07-12 20:18:28 +01:00
Finn
8202cdfdb1
Amended supplier list 2019-07-12 20:05:06 +01:00
Finn
40462b7d8f
Added proper supplier table 2019-07-12 18:50:59 +01:00
Finn
6b1e474916
Fixed suppliers 2019-07-12 17:45:43 +01:00
Finn
af04adeb31
Fixed errors when there is no data available 2019-07-12 17:38:19 +01:00
Finn
df631ad793
various fixes to dashboard stuff 2019-07-12 17:12:01 +01:00
Finn
7a6f40e300
fixed bugs 2019-07-12 15:49:06 +01:00
Finn
4b7ffd91b3
Adding new chart and fixing stuff 2019-07-12 13:40:21 +01:00
Finn
c5f6cb2750
FIxing a lot of issues and adding org data 2019-07-11 16:12:46 +01:00
Tom Slater
bd33f79067 Unfished Graph sections
Part 2
2019-07-11 15:18:33 +01:00
Tom Slater
630beeb5d0 Unfinished Company Component 2019-07-11 15:17:50 +01:00
Tom Slater
71162bcce7 Merge remote-tracking branch 'origin/felix/newSection-testing' into tom/minorfixes 2019-07-10 14:00:25 +01:00
Felix
45d52c9cdb Real bubble chart works, just need data now! 2019-07-10 13:04:07 +01:00
Felix
1c11f8e936 Added sample bubble chart 2019-07-10 12:49:36 +01:00
Felix
9f50b3c2ce Updating/removing some old files, preparing to add bubble chart 2019-07-10 12:22:26 +01:00
Felix
45e700675a added a necessary import 2019-07-09 14:24:59 +01:00
Felix
9dcc22bc3c added renaming instructions..? 2019-07-09 14:24:23 +01:00
Felix
46d2ed7ad8 Made a new section as per TomS's request :-) 2019-07-09 14:22:19 +01:00
Felix
c98a098ae9 Corrected grammar lol 2019-07-09 12:59:56 +01:00
Felix
2ded74f63c Merge commit '2998f0b3da1a7189fcd35b5b76bbeb42e7ed41e9' into felix/newSection-testing 2019-07-09 12:50:45 +01:00
Tom Slater
2998f0b3da Minor changes for Felix 2019-07-09 12:41:17 +01:00
Felix
d150441aa1 required packages updated 2019-07-09 12:22:03 +01:00
Felix
ee636b87fa Changed name of new-section to suppliers 2019-07-04 16:36:06 +01:00
Felix
1b56d6e95c Real table added to new section with sample data, dashboard 'total spend' is still broken - I can't figure out how I broke it in the first place :( 2019-07-04 16:10:50 +01:00
Felix
55f3f50576 Removed 'stacked-bar' reference from Dashboard, added table to New Section 2019-07-04 15:49:14 +01:00
Felix
ec1655a5ca package-lock.json and package.json added 2019-07-04 15:37:13 +01:00
Felix
68cf9ee049 New graph types added (not all working unfortunately), new section added for table views and probably a lot of messy code too! 2019-07-04 15:34:42 +01:00
Finn
6649888876
Properly fixed categories showing 2019-07-03 15:11:02 +01:00
Finn
bc8f024d41
fixed showTotalCategoryList 2019-07-03 15:04:03 +01:00
Finn
700287fc32
updated modules to work properly locally 2019-07-03 13:46:28 +01:00
Finn
5bb0669204
updated dependencies 2019-07-03 13:04:17 +01:00
Finn
0c43962f47
Updated versions 2019-07-02 16:46:20 +01:00
Finn
e7d2038041
Merge pull request #84 from Pear-Trading/hotfix-index
Icons and colours properly added for category list
2018-06-18 12:15:38 +01:00
piratefinn
090b3a65cb fixed icon colours and icons 2018-06-18 12:08:50 +01:00
piratefinn
54f2ad832d removed production overrides on local 2018-06-18 12:08:12 +01:00
Finn
f018e72e3a
Merge pull request #83 from Pear-Trading/master
Master
2018-06-06 14:35:12 +01:00
piratefinn
a751cf393e Merge branch 'hotfix-index' 2018-06-06 14:25:11 +01:00
piratefinn
63475b45b4 updated changelog 2018-06-06 14:24:47 +01:00
piratefinn
02be5e78d0 fixed pasta'd app-root 2018-06-06 14:23:38 +01:00
Finn
8510c539f7
Merge pull request #82 from Pear-Trading/v0.1.11
v0.1.11 release
2018-06-06 14:15:53 +01:00
piratefinn
18340a61f9 updated changelog 2018-06-05 14:11:56 +01:00
piratefinn
df30ab88c4 version bumps and proper naming 2018-06-05 14:08:27 +01:00
Finn
fb606016ee
Merge pull request #81 from Pear-Trading/finn/angular-6
Move to Angular 6
2018-06-05 13:58:50 +01:00
piratefinn
ee0daa2d57 removed unused config in ng test and cleaned angular.json 2018-06-05 13:47:02 +01:00
piratefinn
4d34e5c0f2 added local and ci configuration to e2e 2018-06-05 12:51:05 +01:00
piratefinn
478429b3c9 cleaned up code
keep eye on ngx-bootstrap for when it removes rxjs-compat requirement
2018-06-05 12:25:18 +01:00
piratefinn
21e163fda2 package updates 2018-06-04 18:05:59 +01:00
piratefinn
f7d2faea54 Merge remote-tracking branch 'origin/development' into finn/angular-6 2018-06-04 15:50:07 +01:00
Finn
e7e3f90739
Merge pull request #80 from Pear-Trading/finn/dashboard-fixes
Added fixes to dashboard
2018-06-04 15:49:33 +01:00
piratefinn
10622204b7 fixed icon errors 2018-06-04 15:26:46 +01:00
piratefinn
c9f786eaee removed icon list for sectors 2018-06-04 15:26:41 +01:00
piratefinn
e9b659a4bb Removed sector stuff on dashboard
To be moved to organisation dashboard at later time
2018-06-04 15:26:36 +01:00
piratefinn
adc0a1a7db Added category all time purchase list 2018-06-04 15:26:31 +01:00
piratefinn
ca95f8d10d layout fixes 2018-06-04 15:26:10 +01:00
piratefinn
fa2180f603 made submit message on add more logical 2018-06-04 15:25:54 +01:00
piratefinn
a388e2629d extraneous console logs removed 2018-06-04 15:25:24 +01:00
piratefinn
32b6dc810f extraneous login console logs removed 2018-06-04 15:24:59 +01:00
piratefinn
6abe0ec6f6 moved to angular 6 2018-06-04 15:23:16 +01:00
Tom Bloor
ebdd0354f5
Merge pull request #79 from Pear-Trading/master
Master
2018-05-24 13:31:52 +01:00
Tom Bloor
e19102a457
Merge pull request #78 from Pear-Trading/Release-v0.1.10
Release v0.1.10
2018-05-24 13:02:43 +01:00
Thomas Bloor
e6658aeccb
Updated Changelog 2018-05-24 12:39:10 +01:00
Tom Bloor
334ed6b411
Merge pull request #76 from Pear-Trading/THelsby/Analytics
Analytics
2018-05-24 12:35:36 +01:00
Thomas Bloor
a6e5412e40
Fix missing commas in environments files 2018-05-24 12:27:06 +01:00
Thomas Bloor
f05a5816e4
Update environment files 2018-05-24 12:15:39 +01:00
Thomas Bloor
5ef8f9471c
Fix http -> https error 2018-05-24 12:14:26 +01:00
Unknown
6bf111a3be
Analytics 2018-05-24 12:08:27 +01:00
Finn
7811806903
Merge pull request #75 from Pear-Trading/finn/yearlysubmit
added yearly submit
2018-05-15 17:04:28 +01:00
piratefinn
b373d4e63f added yearly submit 2018-05-15 16:48:51 +01:00
piratefinn
233c523353 Merge branch 'master' into development 2018-04-17 14:22:03 +01:00
piratefinn
7215a31262 Merge branch 'Release-0.1.9' 2018-04-17 14:20:46 +01:00
piratefinn
2ac7244605 version bumps and changelog 2018-04-17 14:20:26 +01:00
piratefinn
77972adcbf Merge branch 'finn/fixes' into development 2018-04-17 14:19:07 +01:00
piratefinn
4867a1ecaa made fixes 2018-04-17 14:17:57 +01:00
piratefinn
cc08f622af fixed layout on dashboard 2018-04-17 12:16:22 +01:00
piratefinn
a4e4158d7f Merge branch 'master' into development 2018-04-16 16:46:50 +01:00
Finn
c244eb8735
Merge pull request #74 from Pear-Trading/Release-0.07
0.1.8 Release
2018-04-16 16:27:44 +01:00
piratefinn
1cb3985778 changelog and version bumps 2018-04-16 16:06:00 +01:00
piratefinn
48fd3114b2 Merge branch 'finn/UIfixes' into development 2018-04-16 15:42:02 +01:00
piratefinn
4f3e0aa22d Amended for possible undefined error 2018-04-16 15:41:45 +01:00
Finn
735b2de28a
Merge pull request #73 from Pear-Trading/finn/UIfixes
Amended close button
2018-04-16 15:09:58 +01:00
piratefinn
daff33657f Fixed instruction for close menu button 2018-04-16 15:08:23 +01:00
piratefinn
3d5d20e419 Added hint for closing menu 2018-04-16 14:52:19 +01:00
Finn
7881ae1103
Merge pull request #72 from Pear-Trading/finn/graphs
Adding new graph views and fixes
2018-04-13 18:19:12 +01:00
piratefinn
2709a7893d various fixes 2018-04-13 16:37:26 +01:00
piratefinn
9d17a331fa transferred stuff from pie panel to dashboard 2018-04-13 16:07:26 +01:00
piratefinn
52a2b6716c fixed view of charts to show currency where relevant 2018-04-12 14:12:34 +01:00
piratefinn
61cd0905d1 fixed bar chart 2018-04-11 19:19:34 +01:00
piratefinn
093cdef3cf weekly view fixed, broken category bar chart
Chart needs fixing and currencies should pipe to show currency
2018-04-11 19:10:03 +01:00
piratefinn
511f680800 working essential bar chart 2018-04-09 19:19:06 +01:00
piratefinn
351aa5b2c1 added preliminary pie dashboard 2018-03-26 15:47:21 +01:00
piratefinn
6c202fa84a changed category view method 2018-03-26 14:47:20 +01:00
piratefinn
1f24095285 hotfix and version fixes 2018-03-21 17:41:07 +00:00
piratefinn
4bd3d67323 Merge remote-tracking branch 'origin/master' into development 2018-03-21 17:16:01 +00:00
Finn
085c1b40d5
Merge pull request #71 from Pear-Trading/finn/Release-v0.1.6
v0.1.6 Release
2018-03-21 16:58:48 +00:00
piratefinn
022f0ab2a1 changelog updated 2018-03-20 19:17:02 +00:00
Finn
8b65d8eefb
Merge pull request #70 from Pear-Trading/finn/buttoncategory
Added ability to edit and delete recurring transactions
2018-03-20 19:11:22 +00:00
piratefinn
e8217de9b6 fixed errors 2018-03-20 19:04:05 +00:00
piratefinn
db1e3efbf5 removed console logs 2018-03-20 17:41:35 +00:00
piratefinn
40eef44666 fixed recurring transaction editing 2018-03-20 17:41:03 +00:00
piratefinn
463bbe98a9 fully working transaction edit and delete 2018-03-20 17:29:00 +00:00
piratefinn
2188c1272f added updating transaction 2018-03-20 16:53:29 +00:00
piratefinn
49bd7d2e0c fixed httpclient error logging 2018-03-20 16:53:14 +00:00
piratefinn
3e8767e481 fixed category viewing and editing on several pages 2018-03-19 17:52:54 +00:00
piratefinn
f36ef00478 fixed add data submission and removed unnecessary console logs 2018-03-19 16:28:46 +00:00
piratefinn
b9578da579 Added initial recurring variable viewing 2018-03-14 20:06:21 +00:00
piratefinn
c45790c7e9 fixed upload submissions 2018-03-14 20:05:46 +00:00
piratefinn
e1dfa37f63 removed unnecessary console logs 2018-03-14 16:49:01 +00:00
piratefinn
f3c6370394 Amended purchase validation and submission 2018-03-13 12:49:30 +00:00
piratefinn
40b0a0088c applied new category style to fixed category view 2018-03-12 17:43:15 +00:00
piratefinn
dc27b286cf Placeholder recurring transaction box 2018-03-12 17:41:01 +00:00
piratefinn
144961acb3 Merge branch 'development' into finn/buttoncategory 2018-03-12 17:40:00 +00:00
piratefinn
2965a8d33c Merge branch 'master' into development 2018-03-12 17:39:52 +00:00
piratefinn
7bb8500315 changelog updated 2018-03-12 17:38:39 +00:00
piratefinn
dbf77ca4ee Merge branch 'development' 2018-03-12 17:37:06 +00:00
piratefinn
aaaa7c7a05 Converted category select into buttons, no color yet 2018-03-12 16:36:26 +00:00
98 changed files with 15811 additions and 8250 deletions

View file

@ -1,59 +0,0 @@
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"version": "1.0.0-alpha.4",
"name": "coreui-angular"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": ["assets"],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"scripts": [
"../node_modules/moment/min/moment.min.js"
],
"styles": [
"scss/style.scss"
],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.dev.ts",
"prod": "environments/environment.prod.ts",
"local": "environments/environment.local.ts",
"ci": "environments/environment.ci.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"project": "src/tsconfig.app.json"
},
{
"project": "src/tsconfig.spec.json"
},
{
"project": "e2e/tsconfig.e2e.json"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "scss",
"prefixInterfaces": false
}
}

4
.gitignore vendored
View file

@ -22,7 +22,6 @@ $RECYCLE.BIN/
/bower_components
# IDEs and editors
/.idea
.project
.classpath
*.launch
@ -41,6 +40,9 @@ testem.log
/e2e/*.js
/e2e/*.map
# build
/dist
# local env variable
/src/environments/environment.local.ts
/src/environments/environment.prod.ts

3
.idea/.gitignore vendored Normal file
View file

@ -0,0 +1,3 @@
# Default ignored files
/workspace.xml

View file

@ -0,0 +1,14 @@
<component name="ProjectCodeStyleConfiguration">
<code_scheme name="Project" version="173">
<TypeScriptCodeStyleSettings version="0">
<option name="SPACES_WITHIN_IMPORTS" value="true" />
<option name="BLANK_LINES_AROUND_FUNCTION" value="0" />
</TypeScriptCodeStyleSettings>
<codeStyleSettings language="TypeScript">
<option name="BLANK_LINES_AROUND_METHOD" value="0" />
<option name="BLANK_LINES_AROUND_METHOD_IN_INTERFACE" value="0" />
<option name="KEEP_SIMPLE_BLOCKS_IN_ONE_LINE" value="true" />
<option name="KEEP_SIMPLE_METHODS_IN_ONE_LINE" value="true" />
</codeStyleSettings>
</code_scheme>
</component>

View file

@ -0,0 +1,5 @@
<component name="ProjectCodeStyleConfiguration">
<state>
<option name="USE_PER_PROJECT_SETTINGS" value="true" />
</state>
</component>

6
.idea/misc.xml Normal file
View file

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectRootManager">
<output url="file://$PROJECT_DIR$/out" />
</component>
</project>

8
.idea/modules.xml Normal file
View file

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/Foodloop-Web.iml" filepath="$PROJECT_DIR$/Foodloop-Web.iml" />
</modules>
</component>
</project>

6
.idea/vcs.xml Normal file
View file

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="" vcs="Git" />
</component>
</project>

View file

@ -1,16 +1,12 @@
# Force sudo due to issue in travis
sudo: required
addons:
chrome: stable
language: node_js
node_js:
- 8
- node
before_install:
- openssl aes-256-cbc -K $encrypted_9d2af3734b6c_key -iv $encrypted_9d2af3734b6c_iv -in src/environments/environments.tar.enc -out src/environments/environments.tar -d
- openssl aes-256-cbc -K $encrypted_17157b34afc7_key -iv $encrypted_17157b34afc7_iv -in src/environments/environments.tar.enc -out src/environments/environments.tar -d
- tar xf src/environments/environments.tar -C src/environments
before_script:
- export DISPLAY=:99.0
- sh -e /etc/init.d/xvfb start
- npm config set spin false
install:
- npm install
@ -21,7 +17,7 @@ before_deploy:
deploy:
provider: releases
api_key:
secure: IZKEl1/LnzCN4/uMPKqUktURoNFjDmrybGKwrKbTPS27iXLrC9x4NwrQnOgipLF5h6Jeee4Qf1LhFCEpL/VTBTGMljQU2uOUFqn7TTGV5Ok7wxn2Z4CYeLDHMqDeGEECidAs8pB7I8lQvk5iUqmQT0NbuB0tDgavM9XCAecGUrFHh2tQaqPRGgZ1Q+1QB5d68EItSncMFKgRKja3Jq3u6ArF3uR3qY0dx9UKgcSUkKMnYbkBoEmiuCthdtwsH6WiIp4+K5GnVkGWxFa6KwdUJseHvUCuwS0Jp6lz47fP75xr4pHP45BxL7s549P60Iyr5AMRUge2+LPQV5QdbRH4guQV6qWI2L6Vw64fdC3lK00MhNFNO4M9p1T9eeldXhvUJwBDjzjoHlsrZysUMBy5G9CpQIVJtaPSVMWm/9yfPbu/B3k85cCHLb3fTos3altCWREIUScWIdDAHczJmmITUE9d5KljT8t2gLzCiCqB3BQ6ZzN8Ur68EIJ2ePuCO4644S+1shg5AXYDzXuUd30J57UGnuELQSMQkuZvMUQy8PmNO/iInIqpnuAwOwT4YD0MHgXrjD38a9+KszDjY+9HrIWcQE8P7AuN0iVf2voB5uLTOckkd4mXF9sskwoREVYJM+jz49HViggYyn1MHLsnlY5//vhMo5HNaf2DtT8fhk4=
secure: "Ke27Qm16uRgfX+ZVAq92Suu0ZpLOG9TGXDD8ndKNQZ4zl80DOmePoKvVpk/5Ip3H57Me2seqtCwgjeUCfW0dX3KayPoNmGVxWXCsZCH3MZWuaMnGk/Zc1Ef8P3L1sTEG4LD6+59RaOiMwIrMtLPjSlzvV2gc+002O7MHoudx/qZl47L+T01B0Ovh1AueSVN224Q79NrBnbgTtMqaS3x2avLkJmdZpneafqeO5OusOFcvsHvBr7ca0qKv5yIpn4eotK2bo6TFuaC9e9i7gUgPKHb1/GXAK1DcteUDF3AzK/b7T+dqTS+1vowuNKjMZ+ecyB8VDXQlWnBcv/IGn/C3nBmtp2oN97BFQtHguCY42Qk9LZxIu9o0mpOt6aMRiIsfbWstgONKaLzgt4Ce3DFlJ7YR5BFRaoKDdGHoCW+tcucQ/o9vFCbBVZ8sol2aYJOiNHYxlC8A7NLs6YEjyckVAa3q1l6CddnSjrFA5oe9fsLdzUDGhJ57Nv7kF9v6jjsTlZtucrzf8ix9+vNKNfWLQ6K86UIeBT40pPYHLBmWEsiGai+s4IWrYjTscT4zQDHcfQCMuQbbb3NTEfy9Fwv0VQdIR/cKsQgUCZwwlv3RBImryuDFqY2pNOqvnGIcr/OJ/MmY9bbCYEp55dxrZ50dNBbtR4O8IyUDte/ycU4OKbE="
file_glob: true
file: "../WebApp-Releases/*"
skip_cleanup: true

View file

@ -2,6 +2,64 @@
# Next Release
# 0.1.13
* Added new graphs for organisation view, for better breakdown of spending
* Added Suppliers spend search page
* Updated and fixes numerous graphs on dashboard
## Minor
* *Dev Fixes* Updated Travis config
# 0.1.12
* Fixed accidentally added app-root
# 0.1.11
* Bumped Angular to version 6 and upgraded packages to match
* Converted RxJS 5 syntax to RxJS 6
* Removed extraneous console logs
* Changed dashboard sector list to category all time list & tweaked layout
# 0.1.10
* Allowed for creation of yearly recurring transactions
* Added google analytics
# 0.1.9
* Made layout change to make it neater when chart doesn't show
* Made hotfix
# 0.1.8
* Amended how category is pulled from server
* Added chart on essential purchase numbers as a whole
* Added bar chart of category purchases in the month
* Added pie chart of purchases by category in the week
* Added hint for closing the burger menu while in mobile view
# v0.1.7
* Fixed category on upload highlighting
# v0.1.6
* Changed layout of category choosing on upload
* Added ability to edit and remove recurring transactions
* Fixed HttpClient error log viewing
* Made transaction validation more lenient
# v0.1.5
* Fixed category viewing on purchase
* Changed category view from radio buttons to full label buttons
* Amended local validation of submit
* Changed recurring purchase selection view
# v0.1.4
* Amended category list on transaction submission

12
Foodloop-Web.iml Normal file
View file

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager" inherit-compiler-output="true">
<exclude-output />
<content url="file://$MODULE_DIR$">
<excludeFolder url="file://$MODULE_DIR$/dist" />
<excludeFolder url="file://$MODULE_DIR$/tmp" />
</content>
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>

121
README.md
View file

@ -1,30 +1,43 @@
# LocalLoop Web Interface
# LocalSpend - Web Application
This is the repository for the LocalLoop web interface, for traders and
customers to see and submit data to the service.
This repository contains the Web application for the LocalSpend system.
## 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) |
| *Development:* | [![Build Status](https://travis-ci.org/Pear-Trading/FoodLoop-Web.svg?branch=development)](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) |
## 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
node.js, git, and access to either the backend dev server, or a local running
copy of the backend server from [LocalLoop Server][LocalLoop-Server].
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
copy of it from the [LocalSpend Server][LocalLoop-Server] repo.
For your local node.js, We reccomend using [n][tj/n] on \*nix and Mac, for
Windows take a look at [nodist][marcelklehr/nodist] - although other options
exist. We reccomend Node.js version 8.0.0+ and npm version 5.3.0+.
For your local Node.js, we recommend using:
- [n][tj/n] for \*nix and Mac; and
- [nodist][marcelklehr/nodist] for Windows.
To get this repository set up, first clone it and then run the following
commands:
We reccomend Node.js version 8.0.0+ and npm version 5.3.0+.
```
npm install -g @angular/cli
npm install
```
To get this repository set up:
1. Clone it
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
@ -33,45 +46,51 @@ npm install
## Environments
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:
- unit tests (using Karma); and
- E2E tests (using Protractor).
### Karma Unit Tests
To run these, you just need to run `npm run test` - this should work without any further configuration. These run the `*.spec.ts` files next to the normal source files, and are for basic tests for each function on their own.
These tests are a long-running process, and will automatically run on file changes. Just run the command above, and then check back to the browser window that appears to see any errors as you work!
### Protractor E2E Tests
To run these, you will need to run the following command:
- `webdriver-manager update`
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.
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 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
### CoreUI
The interface itself is based off of [CoreUI][core-ui] which is MIT Licenced.
For information, see [MIT Licence](./LICENCE.MIT) included in this repo.
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).

182
angular.json Normal file
View file

@ -0,0 +1,182 @@
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"localloop-web": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist",
"index": "src/index.html",
"main": "src/main.ts",
"tsConfig": "src/tsconfig.app.json",
"polyfills": "src/polyfills.ts",
"assets": [
"src/assets",
{"input":
"./node_modules/@google/markerclustererplus/images",
"glob": "*",
"output": "/images"
}
],
"styles": [
"src/scss/style.scss"
],
"scripts": [
"node_modules/moment/min/moment.min.js"
]
},
"configurations": {
"dev": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.dev.ts"
}
]
},
"production": {
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
]
},
"local": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.local.ts"
}
]
},
"ci": {
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.ci.ts"
}
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "localloop-web:build"
},
"configurations": {
"dev": {
"browserTarget": "localloop-web:build:dev"
},
"production": {
"browserTarget": "localloop-web:build:production"
},
"local": {
"browserTarget": "localloop-web:build:local"
},
"ci": {
"browserTarget": "localloop-web:build:ci"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "localloop-web:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"karmaConfig": "./karma.conf.js",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"styles": [
"src/scss/style.scss"
],
"assets": [
"src/assets"
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": []
}
}
}
},
"localloop-web-e2e": {
"root": "",
"sourceRoot": "",
"projectType": "application",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "./protractor.conf.js",
"devServerTarget": "localloop-web:serve"
},
"configurations": {
"local": {
"devServerTarget": "localloop-web:serve:local"
},
"ci": {
"devServerTarget": "localloop-web:serve:ci"
}
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"e2e/tsconfig.e2e.json"
],
"exclude": []
}
}
}
}
},
"defaultProject": "localloop-web",
"schematics": {
"@schematics/angular:component": {
"prefix": "app",
"styleext": "scss"
},
"@schematics/angular:directive": {
"prefix": "app"
}
}
}

View file

@ -1,4 +1,5 @@
#! /bin/bash
set -e
VERSION=`git describe --tags`
@ -11,13 +12,13 @@ echo "Building releases for $VERSION"
echo "Building Prod Release..."
ng build --prod
npm run build:prod
tar -czf ../WebApp-Releases/LocalLoop-Web-prod-$VERSION.tar.gz dist
echo "Building Dev Release..."
ng build --dev
npm run build:dev
tar -czf ../WebApp-Releases/LocalLoop-Web-dev-$VERSION.tar.gz dist

12
browserslist Normal file
View file

@ -0,0 +1,12 @@
# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
# For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries
# You can see what browsers were selected by your queries by running:
# npx browserslist
> 0.5%
last 2 versions
Firefox ESR
not dead
not IE 9-11 # For IE 9-11 support, remove 'not'.

View file

@ -1,4 +1,5 @@
import { LoginPageObject } from './login.po';
import { browser } from "protractor";
describe('Login Page', () => {
let page: LoginPageObject;
@ -13,12 +14,46 @@ describe('Login Page', () => {
});
it('should have a username box of type email', () => {
expect(page.isUsernameFieldPresent()).toBeTruthy();
expect(page.getUsernameFieldType()).toEqual('email');
expect(page.isEmailFieldPresent()).toBeTruthy();
expect(page.getEmailFieldType()).toEqual('email');
});
it('should have a password box of type password', () => {
expect(page.isPasswordFieldPresent()).toBeTruthy();
expect(page.getPasswordFieldType()).toBe('password');
});
it('should have a login button of type submit', () => {
expect(page.isLoginButtonPresent()).toBeTruthy();
expect(page.getLoginButtonType()).toBe('submit');
});
it('should have a disabled login button when empty', () => {
expect(page.isLoginButtonEnabled()).toBeFalsy();
});
it('should have a disabled login button when only email', () => {
page.fillEmailFieldWith('test@example.com');
expect(page.isLoginButtonEnabled()).toBeFalsy();
});
it('should have a disabled login button when only password', () => {
page.fillPasswordFieldWith('abc123');
expect(page.isLoginButtonEnabled()).toBeFalsy();
});
it('should have an enabled login button when both inputs filled', () => {
page.fillEmailFieldWith('test@example.com');
page.fillPasswordFieldWith('abc123');
expect(page.isLoginButtonEnabled()).toBeTruthy();
});
it('should submit the filled data when login pressed', () => {
page.fillEmailFieldWith('test@example.com');
page.fillPasswordFieldWith('abc123');
expect(page.isLoginButtonEnabled()).toBeTruthy();
page.getLoginButton().click();
browser.waitForAngular();
expect(browser.getCurrentUrl()).toContain('dashboard');
});
});

View file

@ -9,12 +9,23 @@ export class LoginPageObject {
return element(by.css('app-root h1')).getText();
}
getUsernameField() { return element(by.id('username')); }
getEmailField() { return element(by.id('username')); }
getPasswordField() { return element(by.id('password')); }
getLoginButton() { return element(by.id('login')); }
isUsernameFieldPresent() { return this.getUsernameField().isPresent(); }
isEmailFieldPresent() { return this.getEmailField().isPresent(); }
isPasswordFieldPresent() { return this.getPasswordField().isPresent(); }
isLoginButtonPresent() { return this.getLoginButton().isPresent(); }
getUsernameFieldType() { return this.getUsernameField().getAttribute('type'); }
getEmailFieldType() { return this.getEmailField().getAttribute('type'); }
getPasswordFieldType() { return this.getPasswordField().getAttribute('type'); }
getLoginButtonType() { return this.getLoginButton().getAttribute('type'); }
isLoginButtonEnabled() { return this.getLoginButton().isEnabled(); }
clearEmailField() { return this.getEmailField().clear() };
clearPasswordField() { return this.getPasswordField().clear() };
fillEmailFieldWith(text) { return this.getEmailField().sendKeys(text) };
fillPasswordFieldWith(text) { return this.getPasswordField().sendKeys(text) };
}

View file

@ -4,28 +4,28 @@
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', '@angular/cli'],
frameworks: ['jasmine', '@angular-devkit/build-angular'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),
require('@angular/cli/plugins/karma')
require('@angular-devkit/build-angular/plugins/karma')
],
client:{
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
files: [
{ pattern: './src/test.ts', watched: false }
],
preprocessors: {
'./src/test.ts': ['@angular/cli']
},
mime: {
'text/x-typescript': ['ts','tsx']
},
coverageIstanbulReporter: {
reports: [ 'html', 'lcovonly' ],
dir: require('path').join(__dirname, 'coverage'), reports: [ 'html', 'lcovonly' ],
fixWebpackSourcePaths: true
},
angularCli: {

20367
package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -1,6 +1,6 @@
{
"name": "localloop-web",
"version": "0.1.4",
"version": "0.1.13",
"description": "LocalLoop Web - Web interface for LocalLoop app",
"author": "",
"url": "http://www.peartrade.org",
@ -8,58 +8,81 @@
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"start:dev": "ng serve --optimization=false --configuration=dev",
"start:prod": "ng serve --optimization=false --configuration=production",
"start:local": "ng serve --optimization=false --configuration=local",
"build:dev": "ng build --configuration=dev",
"build:prod": "ng build --configuration=production",
"test": "ng test",
"test:ci": "ng test --watch=false --env=ci",
"test:ci": "ng test --watch=false --browsers=ChromeHeadless",
"lint": "ng lint",
"e2e": "ng e2e",
"e2e:ci": "ng e2e --env=ci",
"e2e:ci": "ng e2e --configuration=ci",
"ci": "npm run test:ci && npm run e2e:ci"
},
"private": true,
"dependencies": {
"@agm/core": "1.0.0-beta.2",
"@agm/js-marker-clusterer": "1.0.0-beta.2",
"@angular/common": "5.2.0",
"@angular/compiler": "5.2.0",
"@angular/core": "5.2.0",
"@angular/forms": "5.2.0",
"@angular/platform-browser": "5.2.0",
"@angular/platform-browser-dynamic": "5.2.0",
"@angular/router": "5.2.0",
"@angular/upgrade": "5.2.0",
"@types/moment": "2.13.0",
"chart.js": "2.7.1",
"core-js": "2.5.1",
"js-marker-clusterer": "1.0.0",
"moment": "^2.21.0",
"ng2-charts": "1.6.0",
"@agm/core": "^3.0.0-beta.0",
"@agm/markerclusterer": "^3.0.0-beta.0",
"@angular/common": "10.0.6",
"@angular/compiler": "10.0.6",
"@angular/core": "10.0.6",
"@angular/forms": "10.0.6",
"@angular/platform-browser": "10.0.6",
"@angular/platform-browser-dynamic": "10.0.6",
"@angular/router": "10.0.6",
"@angular/upgrade": "10.0.6",
"@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.3.1",
"@coreui/icons": "0.3.0",
"@google/markerclustererplus": "^5.0.4",
"ajv": "^6.10.0",
"ajv-keywords": "^3.4.0",
"angular2-datetimepicker": "^1.1.1",
"chart.js": "^2.8.0",
"chartjs-adapter-luxon": "^0.2.0",
"core-js": "^2.6.9",
"devextreme": "^19.1.4",
"devextreme-angular": "^19.1.4",
"jasmine": "^3.4.0",
"jquery": "^3.5.1",
"jszip": "^3.2.2",
"luxon": "^1.16.1",
"moment": "^2.24.0",
"ng2-charts": "^2.3.2",
"ng2-validation-manager": "0.5.3",
"ngx-bootstrap": "2.0.0-beta.8",
"ngx-pagination": "3.0.3",
"rxjs": "5.5.6",
"ngx-bootstrap": "^5.0.0",
"ngx-filter-pipe": "^2.1.2",
"ngx-pagination": "^4.0.0",
"popper.js": "^1.15.0",
"rxjs": "6.6.0",
"stream": "0.0.2",
"ts-helpers": "1.1.2",
"webpack-dev-server": "3.1.0",
"zone.js": "0.8.18"
"tslib": "^1.10.0",
"web-animations-js": "^2.3.2",
"webpack-dev-server": "^3.11.0",
"zone.js": "~0.10.3"
},
"devDependencies": {
"@angular/cli": "1.7.3",
"@angular/compiler-cli": "5.2.0",
"@types/jasmine": "2.8.2",
"@types/jasminewd2": "2.0.3",
"@types/node": "8.0.52",
"codelyzer": "4.0.1",
"jasmine-core": "2.8.0",
"@angular-devkit/build-angular": "^0.1000.4",
"@angular/cli": "^10.0.4",
"@angular/compiler-cli": "10.0.6",
"@types/googlemaps": "^3.39.8",
"@types/jasmine": "3.3.13",
"@types/jasminewd2": "2.0.6",
"@types/node": "12.0.10",
"codelyzer": "^6.0.0",
"jasmine-core": "^3.4.0",
"jasmine-spec-reporter": "4.2.1",
"karma": "1.7.1",
"karma": "^5.1.1",
"karma-chrome-launcher": "2.2.0",
"karma-cli": "1.0.1",
"karma-coverage-istanbul-reporter": "1.3.0",
"karma-jasmine": "1.1.0",
"karma-jasmine-html-reporter": "0.2.2",
"protractor": "5.2.0",
"ts-node": "3.3.0",
"tslint": "5.8.0",
"typescript": "2.6.x"
"karma-cli": "2.0.0",
"karma-coverage-istanbul-reporter": "^2.0.5",
"karma-jasmine": "^2.0.1",
"karma-jasmine-html-reporter": "^1.4.2",
"protractor": "^7.0.0",
"readable-stream": "latest",
"ts-node": "^8.3.0",
"tslint": "^5.18.0",
"typescript": "~3.9.7"
}
}

View file

@ -9,7 +9,10 @@ exports.config = {
'./e2e/**/*.e2e-spec.ts'
],
capabilities: {
'browserName': 'chrome'
'browserName': 'chrome',
chromeOptions: {
args: [ "--headless" ]
}
},
directConnect: true,
baseUrl: 'http://localhost:4200/',

View file

@ -8,13 +8,11 @@ export class AuthGuard implements CanActivate {
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
if (localStorage.getItem('sessionKey')) {
console.log('session key found');
// logged in so return true
return true;
}
// not logged in so redirect to login page with the return url
console.log('no session key found');
this.router.navigate(['/login'], { queryParams: { returnUrl: state.url }});
return false;
}

View file

@ -8,11 +8,9 @@ export class CustomerGuard implements CanActivate {
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
if (localStorage.getItem('usertype') === 'customer') {
console.log('Customer logged in');
// customer logged in so return true
return true;
} else if (localStorage.getItem('usertype') === 'organisation') {
console.log('not an customer');
this.router.navigate(['/dashboard']);
return false;
}

View file

@ -8,11 +8,9 @@ export class OrgGuard implements CanActivate {
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
if (localStorage.getItem('usertype') === 'organisation') {
console.log('Organisation logged in');
// org logged in so return true
return true;
} else if (localStorage.getItem('usertype') === 'customer') {
console.log('not an organisation');
this.router.navigate(['/dashboard-customer']);
return false;
}

View file

@ -1,7 +1,10 @@
import { environment } from '../environments/environment';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { LocationStrategy, HashLocationStrategy } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
@ -25,6 +28,7 @@ import { CustGraphsService } from './providers/cust-graphs.service';
import { OrgSnippetsService } from './providers/org-snippets.service';
import { CustSnippetsService } from './providers/cust-snippets.service';
import { CustPiesService } from './providers/cust-pies.service';
import { OrgPiesService } from './providers/org-pies.service';
// Layouts
import { FullLayoutComponent } from './layouts/full-layout.component';
@ -37,21 +41,30 @@ import { P500Component } from './pages/500.component';
// Submodules
import { AuthModule } from './auth/auth.module';
import { DashboardModule } from './dashboard/dashboard.module';
import { ChartsModule } from 'ng2-charts';
// import { StackedBarChartComponent } from './panels/stacked-bar.component';
import { FilterPipeModule } from 'ngx-filter-pipe';
@NgModule({
imports: [
BrowserModule,
HttpClientModule,
FormsModule,
FilterPipeModule,
ReactiveFormsModule,
NgxPaginationModule,
BsDropdownModule.forRoot(),
TabsModule.forRoot(),
AuthModule,
ChartsModule,
DashboardModule,
// Loaded last to allow for 404 catchall
AppRoutingModule,
],
declarations: [
AppComponent,
// StackedBarChartComponent,
FullLayoutComponent,
SimpleLayoutComponent,
NAV_DROPDOWN_DIRECTIVES,
@ -71,6 +84,7 @@ import { DashboardModule } from './dashboard/dashboard.module';
CustGraphsService,
CustSnippetsService,
CustPiesService,
OrgPiesService,
{
provide: LocationStrategy,
useClass: HashLocationStrategy
@ -78,4 +92,10 @@ import { DashboardModule } from './dashboard/dashboard.module';
],
bootstrap: [ AppComponent ]
})
export class AppModule { }
export class AppModule {
constructor () {
if (environment.enableAnalytics) {
(<any>window).ga('create', environment.analyticsKey, 'auto');
}
}
}

View file

@ -28,7 +28,7 @@
</div>
<div class="row">
<div class="col-6">
<button type="submit" [disabled]="!signin.valid" class="btn btn-primary px-4">Login</button>
<button id="login" type="submit" [disabled]="!signin.valid" class="btn btn-primary px-4">Login</button>
</div>
<div class="col-6 text-right">
<button type="button" class="btn btn-link px-0" disabled>Forgot password?</button>

View file

@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
import { Validators, FormBuilder, FormGroup } from '@angular/forms';
import { ApiService } from '../providers/api-service';
import { Router, ActivatedRoute } from '@angular/router';
import 'rxjs/add/operator/map';
@Component({
templateUrl: 'login.component.html',
@ -40,15 +40,11 @@ export class LoginComponent implements OnInit {
}
onSubmit() {
console.log(this.signin.value);
this.api
.login(this.signin.value)
.subscribe(
result => {
console.log('logged in!');
this.loginStatus = 'success';
console.log(this.loginStatus);
this.router.navigate([this.returnUrl]);
},
error => {

View file

@ -3,7 +3,7 @@ import { Validators, FormBuilder, FormGroup } from '@angular/forms';
import { ValidationManager } from 'ng2-validation-manager';
import { ApiService } from '../providers/api-service';
import {Router } from '@angular/router';
import 'rxjs/add/operator/map';
@Component({
templateUrl: 'register.component.html',
@ -70,7 +70,7 @@ export class RegisterComponent {
password: signupForm.password,
display_name: customerForm.display_name,
full_name: customerForm.full_name,
postcode: customerForm.postcode,
postcode: customerForm.postcode.toUpperCase(),
year_of_birth: customerForm.year_of_birth,
};
console.log(data);
@ -78,24 +78,18 @@ export class RegisterComponent {
.register(data)
.subscribe(
result => {
console.log('registered!');
this.registerStatus = 'success';
console.log(this.registerStatus);
this.router.navigate(['/dashboard']);
},
error => {
console.log('Register Error');
console.log(error);
try {
console.log(error.error);
const jsonError = error.json();
console.log('boop');
this.registerStatusError = '"' + jsonError.error + '" Error, ' + jsonError.message;
this.registerStatusError = '"' + error.error.error + '" Error, ' + error.error.message;
} catch (e) {
this.registerStatusError = 'There was a server error, please try again later.';
}
this.registerStatus = 'send_failed';
console.log(this.registerStatus);
}
);
}
@ -120,26 +114,19 @@ export class RegisterComponent {
sector: organisationForm.sector,
street_name: organisationForm.street_name,
town: organisationForm.town,
postcode: organisationForm.postcode,
postcode: organisationForm.postcode.toUpperCase(),
};
console.log(data);
this.api
.register(data)
.subscribe(
result => {
console.log('registered!');
this.registerStatus = 'success';
console.log(this.registerStatus);
this.router.navigate(['/dashboard']);
},
error => {
console.log('Register Error');
console.log(error);
try {
console.log(error.error);
const jsonError = error.json();
console.log('boop');
this.registerStatusError = '"' + jsonError.error + '" Error, ' + jsonError.message;
this.registerStatusError = '"' + error.error.error + '" Error, ' + error.error.message;
} catch (e) {
this.registerStatusError = 'There was a server error, please try again later.';
}

View file

@ -1,7 +1,7 @@
import { Component, OnInit, ViewChild } from '@angular/core';
import { Validators, FormBuilder, FormGroup } from '@angular/forms';
import { ApiService } from '../providers/api-service';
import 'rxjs/add/operator/map';
@Component({
templateUrl: 'account-edit.component.html',
@ -89,7 +89,7 @@ export class AccountEditComponent implements OnInit {
const submitData = {
email: settingForm.email,
postcode: settingForm.postcode,
postcode: settingForm.postcode.toUpperCase(),
password: settingForm.password,
new_password: settingForm.new_password,
name: settingOrganisationForm.name,
@ -105,23 +105,17 @@ export class AccountEditComponent implements OnInit {
.accountEditUpdate(submitData)
.subscribe(
result => {
console.log('data submitted!');
this.submitStatus = 'success';
console.log(this.submitStatus);
},
error => {
console.log('Edit Error');
console.log(error);
try {
console.log(error.error);
const jsonError = error.json();
console.log('boop');
this.submitStatusError = '"' + jsonError.error + '" Error, ' + jsonError.message;
this.submitStatusError = '"' + error.error.error + '" Error, ' + error.error.message;
} catch (e) {
this.submitStatusError = 'There was a server error, please try again later.';
}
this.submitStatus = 'send_failed';
console.log(this.submitStatus);
}
);
}
@ -131,7 +125,6 @@ export class AccountEditComponent implements OnInit {
if (!this.settingForm.valid && !this.settingCustomerForm.valid) {
console.log('Not Valid!');
this.submitStatus = 'validation_failed';
console.log(this.submitStatus);
return;
}
@ -149,7 +142,7 @@ export class AccountEditComponent implements OnInit {
const submitData = {
email: settingForm.email,
postcode: settingForm.postcode,
postcode: settingForm.postcode.toUpperCase(),
password: settingForm.password,
new_password: settingForm.new_password,
full_name: settingCustomerForm.full_name,

View file

@ -24,51 +24,48 @@
<span class="help-block">Enter the amount spent, such as 5.35 for £5.35.</span>
</div>
</div>
<div class="form-group row">
<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()">
</div>
<span class="help-block">Tick if the purchase is deemed an essential purchase for budgeting purposes.</span>
</div>
</div>
</div>
<div class="form-group row">
<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()">
</div>
<span class="help-block">Tick if the purchase frequently recurs, such as monthly.</span>
</div>
</div>
</div>
<div *ngIf="recurringPurchase" class="form-group row">
<label class="col-md-3 form-control-label" for="text-input"><strong>Recurring Period</strong></label>
<div class="col-md-9">
<div class="row">
<div class="col-md-6">
<div>
<input value="daily" type="radio" name="daily" [(ngModel)]="recurringType" (ngModelChange)="transactionFormValidate()">
<label>Daily</label>
</div>
<div>
<input value="weekly" type="radio" name="weekly" [(ngModel)]="recurringType" (ngModelChange)="transactionFormValidate()">
<label>Weekly</label>
</div>
<div>
<input value="fortnightly" type="radio" name="fortnightly" [(ngModel)]="recurringType" (ngModelChange)="transactionFormValidate()">
<label>Fortnightly</label>
</div>
</div>
<div class="col-md-6">
<div>
<input value="monthly" type="radio" name="monthly" [(ngModel)]="recurringType" (ngModelChange)="transactionFormValidate()">
<label>Monthly</label>
</div>
<div>
<input value="quarterly" type="radio" name="quarterly" [(ngModel)]="recurringType" (ngModelChange)="transactionFormValidate()">
<label>Quarterly</label>
</div>
<div class="col-md-6 btn-group-vertical">
<label class="btn btn-secondary mb-0" [class.active]="recurringType == 'daily'">
<input value="daily" type="radio" name="radios" style="display:none;" [(ngModel)]="recurringType" (ngModelChange)="transactionFormValidate()">Daily
</label>
<label class="btn btn-secondary mb-0" [class.active]="recurringType == 'weekly'">
<input value="weekly" type="radio" name="radios" style="display:none;" [(ngModel)]="recurringType" (ngModelChange)="transactionFormValidate()">Weekly
</label>
<label class="btn btn-secondary mb-0" [class.active]="recurringType == 'fortnightly'">
<input value="fortnightly" type="radio" name="radios" style="display:none;" [(ngModel)]="recurringType" (ngModelChange)="transactionFormValidate()">Fortnightly
</label>
<label class="btn btn-secondary mb-0" [class.active]="recurringType == 'monthly'">
<input value="monthly" type="radio" name="radios" style="display:none;" [(ngModel)]="recurringType" (ngModelChange)="transactionFormValidate()">Monthly
</label>
<label class="btn btn-secondary mb-0" [class.active]="recurringType == 'quarterly'">
<input value="quarterly" type="radio" name="radios" style="display:none;" [(ngModel)]="recurringType" (ngModelChange)="transactionFormValidate()">Quarterly
</label>
<label class="btn btn-secondary mb-0" [class.active]="recurringType == 'yearly'">
<input value="yearly" type="radio" name="radios" style="display:none;" [(ngModel)]="recurringType" (ngModelChange)="transactionFormValidate()">Yearly
</label>
</div>
</div>
<span class="help-block">Please give the period of time the purchase will recur from "Time of Transaction".</span>
@ -78,21 +75,18 @@
<label class="col-md-3 form-control-label" for="text-input">Budget Type</label>
<div class="col-md-9">
<div class="row">
<div class="col-md-6">
<div>
<input value="" type="radio" name="radios" [(ngModel)]="categoryId">
<label>Uncategorised</label>
</div>
<div class="radio" *ngFor="let category of leftCategoryIdList, let i=index">
<input [value]="category" type="radio" name="radios" [(ngModel)]="categoryId">
<label>{{ leftCategoryNameList[i] }}</label>
</div>
</div>
<div class="col-md-6">
<div class="radio" *ngFor="let category2 of rightCategoryIdList, let i=index">
<input [value]="category2" type="radio" name="radios" [(ngModel)]="categoryId">
<label>{{ rightCategoryNameList[i] }}</label>
<div class="col-md-6 btn-group-vertical">
<label class="btn btn-secondary mb-0" [class.active]="categoryId == null">
<input value="" type="radio" name="radios" style="display:none;" [(ngModel)]="categoryId">Uncategorised
</label>
<label *ngFor="let category of leftCategoryList" class="btn btn-secondary mb-0" [class.active]="categoryId == category">
<input [value]="category" type="radio" name="radios" style="display:none;" [(ngModel)]="categoryId">{{ categoryList[category] }}
</label>
</div>
<div class="col-md-6 btn-group-vertical">
<label *ngFor="let category2 of rightCategoryList" class="btn btn-secondary mb-0" [class.active]=" categoryId == category2">
<input [value]="category2" type="radio" name="radios" style="display:none;" [(ngModel)]="categoryId">{{ categoryList[category2] }}
</label>
</div>
</div>
<span class="help-block"><strong>Optional:</strong> Choose the Budget Type for the majority of the purchase.</span>
@ -108,21 +102,21 @@
<org-table *ngIf="storeList.length > 0" [orgList]="storeList" (onClick)="addStore($event)"></org-table>
<div *ngIf="showAddStore">
<div class="form-group row">
<label class="col-md-3 form-control-label" for="text-input"><strong>Organisation Street Name</strong></label>
<label class="col-md-3 form-control-label" for="text-input">Organisation Street Name</label>
<div class="col-md-9">
<input type="text" class="form-control" placeholder="Which Street?" [(ngModel)]="submitOrg.street_name" (ngModelChange)="transactionFormValidate()">
<span class="help-block">Enter the street name where the organisation is located at.</span>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 form-control-label" for="text-input"><strong>Organisation Town</strong></label>
<label class="col-md-3 form-control-label" for="text-input">Organisation Town</label>
<div class="col-md-9">
<input type="text" class="form-control" placeholder="Which Town?" [(ngModel)]="submitOrg.town" (ngModelChange)="transactionFormValidate()">
<span class="help-block">Enter the name of the town where the organisation is located at.</span>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 form-control-label" for="text-input"><strong>Organisation Postcode</strong></label>
<label class="col-md-3 form-control-label" for="text-input">Organisation Postcode</label>
<div class="col-md-9">
<input type="text" class="form-control" placeholder="Postcode if known" [(ngModel)]="submitOrg.postcode" (ngModelChange)="transactionFormValidate()">
<span class="help-block">Enter the postcode where the organisation is located at.</span>
@ -163,14 +157,14 @@
<div class="form-group row">
<label class="col-md-3 form-control-label" for="text-input"><strong>Total amount of Employees</strong></label>
<div class="col-md-9">
<input type="number" class="form-control" formControlName="employee_amount" placeholder="0">
<input type="number" class="form-control" formControlName="employee_amount" placeholder="0" min="0">
<span class="help-block">Enter the amount of employees the organisation has for the entry month.</span>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 form-control-label" for="text-input"><strong>Total amount of local Employees</strong></label>
<div class="col-md-9">
<input type="number" class="form-control" formControlName="local_employee_amount" placeholder="0">
<input type="number" class="form-control" formControlName="local_employee_amount" placeholder="0" min="0">
<span class="help-block">Enter the amount of employees that live locally to the organisation for the entry month.</span>
</div>
</div>

View file

@ -3,7 +3,7 @@ import { Validators, FormBuilder, FormGroup } from '@angular/forms';
import { ApiService } from '../providers/api-service';
import { OrgTableComponent } from '../shared/org-table.component';
import * as moment from 'moment';
import 'rxjs/add/operator/map';
@Component({
templateUrl: 'add-data.component.html',
@ -30,8 +30,6 @@ export class AddDataComponent implements OnInit {
organisationTown: string;
organisationPostcode: string;
amount: number;
// Assumes Groceries is 1st category
categoryId: number = 1;
essentialPurchase = false;
recurringPurchase = false;
recurringType: string;
@ -42,10 +40,11 @@ export class AddDataComponent implements OnInit {
transactionFormInvalid = true;
myDate: any;
minDate: any;
leftCategoryIdList: number[] = [];
rightCategoryIdList: number[] = [];
leftCategoryNameList: number[] = [];
rightCategoryNameList: number[] = [];
categoryList: any;
categoryIdList: any;
leftCategoryList: number[] = [];
rightCategoryList: string[] = [];
categoryId: number;
constructor(
private formBuilder: FormBuilder,
@ -75,7 +74,9 @@ export class AddDataComponent implements OnInit {
// this.myDate = new Date().toISOString().slice(0, 16);
this.api.categoryList().subscribe(
result => {
this.setCategoryList(result.categories);
this.categoryList = result.categories;
this.categoryIdList = Object.keys(this.categoryList);
this.setCategoryList(this.categoryIdList);
},
error => {
console.log('Retrieval Error');
@ -90,13 +91,9 @@ export class AddDataComponent implements OnInit {
}
private setCategoryList(data: any) {
let categoryIdList = Object.keys(data.ids).map(key => data.ids[key]);
let categoryNameList = Object.keys(data.names).map(key => data.names[key]);
let halfLength = Math.floor(categoryIdList.length / 2);
this.leftCategoryIdList = categoryIdList.splice(0, halfLength);
this.leftCategoryNameList = categoryNameList.splice(0, halfLength);
this.rightCategoryIdList = categoryIdList;
this.rightCategoryNameList = categoryNameList;
let halfLength = Math.floor(data.length / 2);
this.leftCategoryList = data.splice(0, halfLength);
this.rightCategoryList = data;
}
getMinDate() {
@ -177,14 +174,16 @@ export class AddDataComponent implements OnInit {
}
transactionFormValidate() {
if (this.submitOrg.name.length === 0 ||
this.submitOrg.town.length === 0 ||
this.amount === 0 ||
this.recurringPurchase &&
!this.recurringType) {
this.transactionFormInvalid = true;
} else {
this.transactionFormStatus = null;
if (this.submitOrg.name.length &&
this.amount &&
(this.recurringPurchase &&
this.recurringType ||
!this.recurringPurchase &&
!this.recurringType)) {
this.transactionFormInvalid = false;
} else {
this.transactionFormInvalid = true;
}
}
@ -238,31 +237,22 @@ export class AddDataComponent implements OnInit {
.subscribe(
result => {
if ( result.success === true ) {
console.log('Successful Upload');
console.log(result);
this.transactionFormStatus = 'success';
console.log(this.transactionFormStatus);
this.resetForm();
} else {
console.log('Upload Error');
this.transactionFormStatusError = JSON.stringify(result.status) + 'Error, ' + JSON.stringify(result.message);
this.transactionFormStatus = 'send_failed';
console.log(this.transactionFormStatus);
}
},
error => {
console.log('Upload Error');
console.log(error);
try {
console.log(error.error);
const jsonError = error.json();
console.log('boop');
this.transactionFormStatusError = '"' + jsonError.error + '" Error, ' + jsonError.message;
this.transactionFormStatusError = '"' + error.error.error + '" Error, ' + error.error.message;
} catch (e) {
this.transactionFormStatusError = 'There was a server error, please try again later.';
}
this.transactionFormStatus = 'send_failed';
console.log(this.transactionFormStatus);
}
);
}
@ -290,14 +280,11 @@ export class AddDataComponent implements OnInit {
.orgPayroll(this.payrollForm.value)
.subscribe(
result => {
console.log('data submitted!');
this.payrollFormStatus = 'success';
console.log(this.payrollFormStatus);
},
error => {
console.log( error._body );
this.payrollFormStatus = 'send_failed';
console.log(this.payrollFormStatus);
}
);
}
@ -309,14 +296,10 @@ export class AddDataComponent implements OnInit {
.orgSupplier(this.singleSupplierForm.value)
.subscribe(
result => {
console.log('data submitted!');
this.singleSupplierFormStatus = 'success';
console.log(this.singleSupplierFormStatus);
},
error => {
console.log( error._body );
this.singleSupplierFormStatus = 'send_failed';
console.log(this.singleSupplierFormStatus);
}
);
}
@ -328,14 +311,10 @@ export class AddDataComponent implements OnInit {
.orgEmployee(this.employeeForm.value)
.subscribe(
result => {
console.log('data submitted!');
this.employeeFormStatus = 'success';
console.log(this.employeeFormStatus);
},
error => {
console.log( error._body );
this.employeeFormStatus = 'send_failed';
console.log(this.employeeFormStatus);
}
);
}

View file

@ -1,6 +1,6 @@
<div class="animated fadeIn">
<div class=row>
<div class="col-md-6">
<div *ngIf="weekList1" class="col-md-6">
<div class="card">
<div class="card-block">
<div class="row">
@ -12,8 +12,8 @@
<ul *ngIf="weekList1" class="horizontal-bars type-2">
<li *ngIf="weekEssential1">
<span class="title">Essential Purchases</span>
<span class="value">{{ ( weekEssential1.value || 0 ) | currency:'GBP':'symbol':'1.2-2' }} <span class="text-muted small">
({{ (weekEssential1.value || 0 ) / weekListValueSum1 | percent:'1.0-0' }})</span></span>
<span class="value">{{ ( weekEssential1 ? weekEssential1.value : 0 ) | currency:'GBP':'symbol':'1.2-2' }} <span class="text-muted small">
({{ ( weekEssential1 ? weekEssential1.value : 0 ) / weekListValueSum1 | percent:'1.0-0' }})</span></span>
<div class="bars">
<div class="progress" style="height: 6px;">
<div class="progress-bar bg-success" role="progressbar"
@ -22,7 +22,7 @@
</div>
</li>
<li *ngFor="let categoryEntry of weekList1 | slice:0:categoryLimit1; let i=index;">
<span class="title">{{ categoryNameList[categoryEntry.category - 1] || 'Uncategorised' }}</span>
<span class="title">{{ categoryEntry.category || 'Uncategorised' }}</span>
<span class="value">{{ ( categoryEntry.value || 0 ) | currency:'GBP':'symbol':'1.2-2' }} <span class="text-muted small">
({{ (categoryEntry.value || 0 ) / weekListValueSum1 | percent:'1.0-0' }})</span></span>
<div class="bars">
@ -42,7 +42,7 @@
</div>
</div>
</div><!--/.col-->
<div class="col-md-6">
<div *ngIf="weekList2" class="col-md-6">
<div class="card">
<div class="card-block">
<div class="row">
@ -54,8 +54,8 @@
<ul *ngIf="weekList2" class="horizontal-bars type-2">
<li *ngIf="weekEssential2">
<span class="title">Essential Purchases</span>
<span class="value">{{ ( weekEssential2.value || 0 ) | currency:'GBP':'symbol':'1.2-2' }} <span class="text-muted small">
({{ (weekEssential2.value || 0 ) / weekListValueSum2 | percent:'1.0-0' }})</span></span>
<span class="value">{{ ( weekEssential2 ? weekEssential2.value : 0 ) | currency:'GBP':'symbol':'1.2-2' }} <span class="text-muted small">
({{ ( weekEssential2 ? weekEssential2.value : 0 ) / weekListValueSum2 | percent:'1.0-0' }})</span></span>
<div class="bars">
<div class="progress" style="height: 6px;">
<div class="progress-bar bg-success" role="progressbar"
@ -64,7 +64,7 @@
</div>
</li>
<li *ngFor="let categoryEntry of weekList2 | slice:0:categoryLimit2; let i=index;">
<span class="title">{{ categoryNameList[categoryEntry.category - 1] || 'Uncategorised' }}</span>
<span class="title">{{ categoryEntry.category || 'Uncategorised' }}</span>
<span class="value">{{ ( categoryEntry.value || 0 ) | currency:'GBP':'symbol':'1.2-2' }} <span class="text-muted small">
({{ (categoryEntry.value || 0 ) / weekListValueSum2 | percent:'1.0-0' }})</span></span>
<div class="bars">
@ -84,7 +84,7 @@
</div>
</div>
</div><!--/.col-->
<div class="col-md-6">
<div *ngIf="weekList3" class="col-md-6">
<div class="card">
<div class="card-block">
<div class="row">
@ -96,8 +96,8 @@
<ul *ngIf="weekList3" class="horizontal-bars type-2">
<li *ngIf="weekEssential3">
<span class="title">Essential Purchases</span>
<span class="value">{{ ( weekEssential1.value || 0 ) | currency:'GBP':'symbol':'1.2-2' }} <span class="text-muted small">
({{ (weekEssential3.value || 0 ) / weekListValueSum3 | percent:'1.0-0' }})</span></span>
<span class="value">{{ ( weekEssential3 ? weekEssential3.value : 0 ) | currency:'GBP':'symbol':'1.2-2' }} <span class="text-muted small">
({{ ( weekEssential3 ? weekEssential3.value : 0 ) / weekListValueSum3 | percent:'1.0-0' }})</span></span>
<div class="bars">
<div class="progress" style="height: 6px;">
<div class="progress-bar bg-success" role="progressbar"
@ -106,7 +106,7 @@
</div>
</li>
<li *ngFor="let categoryEntry of weekList3 | slice:0:categoryLimit3; let i=index;">
<span class="title">{{ categoryNameList[categoryEntry.category - 1] || 'Uncategorised' }}</span>
<span class="title">{{ categoryEntry.category || 'Uncategorised' }}</span>
<span class="value">{{ ( categoryEntry.value || 0 ) | currency:'GBP':'symbol':'1.2-2' }} <span class="text-muted small">
({{ (categoryEntry.value || 0 ) / weekListValueSum3 | percent:'1.0-0' }})</span></span>
<div class="bars">
@ -126,7 +126,7 @@
</div>
</div>
</div><!--/.col-->
<div class="col-md-6">
<div *ngIf="weekList4" class="col-md-6">
<div class="card">
<div class="card-block">
<div class="row">
@ -138,8 +138,8 @@
<ul *ngIf="weekList4" class="horizontal-bars type-2">
<li *ngIf="weekEssential4">
<span class="title">Essential Purchases</span>
<span class="value">{{ ( weekEssential4.value || 0 ) | currency:'GBP':'symbol':'1.2-2' }} <span class="text-muted small">
({{ (weekEssential4.value || 0 ) / weekListValueSum4 | percent:'1.0-0' }})</span></span>
<span class="value">{{ ( weekEssential4 ? weekEssential4.value : 0 ) | currency:'GBP':'symbol':'1.2-2' }} <span class="text-muted small">
({{ ( weekEssential4 ? weekEssential4.value : 0 ) / weekListValueSum4 | percent:'1.0-0' }})</span></span>
<div class="bars">
<div class="progress" style="height: 6px;">
<div class="progress-bar bg-success" role="progressbar"
@ -148,7 +148,7 @@
</div>
</li>
<li *ngFor="let categoryEntry of weekList4 | slice:0:categoryLimit4; let i=index;">
<span class="title">{{ categoryNameList[categoryEntry.category - 1] || 'Uncategorised' }}</span>
<span class="title">{{ categoryEntry.category || 'Uncategorised' }}</span>
<span class="value">{{ ( categoryEntry.value || 0 ) | currency:'GBP':'symbol':'1.2-2' }} <span class="text-muted small">
({{ (categoryEntry.value || 0 ) / weekListValueSum4 | percent:'1.0-0' }})</span></span>
<div class="bars">

View file

@ -2,7 +2,7 @@ import { Directive, Component, OnInit } from '@angular/core';
import { ApiService } from '../providers/api-service';
import { DataType } from '../shared/data-types.enum';
import * as moment from 'moment';
import 'rxjs/add/operator/map';
@Component({
templateUrl: 'category-month.component.html'
@ -31,15 +31,12 @@ export class CategoryMonthComponent implements OnInit {
weekEssential3: number = 0;
weekEssential4: number = 0;
categoryList: number[] = [];
dayList: any[] = [];
valueList: number[] = [];
myWeek1: any;
myWeek2: any;
myWeek3: any;
myWeek4: any;
categoryIdList: number[] = [];
categoryNameList: string[] = [];
categoryLimit1: number = 6;
categoryLimit2: number = 6;
categoryLimit3: number = 6;
@ -49,15 +46,6 @@ export class CategoryMonthComponent implements OnInit {
private api: ApiService,
) {
this.setDate();
this.api.categoryList().subscribe(
result => {
this.setCategoryList(result.categories);
},
error => {
console.log('Retrieval Error');
console.log( error._body );
}
);
this.api.categoryTransactionList().subscribe(
result => {
this.setData(result);
@ -72,11 +60,6 @@ export class CategoryMonthComponent implements OnInit {
ngOnInit(): void {
}
private setCategoryList(data: any) {
this.categoryIdList = Object.keys(data.ids).map(key => data.ids[key]);
this.categoryNameList = Object.keys(data.names).map(key => data.names[key]);
}
private setDate () {
this.myWeek1 = moment().startOf('isoWeek').format('YYYY-MM-DD');
this.myWeek2 = moment(this.myWeek1).subtract(1, 'weeks').format('YYYY-MM-DD');

View file

@ -11,96 +11,105 @@
</div><!--/.col-->
</div><!--/.row-->
<div class=row>
<div class="col-xl-4 col-md-6">
<panel-pie></panel-pie>
<div class="col-xl-6">
<panel-pie></panel-pie><!--All Purchases -->
<!-- <div class="demo-container" ng-app="stacked-bar" ng-controller="stacked-bar">
<div id="stacked-bar" dx-chart="chartOptions"></div>
</div> -->
</div><!--/.col-->
<div class="col-xl-4 col-md-6">
<!--<div *ngIf="showCategoryDoughnutChart" class="col-xl-6">
<div class="card"> -->
<!-- <body style="background-color:rgb(0,0,0);"> -->
<!-- <div class="card-block">
<div class="row">
<div class="col-12">
<h4 class="card-title mb-0">Spending by Category</h4>
</div>
</div>
<div class="chart-wrapper">
<canvas baseChart class="chart"
[datasets]="doughnutChartDataCategory"
[labels]="doughnutChartLabelsCategory"
[options]="doughnutChartOptionsCategory"
[colors]= "doughnutChartColoursCategory"
[legend]="chartLegend"
[chartType]="chartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
</div>
</div> -->
<!-- </body> -->
<!-- </div> --><!--/.col-->
<div *ngIf="showEssentialBarChart" class="col-xl-6">
<div class="card">
<div class="card-block">
<div class="row">
<div class="col-12">
<h4 class="card-title float-left mb-0">Purchases by Week</h4>
</div><!--/.col-->
</div><!--/.row-->
<h4 class="card-title mb-0">No. of Essential Purchases</h4>
</div>
</div>
<div class="chart-wrapper">
<ul class="horizontal-bars type-2">
<li>
<span class="title">This Week</span>
<span class="value">{{ (weekPurchaseList.first || 0 ) }} <span class="text-muted small">
({{ (weekPurchaseList.first || 0 ) / weekPurchaseList.max | percent:'1.0-0' }})</span></span>
<div class="bars">
<div class="progress" style="height: 6px;">
<div class="progress-bar bg-success" role="progressbar"
[style.width]="(weekPurchaseList.first || 0 ) / weekPurchaseList.max | percent:'1.0-0'" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</li>
<li>
<span class="title">Last Week</span>
<span class="value">{{ weekPurchaseList.second || 0 }} <span class="text-muted small">
({{ (weekPurchaseList.second || 0 ) / weekPurchaseList.max | percent:'1.0-0' }})</span></span>
<div class="bars">
<div class="progress" style="height: 6px;">
<div class="progress-bar bg-success" role="progressbar"
[style.width]="(weekPurchaseList.second || 0 ) / weekPurchaseList.max | percent:'1.0-0'" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</li>
<li>
<span class="title">Week Maximum</span>
<span class="value">{{ weekPurchaseList.max || 0 }} <span class="text-muted small">
(100%)</span></span>
<div class="bars">
<div class="progress" style="height: 6px;">
<div class="progress-bar bg-success" role="progressbar"
style="width: 100%" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</li>
<li>
<span class="title">Weekly Average</span>
<span class="value">{{ (weekPurchaseList.sum / weekPurchaseList.count) || 0 | number:'1.0-0'}} <span class="text-muted small">
({{ ((weekPurchaseList.sum / weekPurchaseList.count) || 0) / weekPurchaseList.max | percent:'1.0-0' }})</span></span>
<div class="bars">
<div class="progress" style="height: 6px;">
<div class="progress-bar bg-success" role="progressbar"
[style.width]="((weekPurchaseList.sum / weekPurchaseList.count) || 0) / weekPurchaseList.max | percent:'1.0-0'" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</li>
</ul>
<canvas baseChart class="chart"
[datasets]="barChartDataEssential"
[labels]="barChartLabelsEssential"
[options]="barChartOptionsEssential"
[chartType]="barChartTypeEssential"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
</div>
</div>
</div>
</div><!--/.col-->
<div class="col-xl-4">
<div class="col-xl-6">
<div class="card">
<div class="card-block">
<div class="row">
<div class="col-12">
<h4 class="card-title float-left mb-0">Purchases by Sector</h4>
<h4 class="card-title float-left mb-0">Your Purchases by Category</h4>
</div><!--/.col-->
</div><!--/.row-->
<div class="chart-wrapper">
<canvas baseChart class="chart"
[datasets]="barChartDataCategory"
[labels]="barChartLabelsCategory"
[options]="barChartOptionsCategory"
[colors]="barChartColoursCategory"
[legend]="barChartLegendCategory"
[chartType]="barChartTypeCategory"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
</div>
</div>
</div>
</div><!--/.col-->
<div class="col-xl-6">
<div class="card">
<div class="card-block">
<div class="row">
<div class="col-12">
<h4 class="card-title float-left mb-0"> Global Puchases by Category</h4>
</div>
<div class="col-12">
<div *ngIf="showTotalCategoryList" class="chart-wrapper">
<ul class="icons-list">
<!-- New loop -->
<li *ngFor="let sector of sectorLetters | slice:0:sectorLimit; let i=index">
<i [ngClass]="[sectorIcons [sector] || 'icon-question', sectorClasses [sector] || 'bg-info']"></i>
<li *ngFor="let category of totalCategoryList | slice:0:totalCategoryLimit; let i=index">
<i [ngClass]="['icon-' + category.icon, getBootstrapColour(i)]"></i>
<div class="desc">
<div class="title">{{ sectorNames [sector] || 'N/A' }}</div>
<div class="title">{{ category.category || 'N/A' }}</div>
</div>
<div class="value">
<div class="small text-muted">Bought</div>
<strong>{{ sectorPurchases[i] || 'N/A' }}</strong>
<strong>{{ category.value || 'N/A' }}</strong>
</div>
</li>
<li *ngIf="sectorLetters.length > sectorLimit && disableSectorButton == false" class="divider text-center">
<button type="button" class="btn btn-sm btn-link text-muted" (click)="loadMore()"><i class="icon-options"></i></button>
<li *ngIf="totalCategoryList.length > totalCategoryLimit && disableCategoryButton == false" class="divider text-center">
<button type="button" class="btn btn-sm btn-link text-muted" (click)="categoryLoadMore()"><i class="icon-options"></i></button>
</li>
</ul>
</div>
</div>
</div>
</div><!--/.col-->
</div><!--/.row-->
</div>
</div>
</div>
</div>

View file

@ -1,10 +1,20 @@
import { Directive, Component, OnInit } from '@angular/core';
import { CurrencyPipe } from '@angular/common';
import { ApiService } from '../providers/api-service';
import { Router } from '@angular/router';
import { ChartOptions, ChartType, ChartDataSets } from 'chart.js';
import { GraphWidget } from '../widgets/graph-widget.component';
import { Color, Label } from 'ng2-charts';
import { CustBarSnippetComponent } from '../snippets/cust-snippet-bar.component';
import { PiePanel } from '../panels/pie-panel.component';
import { DataType } from '../shared/data-types.enum';
import * as moment from 'moment';
import { MoreStuffComponent } from '../dashboard/more-graphs-and-tables.component';
// import { StackedBarChartComponent } from '../panels/stacked-bar.component';
interface SuppliersComponent {
name : string;
}
@Component({
templateUrl: 'dashboard-customer.component.html'
@ -20,7 +30,111 @@ export class DashboardCustomerComponent implements OnInit {
username: any;
maxPurchase: number = 0;
disableSectorButton: boolean = false;
disableCategoryButton: boolean = false;
public bootstrapColours: string[] = ['bg-primary', 'bg-secondary', 'bg-success',
'bg-danger', 'bg-warning', 'bg-info'];
public chartType = 'doughnut';
public chartLegend = true;
public doughnutChartDataCategory: any[] = [];
public doughnutChartLabelsCategory: string[] = [];
public doughnutChartColoursCategory: any[] = [
{
backgroundColor:[
'#ffa1b5',
'#3cde52',
'#52afed',
'#c133e3',
'#f7fa08',
'#75152d',
'#ee12ee',
'#15eaea',
'#eaa015',
'#ea1515',
'#2d4fcc'
]
}];
public doughnutChartOptionsCategory:any = {
tooltips: {
callbacks: {
label: (tooltip, data) => {
return this.tooltipLabelCallback(tooltip, data);
},
},
},
}
myWeek1: any;
weekList1 = [];
public purchaseNotEssential: number;
public purchaseEssential: number;
public showEssentialBarChart = false;
public showCategoryBarChart = false;
public showCategoryDoughnutChart = false;
public barChartDataEssential:any[]=[
{data: 0, label: 'Essential', stack: '1'},
{data: 0, label: 'Non-Essential', stack: '1'},
];
public barChartLabelsEssential:string[] = ['All Purchases'];
public barChartOptionsEssential:any = {
responsive: true,
scales:{
xAxes:[{
scaleLabel: {
display:true,
},
stacked:true,
}],
}
};
public barChartTypeEssential:string = 'horizontalBar';
public barChartOptionsCategory:any = {
scaleShowVerticalLines: false,
responsive: true,
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
callback: label => `£${label}`
}
}]
},
tooltips: {
callbacks: {
label: (tooltip, data) => {
return this.tooltipLabelCallback(tooltip, data);
},
},
},
};
public barChartTypeCategory:string = 'bar';
public barChartLegendCategory:boolean = false;
public barChartDataCategory:any[]=[];
public barChartLabelsCategory:string[] = [];
public barChartColoursCategory: any[] = [
{
backgroundColor:[
'#ffa1b5',
'#3cde52',
'#52afed',
'#c133e3',
'#f7fa08',
'#75152d',
'#ee12ee',
'#15eaea',
'#eaa015',
'#ea1515',
'#2d4fcc'
]
}];
weekPurchaseList = {
first: 0,
@ -30,83 +144,10 @@ export class DashboardCustomerComponent implements OnInit {
count: 0,
};
sectorNames = {
A: 'Agriculture, Forestry & Fishing',
B: 'Mining & Quarrying',
C: 'Manufacturing',
D: 'Electricity, Gas, Steam & Air Conditioning',
E: 'Water & Waste Management',
F: 'Construction',
G: 'Wholesale & Retail Trade',
H: 'Transportation & Storage',
I: 'Accomodation & Food Services',
J: 'Information & Communication',
K: 'Financial & Insurance Activities',
L: 'Real Estate',
M: 'Professional, Scientfic & Technical',
N: 'Administrative & Support Services',
O: 'Public Administration, Defence & Social Security',
P: 'Education',
Q: 'Human Health & Social Work',
R: 'Arts, Entertainment & Recreation',
S: 'Other Service Activities',
T: 'Household Domestic Business',
U: 'Extraterritorial Organisations and Bodies'
}
showTotalCategoryList: boolean = false;
totalCategoryLimit: number = 10;
totalCategoryList: any[]=[];
sectorIcons = {
A: 'icon-drop',
B: 'icon-diamond',
C: 'icon-settings',
D: 'icon-energy',
E: 'icon-trash',
F: 'icon-wrench',
G: 'icon-tag',
H: 'icon-speedometer',
I: 'icon-cup',
J: 'icon-feed',
K: 'icon-credit-card',
L: 'icon-graph',
M: 'icon-chemistry',
N: 'icon-drawer',
O: 'icon-pie-chart',
P: 'icon-graduation',
Q: 'icon-support',
R: 'icon-film',
S: 'icon-calendar',
T: 'icon-home',
U: 'icon-globe',
}
sectorClasses = {
A: 'bg-primary',
B: 'bg-success',
C: 'bg-danger',
D: 'bg-warning',
E: 'bg-info',
F: 'bg-primary',
G: 'bg-success',
H: 'bg-danger',
I: 'bg-warning',
J: 'bg-info',
K: 'bg-primary',
L: 'bg-success',
M: 'bg-danger',
N: 'bg-warning',
O: 'bg-info',
P: 'bg-primary',
Q: 'bg-success',
R: 'bg-danger',
S: 'bg-warning',
T: 'bg-info',
U: 'bg-primary',
}
sectorLetters: string[] = [];
sectorPurchases: number[] = [];
sectorLimit: number = 10;
sectorList: any;
// Graph widgets
public widgetList = [
@ -140,11 +181,25 @@ export class DashboardCustomerComponent implements OnInit {
constructor(
private api: ApiService,
private currencyPipe: CurrencyPipe,
) {
this.setDate();
this.api.customerStats().subscribe(
result => {
this.setWeekPurchaseList(result.weeks);
this.setSectorList(result.sectors);
this.setWeekData(result);
this.setChartData(result.data.cat_total);
this.totalCategoryList = result.data.cat_list;
if (this.totalCategoryList) {
this.showTotalCategoryList = true;
}
this.purchaseEssential = result.data.essentials.purchase_no_essential_total;
this.purchaseNotEssential = result.data.essentials.purchase_no_total - this.purchaseEssential;
this.barChartDataEssential = [
{data: [this.purchaseEssential], label: 'Essential', stack: '1'},
{data: [this.purchaseNotEssential], label: 'Non-Essential', stack: '1'},
];
this.showEssentialBarChart = true;
},
error => {
console.log('Retrieval Error');
@ -153,6 +208,35 @@ export class DashboardCustomerComponent implements OnInit {
);
}
private setChartData(dataCat: any) {
this.barChartLabelsCategory = Object.keys(dataCat);
let barChartDataCategoryInitial = Object.keys(dataCat).map(key => dataCat[key]);
this.barChartDataCategory = [
{data: barChartDataCategoryInitial, label: 'Series A'},
];
this.showCategoryBarChart = true;
if (this.weekList1) {
let doughnutChartDataCategoryInitial = this.weekList1.map(function(a) {return a.value;});
this.doughnutChartDataCategory = [
{data: doughnutChartDataCategoryInitial, label: 'Series A'},
];
// setTimeout is currently a workaround for ng2-charts labels
setTimeout(() => this.doughnutChartLabelsCategory = this.weekList1.map(function(a) {return a.category;}), 0);
this.showCategoryDoughnutChart = true;
}
}
private setDate () {
this.myWeek1 = moment().startOf('isoWeek').format('YYYY-MM-DD');
}
private setWeekData (data: any) {
function prop<T, K extends keyof T>(obj: T, key: K) {
return obj[key];
}
this.weekList1 = prop(data.data.categories, this.myWeek1);
}
public setWeekPurchaseList (data: any) {
this.weekPurchaseList = {
first: data.first,
@ -163,14 +247,36 @@ export class DashboardCustomerComponent implements OnInit {
};
}
public setSectorList (data: any) {
this.sectorLetters = Object.keys(data.sectors).map(key => data.sectors[key]);
this.sectorPurchases = Object.keys(data.purchases).map(key => data.purchases[key]);
private categoryLoadMore () {
this.disableCategoryButton = true;
this.totalCategoryLimit = 30;
}
private loadMore () {
this.disableSectorButton = true;
this.sectorLimit = 22;
public getBootstrapColour(index: number) {
return this.bootstrapColours[index % this.bootstrapColours.length];
}
public convertHex(hex: string, opacity: number) {
hex = hex.replace('#', '');
const r = parseInt(hex.substring(0, 2), 16);
const g = parseInt(hex.substring(2, 4), 16);
const b = parseInt(hex.substring(4, 6), 16);
const rgba = 'rgba(' + r + ', ' + g + ', ' + b + ', ' + opacity / 100 + ')';
return rgba;
}
private tooltipLabelCallback(tooltipItem: any, data: any) {
var dataset = data.datasets[tooltipItem.datasetIndex];
var value = dataset.data[tooltipItem.index];
return this.currencyPipe.transform(value, 'GBP', 'symbol', '1.2-2');
}
// events
public chartClicked(e: any): void {
}
public chartHovered(e: any): void {
}
ngOnInit(): void {

View file

@ -1,3 +1,4 @@
<div class="animated fadeIn">
<snippet-bar-org></snippet-bar-org>
<div class="row">
@ -11,4 +12,102 @@
</div><!--/.col-->
</div><!--/.row-->
<panel-graph></panel-graph>
</div>
<div class=row>
<div class="col-xl-6">
<div class="card">
<div class="card-block">
<div class="row">
<div class="col-12">
<h4 class="card-title mb-0">Number of Essential Purchases</h4>
</div>
</div>
<div *ngIf="showEssentialBarChart" class="chart-wrapper">
<canvas baseChart class="chart"
[datasets]="barChartDataEssential"
[labels]="barChartLabelsEssential"
[options]="barChartOptionsEssential"
[chartType]="barChartTypeEssential"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
</div>
</div>
</div>
</div><!--/.col-->
<div class="col-xl-6">
<div class="card">
<div class="card-block">
<div class="row">
<div class="col-12">
<h4 class="card-title float-left mb-0">All Organisation Purchases by Category</h4>
</div><!--/.col-->
</div><!--/.row-->
<div class="chart-wrapper">
<canvas baseChart class="chart"
[datasets]="barChartDataCategory"
[labels]="barChartLabelsCategory"
[options]="barChartOptionsCategory"
[colors]="barChartColoursCategory"
[legend]="barChartLegendCategory"
[chartType]="barChartTypeCategory"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
</div>
</div>
</div>
</div><!--/.col-->
<div *ngIf="showCategoryDoughnutChart" class="col-xl-6">
<div class="card">
<div class="card-block">
<div class="row">
<div class="col-12">
<h4 class="card-title mb-0">This weeks' spending by Category</h4>
</div>
</div>
<div class="chart-wrapper">
<canvas baseChart class="chart"
[datasets]="doughnutChartDataCategory"
[labels]="doughnutChartLabelsCategory"
[options]="doughnutChartOptionsCategory"
[colors]="doughnutChartColoursCategory"
[legend]="chartLegend"
[chartType]="chartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
</div>
</div>
</div>
</div>
<div class="col-xl-6">
<org-pie-panel></org-pie-panel>
</div>
<div class="col-xl-6">
<div class="card">
<div class="card-block">
<div class="row">
<div class="col-12">
<h4 class="card-title float-left mb-0"> Global Puchases by Category</h4>
</div>
<div class="col-12">
<div *ngIf="showTotalCategoryList" class="chart-wrapper">
<ul class="icons-list">
<!-- New loop -->
<li *ngFor="let category of totalCategoryList | slice:0:totalCategoryLimit; let i=index">
<i [ngClass]="['icon-' + category.icon, getBootstrapColour(i)]"></i>
<div class="desc">
<div class="title">{{ category.category || 'N/A' }}</div>
</div>
<div class="value">
<div class="small text-muted">Bought</div>
<strong>{{ category.value || 'N/A' }}</strong>
</div>
</li>
<li *ngIf="totalCategoryList.length > totalCategoryLimit && disableCategoryButton == false" class="divider text-center">
<button type="button" class="btn btn-sm btn-link text-muted" (click)="categoryLoadMore()"><i class="icon-options"></i></button>
</li>
</ul>
</div>
</div>
</div><!--/.row-->
</div>
</div>
</div>

View file

@ -1,9 +1,16 @@
import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { Router, NavigationEnd } from "@angular/router";
import { CurrencyPipe } from '@angular/common';
import { ChartOptions, ChartType, ChartDataSets } from 'chart.js';
import { Color, Label } from 'ng2-charts';
import { GraphWidget } from '../widgets/graph-widget.component';
import { OrgBarSnippetComponent } from '../snippets/org-snippet-bar.component';
import { GraphPanel } from '../panels/graph-panel.component';
import { OrgPiePanel } from '../panels/org-pie-panel.component';
import { DataType } from '../shared/data-types.enum';
import { ApiService } from '../providers/api-service';
import { environment } from '../../environments/environment';
import * as moment from 'moment';
@Component({
templateUrl: 'dashboard.component.html'
@ -37,6 +44,13 @@ export class DashboardComponent {
title: 'Sales Last 30 Days',
dataType: DataType.currency,
},
{
type: 'graph',
name: 'sales_last_quart',
icon: 'icon-diamond',
title: 'Sales Last Quart',
dataType: DataType.currency,
},
{
type: 'graph',
name: 'purchases_last_7_days',
@ -49,7 +63,307 @@ export class DashboardComponent {
title: 'Purchases Last 30 Days',
dataType: DataType.currency,
},
{
type: 'graph',
name: 'purchases_last_quart;',
title: 'Purchases Last Quart',
dataType: DataType.currency,
},
];
constructor() { }
disableCategoryButton: boolean = false;
public bootstrapColours: string[] = ['bg-primary', 'bg-secondary', 'bg-success',
'bg-danger', 'bg-warning', 'bg-info'];
public chartType = 'doughnut';
public chartLegend = true;
public doughnutChartDataCategory: any[] = [];
public doughnutChartLabelsCategory: string[] = [];
public doughnutChartColoursCategory: any[] = [
{
backgroundColor:[
'#ffa1b5',
'#3cde52',
'#52afed',
'#c133e3',
'#f7fa08',
'#75152d',
'#ee12ee',
'#15eaea',
'#eaa015',
'#ea1515',
'#2d4fcc'
]
}];
public doughnutChartOptionsCategory:any = {
tooltips: {
callbacks: {
label: (tooltip, data) => {
return this.tooltipLabelCallback(tooltip, data);
},
},
},
}
myWeek1: any;
weekList1 = [];
public purchaseNotEssential: number;
public purchaseEssential: number;
public showEssentialBarChart:boolean = false;
public showCategoryBarChart = false;
public showCategoryDoughnutChart = false;
public barChartDataEssential: ChartDataSets[] = [
{data: [0], label: 'Essential', stack: '1'},
{data: [0], label: 'Non-Essential', stack: '1'},
];
public barChartLabelsEssential:string[] = ['All Purchases'];
public barChartOptionsEssential:any = {
responsive: true,
scales:{
xAxes:[{
stacked:true
}],
yAxes:[{
stacked:true
}]
}
};
public barChartTypeEssential:string = 'horizontalBar';
public barChartColoursCategory: any[] = [
{
backgroundColor:[
'#ffa1b5',
'#3cde52',
'#52afed',
'#c133e3',
'#f7fa08',
'#75152d',
'#ee12ee',
'#15eaea',
'#eaa015',
'#ea1515',
'#2d4fcc'
]
}];
public barChartOptionsCategory:any = {
scaleShowVerticalLines: false,
responsive: true,
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
callback: label => `£${label}`
}
}]
},
tooltips: {
callbacks: {
label: (tooltip, data) => {
return this.tooltipLabelCallback(tooltip, data);
},
},
},
};
public barChartTypeCategory:string = 'bar';
public barChartLegendCategory:boolean = false;
public barChartDataCategory:any[]=[];
public barChartLabelsCategory:string[] = [];
public lineChartDataSector: ChartDataSets[] = [
{ data: [], label: '' },
];
public lineChartLabelsSector: Label[] = ['January', 'February', 'March', 'April', 'May', 'June', 'July','August','September','October','November','December'];
public lineChartOptionsSector: (ChartOptions & { annotation: any }) = {
responsive: true,
scales: {
// We use this empty structure as a placeholder for dynamic theming.
xAxes: [{}],
yAxes: [{}]
},
annotation: {
annotations: [
{
type: 'line',
mode: 'vertical',
scaleID: 'x-axis-0',
value: 'March',
borderColor: 'orange',
borderWidth: 2,
label: {
enabled: true,
fontColor: 'orange',
content: 'LineAnno'
}
},
],
},
};
public lineChartColorsSector: Color[] = [
{ // grey
backgroundColor: 'rgba(148,159,177,0.2)',
borderColor: 'rgba(148,159,177,1)',
pointBackgroundColor: 'rgba(148,159,177,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(148,159,177,0.8)'
},
{ // dark grey
backgroundColor: 'rgba(77,83,96,0.2)',
borderColor: 'rgba(77,83,96,1)',
pointBackgroundColor: 'rgba(77,83,96,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(77,83,96,1)'
},
{ // red
backgroundColor: 'rgba(255,0,0,0.3)',
borderColor: 'red',
pointBackgroundColor: 'rgba(148,159,177,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(148,159,177,0.8)'
}
];
public lineChartLegendSector = true;
public lineChartTypeSector = 'line';
weekPurchaseList = {
first: 0,
second: 0,
max: 0,
sum: 0,
count: 0,
};
showTotalCategoryList: boolean = false;
totalCategoryLimit: number = 10;
totalCategoryList: any[]=[];
constructor(
private router: Router,
private api: ApiService,
private currencyPipe: CurrencyPipe,
) {
if (environment.enableAnalytics) {
this.router.events.subscribe(event => {
if (event instanceof NavigationEnd) {
(<any>window).ga('set', 'page', event.urlAfterRedirects);
(<any>window).ga('send', 'pageview');
}
});
}
this.setDate();
this.api.orgStats().subscribe(
result => {
this.setWeekPurchaseList(result.weeks);
this.setWeekData(result);
this.setChartDataCat(result.data.cat_total);
this.setChartDataEssential(result.data.essentials);
this.totalCategoryList = result.data.cat_list;
if (this.totalCategoryList) {
this.showTotalCategoryList = true;
}
},
error => {
console.log('Retrieval Error');
console.log( error._body );
}
);
}
private setChartDataEssential (dataEs: any) {
this.purchaseEssential = dataEs.purchase_no_essential_total;
this.purchaseNotEssential = dataEs.purchase_no_total - this.purchaseEssential;
this.barChartDataEssential = [
{data: [this.purchaseEssential], label: 'Essential', stack: '1'},
{data: [this.purchaseNotEssential], label: 'Non-Essential', stack: '1'},
];
this.showEssentialBarChart = true;
console.log(this.barChartDataEssential);
}
private setChartDataCat(dataCat: any) {
this.barChartLabelsCategory = Object.keys(dataCat);
let barChartDataCategoryInitial = Object.keys(dataCat).map(key => dataCat[key]);
this.barChartDataCategory = [
{data: barChartDataCategoryInitial, label: 'Series A'},
];
this.showCategoryBarChart = true;
if (this.weekList1) {
let doughnutChartDataCategoryInitial = this.weekList1.map(function(a) {return a.value;});
this.doughnutChartDataCategory = [
{data: doughnutChartDataCategoryInitial, label: 'Series A'},
];
// setTimeout is currently a workaround for ng2-charts labels
setTimeout(() => this.doughnutChartLabelsCategory = this.weekList1.map(function(a) {return a.category;}), 0);
this.showCategoryDoughnutChart = true;
}
}
private setChartDataSector(dataSec: any) {
}
private setDate () {
this.myWeek1 = moment().startOf('isoWeek').format('YYYY-MM-DD');
}
private setWeekData (data: any) {
function prop<T, K extends keyof T>(obj: T, key: K) {
return obj[key];
}
this.weekList1 = prop(data.data.categories, this.myWeek1);
}
public setWeekPurchaseList (data: any) {
this.weekPurchaseList = {
first: data.first,
second: data.second,
max: data.max,
sum: data.sum,
count: data.count,
};
}
private categoryLoadMore () {
this.disableCategoryButton = true;
this.totalCategoryLimit = 30;
}
public getBootstrapColour(index: number) {
return this.bootstrapColours[index % this.bootstrapColours.length];
}
public convertHex(hex: string, opacity: number) {
hex = hex.replace('#', '');
const r = parseInt(hex.substring(0, 2), 16);
const g = parseInt(hex.substring(2, 4), 16);
const b = parseInt(hex.substring(4, 6), 16);
const rgba = 'rgba(' + r + ', ' + g + ', ' + b + ', ' + opacity / 100 + ')';
return rgba;
}
private tooltipLabelCallback(tooltipItem: any, data: any) {
var dataset = data.datasets[tooltipItem.datasetIndex];
var value = dataset.data[tooltipItem.index];
return this.currencyPipe.transform(value, 'GBP', 'symbol', '1.2-2');
}
// events
public chartClicked(e: any): void {
}
public chartHovered(e: any): void {
}
ngOnInit(): void {
}
}

View file

@ -1,11 +1,11 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { ChartsModule } from 'ng2-charts/ng2-charts';
import { ChartsModule } from 'ng2-charts';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { NgxPaginationModule } from 'ngx-pagination';
import { AgmCoreModule, GoogleMapsAPIWrapper } from '@agm/core';
import { AgmJsMarkerClustererModule } from '@agm/js-marker-clusterer';
import { AgmMarkerClustererModule } from '@agm/markerclusterer';
import { ModalModule } from 'ngx-bootstrap/modal';
import { CurrencyPipe } from '@angular/common';
@ -18,6 +18,8 @@ import { FeedbackComponent } from './feedback.component';
import { TransactionLogComponent } from './transaction-log.component';
import { CategoryMonthComponent } from './category-month.component';
import { PayrollLogComponent } from './payroll-log.component';
import { SuppliersComponent } from './suppliers.component';
import { MoreStuffComponent } from './more-graphs-and-tables.component';
import { LeaderboardComponent } from './leaderboard.component';
import { MapComponent } from './map.component';
import { TrailMapComponent } from './trail-map.component';
@ -26,12 +28,19 @@ import { GraphWidget } from '../widgets/graph-widget.component';
import { OrgBarSnippetComponent } from '../snippets/org-snippet-bar.component';
import { CustBarSnippetComponent } from '../snippets/cust-snippet-bar.component';
import { GraphPanel } from '../panels/graph-panel.component';
import { BubbleChartComponent } from '../panels/bubble-panel.component';
import { PiePanel } from '../panels/pie-panel.component';
import { OrgPiePanel } from '../panels/org-pie-panel.component';
import { DashboardRoutingModule } from './dashboard.routing';
import { OrgResultComponent } from '../shared/org-result.component';
import { OrgTableComponent } from '../shared/org-table.component';
import { RecurResultComponent } from '../shared/recur-result.component';
import { RecurTableComponent } from '../shared/recur-table.component';
import { TransactionResultComponent } from '../shared/transaction-result.component';
import { SupplierResultComponent } from '../shared/supplier-result.component';
import { WardResultComponent } from '../shared/ward-result.component';
import { MetaTypeResultComponent } from '../shared/meta-type-result.component';
import { PayrollResultComponent } from '../shared/payroll-result.component';
import { LeaderboardResultComponent } from '../shared/leaderboard-result.component';
@ -48,7 +57,7 @@ import { environment } from '../../environments/environment';
AgmCoreModule.forRoot({
apiKey: environment.mapApiKey
}),
AgmJsMarkerClustererModule,
AgmMarkerClustererModule,
BsDropdownModule,
NgxPaginationModule,
DashboardRoutingModule,
@ -61,9 +70,14 @@ import { environment } from '../../environments/environment';
AddDataComponent,
OrgResultComponent,
OrgTableComponent,
RecurResultComponent,
RecurTableComponent,
TransactionLogComponent,
CategoryMonthComponent,
TransactionResultComponent,
SupplierResultComponent,
WardResultComponent,
MetaTypeResultComponent,
PayrollLogComponent,
PayrollResultComponent,
LeaderboardComponent,
@ -76,6 +90,10 @@ import { environment } from '../../environments/environment';
CustBarSnippetComponent,
GraphPanel,
PiePanel,
OrgPiePanel,
BubbleChartComponent,
SuppliersComponent,
MoreStuffComponent,
],
providers: [
CurrencyPipe,

View file

@ -17,6 +17,8 @@ import { PayrollLogComponent } from './payroll-log.component';
import { LeaderboardComponent } from './leaderboard.component';
import { MapComponent } from './map.component';
import { TrailMapComponent } from './trail-map.component';
import { MoreStuffComponent } from './more-graphs-and-tables.component';
import { SuppliersComponent } from './suppliers.component';
// Using child path to allow for FullLayout theming
const routes: Routes = [
@ -84,6 +86,16 @@ const routes: Routes = [
path: 'feedback',
component: FeedbackComponent,
data: { title: 'Give Feedback' },
},
{
path: 'suppliers',
component: SuppliersComponent,
data: { title: 'Suppliers' }
},
{
path: 'more-graphs-and-tables',
component: MoreStuffComponent,
data: { title: 'Infographics'}
}
],
}

View file

@ -1,7 +1,7 @@
import { Component, OnInit } from '@angular/core';
import { Validators, FormBuilder, FormGroup } from '@angular/forms';
import { ApiService } from '../providers/api-service';
import 'rxjs/add/operator/map';
@Component({
templateUrl: 'feedback.component.html',
@ -55,9 +55,7 @@ export class FeedbackComponent implements OnInit {
result => {
if ( result.success === true ) {
console.log('Successful Upload');
console.log(result);
this.feedbackFormStatus = 'success';
console.log(this.feedbackFormStatus);
this.feedbackForm.patchValue({
feedbacktext: '',
});
@ -65,22 +63,16 @@ export class FeedbackComponent implements OnInit {
console.log('Upload Error');
this.feedbackFormStatusError = JSON.stringify(result.status) + 'Error, ' + JSON.stringify(result.message);
this.feedbackFormStatus = 'send_failed';
console.log(this.feedbackFormStatus);
}
},
error => {
console.log('Upload Error');
console.log(error);
try {
console.log(error.error);
const jsonError = error.json();
console.log('boop');
this.feedbackFormStatusError = '"' + jsonError.error + '" Error, ' + jsonError.message;
this.feedbackFormStatusError = '"' + error.error.error + '" Error, ' + error.error.message;
} catch (e) {
this.feedbackFormStatusError = 'There was a server error, please try again later.';
}
this.feedbackFormStatus = 'send_failed';
console.log(this.feedbackFormStatus);
}
);
}

View file

@ -24,7 +24,7 @@
<tr>
<th>Position</th>
<th>Name</th>
<th>Amount</th>
<th class="js-sort-number">Gross amount</th>
</tr>
</thead>
<tbody>

View file

@ -5,7 +5,7 @@ import {PaginationInstance} from 'ngx-pagination';
// import { PaginationControlsComponent } from 'ngx-pagination';
// import { PaginationControlsDirective } from 'ngx-pagination';
// import { TransactionResultComponent } from '../shared/transaction-result.component';
import 'rxjs/add/operator/map';
@Component({
templateUrl: 'leaderboard.component.html',
@ -22,7 +22,7 @@ export class LeaderboardComponent implements OnInit {
public paginateConfig: PaginationInstance = {
id: 'leadpaginate',
itemsPerPage: 10,
itemsPerPage: 20,
currentPage: 1,
totalItems: 0
};
@ -70,7 +70,7 @@ export class LeaderboardComponent implements OnInit {
console.log(error);
}
);
}
}org
// // dynamically changes the row style based on player's position
// // for instance, top three player and the player him/herself should

View file

@ -39,9 +39,8 @@
[latitude]="lat"
[longitude]="lng"
[zoom]="zoom"
[scaleControl]="true"
(idle)="viewBoundsChanged()">
<agm-marker-cluster maxZoom="13" imagePath="https://raw.githubusercontent.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m">
<agm-marker-cluster maxZoom="13">
<agm-marker
*ngFor="let m of markers"
[latitude]="m.latitude"

View file

@ -3,13 +3,13 @@ import { ApiService } from '../providers/api-service';
import { AgmCoreModule } from '@agm/core';
import { BsModalService, ModalDirective } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
import 'rxjs/add/operator/map';
@Component({
templateUrl: 'map.component.html',
})
export class MapComponent implements OnInit, AfterViewInit {
@ViewChild('statusModal') myStatusModal: ModalDirective;
@ViewChild('statusModal', { static: true }) myStatusModal: ModalDirective;
lat: number = 54.0466;
lng: number = -2.8007;
zoom: number = 12;

View file

@ -0,0 +1,136 @@
<div class="animated fadeIn">
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<h4>Filter</h4>
</div>
<div class="card-block">
<form class="form-inline">
<label class="mr-2" for="filter-from">From</label>
<input id="filter-from" class="form-control" type="date" [(ngModel)]="filterFrom" name="from">
<label class="mx-2" for="filter-to">To</label>
<input class="form-control" id="filter-to" type="date" [(ngModel)]="filterTo" name="to">
<button type="submit" class="btn btn-primary ml-2" (click)="loadData()">Filter</button>
</form>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="card">
<div class="card-header">
<strong>Transaction Types</strong>
</div>
<div *ngIf="metaTypeListAvailable" class="card-block">
<table class="table table-striped table-hover">
<thead>
<tr>
<th>Ward</th>
<th>Amount of Transactions</th>
<th>Sum of Transactions</th>
</tr>
</thead>
<tbody>
<tr meta-type-result *ngFor="let type of metaTypeList" [type]="type"></tr>
</tbody>
</table>
</div>
<div *ngIf="!metaTypeListAvailable" class="card-block">
No Data available.
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card">
<div class="card-header">
<strong>Ward Spending</strong>
</div>
<div *ngIf="wardListAvailable" class="card-block">
<table class="table table-striped table-hover">
<thead>
<tr>
<th>Ward</th>
<th>Amount of Transactions</th>
<th>Sum of Transactions</th>
</tr>
</thead>
<tbody>
<tr ward-result *ngFor="let ward of wardList" [ward]="ward"></tr>
</tbody>
</table>
</div>
<div *ngIf="!wardListAvailable" class="card-block">
No Data available.
</div>
</div>
</div>
</div>
</div>
<div class="animated fadeIn">
<div class="card">
<div class="card-block">
<div class="row">
<div class="col-sm-8">
<h4 class="card-title mb-0">Supplier spend amount and number of purchases</h4>
</div>
</div>
<small>vertical shows number of purchases, size of bubble shows the total spend amount, horizontal shows date</small>
<div class="col-sm-12" *ngIf="!isBubbleChartLoaded">
<div class="spinner"></div>
</div>
<div *ngIf="isBubbleChartLoaded">
<canvas baseChart
[datasets]="supplierBubbleChartData"
[options]="supplierBubbleChartOptions"
[labels]="supplierBubbleChartLabels"
[legend]="showLegend"
[chartType]="supplierBubbleChartType">
</canvas>
</div>
</div>
</div>
<div class="card">
<div class="card-block">
<div class="row">
<div class="col-sm-12">
<h4 class="card-title mb-0">Spend & Number of Transactions</h4>
<small>Date against Value and Number of Transactions</small>
</div>
</div>
<div>
<canvas baseChart
[datasets]="yearSpendChartData"
[options]="yearSpendChartOptions"
[labels]="yearSpendChartLabels"
[legend]="showLegend"
[chartType]="yearSpendChartType">
</canvas>
</div>
</div>
</div>
<div class="card">
<div class="card-block">
<div class="row">
<div class="col-sm-6">
<h4 class="card-title mb-0">Supplier Spend History</h4>
</div>
<div class="col-sm-6 hidden-sm-down">
<button type="button" class="btn btn-danger" (click)="previousSupplierHistoryPage()">Previous Page</button>
<button type="button" class="btn btn-info" (click)="nextSupplierHistoryPage()">Next Page</button>
<span class="ml-2">Page {{ _supplierHistoryPage }} of {{ _supplierHistoryPages }}</span>
</div>
</div>
<div *ngIf="isSupplierChartLoaded">
<canvas baseChart #supplierChart
[datasets]="supplierMonthChartData"
[options]="supplierMonthChartOptions"
[labels]="supplierMonthChartLabels"
[legend]="showLegend"
[chartType]="supplierMonthChartType">
</canvas>
</div>
</div>
</div>
</div>

View file

@ -0,0 +1,335 @@
import {Component, OnInit, Input, Output, EventEmitter, ViewChild} from '@angular/core';
import {ApiService} from '../providers/api-service';
import {BaseChartDirective} from 'ng2-charts';
import {CurrencyPipe} from '@angular/common';
import {ChartType} from "chart.js";
import * as moment from 'moment';
@Component({
templateUrl: 'more-graphs-and-tables.component.html',
})
export class MoreStuffComponent implements OnInit {
@Output() public onClick = new EventEmitter();
@Input() public categories: any;
// Global Filter Setup
filterFrom: any;
filterTo: any;
isBubbleChartLoaded: boolean = false;
isSupplierChartLoaded: boolean = false;
wardList: any;
wardListAvailable = false;
metaTypeList: any;
metaTypeListAvailable = false;
constructor(
private api: ApiService,
private currencyPipe: CurrencyPipe,
) {
let now = moment();
this.filterTo = now.format('YYYY-MM-DD');
now.subtract(1, 'months');
this.filterFrom = now.format('YYYY-MM-DD');
this.tableSummary();
}
ngOnInit(): void {
this.loadData();
}
public loadData() {
this.tableSummary();
this.loadYearSpend();
this.loadSupplierBubble();
this.loadSupplierHistory();
}
public showLegend = true;
/*
* Supplier Bubble Chart Setup
*/
private formatGraphData(data: any): any[] {
let graph_data = [];
data.data.map(item => {
graph_data.push({
t: item.date,
r: item.value > 1000000 ? (item.value / 200000) : (item.value / 100000) + 5,
supplier: item.seller,
y: item.count,
value: item.value,
count: item.count,
});
});
return graph_data;
}
private loadSupplierBubble() {
this.api.loadMiscUrl('organisation/external/supplier_count', {
from: this.filterFrom,
to: this.filterTo,
}).subscribe(
result => {
this.supplierBubbleChartData[0].data = this.formatGraphData(result);
this.isBubbleChartLoaded = true;
}
)
}
public supplierBubbleChartType: ChartType = 'bubble';
public supplierBubbleChartData: any[] = [
{
data: [],
label: ["Spend"],
borderColor: 'blue',
hoverBorderColor: 'black',
radius: 5,
},
];
public supplierBubbleChartLabels: string[] = [];
public supplierBubbleChartOptions: any = {
responsive: true,
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'month'
},
scaleLabel: {
display: true,
labelString: 'Date'
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Number of purchases'
}
}]
},
tooltips: {
callbacks: {
label: (tooltip, data) => {
return this.bubbleTooltipCallback(tooltip, data);
},
},
},
};
private bubbleTooltipCallback(tooltipItem: any, data: any) {
let dataset = data.datasets[tooltipItem.datasetIndex];
let value = dataset.data[tooltipItem.index];
return `${value.supplier}: ${this.currencyPipe.transform(value.value, 'GBP', 'symbol', '1.2-2')} over ${value.count} purchases`;
}
private tableSummary() {
this.api.loadMiscUrl('organisation/external/lcc_tables', {
from: this.filterFrom,
to: this.filterTo,
}).subscribe(
result => {
this.wardList = result.wards;
this.metaTypeList = Object.keys(result.types).map(key => result.types[key]);
if (this.wardList) {
this.wardListAvailable = true;
}
if (this.metaTypeList) {
this.metaTypeListAvailable = true;
}
},
error => {
console.log('Retrieval Error');
console.log(error._body);
}
)
}
private loadYearSpend() {
this.api.loadMiscUrl('organisation/external/year_spend', {
from: this.filterFrom,
to: this.filterTo,
}).subscribe(
result => {
let value_data = [];
let count_data = [];
result.data.map(item => {
value_data.push({
t: item.date,
y: item.value,
});
count_data.push({
t: item.date,
y: item.count,
});
});
this.yearSpendChartData[0].data = value_data;
this.yearSpendChartData[1].data = count_data;
}
)
}
public yearSpendChartData: any[] = [
{
data: [],
label: ["Value £"],
fill: false,
borderColor: 'red',
hoverBackgroundColor: '#ffa1b5',
hoverBorderColor: 'red',
yAxisID: 'y-value',
},
{
data: [],
label: ["Count"],
fill: false,
borderColor: 'blue',
hoverBackgroundColor: '#52afed',
hoverBorderColor: 'blue',
yAxisID: 'y-count',
},
];
public yearSpendChartOptions: any = {
elements: {line: {tension: 0}},
responsive: true,
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'month'
},
scaleLabel: {
display: true,
labelString: 'Date'
}
}],
yAxes: [
{id: 'y-value', position: 'left', beginAtZero: true, type: 'linear'},
{id: 'y-count', position: 'right', beginAtZero: true, type: 'linear'},
]
},
};
public yearSpendChartLabels: string[] = [];
public yearSpendChartType: ChartType = 'line';
randomData() {
return Math.random();
}
lineChartUpdate() {
this.loadYearSpend();
}
@ViewChild('supplierChart', { read: BaseChartDirective }) supplierChart: BaseChartDirective;
private loadSupplierHistory() {
this.api.loadMiscUrl('organisation/external/supplier_history').subscribe(
result => {
this._supplierHistoryData = result.data;
this._supplierHistoryPage = 1;
this._supplierHistoryPages = Math.ceil(this._supplierHistoryData.length / this._supplierHistoryPerPage);
this.updateSupplierHistoryData();
this.isSupplierChartLoaded = true;
}
);
}
private updateSupplierHistoryData() {
const lastResult = this._supplierHistoryPerPage * this._supplierHistoryPage;
console.log(this._supplierHistoryPage);
const firstResult = lastResult - this._supplierHistoryPerPage;
const pageData = this._supplierHistoryData.slice(firstResult, lastResult);
console.log(pageData);
let labels = [];
let year = [];
let half = [];
let quarter = [];
pageData.map(item => {
labels.push(item.name);
year.push(item.year_total);
half.push(item.half_total);
quarter.push(item.quarter_total);
});
this.supplierMonthChartData[0].data = quarter;
this.supplierMonthChartData[1].data = half;
this.supplierMonthChartData[2].data = year;
this.supplierMonthChartLabels = labels;
}
public nextSupplierHistoryPage() {
if (this._supplierHistoryPage < this._supplierHistoryPages) {
this._supplierHistoryPage++;
}
this.updateSupplierHistoryData();
}
public previousSupplierHistoryPage() {
if (this._supplierHistoryPage > 1) {
this._supplierHistoryPage--;
}
this.updateSupplierHistoryData();
}
private _supplierHistoryData: any[];
private _supplierHistoryPerPage: number = 15;
public _supplierHistoryPage: number = 1;
public _supplierHistoryPages: number = 1;
public supplierMonthChartData: any[] = [
{
data: [],
label: ["3 Month"],
fill: false,
borderColor: 'red',
hoverBorderColor: 'red',
hoverBackgroundColor: 'red',
},
{
data: [],
label: ["6 Month"],
fill: false,
borderColor: 'blue',
hoverBorderColor: 'blue',
hoverBackgroundColor: 'blue',
},
{
data: [],
label: ["12 Month"],
fill: false,
borderColor: 'orange',
hoverBorderColor: 'orange',
hoverBackgroundColor: 'orange',
},
];
public supplierMonthChartOptions: any = {
//maintainAspectRatio: false,
responsive: true,
scales: {
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Spend amount £'
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Supplier Names'
}
}]
},
};
public supplierMonthChartLabels: string[] = [];
public supplierMonthChartType: ChartType = 'horizontalBar';
}

View file

@ -6,7 +6,7 @@ import {PaginationInstance} from 'ngx-pagination';
// import { PaginationControlsDirective } from 'ngx-pagination';
// import { TransactionResultComponent } from '../shared/transaction-result.component';
import * as moment from 'moment';
import 'rxjs/add/operator/map';
@Component({
templateUrl: 'payroll-log.component.html',

View file

@ -0,0 +1,79 @@
<div class="animated fadeIn">
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<h4>Search Suppliers</h4>
</div>
<div *ngIf="supplierListAvailable" class="card-block">
<div class="input-group">
<input class="form-control" type="text" name="search" [(ngModel)]="searchText" autocomplete="off"
placeholder="Search by Name or Postcode" (keydown.enter)="searchSuppliers()">
<div class="input-group-append">
<button class="btn btn-primary" (click)="searchSuppliers()">Search</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="animated fadeIn">
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<h4>List of Suppliers</h4>
<div class="small">Click on Column Headers to change Sort Order</div>
</div>
<div *ngIf="supplierListAvailable" class="card-block">
<table class="table table-striped table-hover">
<thead>
<tr>
<th (click)="sortName()">Name <span class="fa-stack">
<i *ngIf="sortBy !== 'name' || sortDir == 'asc'" class="fa fa-sort-up fa-stack-1x"></i>
<i *ngIf="sortBy !== 'name' || sortDir == 'desc'" class="fa fa-sort-down fa-stack-1x"></i>
</span></th>
<th (click)="sortPostcode()">Postcode <span class="fa-stack">
<i *ngIf="sortBy !== 'postcode' || sortDir == 'asc'" class="fa fa-sort-up fa-stack-1x"></i>
<i *ngIf="sortBy !== 'postcode' || sortDir == 'desc'" class="fa fa-sort-down fa-stack-1x"></i>
</span></th>
<th (click)="sortSpend()">Spend <span class="fa-stack">
<i *ngIf="sortBy !== 'spend' || sortDir == 'asc'" class="fa fa-sort-up fa-stack-1x"></i>
<i *ngIf="sortBy !== 'spend' || sortDir == 'desc'" class="fa fa-sort-down fa-stack-1x"></i>
</span></th>
</tr>
</thead>
<tbody>
<tr supplier-result *ngFor="let supplier of supplierList | paginate: paginateConfig"
[supplier]="supplier"></tr>
</tbody>
</table>
<pagination-template #p="paginationApi"
[id]="paginateConfig.id"
(pageChange)="loadSuppliers($event)">
<ul class="pagination">
<li class="page-item" [class.disabled]="p.isFirstPage()">
<a class="page-link clickable" *ngIf="!p.isFirstPage()" (click)="p.previous()">Prev</a>
</li>
<li *ngFor="let page of p.pages" class="page-item" [class.active]="p.getCurrent() === page.value">
<a class="page-link clickable" (click)="p.setCurrent(page.value)" *ngIf="p.getCurrent() !== page.value">
<span>{{ page.label }}</span>
</a>
<div class="page-link" *ngIf="p.getCurrent() === page.value">
<span>{{ page.label }}</span>
</div>
</li>
<li class="page-item" [class.disabled]="p.isLastPage()">
<a class="page-link clickable" *ngIf="!p.isLastPage()" (click)="p.next()">Next</a>
</li>
</ul>
</pagination-template>
</div>
<div *ngIf="!supplierListAvailable" class="card-block">
No Suppliers available.
</div>
</div>
</div>
</div>
</div>

View file

@ -0,0 +1,74 @@
import { Component, OnInit, AfterViewInit, Input, Output, EventEmitter, ViewChild, TemplateRef } from '@angular/core';
import { ApiService } from '../providers/api-service';
import { AgmCoreModule } from '@agm/core';
import { BsModalService, ModalDirective } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
import { PaginationInstance } from 'ngx-pagination';
import { FilterPipeModule } from 'ngx-filter-pipe';
@Component({
templateUrl: 'suppliers.component.html',
})
export class SuppliersComponent implements OnInit, AfterViewInit {
@Output() public onClick = new EventEmitter();
@Input() public categories: any;
public perPage: number = 10;
searchText: string;
supplierList: any;
supplierListAvailable = false;
sortBy = 'name';
sortDir = 'asc';
public paginateConfig: PaginationInstance = {
id: 'transpaginate',
itemsPerPage: this.perPage,
currentPage: 1,
totalItems: 0
};
constructor(
private api: ApiService,
) { }
ngOnInit(): void {
this.loadSuppliers(1);
}
loadSuppliers(logPage: number) {
this.api.externalSuppliers(logPage, this.sortBy, this.sortDir, this.perPage, this.searchText).subscribe(
result => {
this.supplierList = result.suppliers;
if (this.supplierList) {
this.supplierListAvailable = true;
}
this.paginateConfig.totalItems = result.page_no;
this.paginateConfig.currentPage = logPage;
},
error => {
console.log('Retrieval Error');
console.log( error._body );
}
);
}
sortName() { this.sortByColumn('name'); }
sortPostcode() { this.sortByColumn('postcode'); }
sortSpend() { this.sortByColumn('spend'); }
sortByColumn(name) {
this.sortBy = name;
this.sortDir = this.sortDir === 'asc' ? 'desc' : 'asc';
this.loadSuppliers(1);
}
searchSuppliers() {
// Go back to page 1 when searching
this.loadSuppliers(1);
}
ngAfterViewInit() {
}
}

View file

@ -72,9 +72,8 @@
[latitude]="lat"
[longitude]="lng"
[zoom]="zoom"
[scaleControl]="true"
(idle)="viewBoundsChanged()">
<agm-marker-cluster maxZoom="13" imagePath="https://raw.githubusercontent.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m">
<agm-marker-cluster maxZoom="13">
<agm-marker
*ngFor="let m of markers"
[iconUrl]="'/assets/img/association/' + assocMap + '-map-pin.png'"

View file

@ -3,13 +3,13 @@ import { ApiService } from '../providers/api-service';
import { AgmCoreModule } from '@agm/core';
import { BsModalService, ModalDirective } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
import 'rxjs/add/operator/map';
@Component({
templateUrl: 'trail-map.component.html',
})
export class TrailMapComponent implements OnInit, AfterViewInit {
@ViewChild('statusModal') myStatusModal: ModalDirective;
@ViewChild('statusModal', { static: true }) myStatusModal: ModalDirective;
lat: number = 54.0466;
lng: number = -2.8007;
zoom: number = 12;
@ -51,7 +51,6 @@ export class TrailMapComponent implements OnInit, AfterViewInit {
}
public onMarkerClick(clickedMarker, template: TemplateRef<any>) {
console.log(clickedMarker);
this.clickedMarker = clickedMarker;
this.assocLogo = 'assets/img/association/' + this.assocMap + '-logo.png';
this.openModal(template);

View file

@ -1,22 +1,124 @@
<div class="animated fadeIn">
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<strong>Recurring Transactions</strong>
<small>Select a Recurring Transaction below to edit it.</small>
</div>
<div *ngIf="!noRecurringList" class="card-block">
<recur-table [recurList]="recurringTransactionList" [categories]="categoryList" (onClick)="recurringTransactionDetails($event, template)"></recur-table>
<ng-template #template>
<div class="modal-header d-flex justify-content-between">
<h4 class="modal-title">Edit Recurring Transaction</h4>
<button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<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" [(ngModel)]="updatedTime">
<span class="help-block">Enter the date and time the transaction occurred.</span>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 form-control-label" for="text-input"><strong>Amount</strong></label>
<div class="col-md-9">
<div class="input-group">
<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)]="clickedRecur.value">
</div>
<span class="help-block">Enter the amount spent, such as 5.35 for £5.35.</span>
</div>
</div>
<div class="form-group row">
<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)]="clickedRecur.essential">
</div>
<span class="help-block">Tick if the purchase is deemed an essential purchase for budgeting purposes.</span>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 form-control-label" for="text-input"><strong>Recurring Period</strong></label>
<div class="col-md-9">
<div class="input-group">
<select type="text" class="form-control" [(ngModel)]="clickedRecur.recurring_period">
<option value="daily">Daily</option>
<option value="weekly">Weekly</option>
<option value="fortnightly">Fortnightly</option>
<option value="monthly">Monthly</option>
<option value="quarterly">Quarterly</option>
</select>
</div>
<span class="help-block">Please give the period of time the purchase will recur from "Time of Transaction".</span>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 form-control-label" for="text-input">Budget Type</label>
<div class="col-md-9">
<div class="input-group">
<select type="text" class="form-control" [(ngModel)]="clickedRecur.category">
<option value="0">Uncategorised</option>
<option *ngFor="let category of categoryIdList" [ngValue]="category">
{{ categoryList[category] }}
</option>
</select>
</div>
<span class="help-block"><strong>Optional:</strong> Choose the Budget Type for the majority of the purchase.</span>
</div>
</div>
<div class="form-group row">
<div class="input-group">
<span class="col-12"><strong>WARNING: Clicking "Delete" will completely remove the Recurring Transaction.</strong></span>
</div>
</div>
<div class="col-md-12">
<div [ngSwitch]="transactionFormStatus">
<div *ngSwitchCase="'success'" class="alert alert-success" role="alert">
{{transactionFormStatusSuccess}}
</div>
<div *ngSwitchCase="'send_failed'" class="alert alert-danger" role="alert">
{{transactionFormStatusError}}
</div>
</div>
</div>
</div>
<div class="modal-footer d-flex justify-content-between">
<button type="submit" (click)="deleteRecurringTransaction()" class="btn btn-sm btn-danger"><i class="fa fa-times"></i> Delete</button>
<button type="submit" (click)="editRecurringTransaction()" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Save</button>
</div>
</ng-template>
</div>
<div *ngIf="noRecurringList" class="card-block">
No Recurring Transactions.
</div>
</div>
<div class="card">
<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()">
<span *ngIf="!showMeta">Show</span><span *ngIf="showMeta">Hide</span> Details
</button>
</div>
<div *ngIf="!noTransactionList" class="card-block">
<table class="table table-striped table-hover">
<thead>
<tr>
<th>Seller</th>
<th>Value</th>
<th *ngIf="!showMeta">Value</th>
<th *ngIf="showMeta">Net Value</th>
<th *ngIf="showMeta">Sales Tax Value</th>
<th *ngIf="showMeta">Gross Value</th>
<th>Purchase Time</th>
</tr>
</thead>
<tbody>
<tr transaction-result *ngFor="let transaction of transactionList | paginate: paginateConfig" [transaction]="transaction"></tr>
<tr transaction-result *ngFor="let transaction of transactionList | paginate: paginateConfig" [transaction]="transaction" [showMeta]="showMeta"></tr>
</tbody>
</table>
<pagination-template #p="paginationApi"

View file

@ -1,23 +1,36 @@
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { Component, OnInit, EventEmitter, TemplateRef } from '@angular/core';
import { ApiService } from '../providers/api-service';
// import { PaginatePipe } from 'ngx-pagination';
import {PaginationInstance} from 'ngx-pagination';
// import { PaginationControlsComponent } from 'ngx-pagination';
// import { PaginationControlsDirective } from 'ngx-pagination';
// import { TransactionResultComponent } from '../shared/transaction-result.component';
import { BsModalService, ModalDirective } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
import { PaginationInstance } from 'ngx-pagination';
import * as moment from 'moment';
import 'rxjs/add/operator/map';
@Component({
templateUrl: 'transaction-log.component.html',
})
export class TransactionLogComponent implements OnInit {
transactionList;
transactionList: any;
recurringTransactionList: any;
noTransactionList = true;
noRecurringList = true;
myDate: any;
minDate: any;
public p: any;
public modalRef: BsModalRef;
clickedRecur: any;
public updatedDate: string;
public startTime: string;
categoryIdList: any;
categoryList: any;
categoryNameList: string[] = [];
transactionFormStatus: string;
transactionFormStatusSuccess: string;
transactionFormStatusError = 'Error received, please try again.';
updatedTime: string;
accountType: any;
showMeta = false;
public paginateConfig: PaginationInstance = {
id: 'transpaginate',
@ -28,31 +41,28 @@ export class TransactionLogComponent implements OnInit {
constructor(
private api: ApiService,
private modalService: BsModalService,
) {
this.myDate = moment().format('YYYY-MM-DD[T]HH:mm');
this.api.categoryList().subscribe(
result => {
this.categoryList = result.categories;
this.categoryIdList = Object.keys(this.categoryList);
},
error => {
console.log('Retrieval Error');
console.log( error._body );
}
);
// this.myDate = new Date().toISOString().slice(0, 16);
}
ngOnInit(): void {
this.getMinDate();
this.loadTransactions(1);
}
getMinDate() {
// gets the April 1st date of the current year
const aprilDate = moment().month(3).date(1);
const now = moment();
// Checks if current time is before April 1st, if so returns true
const beforeApril = now.isBefore(aprilDate);
if ( beforeApril === true ) {
this.minDate = aprilDate.subtract(2, 'years').format('YYYY-MM-DD');
} else {
this.minDate = aprilDate.subtract(1, 'years').format('YYYY-MM-DD');
}
this.accountType = localStorage.getItem('usertype');
}
loadTransactions(logPage: number) {
console.log(logPage);
this.api.transList(logPage).subscribe(
result => {
if (result.transactions.length > 0) {
@ -66,6 +76,13 @@ export class TransactionLogComponent implements OnInit {
this.transactionList = null;
this.noTransactionList = true;
}
if (result.recurring_transactions) {
this.recurringTransactionList = result.recurring_transactions;
this.noRecurringList = false;
} else {
this.recurringTransactionList = null;
this.noRecurringList = true;
}
},
error => {
console.log(error);
@ -73,4 +90,82 @@ export class TransactionLogComponent implements OnInit {
);
}
recurringTransactionDetails(clicked, template: TemplateRef<any>) {
this.clickedRecur = clicked;
this.updatedTime = moment(this.clickedRecur.display_time, 'llll').format('YYYY-MM-DD[T]HH:mm');
this.openModal(template);
}
openModal(template: TemplateRef<any>) {
this.modalRef = this.modalService.show(template);
}
editRecurringTransaction() {
let updatedTimeSubmit = moment(this.updatedTime, 'YYYY-MM-DD[T]HH:mm').local().format('YYYY-MM-DD[T]HH:mm:ss.SSSZ');
this.clickedRecur.display_time = moment(this.updatedTime).format('llll');
let myParams = {
category: (this.clickedRecur.category == 0 ? undefined : this.clickedRecur.category),
essential: this.clickedRecur.essential,
id: this.clickedRecur.id,
apply_time: updatedTimeSubmit,
recurring_period: this.clickedRecur.recurring_period,
seller: this.clickedRecur.seller,
value: this.clickedRecur.value,
};
this.api
.recurUpdate(myParams)
.subscribe(
result => {
if ( result.success === true ) {
this.transactionFormStatus = 'success';
this.transactionFormStatusSuccess = 'Edit Succeeded.';
} else {
this.transactionFormStatusError = JSON.stringify(result.status) + 'Error, ' + JSON.stringify(result.message);
this.transactionFormStatus = 'send_failed';
}
},
error => {
console.log(error);
try {
this.transactionFormStatusError = '"' + error.error.error + '" Error, ' + error.error.message;
} catch (e) {
this.transactionFormStatusError = 'There was a server error, please try again later.';
}
this.transactionFormStatus = 'send_failed';
}
);
}
deleteRecurringTransaction() {
let myParams = {
id: this.clickedRecur.id,
};
this.api
.recurDelete(myParams)
.subscribe(
result => {
if ( result.success === true ) {
this.transactionFormStatus = 'success';
this.transactionFormStatusSuccess = 'Delete Succeeded.';
} else {
this.transactionFormStatusError = JSON.stringify(result.status) + 'Error, ' + JSON.stringify(result.message);
this.transactionFormStatus = 'send_failed';
}
},
error => {
console.log(error);
try {
this.transactionFormStatusError = '"' + error.error.error + '" Error, ' + error.error.message;
} catch (e) {
this.transactionFormStatusError = 'There was a server error, please try again later.';
}
this.transactionFormStatus = 'send_failed';
}
);
}
toggleShowMeta() {
this.showMeta = !this.showMeta;
}
}

View file

@ -25,6 +25,11 @@
<div class="sidebar">
<nav class="sidebar-nav">
<ul class="nav">
<li class="nav-item">
<div class="row no-gutters mt-1 d-lg-none small text-center text-muted">
<div class="col-12">Click &#9776; to Close Menu</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link" routerLinkActive="active" [routerLink]="['/dashboard']">
<div class="row no-gutters align-items-center">
@ -33,6 +38,14 @@
</div>
</a>
</li>
<li *ngIf="accountType == 'organisation'" 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>
<li class="nav-item">
<a class="nav-link" routerLinkActive="active" [routerLink]="['/add-data']">
<div class="row no-gutters align-items-center">
@ -81,7 +94,7 @@
</div>
</a>
</li>
<li class="nav-item">
<li *ngIf="accountType == 'customer'" 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>
@ -89,6 +102,14 @@
</div>
</a>
</li>
<li *ngIf="accountType == 'organisation'" 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>
<div class="col-10">Suppliers</div>
</div>
</a>
</li>
<li *ngIf="accountType == 'organisation'" class="nav-item">
<a class="nav-link" routerLinkActive="active" [routerLink]="['/payroll-log']">
<div class="row no-gutters align-items-center">

View file

@ -39,7 +39,6 @@ export class FullLayoutComponent implements OnInit {
.logout()
.subscribe(
result => {
console.log('Logged out!');
localStorage.clear();
this.router.navigate(['/login']);
}

View file

@ -0,0 +1,13 @@
<div>
<div>
<div style="display: block">
<canvas baseChart
[datasets]="bubbleChartData"
[options]="bubbleChartOptions"
[colors]="bubbleChartColors"
[legend]="bubbleChartLegend"
[chartType]="bubbleChartType">
</canvas>
</div>
</div>
</div>

View file

@ -0,0 +1,97 @@
import { Component, OnInit } from '@angular/core';
import { ChartOptions, ChartType, ChartDataSets } from 'chart.js';
import { Color } from 'ng2-charts';
@Component({
selector: 'app-bubble-chart',
templateUrl: './bubble-panel.component.html',
})
export class BubbleChartComponent implements OnInit {
public bubbleChartOptions: ChartOptions = {
responsive: true,
scales: {
xAxes: [
{
ticks: {
min: 0,
max: 30,
}
}
],
yAxes: [
{
ticks: {
min: 0,
max: 30,
}
}
]
}
};
public bubbleChartType: ChartType = 'bubble';
public bubbleChartLegend = true;
public bubbleChartData: ChartDataSets[] = [
{
data: [
{ x: 10, y: 10, r: 10 },
{ x: 15, y: 5, r: 15 },
{ x: 26, y: 12, r: 23 },
{ x: 7, y: 8, r: 8 },
],
label: 'Series A',
backgroundColor: 'green',
borderColor: 'blue',
hoverBackgroundColor: 'purple',
hoverBorderColor: 'red',
},
];
public bubbleChartColors: Color[] = [
{
backgroundColor: [
'red',
'green',
'blue',
'purple',
'yellow',
'brown',
'magenta',
'cyan',
'orange',
'pink'
]
}
];
constructor() { }
ngOnInit() {
}
// events
public chartClicked({ event, active }: { event: MouseEvent, active: {}[] }): void {
console.log(event, active);
}
public chartHovered({ event, active }: { event: MouseEvent, active: {}[] }): void {
console.log(event, active);
}
private rand(max: number) {
return Math.trunc(Math.random() * max);
}
private randomPoint(maxCoordinate: number) {
const x = this.rand(maxCoordinate);
const y = this.rand(maxCoordinate);
const r = this.rand(30) + 5;
return { x, y, r };
}
public randomize(): void {
const numberOfPoints = this.rand(5) + 5;
const data = Array.apply(null, { length: numberOfPoints }).map(r => this.randomPoint(30));
this.bubbleChartData[0].data = data;
}
}

View file

@ -1,18 +1,9 @@
<div class="card">
<div class="card-block">
<div class="row">
<div class="col-sm-5">
<div class="col-sm-12">
<h4 class="card-title mb-0">Customers</h4>
</div><!--/.col-->
<div class="col-sm-7 hidden-sm-down">
<div class="btn-toolbar float-right" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-3" data-toggle="buttons" aria-label="First group">
<label class="btn btn-outline-secondary active">
<input type="radio" name="options" id="option2" checked> Week
</label>
</div>
</div>
</div><!--/.col-->
</div><!--/.row-->
<div class="chart-wrapper" style="height:300px;margin-top:40px;">
<canvas baseChart class="chart"

View file

@ -82,12 +82,12 @@ export class GraphPanel implements OnInit {
pointHoverBackgroundColor: '#fff'
},
{ // brandSuccess
backgroundColor: 'transparent',
backgroundColor: this.convertHex(this.brandInfo, 10),
borderColor: this.brandSuccess,
pointHoverBackgroundColor: '#fff'
},
{ // brandDanger
backgroundColor: 'transparent',
backgroundColor: this.convertHex(this.brandDanger, 10),
borderColor: this.brandDanger,
pointHoverBackgroundColor: '#fff',
borderWidth: 1,

View file

@ -0,0 +1,19 @@
<div class="card">
<div class="card-block">
<div class="row">
<div class="col-12">
<h4 class="card-title mb-0">Global Purchases by Type</h4>
</div>
</div>
<div class="chart-wrapper">
<canvas baseChart class="chart"
[data]="doughnutChartDataLocal"
[labels]="doughnutChartLabelsLocal"
[colors]="doughnutChartColors"
[legend]="chartLegend"
[chartType]="chartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
</div>
</div>
</div>

View file

@ -0,0 +1,86 @@
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { ApiService } from '../providers/api-service';
import { OrgPiesService } from '../providers/org-pies.service';
import { DataType } from '../shared/data-types.enum';
import { ChartData } from '../_interfaces/chart-data';
@Component({
selector: 'org-pie-panel',
templateUrl: 'org-pie-panel.component.html',
})
export class OrgPiePanel implements OnInit {
public chartType = 'pie';
public chartLegend = true;
public doughnutChartDataLocal: number[] = [];
public doughnutChartColors: any[] = [
{
backgroundColor:[
'#ffa1b5',
'#3cde52',
'#52afed',
'#c133e3',
'#f7fa08',
'#75152d',
'#ee12ee',
'#15eaea',
'#eaa015',
'#ea1515',
'#2d4fcc'
]
},
{
borderColor: [
'red',
'green',
'blue',
'purple',
'yellow',
'brown',
'magenta',
'cyan',
'orange',
'pink'
]
},
{ borderWidth: [100]
},
];
public doughnutChartLabelsLocal: string[] = [];
constructor(
private api: ApiService,
private pieService: OrgPiesService,
) {
this.pieService.getOrgPie().subscribe(
result => {
this.setChartData(result.local_all);
},
error => {
console.log('Retrieval Error');
console.log( error._body );
}
);
}
public ngOnInit(): void {
}
private setChartData(dataLocal: any) {
this.doughnutChartDataLocal = Object.keys(dataLocal).map(key => dataLocal[key]);
// setTimeout is currently a workaround for ng2-charts labels
setTimeout(() => this.doughnutChartLabelsLocal = Object.keys(dataLocal), 0);
}
// events
public chartClicked(e: any): void {
}
public chartHovered(e: any): void {
}
}

View file

@ -1,18 +1,19 @@
<div class="card">
<div class="card">
<div class="card-block">
<div class="row">
<div class="col-sm-8">
<h4 class="card-title mb-0">All Purchases</h4>
</div><!--/.col-->
</div><!--/.row-->
<div class="col-12">
<h4 class="card-title mb-0">All Purchases by Category</h4>
</div>
</div>
<div class="chart-wrapper">
<canvas baseChart class="chart"
[data]="doughnutChartData"
[labels]="doughnutChartLabels"
[data]="doughnutChartDataLocal"
[labels]="doughnutChartLabelsLocal"
[colors]="doughnutChartColors"
[legend]="chartLegend"
[chartType]="chartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
</div>
</div>
</div>
</div>

View file

@ -1,37 +1,76 @@
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { ApiService } from '../providers/api-service';
import { CustPiesService } from '../providers/cust-pies.service';
import { DataType } from '../shared/data-types.enum';
import { ChartData } from '../_interfaces/chart-data';
@Component({
selector: 'panel-pie',
templateUrl: 'pie-panel.component.html',
})
export class PiePanel implements OnInit {
public chartType = 'doughnut';
public chartType = 'pie';
public chartLegend = true;
public doughnutChartLabels: string[] = [];
public doughnutChartData: number[] = [];
//Old
// public mainChartElements = 7;
public doughnutChartDataLocal: number[] = [];
public doughnutChartLabelsLocal: string[] = [];
public doughnutChartColors: any[] = [
{ backgroundColor: [
'#ffa1b5',
'#3cde52',
'#52afed',
'#c133e3',
'#f7fa08',
'#75152d',
'#ee12ee',
'#15eaea',
'#eaa015',
'#ea1515',
'#2d4fcc'
]
},
{ borderColor:[
'red',
'green',
'blue',
'purple',
'yellow',
'brown',
'magenta',
'cyan',
'orange',
'pink'
]
},
{ borderWidth: [10]
}
];
constructor(
private api: ApiService,
private pieService: CustPiesService,
) { }
public ngOnInit(): void {
this.pieService.getPie()
.subscribe( result => this.setData(result.pie) );
) {
this.pieService.getPie().subscribe(
result => {
this.setChartData(result.local_all);
},
error => {
console.log('Retrieval Error');
console.log( error._body );
}
);
}
private setData(data: any) {
this.doughnutChartData = Object.keys(data).map(key => data[key]);
public ngOnInit(): void {
}
private setChartData(dataLocal: any) {
this.doughnutChartDataLocal = Object.keys(dataLocal).map(key => dataLocal[key]);
// setTimeout is currently a workaround for ng2-charts labels
setTimeout(() => this.doughnutChartLabels = Object.keys(data), 0);
setTimeout(() => this.doughnutChartLabelsLocal = Object.keys(dataLocal), 0);
}
// convert Hex to RGBA
@ -47,11 +86,9 @@ export class PiePanel implements OnInit {
// events
public chartClicked(e: any): void {
console.log(e);
}
public chartHovered(e: any): void {
console.log(e);
}
}

View file

@ -1,8 +1,8 @@
import { map } from 'rxjs/operators';
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Rx';
import { environment } from '../../environments/environment';
import 'rxjs/add/operator/map';
/* this provider handles the interaction between server and client */
@ -29,18 +29,15 @@ export class ApiService {
// Login API
public getSessionKey() {
console.log('get key');
return this.sessionKey;
}
public setSessionKey(key) {
console.log('set key');
this.sessionKey = key;
localStorage.setItem('sessionKey', this.sessionKey);
}
public removeSessionKey() {
console.log('remove key');
this.sessionKey = null;
localStorage.removeItem('sessionKey');
}
@ -57,8 +54,8 @@ export class ApiService {
.post<any>(
this.apiUrl + '/login',
data
)
.map(
).pipe(
map(
result => {
const json = result;
this.setSessionKey(json.session_key);
@ -69,24 +66,23 @@ export class ApiService {
this.setUserType(json.user_type);
return json;
}
);
));
}
public logout() {
console.log(this.sessionKey);
const key = this.sessionKey;
return this.http
.post<any>(
this.apiUrl + '/logout',
{ session_key : key },
)
.map(
).pipe(
map(
response => {
localStorage.clear();
this.sessionKey = null;
return response;
}
);
));
}
// Submits feedback
@ -96,7 +92,6 @@ export class ApiService {
data.package_name = 'Foodloop Web';
data.version_code = 'dev';
data.version_number = 'dev';
console.log(data);
return this.http.post<any>(
this.apiUrl + '/feedback',
data
@ -138,6 +133,43 @@ export class ApiService {
);
}
// LCC data
public externalTransactions() {
const key = this.sessionKey;
return this.http.post<any>(
this.apiUrl + '/v1/organisation/external/transactions',
{
session_key : key,
}
);
}
public loadMiscUrl(extra_url, extraArgs = {}) {
const key = this.sessionKey;
return this.http.post<any>(
this.apiUrl + '/v1/' + extra_url,
{
session_key : key,
...extraArgs,
}
);
}
public externalSuppliers(page, sortBy, sortDir, perPage, search) {
const key = this.sessionKey;
return this.http.post<any>(
this.apiUrl + '/v1/organisation/external/suppliers',
{
session_key : key,
page : page,
sort_by : sortBy,
sort_dir : sortDir,
per_page : perPage,
search : search,
}
);
}
// Searches organisations used for transaction submission
public search(data) {
@ -158,6 +190,26 @@ export class ApiService {
);
}
// Edits a recurring transaction
public recurUpdate(data) {
data.session_key = this.sessionKey;
return this.http.post<any>(
this.apiUrl + '/recurring-transactions',
data
);
}
// Edits a recurring transaction
public recurDelete(data) {
data.session_key = this.sessionKey;
return this.http.post<any>(
this.apiUrl + '/recurring-transactions/delete',
data
);
}
// gets payroll list for log
public payrollList(data) {
@ -210,7 +262,6 @@ export class ApiService {
public setUserInfo(
email: string,
display_name: string) {
console.log('set UserInfo');
localStorage.setItem('email', email);
localStorage.setItem('displayname', display_name);
}
@ -218,7 +269,6 @@ export class ApiService {
// Sets usertype
public setUserType(user_type: string) {
console.log('set UserType');
localStorage.setItem('usertype', user_type);
}
@ -243,33 +293,27 @@ export class ApiService {
// Deletes account details on logout
public removeUserInfo() {
console.log('remove UserInfo');
localStorage.removeItem('email');
localStorage.removeItem('displayname');
}
public getFullName() {
console.log('get Full Name');
localStorage.getItem('fullname');
}
public getDisplayName() {
console.log('get Display Name');
localStorage.getItem('displayname');
}
public getPostcode() {
console.log('get Postcode');
localStorage.getItem('postcode');
}
public getYearOfBirth() {
console.log('get Year of Birth');
localStorage.getItem('yearofbirth');
}
public getEmail() {
console.log('get email');
localStorage.getItem('email');
}
@ -317,4 +361,15 @@ export class ApiService {
}
);
}
// Basic Customer User stats API
public orgStats() {
const key = this.sessionKey;
return this.http.post<any>(
this.apiUrl + '/stats/organisation',
{
session_key : key,
}
);
}
}

View file

@ -1,6 +1,6 @@
import { Injectable } from '@angular/core';
import { ApiService } from './api-service';
import { Observable } from 'rxjs/Rx';
import { Observable } from 'rxjs';
@Injectable()
export class CustPiesService {

View file

@ -1,6 +1,6 @@
import { Injectable } from '@angular/core';
import { ApiService } from './api-service';
import { Observable } from 'rxjs/Rx';
import { Observable } from 'rxjs';
@Injectable()
export class CustSnippetsService {

View file

@ -3,7 +3,7 @@ import { ApiService } from './api-service';
@Injectable()
export class OrgGraphsService {
private orgGraphUrl = '/v1/customer/graphs';
private orgGraphUrl = '/v1/organisation/graphs';
constructor(private api: ApiService) { }

View file

@ -0,0 +1,14 @@
import { Injectable } from '@angular/core';
import { ApiService } from './api-service';
import { Observable } from 'rxjs';
@Injectable()
export class OrgPiesService {
private orgPieUrl = '/v1/organisation/pies';
constructor(private api: ApiService) { }
public getOrgPie(): Observable<any> {
return this.api.post(this.orgPieUrl);
}
}

View file

@ -1,6 +1,6 @@
import { Injectable } from '@angular/core';
import { ApiService } from './api-service';
import { Observable } from 'rxjs/Rx';
import { Observable } from 'rxjs';
@Injectable()
export class OrgSnippetsService {

View file

@ -1,6 +1,8 @@
import {filter} from 'rxjs/operators';
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
import 'rxjs/add/operator/filter';
@Component({
selector: 'app-breadcrumbs',
@ -18,7 +20,7 @@ export class BreadcrumbsComponent implements OnInit {
breadcrumbs: Array<Object>;
constructor(private router: Router, private route: ActivatedRoute) {}
ngOnInit(): void {
this.router.events.filter(event => event instanceof NavigationEnd).subscribe(event => {
this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe(event => {
this.breadcrumbs = [];
let currentRoute = this.route.root,
url = '';

View file

@ -0,0 +1,3 @@
<td>{{type.type}}</td>
<td>{{type.count}}</td>
<td>{{type.sum | currency:'GBP':'symbol':'1.2-2' }}</td>

View file

@ -0,0 +1,19 @@
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
interface MetaTypeData {
type: string;
sum: number;
count: number;
}
@Component({
// tslint:disable-next-line
selector: '[meta-type-result]',
templateUrl: 'meta-type-result.component.html',
})
export class MetaTypeResultComponent implements OnInit {
@Input() public type: MetaTypeData;
ngOnInit(): void {
}
}

View file

@ -0,0 +1,6 @@
<td (click)="recurClick()">{{recur.seller}}</td>
<td (click)="recurClick()">{{categories[recur.category] || 'Uncategorised'}}</td>
<td (click)="recurClick()">{{recur.essential == 1 ? 'true' : 'false'}}</td>
<td (click)="recurClick()">{{recur.display_time}}</td>
<td (click)="recurClick()">{{recur.recurring_period}}</td>
<td (click)="recurClick()">{{recur.value}}</td>

View file

@ -0,0 +1,40 @@
import { Component, Input, Output, EventEmitter } from '@angular/core';
import * as moment from 'moment';
interface RecurData {
category: number;
essential: number;
id: number;
last_updated: string;
recurring_period: string;
seller: string;
start_time: string;
value: number;
display_time: any;
}
@Component({
// tslint:disable-next-line
selector: '[recur-result]',
templateUrl: 'recur-result.component.html',
})
export class RecurResultComponent {
@Input() public recur: RecurData;
@Output() public onClick = new EventEmitter();
@Input() public categories: any;
public updatedDate: string;
ngOnInit(): void {
if (this.recur.last_updated) {
this.recur.display_time = moment(this.recur.last_updated).format('llll');
} else {
this.recur.display_time = moment(this.recur.start_time).format('llll');
}
}
public recurClick(): void {
this.onClick.emit(
this.recur
);
}
}

View file

@ -0,0 +1,17 @@
<div class="form-group row">
<table class="table table-striped table-hover">
<thead>
<tr>
<th>Seller</th>
<th>Category</th>
<th>Essential</th>
<th>Last Applied</th>
<th>Recurring Period</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr recur-result *ngFor="let recur of recurList" [categories]="categories" [recur]="recur" (onClick)="recurClick($event, template)"></tr>
</tbody>
</table>
</div>

View file

@ -0,0 +1,30 @@
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { RecurResultComponent } from '../shared/recur-result.component';
interface RecurData {
category: string;
essential: number;
id: number;
last_updated: string;
recurring_period: string;
seller: string;
start_time: string;
value: number;
display_time: any;
}
@Component({
// tslint:disable-next-line
selector: 'recur-table',
templateUrl: 'recur-table.component.html',
})
export class RecurTableComponent {
@Input() public recurList: Array<RecurData>;
@Output() public onClick = new EventEmitter();
@Input() public categories: any;
public recurClick(event: any): void {
this.onClick.emit( event );
}
}

View file

@ -0,0 +1,3 @@
<td>{{supplier.name}}</td>
<td>{{supplier.postcode}}</td>
<td>{{supplier.spend | currency:'GBP':'symbol':'1.2-2' }}</td>

View file

@ -0,0 +1,19 @@
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
interface SupplierData {
name: string;
postcode: string;
spend: number;
}
@Component({
// tslint:disable-next-line
selector: '[supplier-result]',
templateUrl: 'supplier-result.component.html',
})
export class SupplierResultComponent implements OnInit {
@Input() public supplier: SupplierData;
ngOnInit(): void {
}
}

View file

@ -1,3 +1,6 @@
<td>{{transaction.seller}}</td>
<td>{{transaction.value | currency:'GBP':'symbol':'1.2-2' }}</td>
<td *ngIf="!showMeta">{{transaction.value | currency:'GBP':'symbol':'1.2-2' }}</td>
<td *ngIf="showMeta">{{transaction.net_value | currency:'GBP':'symbol':'1.2-2' }}</td>
<td *ngIf="showMeta">{{transaction.sales_tax_value | currency:'GBP':'symbol':'1.2-2' }}</td>
<td *ngIf="showMeta">{{transaction.gross_value | currency:'GBP':'symbol':'1.2-2' }}</td>
<td>{{transactionDate}}</td>

View file

@ -14,6 +14,7 @@ interface TransactionData {
})
export class TransactionResultComponent implements OnInit {
@Input() public transaction: TransactionData;
@Input() public showMeta: boolean;
public transactionDate: string;
ngOnInit(): void {

View file

@ -0,0 +1,3 @@
<td>{{ward.ward}}</td>
<td>{{ward.count}}</td>
<td>{{ward.sum | currency:'GBP':'symbol':'1.2-2' }}</td>

View file

@ -0,0 +1,19 @@
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
interface WardData {
ward: string;
sum: number;
count: number;
}
@Component({
// tslint:disable-next-line
selector: '[ward-result]',
templateUrl: 'ward-result.component.html',
})
export class WardResultComponent implements OnInit {
@Input() public ward: WardData;
ngOnInit(): void {
}
}

View file

@ -2,7 +2,15 @@
<div class="card-footer">
<ul>
<li class="hidden-sm-down">
<div class="text-muted">Customers This Month</div>
<div class="text-muted">Sales Total</div>
<strong>{{ allSalesCount }}</strong>
</li>
<li class="hidden-sm-down">
<div class="text-muted">Money Spent Total</div>
<strong>{{ allPurchasesTotal | currency:'GBP':'symbol':'1.2-2'}}</strong>
</li>
<li class="hidden-sm-down">
<div class="text-muted">Sales This Month</div>
<strong>{{ thisMonthSalesCount }}</strong>
</li>
<li class="hidden-sm-down">
@ -10,7 +18,7 @@
<strong>{{ thisMonthPurchasesTotal | currency:'GBP':'symbol':'1.2-2'}}</strong>
</li>
<li class="hidden-sm-down">
<div class="text-muted">Customers Today</div>
<div class="text-muted">Sales Today</div>
<strong>{{ todaySalesCount }}</strong>
</li>
<li class="hidden-sm-down">

View file

@ -7,6 +7,8 @@ import { OrgSnippetsService } from '../providers/org-snippets.service';
})
export class OrgBarSnippetComponent implements OnInit {
public allSalesCount = 0;
public allSalesTotal = 0;
public thisMonthSalesCount = 0;
public thisMonthSalesTotal = 0;
public thisWeekSalesCount = 0;
@ -14,6 +16,8 @@ export class OrgBarSnippetComponent implements OnInit {
public todaySalesCount = 0;
public todaySalesTotal = 0;
public allPurchasesCount = 0;
public allPurchasesTotal = 0;
public thisMonthPurchasesCount = 0;
public thisMonthPurchasesTotal = 0;
public thisWeekPurchasesCount = 0;
@ -29,6 +33,8 @@ export class OrgBarSnippetComponent implements OnInit {
this.snippetsService.getData()
.subscribe(
result => {
this.allSalesCount = result.snippets.all_sales_count;
this.allSalesTotal = result.snippets.all_sales_total;
this.thisMonthSalesCount = result.snippets.this_month_sales_count;
this.thisMonthSalesTotal = result.snippets.this_month_sales_total;
this.thisWeekSalesCount = result.snippets.this_week_sales_count;
@ -36,6 +42,8 @@ export class OrgBarSnippetComponent implements OnInit {
this.todaySalesCount = result.snippets.today_sales_count;
this.todaySalesTotal = result.snippets.today_sales_total;
this.allPurchasesCount = result.snippets.all_purchases_count;
this.allPurchasesTotal = result.snippets.all_purchases_total;
this.thisMonthPurchasesCount = result.snippets.this_week_purchases_count;
this.thisMonthPurchasesTotal = result.snippets.this_week_purchases_total;
this.thisWeekPurchasesCount = result.snippets.this_month_purchases_count;

View file

@ -10,7 +10,7 @@
<div class="chart-wrapper px-3" style="height:70px;">
<canvas baseChart
class="chart"
[datasets]="lineChartData"
[datasets]="lineGraphChartData"
[labels]="lineChartLabels"
[options]="lineChartOptions"
[colors]="lineChartColours"

View file

@ -12,6 +12,7 @@ interface ChartData {
selector: 'widget-graph',
templateUrl: 'graph-widget.component.html',
})
export class GraphWidget implements OnInit {
@Input() public graphName: string;
@Input() public graphTitle = 'Graph';
@ -24,7 +25,7 @@ export class GraphWidget implements OnInit {
public graphSum: Number = 0;
public availableDataTypes = DataType;
public lineChartData: Array<ChartData> = [
public lineGraphChartData: Array<ChartData> = [
{
data: [],
label: 'Series A'
@ -63,7 +64,7 @@ export class GraphWidget implements OnInit {
},
elements: {
line: {
borderWidth: 1
borderWidth: 2
},
point: {
radius: 4,
@ -124,7 +125,7 @@ export class GraphWidget implements OnInit {
}
private setChartData(data: Array<number>) {
this.lineChartData[0].data = data;
this.lineGraphChartData[0].data = data;
this.graphSum = data.reduce((a, b) => a + b, 0);
// Set point size based on data
if ( data.length < 15 ) {

View file

@ -5,6 +5,8 @@
export const environment = {
production: false,
apiUrl: 'https://dev.peartrade.org/api',
apiUrl: 'https://dev.localspend.co.uk/api',
mapApiKey: 'CHANGEME',
enableAnalytics: false,
analyticsKey: 'CHANGEME',
};

View file

@ -18,7 +18,6 @@
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body class="app header-fixed sidebar-fixed">
<!-- Enable bootstrap 4 theme -->
<script>window.__theme = 'bs4';</script>
@ -123,6 +122,12 @@
<div class="sk-cube3 sk-cube"></div>
</div>
</app-root>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
</script>
</body>
</html>

View file

@ -11,11 +11,11 @@
* automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
* Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
*
* Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
* Learn more in https://angular.io/guide/browser-support
*/
/***************************************************************************************************
* BROWSER POLYFILLS
* BROWSER POLYFILLS
*/
/** IE9, IE10 and IE11 requires all of the following polyfills. **/
@ -31,23 +31,37 @@ import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';
import 'core-js/es6/reflect';
import 'core-js/es7/array';
import 'core-js/es7/object';
/** IE10 and IE11 requires the following for NgClass support on SVG elements */
// import 'classlist.js'; // Run `npm install --save classlist.js`.
/** IE10 and IE11 requires the following to support `@angular/animation`. */
// import 'web-animations-js'; // Run `npm install --save web-animations-js`.
/** Evergreen browsers require these. **/
/** IE10 and IE11 requires the following for the Reflect API. */
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';
/**
* Required to support Web Animations `@angular/platform-browser/animations`.
* Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
**/
import 'web-animations-js'; // Run `npm install --save web-animations-js`.
/** ALL Firefox browsers require the following to support `@angular/animation`. **/
// import 'web-animations-js'; // Run `npm install --save web-animations-js`.
/**
* By default, zone.js will patch all possible macroTask and DomEvents
* user can disable parts of macroTask/DomEvents patch by setting following flags
*/
(window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
(window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
(window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
/*
* in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
* with the following flag, it will bypass `zone.js` patch for IE/Edge
*/
(window as any).__Zone_enable_cross_context_check = true;

View file

@ -48,7 +48,7 @@ $navbar-border: (
);
$navbar-brand-width: 155px;
$navbar-brand-bg: #fff;
$navbar-brand-logo: url('../assets/img/logo.png');
$navbar-brand-logo: url('../../assets/img/logo.png');
$navbar-brand-logo-size: 70px auto;
$navbar-brand-border: (
bottom: (

View file

@ -73,7 +73,8 @@ agm-map {
margin-bottom: 2px;
}
}
.small {
}
&.legend {
text-align: center;

View file

@ -0,0 +1,28 @@
.spinner {
width: 40px;
height: 40px;
background-color: #333;
margin: 100px auto;
-webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
animation: sk-rotateplane 1.2s infinite ease-in-out;
}
@-webkit-keyframes sk-rotateplane {
0% { -webkit-transform: perspective(120px) }
50% { -webkit-transform: perspective(120px) rotateY(180deg) }
100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) }
}
@keyframes sk-rotateplane {
0% {
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
} 50% {
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
} 100% {
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
}
}

View file

@ -76,3 +76,4 @@
// Custom styles
@import "custom";
@import "bootstrap/spinner";

View file

@ -2,7 +2,6 @@
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"module": "es2015",
"baseUrl": "",
"types": []
},

View file

@ -2,8 +2,6 @@
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/spec",
"module": "commonjs",
"target": "es5",
"baseUrl": "",
"types": [
"jasmine",
@ -11,7 +9,8 @@
]
},
"files": [
"test.ts"
"test.ts",
"polyfills.ts"
],
"include": [
"**/*.spec.ts",

View file

@ -1,6 +1,9 @@
{
"compileOnSave": false,
"compilerOptions": {
"downlevelIteration": true,
"importHelpers": true,
"module": "esnext",
"outDir": "./dist/out-tsc",
"baseUrl": "src",
"sourceMap": true,
@ -8,7 +11,7 @@
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"target": "es2015",
"typeRoots": [
"node_modules/@types"
],

View file

@ -12,7 +12,7 @@
"curly": true,
"eofline": true,
"forin": true,
"import-blacklist": [true, "rxjs"],
"import-blacklist": [true],
"import-spacing": true,
"indent": [
true,
@ -100,12 +100,12 @@
"directive-selector": [true, "attribute", "app", "camelCase"],
"component-selector": [true, "element", ["app", "widget", "snippet", "panel"], "kebab-case"],
"use-input-property-decorator": true,
"use-output-property-decorator": true,
"use-host-property-decorator": true,
"no-inputs-metadata-property": true,
"no-outputs-metadata-property": true,
"no-host-metadata-property": true,
"no-input-rename": true,
"no-output-rename": true,
"use-life-cycle-interface": true,
"use-lifecycle-interface": true,
"use-pipe-transform-interface": true,
"component-class-suffix": [true, "Component", "Widget", "Panel"],
"directive-class-suffix": true,