proyecto agregado orden de gastos cliente

CHANGELOG.md

+## [2.3.0] - 2019-06-11
+### Updates
+- update to Angular 8
+- update all dependencies to match Angular 8 version
+```
+@agm/core                           1.0.0-beta.5   →   1.0.0-beta.6
+@angular/animations                        7.0.2   →          8.0.0
+@angular/cdk                               7.0.2   →          8.0.1
+@angular/common                            7.0.2   →          8.0.0
+@angular/compiler                          7.0.2   →          8.0.0
+@angular/core                              7.0.2   →          8.0.0
+@angular/forms                             7.0.2   →          8.0.0
+@angular/http                              7.0.2   →         7.2.15
+@angular/material                          7.0.2   →          8.0.1
+@angular/platform-browser                  7.0.2   →          8.0.0
+@angular/platform-browser-dynamic          7.0.2   →          8.0.0
+@angular/platform-server                   7.0.2   →          8.0.0
+@angular/router                            7.0.2   →          8.0.0
+ajv                                        6.4.0   →         6.10.0
+bootstrap                                  4.1.0   →          4.3.1
+bootstrap-material-design                  4.1.1   →          4.1.2
+chartist                                  0.11.0   →         0.11.2
+core-js                                    2.4.1   →          3.1.3
+express                                   4.16.3   →         4.17.1
+googleapis                                28.1.0   →         40.0.0
+jquery                                     3.2.1   →          3.4.1
+moment                                    2.22.1   →         2.24.0
+perfect-scrollbar                          1.1.0   →          1.4.0
+popper.js                                 1.14.3   →         1.15.0
+rxjs                                       6.3.3   →          6.5.2
+rxjs-compat                                6.3.3   →          6.5.2
+zone.js                                   0.8.26   →          0.9.1
+@angular-devkit/build-angular              0.6.3   →        0.800.2
+@angular/cli                               7.0.2   →          8.0.2
+@angular/compiler-cli                      7.0.2   →          8.0.0
+@angular/language-service                  7.0.2   →          8.0.0
+@types/bootstrap                          3.3.32   →          4.3.0
+@types/chartist                           0.9.34   →         0.9.46
+@types/googlemaps                         3.30.8   →         3.36.4
+@types/jasmine                            2.5.38   →         3.3.13
+@types/jquery                            1.10.31   →         3.3.29
+@types/node                               6.0.73   →         12.0.7
+codelyzer                                  4.2.1   →          5.1.0
+jasmine-core                               3.3.0   →          3.4.0
+karma                                      2.0.0   →          4.1.0
+karma-cli                                  1.0.1   →          2.0.0
+karma-coverage-istanbul-reporter           1.4.2   →          2.0.5
+karma-jasmine                              1.1.1   →          2.0.1
+karma-jasmine-html-reporter                1.4.0   →          1.4.2
+protractor                                 5.3.1   →          5.4.2
+ts-node                                    5.0.1   →          8.2.0
+tslint                                     5.9.1   →         5.17.0
+typescript                                 3.1.6   →          3.4.5
+```
+### Bug fixing
+- browser console error
+```
+href="#pablo" -> href="javascript:void(0)"
+href="#"      -> href="javascript:void(0)"
+```
+- form-validation error from the `_forms.scss` file
+```
+@include form-validation-state("valid", $label-color); -> @include form-validation-state("valid", $label-color, $form-feedback-icon-valid);
+```
+- added hash for google url validation
+
+## [2.2.0] - 2018-11-14
+### Changes
+- update to Angular 7
+- update all dependencies to match Angular 7 version
+
+## [2.1.1] - 2018-05-23
+### Fixes
+- changed some links
+
+## [2.1.0] - 2018-04-27
+### Fixes
+- changed file structure
+- moved documentation online
+
+## [2.0.0] - 2018-04-20
+### Fixes
+- added bootstrap 4
+- added angular 5
+
+## [1.4.2] - 2017-10-01
+### Fixes
+- added Perfect Scrollbar
+- added scrollTop on route change
+- added closeSidebar on mobile
+- autocompile scss files
+- fixes for IE
+- update package dependencies to 4.4.4
+
+## [1.4.1] - 2017-09-19
+### Material
+- added material.init()
+- fixed input float problem
+- fixed checkboxes in tabs
+
+## [1.4.0] - 2017-08-23
+### Changes for Angular 4
+- added angular-cli
+- update to Angular 4
+
+## [v1.3.0] 2017-08-23
+### skipped for sync with Angular 4 version convention
+
+## [1.2.0] - 2017-04-05
+### Added
+- added Upgrade to PRO page
+- update package
+- made sidebar dynamic
+
+## [1.1.1] - 2017-03-21
+### Added
+- added "@types/core-js": "0.9.35" in package
+
+## [1.1.0] - 2017-03-20
+### small fix
+
+## [1.0.0] - 2017-01-30
+### initial Release

ISSUE_TEMPLATE.md

+<!--
+ IMPORTANT: Please use the following link to create a new issue:
+
+  https://www.creative-tim.com/new-issue/material-dashboard-angular2
+
+**If your issue was not created using the app above, it will be closed immediately.**
+-->
+
+<!--
+Love Creative Tim? Do you need Angular, React, Vuejs or HTML? You can visit:
+👉  https://www.creative-tim.com/bundles
+👉  https://www.creative-tim.com
+-->

LICENSE.md

+MIT License
+
+Copyright (c) 2017 Creative Tim (www.creative-tim.com)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

angular.json

+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "material-dashboard-angular": {
+      "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",
+              "src/favicon.ico"
+            ],
+            "styles": [
+              "node_modules/perfect-scrollbar/css/perfect-scrollbar.css",
+              "src/assets/scss/material-dashboard.scss",
+              "src/assets/css/demo.css",
+              "node_modules/primeicons/primeicons.css",
+              "node_modules/primeng/resources/themes/nova-light/theme.css",
+              "node_modules/primeng/resources/primeng.min.css"
+            ],
+            "scripts": [
+              "node_modules/jquery/dist/jquery.js",
+              "node_modules/popper.js/dist/umd/popper.js",
+              "node_modules/bootstrap-material-design/dist/js/bootstrap-material-design.min.js",
+              "node_modules/arrive/src/arrive.js",
+              "node_modules/moment/moment.js",
+              "node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js",
+              "node_modules/bootstrap-notify/bootstrap-notify.js",
+              "node_modules/chartist/dist/chartist.js"
+            ]
+          },
+          "configurations": {
+            "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"
+                }
+              ]
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "material-dashboard-angular:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "material-dashboard-angular:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "material-dashboard-angular: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",
+            "scripts": [
+              "node_modules/jquery/dist/jquery.js",
+              "node_modules/popper.js/dist/umd/popper.js",
+              "node_modules/bootstrap-material-design/dist/js/bootstrap-material-design.min.js",
+              "node_modules/arrive/src/arrive.js",
+              "node_modules/moment/moment.js",
+              "node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js",
+              "node_modules/bootstrap-notify/bootstrap-notify.js",
+              "node_modules/chartist/dist/chartist.js"
+            ],
+            "styles": [
+              "node_modules/perfect-scrollbar/css/perfect-scrollbar.css",
+              "src/assets/scss/material-dashboard.scss",
+              "src/assets/css/demo.css",
+              "node_modules/primeicons/primeicons.css",
+              "node_modules/primeng/resources/themes/nova-light/theme.css",
+              "node_modules/primeng/resources/primeng.min.css"
+            ],
+            "assets": [
+              "src/assets",
+              "src/favicon.ico"
+            ]
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "src/tsconfig.app.json",
+              "src/tsconfig.spec.json"
+            ],
+            "exclude": []
+          }
+        }
+      }
+    },
+    "material-dashboard-angular-e2e": {
+      "root": "",
+      "sourceRoot": "",
+      "projectType": "application",
+      "architect": {
+        "e2e": {
+          "builder": "@angular-devkit/build-angular:protractor",
+          "options": {
+            "protractorConfig": "./protractor.conf.js",
+            "devServerTarget": "material-dashboard-angular:serve"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "e2e/tsconfig.e2e.json"
+            ],
+            "exclude": []
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "material-dashboard-angular",
+  "schematics": {
+    "@schematics/angular:component": {
+      "prefix": "app",
+      "styleext": "scss"
+    },
+    "@schematics/angular:directive": {
+      "prefix": "app"
+    }
+  }
+}
\ No newline at end of file

documentation/js/arrive.min.js

+/*
+ * arrive.js
+ * v2.4.1
+ * https://github.com/uzairfarooq/arrive
+ * MIT licensed
+ *
+ * Copyright (c) 2014-2017 Uzair Farooq
+ */
+
+var Arrive=function(e,t,n){"use strict";function r(e,t,n){l.addMethod(t,n,e.unbindEvent),l.addMethod(t,n,e.unbindEventWithSelectorOrCallback),l.addMethod(t,n,e.unbindEventWithSelectorAndCallback)}function i(e){e.arrive=f.bindEvent,r(f,e,"unbindArrive"),e.leave=d.bindEvent,r(d,e,"unbindLeave")}if(e.MutationObserver&&"undefined"!=typeof HTMLElement){var o=0,l=function(){var t=HTMLElement.prototype.matches||HTMLElement.prototype.webkitMatchesSelector||HTMLElement.prototype.mozMatchesSelector||HTMLElement.prototype.msMatchesSelector;return{matchesSelector:function(e,n){return e instanceof HTMLElement&&t.call(e,n)},addMethod:function(e,t,r){var i=e[t];e[t]=function(){return r.length==arguments.length?r.apply(this,arguments):"function"==typeof i?i.apply(this,arguments):n}},callCallbacks:function(e,t){t&&t.options.onceOnly&&1==t.firedElems.length&&(e=[e[0]]);for(var n,r=0;n=e[r];r++)n&&n.callback&&n.callback.call(n.elem,n.elem);t&&t.options.onceOnly&&1==t.firedElems.length&&t.me.unbindEventWithSelectorAndCallback.call(t.target,t.selector,t.callback)},checkChildNodesRecursively:function(e,t,n,r){for(var i,o=0;i=e[o];o++)n(i,t,r)&&r.push({callback:t.callback,elem:i}),i.childNodes.length>0&&l.checkChildNodesRecursively(i.childNodes,t,n,r)},mergeArrays:function(e,t){var n,r={};for(n in e)e.hasOwnProperty(n)&&(r[n]=e[n]);for(n in t)t.hasOwnProperty(n)&&(r[n]=t[n]);return r},toElementsArray:function(t){return n===t||"number"==typeof t.length&&t!==e||(t=[t]),t}}}(),c=function(){var e=function(){this._eventsBucket=[],this._beforeAdding=null,this._beforeRemoving=null};return e.prototype.addEvent=function(e,t,n,r){var i={target:e,selector:t,options:n,callback:r,firedElems:[]};return this._beforeAdding&&this._beforeAdding(i),this._eventsBucket.push(i),i},e.prototype.removeEvent=function(e){for(var t,n=this._eventsBucket.length-1;t=this._eventsBucket[n];n--)if(e(t)){this._beforeRemoving&&this._beforeRemoving(t);var r=this._eventsBucket.splice(n,1);r&&r.length&&(r[0].callback=null)}},e.prototype.beforeAdding=function(e){this._beforeAdding=e},e.prototype.beforeRemoving=function(e){this._beforeRemoving=e},e}(),a=function(t,r){var i=new c,o=this,a={fireOnAttributesModification:!1};return i.beforeAdding(function(n){var i,l=n.target;(l===e.document||l===e)&&(l=document.getElementsByTagName("html")[0]),i=new MutationObserver(function(e){r.call(this,e,n)});var c=t(n.options);i.observe(l,c),n.observer=i,n.me=o}),i.beforeRemoving(function(e){e.observer.disconnect()}),this.bindEvent=function(e,t,n){t=l.mergeArrays(a,t);for(var r=l.toElementsArray(this),o=0;o<r.length;o++)i.addEvent(r[o],e,t,n)},this.unbindEvent=function(){var e=l.toElementsArray(this);i.removeEvent(function(t){for(var r=0;r<e.length;r++)if(this===n||t.target===e[r])return!0;return!1})},this.unbindEventWithSelectorOrCallback=function(e){var t,r=l.toElementsArray(this),o=e;t="function"==typeof e?function(e){for(var t=0;t<r.length;t++)if((this===n||e.target===r[t])&&e.callback===o)return!0;return!1}:function(t){for(var i=0;i<r.length;i++)if((this===n||t.target===r[i])&&t.selector===e)return!0;return!1},i.removeEvent(t)},this.unbindEventWithSelectorAndCallback=function(e,t){var r=l.toElementsArray(this);i.removeEvent(function(i){for(var o=0;o<r.length;o++)if((this===n||i.target===r[o])&&i.selector===e&&i.callback===t)return!0;return!1})},this},s=function(){function e(e){var t={attributes:!1,childList:!0,subtree:!0};return e.fireOnAttributesModification&&(t.attributes=!0),t}function t(e,t){e.forEach(function(e){var n=e.addedNodes,i=e.target,o=[];null!==n&&n.length>0?l.checkChildNodesRecursively(n,t,r,o):"attributes"===e.type&&r(i,t,o)&&o.push({callback:t.callback,elem:i}),l.callCallbacks(o,t)})}function r(e,t){return l.matchesSelector(e,t.selector)&&(e._id===n&&(e._id=o++),-1==t.firedElems.indexOf(e._id))?(t.firedElems.push(e._id),!0):!1}var i={fireOnAttributesModification:!1,onceOnly:!1,existing:!1};f=new a(e,t);var c=f.bindEvent;return f.bindEvent=function(e,t,r){n===r?(r=t,t=i):t=l.mergeArrays(i,t);var o=l.toElementsArray(this);if(t.existing){for(var a=[],s=0;s<o.length;s++)for(var u=o[s].querySelectorAll(e),f=0;f<u.length;f++)a.push({callback:r,elem:u[f]});if(t.onceOnly&&a.length)return r.call(a[0].elem,a[0].elem);setTimeout(l.callCallbacks,1,a)}c.call(this,e,t,r)},f},u=function(){function e(){var e={childList:!0,subtree:!0};return e}function t(e,t){e.forEach(function(e){var n=e.removedNodes,i=[];null!==n&&n.length>0&&l.checkChildNodesRecursively(n,t,r,i),l.callCallbacks(i,t)})}function r(e,t){return l.matchesSelector(e,t.selector)}var i={};d=new a(e,t);var o=d.bindEvent;return d.bindEvent=function(e,t,r){n===r?(r=t,t=i):t=l.mergeArrays(i,t),o.call(this,e,t,r)},d},f=new s,d=new u;t&&i(t.fn),i(HTMLElement.prototype),i(NodeList.prototype),i(HTMLCollection.prototype),i(HTMLDocument.prototype),i(Window.prototype);var h={};return r(f,h,"unbindAllArrive"),r(d,h,"unbindAllLeave"),h}}(window,"undefined"==typeof jQuery?null:jQuery,void 0);

documentation/js/demo.js

+type = ['','info','success','warning','danger'];
+
+
+demo = {
+    initPickColor: function(){
+        $('.pick-class-label').click(function(){
+            var new_class = $(this).attr('new-class');
+            var old_class = $('#display-buttons').attr('data-class');
+            var display_div = $('#display-buttons');
+            if(display_div.length) {
+            var display_buttons = display_div.find('.btn');
+            display_buttons.removeClass(old_class);
+            display_buttons.addClass(new_class);
+            display_div.attr('data-class', new_class);
+            }
+        });
+    },
+
+    initFormExtendedDatetimepickers: function(){
+        $('.datetimepicker').datetimepicker({
+            icons: {
+                time: "fa fa-clock-o",
+                date: "fa fa-calendar",
+                up: "fa fa-chevron-up",
+                down: "fa fa-chevron-down",
+                previous: 'fa fa-chevron-left',
+                next: 'fa fa-chevron-right',
+                today: 'fa fa-screenshot',
+                clear: 'fa fa-trash',
+                close: 'fa fa-remove'
+            }
+         });
+    },
+
+    initDocumentationCharts: function(){
+        /* ----------==========     Daily Sales Chart initialization For Documentation    ==========---------- */
+
+        dataDailySalesChart = {
+            labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
+            series: [
+                [12, 17, 7, 17, 23, 18, 38]
+            ]
+        };
+
+        optionsDailySalesChart = {
+            lineSmooth: Chartist.Interpolation.cardinal({
+                tension: 0
+            }),
+            low: 0,
+            high: 50, // creative tim: we recommend you to set the high sa the biggest value + something for a better look
+            chartPadding: { top: 0, right: 0, bottom: 0, left: 0},
+        }
+
+        var dailySalesChart = new Chartist.Line('#dailySalesChart', dataDailySalesChart, optionsDailySalesChart);
+
+        md.startAnimationForLineChart(dailySalesChart);
+    },
+
+    initDashboardPageCharts: function(){
+
+        /* ----------==========     Daily Sales Chart initialization    ==========---------- */
+
+        dataDailySalesChart = {
+            labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
+            series: [
+                [12, 17, 7, 17, 23, 18, 38]
+            ]
+        };
+
+        optionsDailySalesChart = {
+            lineSmooth: Chartist.Interpolation.cardinal({
+                tension: 0
+            }),
+            low: 0,
+            high: 50, // creative tim: we recommend you to set the high sa the biggest value + something for a better look
+            chartPadding: { top: 0, right: 0, bottom: 0, left: 0},
+        }
+
+        var dailySalesChart = new Chartist.Line('#dailySalesChart', dataDailySalesChart, optionsDailySalesChart);
+
+        md.startAnimationForLineChart(dailySalesChart);
+
+
+
+        /* ----------==========     Completed Tasks Chart initialization    ==========---------- */
+
+        dataCompletedTasksChart = {
+            labels: ['12am', '3pm', '6pm', '9pm', '12pm', '3am', '6am', '9am'],
+            series: [
+                [230, 750, 450, 300, 280, 240, 200, 190]
+            ]
+        };
+
+        optionsCompletedTasksChart = {
+            lineSmooth: Chartist.Interpolation.cardinal({
+                tension: 0
+            }),
+            low: 0,
+            high: 1000, // creative tim: we recommend you to set the high sa the biggest value + something for a better look
+            chartPadding: { top: 0, right: 0, bottom: 0, left: 0}
+        }
+
+        var completedTasksChart = new Chartist.Line('#completedTasksChart', dataCompletedTasksChart, optionsCompletedTasksChart);
+
+        // start animation for the Completed Tasks Chart - Line Chart
+        md.startAnimationForLineChart(completedTasksChart);
+
+
+
+        /* ----------==========     Emails Subscription Chart initialization    ==========---------- */
+
+        var dataEmailsSubscriptionChart = {
+          labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+          series: [
+            [542, 443, 320, 780, 553, 453, 326, 434, 568, 610, 756, 895]
+
+          ]
+        };
+        var optionsEmailsSubscriptionChart = {
+            axisX: {
+                showGrid: false
+            },
+            low: 0,
+            high: 1000,
+            chartPadding: { top: 0, right: 5, bottom: 0, left: 0}
+        };
+        var responsiveOptions = [
+          ['screen and (max-width: 640px)', {
+            seriesBarDistance: 5,
+            axisX: {
+              labelInterpolationFnc: function (value) {
+                return value[0];
+              }
+            }
+          }]
+        ];
+        var emailsSubscriptionChart = Chartist.Bar('#emailsSubscriptionChart', dataEmailsSubscriptionChart, optionsEmailsSubscriptionChart, responsiveOptions);
+
+        //start animation for the Emails Subscription Chart
+        md.startAnimationForBarChart(emailsSubscriptionChart);
+
+    },
+
+    initGoogleMaps: function(){
+        var myLatlng = new google.maps.LatLng(40.748817, -73.985428);
+        var mapOptions = {
+          zoom: 13,
+          center: myLatlng,
+          scrollwheel: false, //we disable de scroll over the map, it is a really annoing when you scroll through page
+          styles: [{"featureType":"water","stylers":[{"saturation":43},{"lightness":-11},{"hue":"#0088ff"}]},{"featureType":"road","elementType":"geometry.fill","stylers":[{"hue":"#ff0000"},{"saturation":-100},{"lightness":99}]},{"featureType":"road","elementType":"geometry.stroke","stylers":[{"color":"#808080"},{"lightness":54}]},{"featureType":"landscape.man_made","elementType":"geometry.fill","stylers":[{"color":"#ece2d9"}]},{"featureType":"poi.park","elementType":"geometry.fill","stylers":[{"color":"#ccdca1"}]},{"featureType":"road","elementType":"labels.text.fill","stylers":[{"color":"#767676"}]},{"featureType":"road","elementType":"labels.text.stroke","stylers":[{"color":"#ffffff"}]},{"featureType":"poi","stylers":[{"visibility":"off"}]},{"featureType":"landscape.natural","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#b8cb93"}]},{"featureType":"poi.park","stylers":[{"visibility":"on"}]},{"featureType":"poi.sports_complex","stylers":[{"visibility":"on"}]},{"featureType":"poi.medical","stylers":[{"visibility":"on"}]},{"featureType":"poi.business","stylers":[{"visibility":"simplified"}]}]
+
+        }
+        var map = new google.maps.Map(document.getElementById("map"), mapOptions);
+
+        var marker = new google.maps.Marker({
+            position: myLatlng,
+            title:"Hello World!"
+        });
+
+        // To add the marker to the map, call setMap();
+        marker.setMap(map);
+    },
+
+	showNotification: function(from, align){
+    	color = Math.floor((Math.random() * 4) + 1);
+
+    	$.notify({
+        	icon: "notifications",
+        	message: "Welcome to <b>Material Dashboard</b> - a beautiful freebie for every web developer."
+
+        },{
+            type: type[color],
+            timer: 4000,
+            placement: {
+                from: from,
+                align: align
+            }
+        });
+	}
+
+
+
+}

documentation/js/initMenu.js

+var mobile_menu_visible = 0,
+    mobile_menu_initialized = false,
+    toggle_initialized = false,
+    bootstrap_nav_initialized = false;
+
+$(document).ready(function(){
+    $sidebar = $('.sidebar');
+
+    window_width = $(window).width();
+    mda.initSidebarCheck();
+});
+
+$(window).resize(function(){
+    mda.initSidebarCheck();
+
+});
+mda = {
+    initSidebarCheck: function(){
+        if($(window).width() <= 991){
+            if($sidebar.length != 0){
+                mda.initRightMenu();
+            } else{
+                mda.initBootstrapNavbarMenu();
+            }
+        }
+    },
+    initRightMenu: debounce(function(){
+        $sidebar_wrapper = $('.sidebar-wrapper');
+
+        if(!mobile_menu_initialized){
+
+            $navbar = $('nav').find('.navbar-collapse').first().clone(true);
+
+            nav_content = '';
+            mobile_menu_content = '';
+
+            $navbar.children('ul').each(function(){
+
+                content_buff = $(this).html();
+                nav_content = nav_content + content_buff;
+            });
+
+            nav_content = '<ul class="nav nav-mobile-menu">' + nav_content + '</ul>';
+
+            $navbar_form = $('nav').find('.navbar-form').clone(true);
+
+            $sidebar_nav = $sidebar_wrapper.find('.nav-container');
+
+            // insert the navbar form before the sidebar list
+            $nav_content = $(nav_content);
+            $nav_content.insertBefore($sidebar_nav);
+            $navbar_form.insertBefore($nav_content);
+
+
+            $(".sidebar-wrapper .dropdown .dropdown-menu > li > a").click(function(event) {
+                event.stopPropagation();
+
+            });
+            mobile_menu_initialized = true;
+
+        } else {
+            if($(window).width() > 991){
+                // reset all the additions that we made for the sidebar wrapper only if the screen is bigger than 991px
+                $sidebar_wrapper.find('.navbar-form').remove();
+                $sidebar_wrapper.find('.nav-mobile-menu').remove();
+                mobile_menu_initialized = false;
+            }
+        }
+
+        if(!toggle_initialized){
+            $toggle = $('.navbar-toggle');
+
+            $toggle.click(function (){
+
+                if(mobile_menu_visible == 1) {
+                    $('html').removeClass('nav-open');
+
+                    $('.close-layer').remove();
+                    setTimeout(function(){
+                        $toggle.removeClass('toggled');
+                    }, 400);
+
+                    mobile_menu_visible = 0;;
+                } else {
+                    setTimeout(function(){
+                        $toggle.addClass('toggled');
+                    }, 430);
+
+
+                    $layer = $('<div class="close-layer"></div>');
+                    $layer.appendTo(".wrapper");
+
+                    setTimeout(function(){
+                        $layer.addClass('visible');
+                    }, 100);
+
+                    $layer.click(function() {
+                        $('html').removeClass('nav-open');
+                        mobile_menu_visible = 0;
+
+                        $layer.removeClass('visible');
+
+                         setTimeout(function(){
+                            $layer.remove();
+                            $toggle.removeClass('toggled');
+
+                         }, 400);
+                    });
+
+                    $('html').addClass('nav-open');
+                    mobile_menu_visible = 1;
+                }
+            });
+            toggle_initialized = true;
+        }
+    },200),
+
+
+    initBootstrapNavbarMenu: debounce(function(){
+        if(!bootstrap_nav_initialized){
+            $navbar = $('nav').find('.navbar-collapse').first().clone(true);
+
+            nav_content = '';
+            mobile_menu_content = '';
+            //add the content from the regular header to the mobile menu
+            $navbar.children('ul').each(function(){
+                content_buff = $(this).html();
+                nav_content = nav_content + content_buff;
+            });
+
+            nav_content = '<ul class="nav nav-mobile-menu">' + nav_content + '</ul>';
+            $navbar.html(nav_content);
+            $navbar.addClass('bootstrap-navbar');
+
+            // append it to the body, so it will come from the right side of the screen
+            $('body').append($navbar);
+            $toggle = $('.navbar-toggle');
+            $navbar.find('a').removeClass('btn btn-round btn-default');
+            $navbar.find('button').removeClass('btn-round btn-fill btn-info btn-primary btn-success btn-danger btn-warning btn-neutral');
+            $navbar.find('button').addClass('btn-simple btn-block');
+
+            $toggle.click(function (){
+                if(mobile_menu_visible == 1) {
+                    $('html').removeClass('nav-open');
+                    $('.close-layer').remove();
+
+                    setTimeout(function(){
+                        $toggle.removeClass('toggled');
+                    }, 400);
+                    mobile_menu_visible = 0;
+                } else {
+                    setTimeout(function(){
+                        $toggle.addClass('toggled');
+                    }, 430);
+
+                    $layer = $('<div class="close-layer"></div>');
+                    $layer.appendTo(".wrapper-full-page");
+
+                    setTimeout(function(){
+                        $layer.addClass('visible');
+                    }, 100);
+
+                    $layer.click(function() {
+                        $('html').removeClass('nav-open');
+
+                        mobile_menu_visible = 0;
+                        $layer.removeClass('visible');
+
+                        setTimeout(function(){
+                            $layer.remove();
+                            $toggle.removeClass('toggled');
+                        }, 400);
+                    });
+
+                    $('html').addClass('nav-open');
+                    mobile_menu_visible = 1;
+                }
+            });
+
+            bootstrap_nav_initialized = true;
+        }
+    }, 500),
+}
+
+
+
+// Returns a function, that, as long as it continues to be invoked, will not
+// be triggered. The function will be called after it stops being called for
+// N milliseconds. If `immediate` is passed, trigger the function on the
+// leading edge, instead of the trailing.
+
+function debounce(func, wait, immediate) {
+	var timeout;
+	return function() {
+		var context = this, args = arguments;
+		clearTimeout(timeout);
+		timeout = setTimeout(function() {
+			timeout = null;
+			if (!immediate) func.apply(context, args);
+		}, wait);
+		if (immediate && !timeout) func.apply(context, args);
+	};
+};

documentation/js/material-dashboard.js

+/*!
+
+ =========================================================
+ * Material Dashboard Angular 2 - V1.2.0
+ =========================================================
+
+ * Product Page: https://www.creative-tim.com/product/material-dashboard-angular2
+ * Copyright 2017 Creative Tim (https://www.creative-tim.com)
+ * Licensed under MIT (https://github.com/creativetimofficial/material-dashboard-angular/blob/master/LICENSE.md)
+
+ =========================================================
+
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+ */
+
+
+var searchVisible = 0;
+var transparent = true;
+
+var transparentDemo = true;
+var fixedTop = false;
+
+var seq = 0, delays = 80, durations = 500;
+var seq2 = 0, delays2 = 80, durations2 = 500;
+
+$(document).ready(function(){
+
+    $sidebar = $('.sidebar');
+
+    $.material.init();
+
+    window_width = $(window).width();
+    // check if there is an image set for the sidebar's background
+    //  Activate the tooltips
+    $('[rel="tooltip"]').tooltip();
+
+
+    $('.form-control').on("focus", function(){
+        $(this).parent('.input-group').addClass("input-group-focus");
+    }).on("blur", function(){
+        $(this).parent(".input-group").removeClass("input-group-focus");
+    });
+
+});
+
+// activate collapse right menu when the windows is resized
+$(window).resize(function(){
+    // reset the seq for charts drawing animations
+    seq = seq2 = 0;
+
+});
+
+md = {
+    misc:{
+        navbar_menu_visible: 0,
+        active_collapse: true,
+        disabled_collapse_init: 0,
+    },
+
+
+    checkScrollForTransparentNavbar: debounce(function() {
+            if($(document).scrollTop() > 381 ) {
+                if(transparent) {
+                    transparent = false;
+                    $('.navbar-color-on-scroll').removeClass('navbar-transparent');
+                    $('.navbar-title').removeClass('hidden');
+                }
+            } else {
+                if( !transparent ) {
+                    transparent = true;
+                    $('.navbar-color-on-scroll').addClass('navbar-transparent');
+                    $('.navbar-title').addClass('hidden');
+                }
+            }
+    }, 17),
+
+
+    startAnimationForLineChart: function(chart){
+
+        chart.on('draw', function(data) {
+          if(data.type === 'line' || data.type === 'area') {
+            data.element.animate({
+              d: {
+                begin: 600,
+                dur: 700,
+                from: data.path.clone().scale(1, 0).translate(0, data.chartRect.height()).stringify(),
+                to: data.path.clone().stringify(),
+                easing: Chartist.Svg.Easing.easeOutQuint
+              }
+            });
+          } else if(data.type === 'point') {
+                seq++;
+                data.element.animate({
+                  opacity: {
+                    begin: seq * delays,
+                    dur: durations,
+                    from: 0,
+                    to: 1,
+                    easing: 'ease'
+                  }
+                });
+            }
+        });
+
+        seq = 0;
+    },
+    startAnimationForBarChart: function(chart){
+
+        chart.on('draw', function(data) {
+          if(data.type === 'bar'){
+              seq2++;
+              data.element.animate({
+                opacity: {
+                  begin: seq2 * delays2,
+                  dur: durations2,
+                  from: 0,
+                  to: 1,
+                  easing: 'ease'
+                }
+              });
+          }
+        });
+
+        seq2 = 0;
+    }
+}
+
+
+// Returns a function, that, as long as it continues to be invoked, will not
+// be triggered. The function will be called after it stops being called for
+// N milliseconds. If `immediate` is passed, trigger the function on the
+// leading edge, instead of the trailing.
+
+function debounce(func, wait, immediate) {
+	var timeout;
+	return function() {
+		var context = this, args = arguments;
+		clearTimeout(timeout);
+		timeout = setTimeout(function() {
+			timeout = null;
+			if (!immediate) func.apply(context, args);
+		}, wait);
+		if (immediate && !timeout) func.apply(context, args);
+	};
+};

documentation/js/material.min.js

+!function(t){function o(t){return"undefined"==typeof t.which?!0:"number"==typeof t.which&&t.which>0?!t.ctrlKey&&!t.metaKey&&!t.altKey&&8!=t.which&&9!=t.which&&13!=t.which&&16!=t.which&&17!=t.which&&20!=t.which&&27!=t.which:!1}function i(o){var i=t(o);i.prop("disabled")||i.closest(".form-group").addClass("is-focused")}function n(o){o.closest("label").hover(function(){var o=t(this).find("input");o.prop("disabled")||i(o)},function(){e(t(this).find("input"))})}function e(o){t(o).closest(".form-group").removeClass("is-focused")}t.expr[":"].notmdproc=function(o){return t(o).data("mdproc")?!1:!0},t.material={options:{validate:!0,input:!0,ripples:!0,checkbox:!0,togglebutton:!0,radio:!0,arrive:!0,autofill:!1,withRipples:[".btn:not(.btn-link)",".card-image",".navbar a:not(.withoutripple)",".footer a:not(.withoutripple)",".dropdown-menu a",".nav-tabs a:not(.withoutripple)",".withripple",".pagination li:not(.active):not(.disabled) a:not(.withoutripple)"].join(","),inputElements:"input.form-control, textarea.form-control, select.form-control",checkboxElements:".checkbox > label > input[type=checkbox]",togglebuttonElements:".togglebutton > label > input[type=checkbox]",radioElements:".radio > label > input[type=radio]"},checkbox:function(o){var i=t(o?o:this.options.checkboxElements).filter(":notmdproc").data("mdproc",!0).after("<span class='checkbox-material'><span class='check'></span></span>");n(i)},togglebutton:function(o){var i=t(o?o:this.options.togglebuttonElements).filter(":notmdproc").data("mdproc",!0).after("<span class='toggle'></span>");n(i)},radio:function(o){var i=t(o?o:this.options.radioElements).filter(":notmdproc").data("mdproc",!0).after("<span class='circle'></span><span class='check'></span>");n(i)},input:function(o){t(o?o:this.options.inputElements).filter(":notmdproc").data("mdproc",!0).each(function(){var o=t(this),i=o.closest(".form-group");0===i.length&&(o.wrap("<div class='form-group'></div>"),i=o.closest(".form-group")),o.attr("data-hint")&&(o.after("<p class='help-block'>"+o.attr("data-hint")+"</p>"),o.removeAttr("data-hint"));var n={"input-lg":"form-group-lg","input-sm":"form-group-sm"};if(t.each(n,function(t,n){o.hasClass(t)&&(o.removeClass(t),i.addClass(n))}),o.hasClass("floating-label")){var e=o.attr("placeholder");o.attr("placeholder",null).removeClass("floating-label");var a=o.attr("id"),r="";a&&(r="for='"+a+"'"),i.addClass("label-floating"),o.after("<label "+r+"class='control-label'>"+e+"</label>")}(null===o.val()||"undefined"==o.val()||""===o.val())&&i.addClass("is-empty"),i.append("<span class='material-input'></span>"),i.find("input[type=file]").length>0&&i.addClass("is-fileinput")})},attachInputEventHandlers:function(){var n=this.options.validate;t(document).on("change",".checkbox input[type=checkbox]",function(){t(this).blur()}).on("keydown paste",".form-control",function(i){o(i)&&t(this).closest(".form-group").removeClass("is-empty")}).on("keyup change",".form-control",function(){var o=t(this),i=o.closest(".form-group"),e="undefined"==typeof o[0].checkValidity||o[0].checkValidity();""===o.val()?i.addClass("is-empty"):i.removeClass("is-empty"),n&&(e?i.removeClass("has-error"):i.addClass("has-error"))}).on("focus",".form-control, .form-group.is-fileinput",function(){i(this)}).on("blur",".form-control, .form-group.is-fileinput",function(){e(this)}).on("change",".form-group input",function(){var o=t(this);if("file"!=o.attr("type")){var i=o.closest(".form-group"),n=o.val();n?i.removeClass("is-empty"):i.addClass("is-empty")}}).on("change",".form-group.is-fileinput input[type='file']",function(){var o=t(this),i=o.closest(".form-group"),n="";t.each(this.files,function(t,o){n+=o.name+", "}),n=n.substring(0,n.length-2),n?i.removeClass("is-empty"):i.addClass("is-empty"),i.find("input.form-control[readonly]").val(n)})},ripples:function(o){t(o?o:this.options.withRipples).ripples()},autofill:function(){var o=setInterval(function(){t("input[type!=checkbox]").each(function(){var o=t(this);o.val()&&o.val()!==o.attr("value")&&o.trigger("change")})},100);setTimeout(function(){clearInterval(o)},1e4)},attachAutofillEventHandlers:function(){var o;t(document).on("focus","input",function(){var i=t(this).parents("form").find("input").not("[type=file]");o=setInterval(function(){i.each(function(){var o=t(this);o.val()!==o.attr("value")&&o.trigger("change")})},100)}).on("blur",".form-group input",function(){clearInterval(o)})},init:function(o){this.options=t.extend({},this.options,o);var i=t(document);t.fn.ripples&&this.options.ripples&&this.ripples(),this.options.input&&(this.input(),this.attachInputEventHandlers()),this.options.checkbox&&this.checkbox(),this.options.togglebutton&&this.togglebutton(),this.options.radio&&this.radio(),this.options.autofill&&(this.autofill(),this.attachAutofillEventHandlers()),document.arrive&&this.options.arrive&&(t.fn.ripples&&this.options.ripples&&i.arrive(this.options.withRipples,function(){t.material.ripples(t(this))}),this.options.input&&i.arrive(this.options.inputElements,function(){t.material.input(t(this))}),this.options.checkbox&&i.arrive(this.options.checkboxElements,function(){t.material.checkbox(t(this))}),this.options.radio&&i.arrive(this.options.radioElements,function(){t.material.radio(t(this))}),this.options.togglebutton&&i.arrive(this.options.togglebuttonElements,function(){t.material.togglebutton(t(this))}))}}}(jQuery),function(t,o,i,n){"use strict";function e(o,i){r=this,this.element=t(o),this.options=t.extend({},s,i),this._defaults=s,this._name=a,this.init()}var a="ripples",r=null,s={};e.prototype.init=function(){var i=this.element;i.on("mousedown touchstart",function(n){if(!r.isTouch()||"mousedown"!==n.type){i.find(".ripple-container").length||i.append('<div class="ripple-container"></div>');var e=i.children(".ripple-container"),a=r.getRelY(e,n),s=r.getRelX(e,n);if(a||s){var l=r.getRipplesColor(i),p=t("<div></div>");p.addClass("ripple").css({left:s,top:a,"background-color":l}),e.append(p),function(){return o.getComputedStyle(p[0]).opacity}(),r.rippleOn(i,p),setTimeout(function(){r.rippleEnd(p)},500),i.on("mouseup mouseleave touchend",function(){p.data("mousedown","off"),"off"===p.data("animating")&&r.rippleOut(p)})}}})},e.prototype.getNewSize=function(t,o){return Math.max(t.outerWidth(),t.outerHeight())/o.outerWidth()*2.5},e.prototype.getRelX=function(t,o){var i=t.offset();return r.isTouch()?(o=o.originalEvent,1===o.touches.length?o.touches[0].pageX-i.left:!1):o.pageX-i.left},e.prototype.getRelY=function(t,o){var i=t.offset();return r.isTouch()?(o=o.originalEvent,1===o.touches.length?o.touches[0].pageY-i.top:!1):o.pageY-i.top},e.prototype.getRipplesColor=function(t){var i=t.data("ripple-color")?t.data("ripple-color"):o.getComputedStyle(t[0]).color;return i},e.prototype.hasTransitionSupport=function(){var t=i.body||i.documentElement,o=t.style,e=o.transition!==n||o.WebkitTransition!==n||o.MozTransition!==n||o.MsTransition!==n||o.OTransition!==n;return e},e.prototype.isTouch=function(){return/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)},e.prototype.rippleEnd=function(t){t.data("animating","off"),"off"===t.data("mousedown")&&r.rippleOut(t)},e.prototype.rippleOut=function(t){t.off(),r.hasTransitionSupport()?t.addClass("ripple-out"):t.animate({opacity:0},100,function(){t.trigger("transitionend")}),t.on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd",function(){t.remove()})},e.prototype.rippleOn=function(t,o){var i=r.getNewSize(t,o);r.hasTransitionSupport()?o.css({"-ms-transform":"scale("+i+")","-moz-transform":"scale("+i+")","-webkit-transform":"scale("+i+")",transform:"scale("+i+")"}).addClass("ripple-on").data("animating","on").data("mousedown","on"):o.animate({width:2*Math.max(t.outerWidth(),t.outerHeight()),height:2*Math.max(t.outerWidth(),t.outerHeight()),"margin-left":-1*Math.max(t.outerWidth(),t.outerHeight()),"margin-top":-1*Math.max(t.outerWidth(),t.outerHeight()),opacity:.2},500,function(){o.trigger("transitionend")})},t.fn.ripples=function(o){return this.each(function(){t.data(this,"plugin_"+a)||t.data(this,"plugin_"+a,new e(this,o))})}}(jQuery,window,document);

documentation/tutorial-components.html

+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8" />
+    <link rel="apple-touch-icon" sizes="76x76" href="../src/assets/img/apple-icon.png" />
+    <link rel="icon" type="image/png" href="../src/assets/img/favicon.png" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <title>Material Dashboard Angular by Creative Tim</title>
+    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
+    <meta name="viewport" content="width=device-width" />
+
+    <!--  Material Dashboard CSS    -->
+    <link href="css/material-dashboard.css" rel="stylesheet" />
+    <!--  CSS for Demo Purpose, don't include it in your project     -->
+    <!--     Fonts and icons     -->
+    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
+    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons" />
+    <link href="css/demo-documentation.css" rel="stylesheet" />
+    <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
+    <style>
+        pre.prettyprint {
+            background-color: #eee;
+            border: 0px;
+            margin-bottom: 60px;
+            margin-top: 30px;
+            padding: 20px;
+            text-align: left;
+        }
+
+        .atv,
+        .str {
+            color: #05AE0E;
+        }
+
+        .tag,
+        .pln,
+        .kwd {
+            color: #3472F7;
+        }
+
+        .atn {
+            color: #2C93FF;
+        }
+
+        .pln {
+            color: #333;
+        }
+
+        .com {
+            color: #999;
+        }
+
+        .space-top {
+            margin-top: 50px;
+        }
+
+        .area-line {
+            border: 1px solid #999;
+            border-left: 0;
+            border-right: 0;
+            color: #666;
+            display: block;
+            margin-top: 20px;
+            padding: 8px 0;
+            text-align: center;
+        }
+
+        .area-line a {
+            color: #666;
+        }
+
+        .container-fluid {
+            padding-right: 15px;
+            padding-left: 15px;
+        }
+    </style>
+    <!--     Fonts and icons     -->
+    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
+    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons" />
+</head>
+
+<body class="offline-doc index-page">
+  <nav class="navbar navbar-color-on-scroll navbar-transparent    fixed-top  navbar-expand-lg "  color-on-scroll="100"  id="sectionsNav">
+
+    <div class="container">
+        <div class="navbar-translate">
+            <a class="navbar-brand">Material Dashboard Angular  - Docs </a>
+            <button class="navbar-toggler" type="button" data-toggle="collapse" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+                <span class="navbar-toggler-icon"></span>
+                <span class="navbar-toggler-icon"></span>
+            </button>
+        </div>
+
+        <div class="collapse navbar-collapse">
+            <ul class="navbar-nav ml-auto">
+              <li class="nav-item">
+                <a class="nav-link" href="https://github.com/creativetimofficial/material-dashboard-angular2/issues">Have an issue?</a>
+               </li>
+            </ul>
+        </div>
+    </div>
+  </nav>
+
+  <div class="page-header header-filter clear-filter" style="background-image: url('../src/assets/img/cover.jpeg'); background-size: cover">
+    <div class="container">
+      <div class="col-md-8 ml-auto mr-auto">
+        <div class="brand">
+          <h1>Material Dashboard Angular
+          </h1>
+
+          <h3 class="title">Documentation v2.3.0</h3>
+          <br/>
+          <a href="https://demos.creative-tim.com/material-dashboard-angular2/documentation/tutorial" class="btn btn-white btn-round">View documentation</a>
+        </div>
+      </div>
+    </div>
+  </div>
+
+
+  <footer class="footer ">
+    <div class="container">
+        <nav class="pull-left">
+            <ul>
+                <li>
+                    <a href="https://www.creative-tim.com">
+                        Creative Tim
+                    </a>
+                </li>
+                <li>
+                    <a href="http://presentation.creative-tim.com">
+                       About Us
+                    </a>
+                </li>
+                <li>
+                    <a href="http://blog.creative-tim.com">
+                       Blog
+                    </a>
+                </li>
+                <li>
+                    <a href="https://www.creative-tim.com/license">
+                        Licenses
+                    </a>
+                </li>
+            </ul>
+        </nav>
+        <div class="copyright pull-right">
+            &copy; <script>document.write(new Date().getFullYear())</script>, made with <i class="material-icons">favorite</i> by <a href="https://www.creative-tim.com" target="_blank">Creative Tim</a> for a better web.
+        </div>
+    </div>
+  </footer>
+
+</html>

e2e/app.e2e-spec.ts

+import { MaterialDashboardAngularPage } from './app.po';
+
+describe('material-dashboard-angular App', () => {
+  let page: MaterialDashboardAngularPage;
+
+  beforeEach(() => {
+    page = new MaterialDashboardAngularPage();
+  });
+
+  it('should display message saying app works', () => {
+    page.navigateTo();
+    expect(page.getParagraphText()).toEqual('app works!');
+  });
+});

e2e/app.po.ts

+import { browser, element, by } from 'protractor';
+
+export class MaterialDashboardAngularPage {
+  navigateTo() {
+    return browser.get('/');
+  }
+
+  getParagraphText() {
+    return element(by.css('app-root h1')).getText();
+  }
+}

e2e/tsconfig.e2e.json

+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/e2e",
+    "module": "commonjs",
+    "target": "es5",
+    "types":[
+      "jasmine",
+      "node"
+    ]
+  }
+}

karma.conf.js

+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/0.13/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    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-devkit/build-angular/plugins/karma')
+    ],
+    client:{
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    files: [
+      
+    ],
+    preprocessors: {
+      
+    },
+    mime: {
+      'text/x-typescript': ['ts','tsx']
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, 'coverage'), reports: [ 'html', 'lcovonly' ],
+      fixWebpackSourcePaths: true
+    },
+    angularCli: {
+      environment: 'dev'
+    },
+    reporters: config.angularCli && config.angularCli.codeCoverage
+              ? ['progress', 'coverage-istanbul']
+              : ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false
+  });
+};

package.json

+{
+  "name": "material-dashboard-angular",
+  "version": "2.3.0",
+  "license": "MIT",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "test": "ng test",
+    "lint": "ng lint",
+    "e2e": "ng e2e",
+    "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && ng serve -o"
+  },
+  "engines": {
+    "node": "6.11.1",
+    "npm": "3.10.9"
+  },
+  "private": true,
+  "dependencies": {
+    "@agm/core": "1.0.0-beta.6",
+    "@angular/animations": "^8.0.0",
+    "@angular/cdk": "8.0.1",
+    "@angular/common": "8.0.0",
+    "@angular/compiler": "8.0.0",
+    "@angular/core": "8.0.0",
+    "@angular/forms": "8.0.0",
+    "@angular/http": "7.2.15",
+    "@angular/material": "8.0.1",
+    "@angular/platform-browser": "8.0.0",
+    "@angular/platform-browser-dynamic": "8.0.0",
+    "@angular/platform-server": "8.0.0",
+    "@angular/router": "8.0.0",
+    "ajv": "6.10.0",
+    "arrive": "2.4.1",
+    "bootstrap": "4.3.1",
+    "bootstrap-material-design": "4.1.2",
+    "bootstrap-notify": "3.1.3",
+    "chartist": "0.11.2",
+    "classlist.js": "1.1.20150312",
+    "core-js": "3.1.3",
+    "express": "4.17.1",
+    "googleapis": "40.0.0",
+    "hammerjs": "2.0.8",
+    "jquery": "3.4.1",
+    "jspdf": "^1.5.3",
+    "moment": "2.24.0",
+    "ngx-spinner": "^8.1.0",
+    "perfect-scrollbar": "1.1.0",
+    "popper.js": "1.15.0",
+    "primeicons": "^2.0.0",
+    "primeng": "^9.0.0-rc.2",
+    "rxjs": "6.5.2",
+    "rxjs-compat": "6.5.2",
+    "web-animations-js": "2.3.1",
+    "zone.js": "0.9.1"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "0.800.2",
+    "@angular/cli": "8.0.2",
+    "@angular/compiler-cli": "8.0.0",
+    "@angular/language-service": "8.0.0",
+    "@types/bootstrap": "4.3.0",
+    "@types/chartist": "0.9.46",
+    "@types/googlemaps": "3.36.4",
+    "@types/jasmine": "3.3.13",
+    "@types/jquery": "3.3.29",
+    "@types/node": "12.0.7",
+    "codelyzer": "5.1.0",
+    "jasmine-core": "3.4.0",
+    "jasmine-spec-reporter": "4.2.1",
+    "karma": "4.1.0",
+    "karma-chrome-launcher": "2.2.0",
+    "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": "5.4.2",
+    "ts-node": "8.2.0",
+    "tslint": "5.17.0",
+    "typescript": "3.4.5"
+  }
+}

protractor.conf.js

+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/lib/config.ts
+
+const { SpecReporter } = require('jasmine-spec-reporter');
+
+exports.config = {
+  allScriptsTimeout: 11000,
+  specs: [
+    './e2e/**/*.e2e-spec.ts'
+  ],
+  capabilities: {
+    'browserName': 'chrome'
+  },
+  directConnect: true,
+  baseUrl: 'http://localhost:4200/',
+  framework: 'jasmine',
+  jasmineNodeOpts: {
+    showColors: true,
+    defaultTimeoutInterval: 30000,
+    print: function() {}
+  },
+  beforeLaunch: function() {
+    require('ts-node').register({
+      project: 'e2e/tsconfig.e2e.json'
+    });
+  },
+  onPrepare() {
+    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
+  }
+};

src/app/app.component.html

+
+<router-outlet></router-outlet>

src/app/app.component.spec.ts

+import { TestBed, async } from '@angular/core/testing';
+
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  }));
+
+  it('should create the app', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  }));
+
+  it(`should have as title 'app works!'`, async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app.title).toEqual('app works!');
+  }));
+
+  it('should render title in a h1 tag', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.debugElement.nativeElement;
+    expect(compiled.querySelector('h1').textContent).toContain('app works!');
+  }));
+});

src/app/app.component.ts

+import { Component} from '@angular/core';
+
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+
+}

src/app/app.module.ts

+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { HttpModule } from '@angular/http';
+import { RouterModule } from '@angular/router';
+import { AppRoutingModule } from './app.routing';
+import { ComponentsModule } from './components/components.module';
+import { AppComponent } from './app.component';
+import {
+  AgmCoreModule
+} from '@agm/core';
+
+
+import { HttpClientModule } from '@angular/common/http';
+//import { DeviceDetectorModule } from 'ngx-device-detector';
+import { NgxSpinnerModule } from 'ngx-spinner';
+import { ButtonModule } from 'primeng/button';
+import { DialogModule } from 'primeng/dialog';
+import { FieldsetModule } from 'primeng/fieldset';
+import { InputMaskModule } from 'primeng/inputmask';
+import { TableModule } from 'primeng/table';
+import { ToastModule } from 'primeng/toast';
+import { TooltipModule } from 'primeng/tooltip';
+
+import { AdminLayoutComponent } from './layouts/admin-layout/admin-layout.component';
+
+import { ProveedorService } from './services/proveedor.service';
+import { EmpleadoService } from './services/empleado.service';
+import { ContratoService } from './services/contrato.service';
+import { CertificadoService } from './services/certificado.service';
+import { OrdenService } from './services/orden.service';
+import { TipoContratoService } from './services/tipo-contrato.service';
+import { ItemService } from './services/item.service';
+
+@NgModule({
+  imports: [
+    BrowserAnimationsModule,
+    FormsModule,
+    ReactiveFormsModule,
+    HttpModule,
+    ComponentsModule,
+    RouterModule,
+    AppRoutingModule,
+    HttpClientModule,
+    FieldsetModule,
+    NgxSpinnerModule,
+    ButtonModule,
+    ToastModule,
+    DialogModule,
+    TableModule,
+    TooltipModule,
+    InputMaskModule,
+    //DeviceDetectorModule.forRoot(),
+    AgmCoreModule.forRoot({
+      apiKey: 'YOUR_GOOGLE_MAPS_API_KEY'
+    })
+  ],
+  declarations: [
+    AppComponent,
+    AdminLayoutComponent,
+  ],
+  providers: [
+    ProveedorService, 
+    EmpleadoService,
+    ContratoService, 
+    CertificadoService, 
+    OrdenService,
+    ItemService,
+    TipoContratoService
+  ],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }

src/app/app.routing.ts

+import { NgModule } from '@angular/core';
+import { CommonModule, } from '@angular/common';
+import { BrowserModule  } from '@angular/platform-browser';
+import { Routes, RouterModule } from '@angular/router';
+
+import { AdminLayoutComponent } from './layouts/admin-layout/admin-layout.component';
+
+
+const routes: Routes = [
+  { path: '',  component: AdminLayoutComponent,
+    children: [
+      {
+        path: '',
+        loadChildren: './layouts/admin-layout/admin-layout.module#AdminLayoutModule'
+      }],
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    BrowserModule,
+    RouterModule.forRoot(routes, { useHash: true })
+  ],
+  exports: [
+  ],
+})
+export class AppRoutingModule { }

src/app/certificado/certificado-add/certificado-add.component.html

+<div class="main-content">
+  <div class="container-fluid">
+    <div class="card">
+      <div class="card-header card-header-danger">
+        <h4 class="card-title">Agregar certificado</h4>
+      </div>
+      <div class="card-body">
+        <form (ngSubmit)="save()">
+          <div class="row">
+            
+            <div class="col-4">
+              <label class="font-weight-bold">Fecha:</label>
+              <div>
+                <input [(ngModel)]="certificado.cer_fecha" type="date" id="cer_fecha" name="cer_fecha" class="outlinenone" required />
+              </div>
+            </div>
+            <div class="col-4">
+              <label class="font-weight-bold">Número del certificado:</label>
+              <div>
+                <input [(ngModel)]="certificado.cer_numero" type="text" id="cer_numero" name="cer_numero" class="outlinenone" required />
+              </div>
+            </div>
+            <div class="col-8">
+              <label class="font-weight-bold">Item Presupuestario:</label>
+              <select [(ngModel)]="certificado.id_item" name="id_item" id="id_item" class="form-control" class="select-css" style="width: auto;">
+                <option *ngFor='let it of items' value={{it.id}}>{{it.item_pg}} {{it.item_sp}} {{it.item_py}} {{it.item_act}} {{it.item_item}} {{it.item_ubg}} {{it.item_fte}} {{it.item_org}} {{it.item_n_prest}} {{it.item_descripcion}}</option>
+              </select>
+            </div>
+            <div class="col-4">
+              <label class="font-weight-bold">Valor del subTotal del certificado:</label>
+              <div>
+                <input [(ngModel)]="certificado.cer_valor_sub_to" type="number"
+                  placeholder="Ingrese el presupuesto del subTotal" id="cer_valor_sub_to" name="cer_valor_sub_to"
+                  class="outlinenone" required />
+              </div>
+            </div>
+            <div class="col-4">
+              <label class="font-weight-bold">Valor del iva del certificado:</label>
+              <div>
+                <input [(ngModel)]="certificado.cer_valor_iva" type="number"
+                  placeholder="Ingrese el presupuesto del iva" id="cer_valor_iva" name="cer_valor_iva" 
+                  class="outlinenone" required />
+              </div>
+            </div>
+          </div>
+          <button type="submit" class="btn btn-success">Guardar</button>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file

src/app/certificado/certificado-add/certificado-add.component.scss

+.select-css {
+  display: block;
+  font-size: 16px;
+  font-family: 'Arial', sans-serif;
+  font-weight: 400;
+  color: #444;
+  line-height: 1.3;
+  padding: .4em 1.4em .3em .8em;
+  width: 150px;
+  max-width: 100%;
+  box-sizing: border-box;
+  margin: 0;
+  border: 1px solid #aaa;
+  box-shadow: 0 1px 0 1px rgba(0, 0, 0, .03);
+  border-radius: .3em;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  background-color: #fff;
+  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'), linear-gradient(to bottom, #ffffff 0%, #f7f7f7 100%);
+  background-repeat: no-repeat, repeat;
+  background-position: right .7em top 50%, 0 0;
+  background-size: .65em auto, 100%;
+}
+
+.select-css::-ms-expand {
+  display: none;
+}
+
+.select-css:hover {
+  border-color: #888;
+}
+
+.select-css:focus {
+  border-color: #aaa;
+  box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
+  box-shadow: 0 0 0 3px -moz-mac-focusring;
+  color: #222;
+  outline: none;
+}
+
+.select-css option {
+  font-weight: normal;
+}
+
+input {
+  display: block;
+  width: 100%;
+  padding: .6em .8em;
+  margin-bottom: .5em;
+  font-size: 1.1em;
+  color: #1C2E36;
+  border: 1px solid rgb(7, 7, 7);
+  border-radius: 10px 10px 10px 10px;
+  -moz-border-radius: 10px 10px 10px 10px;
+  -webkit-border-radius: 10px 10px 10px 10px;
+  border: 1px solid #aaa;
+}
+
+input:focus {
+  background-color: rgb(255, 255, 255);
+  outline: 0;
+}
+
+input:placeholder-shown {
+  background-color: #FAFBFC;
+}
+
+input::-webkit-input-placeholder {
+  color: #A4B3B7;
+}
\ No newline at end of file

src/app/certificado/certificado-add/certificado-add.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CertificadoAddComponent } from './certificado-add.component';
+
+describe('CertificadoAddComponent', () => {
+  let component: CertificadoAddComponent;
+  let fixture: ComponentFixture<CertificadoAddComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CertificadoAddComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CertificadoAddComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/certificado/certificado-add/certificado-add.component.ts

+import { Component, OnInit } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { FormBuilder } from '@angular/forms';
+import { Certificado } from 'app/models/certificado';
+import { CertificadoService } from 'app/services/certificado.service';
+import { ContratoService } from 'app/services/contrato.service';
+import { Contrato } from 'app/models/contrato';
+import { Item } from 'app/models/item';
+import { ItemService } from 'app/services/item.service';
+
+@Component({
+  selector: 'app-certificado-add',
+  templateUrl: './certificado-add.component.html',
+  styleUrls: ['./certificado-add.component.scss']
+})
+export class CertificadoAddComponent implements OnInit {
+  id: number;
+  contrato: Contrato;
+  items: Item[];
+  certificado: Certificado = new Certificado();
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router,
+    private formBuilder: FormBuilder,
+    private certificadoService: CertificadoService,
+    private is: ItemService,
+    private cs: ContratoService,
+  ) { }
+
+  ngOnInit() {
+    this.getItem();
+    this.id = this.route.snapshot.params['id'];
+    this.findContrato();
+
+  }
+
+  findContrato() {
+    this.cs.getContrato(this.id)
+      .subscribe(data => {
+        this.contrato = data;
+        console.log(this.contrato);
+      }, error => console.log(error));
+  }
+
+  newCertificado(): void {
+    this.certificado = new Certificado();
+  }
+
+  saldo() {
+    this.certificado.id_contrato = this.contrato.id;
+    this.certificado.cer_saldo_sub_to = this.certificado.cer_valor_sub_to;
+    this.certificado.cer_saldo_iva = this.certificado.cer_valor_iva;
+  }
+  
+  save() {
+    this.saldo();
+
+    this.certificadoService.createCertificado(this.certificado)
+      .subscribe();
+    this.certificado = new Certificado();
+
+    this.router.navigate(['list-certificado']);
+  }
+
+  getItem() {
+    this.is.getItemList().subscribe((data: Item[]) => {
+      this.items = data;
+    }, (error) => {
+      alert('A ocurrido un error al traer los items presupuestarios');
+    });
+  }
+}

src/app/certificado/certificado-detail/certificado-detail.component.html

+<div class="main-content">
+    <div class="container-fluid">
+        <div class="card">
+            <div class="card-header card-header-danger">
+                <h4 class="card-title">Detalle Certificado</h4>
+            </div>
+            <div class="card-body">
+                <div class="card-body" *ngIf="certificado">
+                    <div class="row">
+                        <div class="col-4">
+                            <label class="font-weight-bold">Fecha: </label>
+                            <input value="{{certificado[0].uzftcertificado_FECHA}}" type="text" class="outlinenone" readonly>
+                        </div>
+                        <div class="col-4">
+                            <label class="font-weight-bold">Número de certificado: </label>
+                            <input value="{{certificado[0].uzftcertificado_NUMERO}}" type="text" class="outlinenone" readonly>
+                        </div>
+                        <div class="col-12">
+                            <label class="font-weight-bold">Contrato: </label>
+                            <input value="{{certificado[0].uzftcontrato_OBJETO}}" type="text" class="outlinenone" readonly>
+                        </div>
+                        <div class="col-8">
+                            <label class="font-weight-bold">Codigo del Presupuesto: </label>
+                            <input value="{{certificado[0].uzftitem_PG}} {{certificado[0].uzftitem_SP}} {{certificado[0].uzftitem_PY}} {{certificado[0].uzftitem_ACT}} {{certificado[0].uzftitem_ITEM}} {{certificado[0].uzftitem_UBG}} {{certificado[0].uzftitem_FTE}} {{certificado[0].uzftitem_ORG}} {{certificado[0].uzftitem_N_PREST}}" type="text" class="outlinenone" readonly>
+                        </div>
+                        <div class="col-4">
+                            <label class="font-weight-bold">Descripción del presupuesto: </label>
+                            <input value="{{certificado[0].uzftitem_DESCRIPCION}}" type="text" class="outlinenone" readonly>
+                        </div>
+                        <div class="col-4">
+                            <label class="font-weight-bold">Valor Sub total: </label>
+                            <input value="{{certificado[0].uzftcertificado_VALOR_SUB_TO}}" type="text" class="outlinenone" readonly>
+                        </div>
+                        <div class="col-4">
+                            <label class="font-weight-bold">Valor iva: </label>
+                            <input value="{{certificado[0].uzftcertificado_VALOR_IVA}}" type="text" class="outlinenone" readonly>
+                        </div>
+                        <div class="col-4">
+                            <label class="font-weight-bold">Saldo Sub Total: </label>
+                            <input value="{{certificado[0].uzftcertificado_SALDO_SUB_TO}}" type="text" class="outlinenone" readonly>
+                        </div>
+                        <div class="col-4">
+                            <label class="font-weight-bold">Saldo Iva: </label>
+                            <input value="{{certificado[0].uzftcertificado_SALDO_IVA}}" type="text" class="outlinenone" readonly>
+                        </div>
+                    </div>
+                </div>
+                <button (click)="list()" class="btn btn-primary">Regresar</button>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file

src/app/certificado/certificado-detail/certificado-detail.component.scss

+.select-css {
+    display: block;
+    font-size: 16px;
+    font-family: 'Arial', sans-serif;
+    font-weight: 400;
+    color: #444;
+    line-height: 1.3;
+    padding: .4em 1.4em .3em .8em;
+    width: 150px;
+    max-width: 100%;
+    box-sizing: border-box;
+    margin: 0;
+    border: 1px solid #aaa;
+    box-shadow: 0 1px 0 1px rgba(0, 0, 0, .03);
+    border-radius: .3em;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    background-color: #fff;
+    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'), linear-gradient(to bottom, #ffffff 0%, #f7f7f7 100%);
+    background-repeat: no-repeat, repeat;
+    background-position: right .7em top 50%, 0 0;
+    background-size: .65em auto, 100%;
+}
+
+.select-css::-ms-expand {
+    display: none;
+}
+
+.select-css:hover {
+    border-color: #888;
+}
+
+.select-css:focus {
+    border-color: #aaa;
+    box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
+    box-shadow: 0 0 0 3px -moz-mac-focusring;
+    color: #222;
+    outline: none;
+}
+
+.select-css option {
+    font-weight: normal;
+}
+
+input {
+    display: block;
+    width: 100%;
+    padding: .6em .8em;
+    margin-bottom: .5em;
+    font-size: 1.1em;
+    color: #1C2E36;
+    border: 1px solid rgb(7, 7, 7);
+    border-radius: 10px 10px 10px 10px;
+    -moz-border-radius: 10px 10px 10px 10px;
+    -webkit-border-radius: 10px 10px 10px 10px;
+    border: 1px solid #aaa;
+}
+
+input:focus {
+    background-color: rgb(255, 255, 255);
+    outline: 0;
+}
+
+input:placeholder-shown {
+    background-color: #FAFBFC;
+}
+
+input::-webkit-input-placeholder {
+    color: #A4B3B7;
+}
\ No newline at end of file

src/app/certificado/certificado-detail/certificado-detail.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CertificadoDetailComponent } from './certificado-detail.component';
+
+describe('CertificadoDetailComponent', () => {
+  let component: CertificadoDetailComponent;
+  let fixture: ComponentFixture<CertificadoDetailComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CertificadoDetailComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CertificadoDetailComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/certificado/certificado-detail/certificado-detail.component.ts

+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { CertificadoService } from 'app/services/certificado.service';
+import { Certi } from 'app/models/inner/certi';
+
+@Component({
+  selector: 'app-certificado-detail',
+  templateUrl: './certificado-detail.component.html',
+  styleUrls: ['./certificado-detail.component.scss']
+})
+export class CertificadoDetailComponent implements OnInit {
+
+  id: number;
+  certificado: Certi;
+    constructor(private route: ActivatedRoute,
+      private router: Router,
+      private cs: CertificadoService ){ }
+  
+    ngOnInit() {
+      this.certificado = new Certi;
+      this.id = this.route.snapshot.params['id'];
+      this.datos();
+    }
+    datos(){
+      this.cs.getCertificadoF(this.id)
+   .subscribe(data => {
+    this.certificado = data;
+  }, error => console.log(error));
+    }
+    list(){
+      this.router.navigate(['list-certificado']);
+    }
+
+}

src/app/certificado/certificado-edit/certificado-edit.component.html

+<div class="main-content">
+  <div class="container-fluid">
+    <div class="card">
+      <div class="card-header card-header-danger">
+        <h4 class="card-title">Agregar certificado</h4>
+      </div>
+      <div class="card-body">
+        <form (ngSubmit)="update()">
+          <div class="row">
+            
+            <div class="col-4">
+              <label class="font-weight-bold">Fecha:</label>
+              <div>
+                <input [(ngModel)]="certificado.cer_fecha" type="date" id="cer_fecha" name="cer_fecha" class="outlinenone" required />
+              </div>
+            </div>
+            <div class="col-4">
+              <label class="font-weight-bold">Número del certificado:</label>
+              <div>
+                <input [(ngModel)]="certificado.cer_numero" type="text" id="cer_numero" name="cer_numero" class="outlinenone" required />
+              </div>
+            </div>
+            <div class="col-2">
+              <label class="font-weight-bold">Item Presupuestario:</label>
+              <select [(ngModel)]="certificado.id_item" name="id_item" id="id_item" class="form-control" class="select-css">
+                <option *ngFor='let it of items' value={{it.id}}>{{it.item_pg}} {{it.item_sp}} {{it.item_py}} {{it.item_act}} {{it.item_item}} {{it.item_ubg}} {{it.item_fte}} {{it.item_org}} {{it.item_n_prest}} {{it.item_descripcion}}</option>
+              </select>
+            </div>
+            <div class="col-4">
+              <label class="font-weight-bold">Valor del subTotal del certificado:</label>
+              <div>
+                <input [(ngModel)]="certificado.cer_valor_sub_to" type="number"
+                  placeholder="Ingrese el presupuesto del subTotal" id="cer_valor_sub_to" name="cer_valor_sub_to"
+                  class="outlinenone" required />
+              </div>
+            </div>
+            <div class="col-4">
+              <label class="font-weight-bold">Valor del iva del certificado:</label>
+              <div>
+                <input [(ngModel)]="certificado.cer_valor_iva" type="number"
+                  placeholder="Ingrese el presupuesto del iva" id="cer_valor_iva" name="cer_valor_iva" 
+                  class="outlinenone" required />
+              </div>
+            </div>
+          </div>
+          <button type="submit" class="btn btn-success">Guardar</button>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file

src/app/certificado/certificado-edit/certificado-edit.component.scss

+.select-css {
+    display: block;
+    font-size: 16px;
+    font-family: 'Arial', sans-serif;
+    font-weight: 400;
+    color: #444;
+    line-height: 1.3;
+    padding: .4em 1.4em .3em .8em;
+    width: 150px;
+    max-width: 100%;
+    box-sizing: border-box;
+    margin: 0;
+    border: 1px solid #aaa;
+    box-shadow: 0 1px 0 1px rgba(0, 0, 0, .03);
+    border-radius: .3em;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    background-color: #fff;
+    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'), linear-gradient(to bottom, #ffffff 0%, #f7f7f7 100%);
+    background-repeat: no-repeat, repeat;
+    background-position: right .7em top 50%, 0 0;
+    background-size: .65em auto, 100%;
+}
+
+.select-css::-ms-expand {
+    display: none;
+}
+
+.select-css:hover {
+    border-color: #888;
+}
+
+.select-css:focus {
+    border-color: #aaa;
+    box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
+    box-shadow: 0 0 0 3px -moz-mac-focusring;
+    color: #222;
+    outline: none;
+}
+
+.select-css option {
+    font-weight: normal;
+}
+
+input {
+    display: block;
+    width: 100%;
+    padding: .6em .8em;
+    margin-bottom: .5em;
+    font-size: 1.1em;
+    color: #1C2E36;
+    border: 1px solid rgb(7, 7, 7);
+    border-radius: 10px 10px 10px 10px;
+    -moz-border-radius: 10px 10px 10px 10px;
+    -webkit-border-radius: 10px 10px 10px 10px;
+    border: 1px solid #aaa;
+}
+
+input:focus {
+    background-color: rgb(255, 255, 255);
+    outline: 0;
+}
+
+input:placeholder-shown {
+    background-color: #FAFBFC;
+}
+
+input::-webkit-input-placeholder {
+    color: #A4B3B7;
+}
\ No newline at end of file

src/app/certificado/certificado-edit/certificado-edit.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CertificadoEditComponent } from './certificado-edit.component';
+
+describe('CertificadoEditComponent', () => {
+  let component: CertificadoEditComponent;
+  let fixture: ComponentFixture<CertificadoEditComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CertificadoEditComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CertificadoEditComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/certificado/certificado-edit/certificado-edit.component.ts

+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { FormBuilder } from '@angular/forms';
+import { CertificadoService } from 'app/services/certificado.service';
+import { Certificado } from 'app/models/certificado';
+import { ItemService } from 'app/services/item.service';
+import { Item } from 'app/models/item';
+
+@Component({
+  selector: 'app-certificado-edit',
+  templateUrl: './certificado-edit.component.html',
+  styleUrls: ['./certificado-edit.component.scss']
+})
+export class CertificadoEditComponent implements OnInit {
+
+  items: Item[];
+  id: number;
+  certificado: Certificado;
+  constructor(private route: ActivatedRoute,
+    private router: Router,
+    private formBuilder: FormBuilder,
+    private cs: CertificadoService,
+    private is:ItemService,) { }
+
+  ngOnInit() {
+    this.certificado = new Certificado();
+    this.id = this.route.snapshot.params['id'];
+    this.cs.getCertificado(this.id)
+    .subscribe(data => {
+      console.log(data)
+      this.certificado = data;
+    }, error => console.log(error));
+  }
+
+  update(){
+    this.cs.updateCertificado(this.id, this.certificado)
+      .subscribe(data => console.log(data), error => console.log(error));
+    this.certificado = new Certificado();
+    this.router.navigate(['list-certificado']);
+  }
+
+  getItem() {
+    this.is.getItemList().subscribe((data: Item[]) => {
+      this.items = data;
+    }, (error) => {
+      alert('A ocurrido un error al traer los items presupuestarios');
+    });
+  }
+}

src/app/certificado/certificado-list/certificado-list.component.html

+<div class="main-content">
+  <div class="container-fluid">
+    <div class="card">
+      <div class="tbl-header">
+        <table class="table table-striped">
+          <thead>
+            <tr>
+              <th>Contrato</th>
+              <th>Fecha</th>
+              <th>Número</th>
+              <!-- <th>Codigo</th> -->
+              <th>Descripción</th>
+              <th>Valor subtotal</th>
+              <th>Valor iva</th>
+              <!-- <th>Saldo subtotal</th>
+              <th>Saldo iva</th> -->
+              <th colspan="3" style="width: 170px;">Acciones</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr *ngFor="let certificado of certi  | async">
+              <td>{{certificado.uzftcontrato_OBJETO}}</td>
+              <td>{{certificado.uzftcertificado_FECHA}}</td>
+              <td style="width: 40;">{{certificado.uzftcertificado_NUMERO}}</td>
+              <!-- <td>{{certificado.uzftitem_PG}} {{certificado.uzftitem_SP}} {{certificado.uzftitem_PY}} {{certificado.uzftitem_ACT}} {{certificado.uzftitem_ITEM}} <br> {{certificado.uzftitem_UBG}} {{certificado.uzftitem_FTE}} {{certificado.uzftitem_ORG}} {{certificado.uzftitem_N_PREST}}</td> -->
+              <td>{{certificado.uzftitem_DESCRIPCION}}</td>
+              <td>{{certificado.uzftcertificado_VALOR_SUB_TO}}</td>
+              <td>{{certificado.uzftcertificado_VALOR_IVA}}</td>
+              <!-- <td>{{certificado.uzftcertificado_SALDO_SUB_TO}}</td>
+              <td>{{certificado.uzftcertificado_SALDO_IVA}}</td> -->
+              <td style="width: 30px;">
+                <img (click)="certificadoDetails(certificado.uzftcertificado_ID)" src="../../assets/img/detalle.png" alt="new-img"
+                  height="25" width="25">
+              </td>
+              <!--<td>
+                <img (click)="certificadoEdit(certificado.uzftcertificate_ID)" src="../../assets/img/editar.png" alt="new-img"
+                  height="25" width="25">
+              </td> -->
+              <td style="width: 30px;">
+                <img (click)="deleteCertificado(certificado.uzftcertificado_ID)" src="../../assets/img/borrar.png" alt="new-img"
+                  height="25" width="25">
+              </td>
+              <td style="width: 30px;">
+                <!-- <button (click)="createOrd(certificado.uzftcertificado_ID)" class="btn btn-primary" style="width: 80px;">crear orden</button> -->
+                <img (click)="createOrd(certificado.uzftcertificado_ID)" src="../../assets/img/agregar.JPG" alt="new-img"
+                  height="25" width="25">
+              </td> 
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file

src/app/certificado/certificado-list/certificado-list.component.scss

+table {
+    width: 100%;
+    table-layout: fixed;
+}
+
+.tbl-header {
+    background-color: rgba(255, 255, 255, 0.3);
+}
+
+.tbl-content {
+    height: 300px;
+    overflow-x: auto;
+    margin-top: 0px;
+    border: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+th {
+    padding: 20px 15px;
+    text-align: left;
+    font-weight: 500;
+    font-size: 12px;
+    color: rgb(0, 0, 0);
+    text-transform: uppercase;
+}
+
+td {
+    padding: 15px;
+    text-align: left;
+    vertical-align: middle;
+    font-weight: 300;
+    font-size: 12px;
+    color: rgb(0, 0, 0);
+    border-bottom: solid 1px rgba(3, 3, 3, 0.1);
+}
+
+.addData {
+    position: fixed;
+    right: 5%;
+    cursor: pointer;
+}
+
+
+/* demo styles */
+
+@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,300,700);
+body {
+    background: -webkit-linear-gradient(left, #25c481, #25b7c4);
+    background: linear-gradient(to right, #25c481, #25b7c4);
+    font-family: 'Roboto', sans-serif;
+}
+
+section {
+    margin: 50px;
+}
+
+
+/* for custom scrollbar for webkit browser*/
+
+ ::-webkit-scrollbar {
+    width: 6px;
+}
\ No newline at end of file

src/app/certificado/certificado-list/certificado-list.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CertificadoListComponent } from './certificado-list.component';
+
+describe('CertificadoListComponent', () => {
+  let component: CertificadoListComponent;
+  let fixture: ComponentFixture<CertificadoListComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CertificadoListComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CertificadoListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/certificado/certificado-list/certificado-list.component.ts

+import { Component, OnInit } from '@angular/core';
+import { Certi } from 'app/models/inner/certi';
+import { Router } from '@angular/router';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { CertificadoService } from 'app/services/certificado.service';
+
+@Component({
+  selector: 'app-certificado-list',
+  templateUrl: './certificado-list.component.html',
+  styleUrls: ['./certificado-list.component.scss']
+})
+export class CertificadoListComponent implements OnInit {
+
+  certi: Observable<Certi[]>;
+  
+  constructor(
+    private router: Router,
+    private http: HttpClient,  
+    private certificadoService:CertificadoService) {
+    
+     }
+
+  ngOnInit() {
+    this.reloadData();
+  }
+
+  reloadData() {
+    this.certi = this.certificadoService.getCertificadosL();
+  }
+
+
+  deleteCertificado(id: number) {
+    this.certificadoService.deleteCertificado(id)
+      .subscribe(
+        data => {
+          console.log(data);
+          this.reloadData();
+        },
+        error => console.log(error));
+  }
+
+  certificadoDetails(id: number){
+    this.router.navigate(['detalle-certificado', id]);
+  }
+
+  // certificadoEdit(id: number){
+  //   this.router.navigate(['editar-certificado', id]);
+  // }
+
+  createOrd(id: number){
+    this.router.navigate(['add-orden', id]);
+  }
+
+}

src/app/components/components.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+
+import { FooterComponent } from './footer/footer.component';
+import { NavbarComponent } from './navbar/navbar.component';
+import { SidebarComponent } from './sidebar/sidebar.component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    RouterModule,
+  ],
+  declarations: [
+    FooterComponent,
+    NavbarComponent,
+    SidebarComponent
+  ],
+  exports: [
+    FooterComponent,
+    NavbarComponent,
+    SidebarComponent
+  ]
+})
+export class ComponentsModule { }

src/app/components/footer/footer.component.html

+<footer class="footer ">
+    <div class="container-fluid">
+        <nav class="pull-left">
+           Universidad de las Fuerzas Armadas - ESPE
+        </nav>
+        <div class="copyright pull-right">
+            &copy;
+            {{test | date: 'yyyy'}}, made with love by
+            Unidad de Tecnologías de Información y Comunicaciones.
+        </div>
+    </div>
+</footer>

src/app/components/footer/footer.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FooterComponent } from './footer.component';
+
+describe('FooterComponent', () => {
+  let component: FooterComponent;
+  let fixture: ComponentFixture<FooterComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FooterComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FooterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/footer/footer.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-footer',
+  templateUrl: './footer.component.html',
+  styleUrls: ['./footer.component.css']
+})
+export class FooterComponent implements OnInit {
+  test : Date = new Date();
+  
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/components/navbar/navbar.component.html

+<nav class="navbar navbar-expand-lg navbar-transparent  navbar-absolute fixed-top">
+    <div class="container-fluid">
+        <div class="navbar-wrapper">
+          <a class="navbar-brand" href="javascript:void(0)">{{getTitle()}}</a>
+        </div>
+    </div>
+</nav>
\ No newline at end of file

src/app/components/navbar/navbar.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NavbarComponent } from './navbar.component';
+
+describe('NavbarComponent', () => {
+  let component: NavbarComponent;
+  let fixture: ComponentFixture<NavbarComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NavbarComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NavbarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/navbar/navbar.component.ts

+import { Component, OnInit, ElementRef } from '@angular/core';
+import { ROUTES } from '../sidebar/sidebar.component';
+import {Location, LocationStrategy, PathLocationStrategy} from '@angular/common';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-navbar',
+  templateUrl: './navbar.component.html',
+  styleUrls: ['./navbar.component.css']
+})
+export class NavbarComponent implements OnInit {
+    private listTitles: any[];
+    location: Location;
+      mobile_menu_visible: any = 0;
+    private toggleButton: any;
+    private sidebarVisible: boolean;
+
+    constructor(location: Location,  private element: ElementRef, private router: Router) {
+      this.location = location;
+          this.sidebarVisible = false;
+    }
+
+    ngOnInit(){
+      this.listTitles = ROUTES.filter(listTitle => listTitle);
+      const navbar: HTMLElement = this.element.nativeElement;
+      this.toggleButton = navbar.getElementsByClassName('navbar-toggler')[0];
+      this.router.events.subscribe((event) => {
+         var $layer: any = document.getElementsByClassName('close-layer')[0];
+         if ($layer) {
+           $layer.remove();
+           this.mobile_menu_visible = 0;
+         }
+     });
+    }
+
+ 
+
+    getTitle(){
+      var titlee = this.location.prepareExternalUrl(this.location.path());
+      if(titlee.charAt(0) === '#'){
+          titlee = titlee.slice( 1 );
+      }
+
+      for(var item = 0; item < this.listTitles.length; item++){
+          if(this.listTitles[item].path === titlee){
+              return this.listTitles[item].title;
+          }
+      }
+      return 'Dashboard';
+    }
+}

src/app/components/sidebar/sidebar.component.css

+.logo img{
+    width: 180px;
+
+}

src/app/components/sidebar/sidebar.component.html

+<div class="logo">
+    <img class="mx-auto d-block" src="/assets/img/LogoEspePay.png" alt="Logo - ESPE" />
+</div>
+<div class="sidebar-wrapper">
+    <ul class="nav">
+        <li routerLinkActive="active" *ngFor="let menuItem of menuItems" class="{{menuItem.class}} nav-item">
+            <a class="nav-link" [routerLink]="[menuItem.path]">
+                <i class="material-icons">{{menuItem.icon}}</i>
+                <p>{{menuItem.title}}</p>
+            </a>
+        </li>
+    </ul>
+</div>

src/app/components/sidebar/sidebar.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SidebarComponent } from './sidebar.component';
+
+describe('SidebarComponent', () => {
+  let component: SidebarComponent;
+  let fixture: ComponentFixture<SidebarComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SidebarComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SidebarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/sidebar/sidebar.component.ts

+import { Component, OnInit } from '@angular/core';
+
+declare const $: any;
+
+declare interface RouteInfo {
+  path: string;
+  title: string;
+  icon: string;
+  class: string;
+}
+export const ROUTES: RouteInfo[] = [
+ // { path: '/maps', title: 'Maps', icon: 'location_on', class: '' },
+ //{ path: '/add-orden', title: 'Nueva orden', icon: 'library_add', class: '' },
+ 
+ { path: '/add-proveedor', title: 'Nuevo proveedor', icon: 'library_add', class: '' },
+ { path: '/list-proveedor', title: 'Lista de proveedores', icon: 'list', class: '' },
+ 
+ { path: '/add-empleado', title: 'Nuevo empleado', icon: 'library_add', class: '' },
+ { path: '/list-empleado', title: 'Lista de empleados', icon: 'list', class: '' },
+
+ { path: '/add-item', title: 'Nuevo Item', icon: 'library_add', class: '' },
+ { path: '/list-item', title: 'Lista de Items', icon: 'list', class: '' },
+
+ { path: '/add-contrato', title: 'Nuevo contrato', icon: 'library_add', class: '' },
+ { path: '/list-contrato', title: 'Lista de contratos', icon: 'list', class: '' },
+
+ { path: '/list-certificado', title: 'Lista de certificados', icon: 'list', class: '' },
+ 
+ { path: '/list-orden', title: 'Lista de ordenes', icon: 'list', class: '' }, 
+];
+
+@Component({
+  selector: 'app-sidebar',
+  templateUrl: './sidebar.component.html',
+  styleUrls: ['./sidebar.component.css']
+})
+export class SidebarComponent implements OnInit {
+  menuItems: any[];
+  constructor() { }
+  ngOnInit() {
+    this.menuItems = ROUTES.filter(menuItem => menuItem);
+  }
+}

src/app/contrato/contrato-add/contrato-add.component.html

+<div class="main-content">
+  <div class="container-fluid">
+    <div class="card">
+      <div class="card-header card-header-danger">
+        <h4 class="card-title">Agregar Contrato</h4>
+      </div>
+      <div class="card-body">
+        <form (ngSubmit)="onSubmit()">
+          <div class="row">
+            <div class="col-2">
+              <label class="font-weight-bold">Forma de pago del contrato:</label>
+              <select [(ngModel)]="contrato.id_formapago" name="id_formapago" id="id_formapago" class="form-control"
+                class="select-css">
+                <option *ngFor='let fp of fpcontrato' value={{fp.id}}>{{fp.fp_descripcion}}</option>
+              </select>
+            </div>
+            <div class="col-6">
+              <label class="font-weight-bold">Proveedor:</label>
+              <select [(ngModel)]="contrato.id_proveedor" name="id_proveedor" id="id_proveedor" class="form-control" style="width: auto;"
+                class="select-css">
+                <option *ngFor='let proveedor of proveedores' value={{proveedor.id}}>{{proveedor.pro_nombre}}</option>
+              </select>
+            </div>
+            <div class="col-4">
+              <label class="font-weight-bold">Administrador:</label>
+              <select [(ngModel)]="contrato.id_adm" name="con_adm" id="con_adm" class="form-control" style="width: auto;"
+                class="select-css">
+                <option *ngFor='let adm of admin' value={{adm.id}}>{{adm.tra_titulo}}. {{adm.tra_nombre}} {{adm.tra_apellido}}</option>
+              </select>
+            </div>
+            <div class="col-4">
+              <label class="font-weight-bold">Número de Contrato</label>
+              <div>
+                <input [(ngModel)]="contrato.con_numero" type="text" id="con_numero" name="con_numero"
+                  class="outlinenone" required />
+              </div>
+            </div>
+            <div class="col-4">
+              <label class="font-weight-bold">Fecha</label>
+              <div>
+                <input [(ngModel)]="contrato.con_fecha" type="date" id="con_fecha" name="con_fecha" class="outlinenone"
+                  required />
+              </div>
+            </div>
+            <div class="col-4">
+              <label class="font-weight-bold">Objeto de contratación</label>
+              <div>
+                <input [(ngModel)]="contrato.con_objeto" type="text" placeholder="Ingrese el objeto de contratación"
+                  id="con_objeto" name="con_objeto" class="outlinenone" required />
+              </div>
+            </div>
+            <div class="col-4">
+              <label class="font-weight-bold">Valor del contrato</label>
+              <div>
+                <input [(ngModel)]="contrato.con_valor" type="number" placeholder="$" id="con_valor" name="con_valor"
+                  class="outlinenone" maxlength="13" required />
+              </div>
+            </div>
+            <div class="col-4">
+              <label class="font-weight-bold">Implementación</label>
+              <div>
+                <input [(ngModel)]="contrato.con_implementacion" type="number" placeholder="$" id="con_implementacion"
+                  name="con_implementacion" class="outlinenone" maxlength="13" required />
+              </div>
+            </div>
+            <div class="col-4">
+              <label class="font-weight-bold">Plazo de Instalación</label>
+              <div>
+                <input [(ngModel)]="contrato.con_instalacion" type="number" placeholder="dias de instalación"
+                  id="con_instalacion" name="con_instalacion" class="outlinenone" maxlength="13" required />
+              </div>
+            </div>
+            <div class="col-4">
+              <label class="font-weight-bold">Fin plazo contractual</label>
+              <div>
+                <input [(ngModel)]="contrato.con_fin_contractual" type="date" id="con_fin_contractual"
+                  name="con_fin_contractual" class="outlinenone" required />
+              </div>
+            </div>
+            <div class="col-4">
+              <label class="font-weight-bold">Fecha de Inicio de servicio</label>
+              <div>
+                <input [(ngModel)]="contrato.con_inicio_servicio" type="date" id="con_inicio_servicio"
+                  name="con_inicio_servicio" class="outlinenone" required />
+              </div>
+            </div>
+            <div class="col-4">
+              <label class="font-weight-bold">Fecha de Fin de servicio</label>
+              <div>
+                <input [(ngModel)]="contrato.con_fin_servicio" type="date" id="con_fin_servicio" name="con_fin_servicio"
+                  class="outlinenone" required />
+              </div>
+            </div>
+            <div class="col-4">
+              <label class="font-weight-bold">Vigencia del contrato en días</label>
+              <div>
+                <input [(ngModel)]="contrato.con_duracion_dias" type="number" placeholder="tiempo de duración"
+                  id="con_duracion_dias" name="con_duracion_dias" class="outlinenone" maxlength="10" required />
+              </div>
+            </div>
+            <div class="col-4">
+              <label class="font-weight-bold">Vigencia del contrato en meses</label>
+              <div>
+                <input [(ngModel)]="contrato.con_duracion_meses" type="number" placeholder="tiempo de duración"
+                  id="con_duracion_meses" name="con_duracion_meses" class="outlinenone"  maxlength="10" required />
+              </div>
+            </div>
+          </div>
+          <button type="submit" class="btn btn-success">Guardar</button>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file

src/app/contrato/contrato-add/contrato-add.component.scss

+.select-css {
+    display: block;
+    font-size: 16px;
+    font-family: 'Arial', sans-serif;
+    font-weight: 400;
+    color: #444;
+    line-height: 1.3;
+    padding: .4em 1.4em .3em .8em;
+    width: 150px;
+    max-width: 100%;
+    box-sizing: border-box;
+    margin: 0;
+    border: 1px solid #aaa;
+    box-shadow: 0 1px 0 1px rgba(0, 0, 0, .03);
+    border-radius: .3em;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    background-color: #fff;
+    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'), linear-gradient(to bottom, #ffffff 0%, #f7f7f7 100%);
+    background-repeat: no-repeat, repeat;
+    background-position: right .7em top 50%, 0 0;
+    background-size: .65em auto, 100%;
+}
+
+.select-css::-ms-expand {
+    display: none;
+}
+
+.select-css:hover {
+    border-color: #888;
+}
+
+.select-css:focus {
+    border-color: #aaa;
+    box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
+    box-shadow: 0 0 0 3px -moz-mac-focusring;
+    color: #222;
+    outline: none;
+}
+
+.select-css option {
+    font-weight: normal;
+}
+
+input {
+    display: block;
+    width: 100%;
+    padding: .6em .8em;
+    margin-bottom: .5em;
+    font-size: 1.1em;
+    color: #1C2E36;
+    border: 1px solid rgb(7, 7, 7);
+    border-radius: 10px 10px 10px 10px;
+    -moz-border-radius: 10px 10px 10px 10px;
+    -webkit-border-radius: 10px 10px 10px 10px;
+    border: 1px solid #aaa;
+}
+
+input:focus {
+    background-color: rgb(255, 255, 255);
+    outline: 0;
+}
+
+input:placeholder-shown {
+    background-color: #FAFBFC;
+}
+
+input::-webkit-input-placeholder {
+    color: #A4B3B7;
+}
\ No newline at end of file

src/app/contrato/contrato-add/contrato-add.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ContratoAddComponent } from './contrato-add.component';
+
+describe('ContratoAddComponent', () => {
+  let component: ContratoAddComponent;
+  let fixture: ComponentFixture<ContratoAddComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ContratoAddComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ContratoAddComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/contrato/contrato-add/contrato-add.component.ts

+import { Component, OnInit } from '@angular/core';
+import { Empleado } from 'app/models/empleado';
+import { Proveedor } from 'app/models/proveedor';
+import { Contrato } from 'app/models/contrato';
+import { Router } from '@angular/router';
+import { FormBuilder } from '@angular/forms';
+import { ContratoService } from 'app/services/contrato.service';
+import { ProveedorService } from 'app/services/proveedor.service';
+import { TipoContrato } from 'app/models/tipo-contrato';
+import { TipoContratoService } from 'app/services/tipo-contrato.service';
+import { EmpleadoService } from 'app/services/empleado.service';
+
+@Component({
+  selector: 'app-contrato-add',
+  templateUrl: './contrato-add.component.html',
+  styleUrls: ['./contrato-add.component.scss']
+})
+
+export class ContratoAddComponent implements OnInit {
+  fpcontrato: TipoContrato[];
+  proveedores: Proveedor[];
+  admin: Empleado[];
+  contrato: Contrato = new Contrato();
+  submitted = false;
+  constructor(
+    private router: Router,
+    private formBuilder: FormBuilder,
+    private contratoService: ContratoService,
+    private proveedorService: ProveedorService,
+    private fpService: TipoContratoService,
+    private emmpleadoService: EmpleadoService
+  ) {}
+
+  ngOnInit() {
+    this.getProveedores();
+    this.getTipoContrato();
+    this.getEmpleado();
+
+  }
+
+  newContrato(): void {
+    this.submitted = false;
+    this.contrato = new Contrato();
+  }
+
+  save() {
+    this.contratoService.createContrato(this.contrato)
+      .subscribe();
+    this.contrato = new Contrato();
+    this.gotoList();
+  }
+
+  onSubmit() {
+    this.submitted = true;
+    this.save();
+  }
+
+  gotoList() {
+    this.router.navigate(['list-contrato']);
+  }
+
+  getProveedores() {
+    this.proveedorService.getProveedoresList().subscribe((data: Proveedor[]) => {
+      this.proveedores = data;
+    }, (error) => {
+      alert('A ocurrido un error al obtener proveedores');
+    });
+  }
+  getTipoContrato() {
+    this.fpService.getTiposList().subscribe((data: TipoContrato[]) => {
+      this.fpcontrato = data;
+    }, (error) => {
+      alert('A ocurrido un error al obtener las formas de pago');
+    });
+  }
+  getEmpleado() {
+    this.emmpleadoService.getEmpleadosList().subscribe((data: Empleado[]) => {
+      this.admin = data;
+    }, (error) => {
+      alert('A ocurrido un error al obtener los administradores')
+    });
+  }
+}

src/app/contrato/contrato-detail/contrato-detail.component.html

+<div class="main-content">
+  <div class="container-fluid">
+    <div class="card">
+      <div class="card-header card-header-danger">
+        <h4 class="card-title">Detalle Contrato</h4>
+      </div>
+      <div class="card-body">
+        <div class="card-body" *ngIf="contrato">
+         <div class="row">
+          <div class="col-2">
+            <label class="font-weight-bold">Forma de pago del contrato:</label>
+            <input type="text" value={{contrato[0].uzftformapago_DESCRIPCION}} class="outlinenone" readonly>
+          </div>
+          <div class="col-4">
+            <label class="font-weight-bold">Proveedor:</label>
+            <input type="text" value={{contrato[0].uzftproveedor_NOMBRE}} class="outlinenone" readonly>
+          </div>
+          <div class="col-4">
+            <label class="font-weight-bold">Administrador:</label>
+            <input type="text" value = '{{contrato[0].uzfttrabajador_TITULO}} {{contrato[0].uzfttrabajador_NOMBRES}} {{contrato[0].uzfttrabajador_APELLIDOS}}' class="outlinenone" readonly>
+          </div>
+          <div class="col-4">
+            <label class="font-weight-bold">Número de Contrato</label>
+            <div>
+              <input type="text" value={{contrato[0].uzftcontrato_NUMERO}} class="outlinenone" readonly>
+            </div>
+          </div>
+          <div class="col-4">
+            <label class="font-weight-bold">Fecha</label>
+            <div>
+              <input type="text" value={{contrato[0].uzftcontrato_FECHA}} class="outlinenone" readonly>
+            </div>
+          </div>
+          <div class="col-4">
+            <label class="font-weight-bold">Objeto de contratación</label>
+            <div>
+              <input type="text" value={{contrato[0].uzftcontrato_OBJETO}} class="outlinenone" readonly>
+            </div>
+          </div>
+          <div class="col-4">
+            <label class="font-weight-bold">Valor del contrato</label>
+            <div>
+              <input type="text" value={{contrato[0].uzftcontrato_VALOR}} class="outlinenone" readonly>
+            </div>
+          </div>
+          <div class="col-4">
+            <label class="font-weight-bold">Implementación</label>
+            <div>
+              <input type="text" value={{contrato[0].uzftcontrato_IMPLEMENTACION}} class="outlinenone" readonly>
+            </div>
+          </div>
+          <div class="col-4">
+            <label class="font-weight-bold">Plazo de Instalación</label>
+            <div>
+              <input type="text" value={{contrato[0].uzftcontrato_INSTALACION}} class="outlinenone" readonly>
+            </div>
+          </div>
+          <div class="col-4">
+            <label class="font-weight-bold">Fin plazo contractual</label>
+            <div>
+              <input type="text" value={{contrato[0].uzftcontrato_FIN_CONTRACTUAL}} class="outlinenone" readonly>
+            </div>
+          </div>
+          <div class="col-4">
+            <label class="font-weight-bold">Fecha de Inicio de servicio</label>
+            <div>
+              <input type="text" value={{contrato[0].uzftcontrato_INICIO_SERVICIO}} class="outlinenone" readonly>
+            </div>
+          </div>
+          <div class="col-4">
+            <label class="font-weight-bold">Fecha de Fin de servicio</label>
+            <div>
+              <input type="text" value={{contrato[0].uzftcontrato_FIN_SERVICIO}} class="outlinenone" readonly>
+            </div>
+          </div>
+          <div class="col-4">
+            <label class="font-weight-bold">Vigencia del contrato en días</label>
+            <div>
+              <input type="text" value={{contrato[0].uzftcontrato_VIGENCIA_DIAS}} class="outlinenone" readonly>
+            </div>
+          </div>
+          <div class="col-4">
+            <label class="font-weight-bold">Vigencia del contrato en meses</label>
+            <div>
+              <input type="text" value={{contrato[0].uzftcontrato_VIGENCIA_MESES}} class="outlinenone" readonly>
+            </div>
+          </div>
+         </div>
+        </div>
+        <button (click)="list()" class="btn btn-primary">Regresar</button>
+      </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file

src/app/contrato/contrato-detail/contrato-detail.component.scss

+.select-css {
+    display: block;
+    font-size: 16px;
+    font-family: 'Arial', sans-serif;
+    font-weight: 400;
+    color: #444;
+    line-height: 1.3;
+    padding: .4em 1.4em .3em .8em;
+    width: 150px;
+    max-width: 100%;
+    box-sizing: border-box;
+    margin: 0;
+    border: 1px solid #aaa;
+    box-shadow: 0 1px 0 1px rgba(0, 0, 0, .03);
+    border-radius: .3em;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    background-color: #fff;
+    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'), linear-gradient(to bottom, #ffffff 0%, #f7f7f7 100%);
+    background-repeat: no-repeat, repeat;
+    background-position: right .7em top 50%, 0 0;
+    background-size: .65em auto, 100%;
+}
+
+.select-css::-ms-expand {
+    display: none;
+}
+
+.select-css:hover {
+    border-color: #888;
+}
+
+.select-css:focus {
+    border-color: #aaa;
+    box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
+    box-shadow: 0 0 0 3px -moz-mac-focusring;
+    color: #222;
+    outline: none;
+}
+
+.select-css option {
+    font-weight: normal;
+}
+
+input {
+    display: block;
+    width: 100%;
+    padding: .6em .8em;
+    margin-bottom: .5em;
+    font-size: 1.1em;
+    color: #1C2E36;
+    border: 1px solid rgb(7, 7, 7);
+    border-radius: 10px 10px 10px 10px;
+    -moz-border-radius: 10px 10px 10px 10px;
+    -webkit-border-radius: 10px 10px 10px 10px;
+    border: 1px solid #aaa;
+}
+
+input:focus {
+    background-color: rgb(255, 255, 255);
+    outline: 0;
+}
+
+input:placeholder-shown {
+    background-color: #FAFBFC;
+}
+
+input::-webkit-input-placeholder {
+    color: #A4B3B7;
+}
\ No newline at end of file

src/app/contrato/contrato-detail/contrato-detail.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ContratoDetailComponent } from './contrato-detail.component';
+
+describe('ContratoDetailComponent', () => {
+  let component: ContratoDetailComponent;
+  let fixture: ComponentFixture<ContratoDetailComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ContratoDetailComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ContratoDetailComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/contrato/contrato-detail/contrato-detail.component.ts

+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { ContratoService } from 'app/services/contrato.service';
+import { Contra } from 'app/models/inner/contra';
+
+@Component({
+  selector: 'app-contrato-detail',
+  templateUrl: './contrato-detail.component.html',
+  styleUrls: ['./contrato-detail.component.scss']
+})
+export class ContratoDetailComponent implements OnInit {
+
+  id: number;
+contrato: Contra;
+  constructor(private route: ActivatedRoute,
+    private router: Router,
+    private cs: ContratoService ){ }
+
+  ngOnInit() {
+    this.contrato = new Contra();
+    this.id = this.route.snapshot.params['id'];
+    this.datos();
+  }
+  list(){
+    this.router.navigate(['list-contrato']);
+  }
+  datos(){
+   this.cs.getContratosF(this.id)
+   .subscribe(data => {
+    this.contrato = data;
+  }, error => console.log(error));
+  }
+
+}

src/app/contrato/contrato-edit/contrato-edit.component.html

+<div class="main-content">
+  <div class="container-fluid">
+    <div class="card">
+      <div class="card-header card-header-danger">
+        <h4 class="card-title">Editando Contrato</h4>
+      </div>
+      <div class="card-body">
+        <form (ngSubmit)="update()">
+          <div class="row">
+            <div class="col-2">
+              <label class="font-weight-bold">Forma de pago del contrato:</label>
+              <select [(ngModel)]="contrato.id_formapago" name="id_formapago" id="id_formapago" class="form-control"
+                class="select-css">
+                <option *ngFor='let fp of fpcontrato' value={{fp.id}}>{{fp.fp_descripcion}}</option>
+              </select>
+            </div>
+            <div class="col-4">
+              <label class="font-weight-bold">Proveedor:</label>
+              <select [(ngModel)]="contrato.id_proveedor" name="id_proveedor" id="id_proveedor" class="form-control"
+                class="select-css">
+                <option *ngFor='let proveedor of proveedores' value={{proveedor.id}}>{{proveedor.pro_nombre}}</option>
+              </select>
+            </div>
+            <div class="col-4">
+              <label class="font-weight-bold">Administrador:</label>
+              <select [(ngModel)]="contrato.id_adm" name="con_adm" id="con_adm" class="form-control"
+                class="select-css">
+                <option *ngFor='let adm of admin' value={{adm.id}}>{{adm.tra_titulo}}. {{adm.tra_nombre}} {{adm.tra_apellido}}</option>
+              </select>
+            </div>
+            <div class="col-4">
+              <label class="font-weight-bold">Número de Contrato</label>
+              <div>
+                <input [(ngModel)]="contrato.con_numero" type="text" id="con_numero" name="con_numero"
+                  class="outlinenone" required />
+              </div>
+            </div>
+            <div class="col-4">
+              <label class="font-weight-bold">Fecha</label>
+              <div>
+                <input [(ngModel)]="contrato.con_fecha" type="date" id="con_fecha" name="con_fecha" class="outlinenone"
+                  required />
+              </div>
+            </div>
+            <div class="col-4">
+              <label class="font-weight-bold">Objeto de contratación</label>
+              <div>
+                <input [(ngModel)]="contrato.con_objeto" type="text" placeholder="Ingrese el objeto de contratación"
+                  id="con_objeto" name="con_objeto" class="outlinenone" required />
+              </div>
+            </div>
+            <div class="col-4">
+              <label class="font-weight-bold">Valor del contrato</label>
+              <div>
+                <input [(ngModel)]="contrato.con_valor" type="number" placeholder="$" id="con_valor" name="con_valor"
+                  class="outlinenone" required />
+              </div>
+            </div>
+            <div class="col-4">
+              <label class="font-weight-bold">Implementación</label>
+              <div>
+                <input [(ngModel)]="contrato.con_implementacion" type="number" placeholder="$" id="con_implementacion"
+                  name="con_implementacion" class="outlinenone" required />
+              </div>
+            </div>
+            <div class="col-4">
+              <label class="font-weight-bold">Plazo de Instalación</label>
+              <div>
+                <input [(ngModel)]="contrato.con_instalacion" type="number" placeholder="dias de instalación"
+                  id="con_instalacion" name="con_instalacion" class="outlinenone" required />
+              </div>
+            </div>
+            <div class="col-4">
+              <label class="font-weight-bold">Fin plazo contractual</label>
+              <div>
+                <input [(ngModel)]="contrato.con_fin_contractual" type="date" id="con_fin_contractual"
+                  name="con_fin_contractual" class="outlinenone" required />
+              </div>
+            </div>
+            <div class="col-4">
+              <label class="font-weight-bold">Fecha de Inicio de servicio</label>
+              <div>
+                <input [(ngModel)]="contrato.con_inicio_servicio" type="date" id="con_inicio_servicio"
+                  name="con_inicio_servicio" class="outlinenone" required />
+              </div>
+            </div>
+            <div class="col-4">
+              <label class="font-weight-bold">Fecha de Fin de servicio</label>
+              <div>
+                <input [(ngModel)]="contrato.con_fin_servicio" type="date" id="con_fin_servicio" name="con_fin_servicio"
+                  class="outlinenone" required />
+              </div>
+            </div>
+            <div class="col-4">
+              <label class="font-weight-bold">Vigencia del contrato en días</label>
+              <div>
+                <input [(ngModel)]="contrato.con_duracion_dias" type="number" placeholder="tiempo de duración"
+                  id="con_duracion_dias" name="con_duracion_dias" class="outlinenone" required />
+              </div>
+            </div>
+            <div class="col-4">
+              <label class="font-weight-bold">Vigencia del contrato en meses</label>
+              <div>
+                <input [(ngModel)]="contrato.con_duracion_meses" type="number" placeholder="tiempo de duración"
+                  id="con_duracion_meses" name="con_duracion_meses" class="outlinenone" required />
+              </div>
+            </div>
+          </div>
+          <button type="submit" class="btn btn-success">Guardar</button>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file

src/app/contrato/contrato-edit/contrato-edit.component.scss

+.select-css {
+    display: block;
+    font-size: 16px;
+    font-family: 'Arial', sans-serif;
+    font-weight: 400;
+    color: #444;
+    line-height: 1.3;
+    padding: .4em 1.4em .3em .8em;
+    width: 150px;
+    max-width: 100%;
+    box-sizing: border-box;
+    margin: 0;
+    border: 1px solid #aaa;
+    box-shadow: 0 1px 0 1px rgba(0, 0, 0, .03);
+    border-radius: .3em;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    background-color: #fff;
+    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'), linear-gradient(to bottom, #ffffff 0%, #f7f7f7 100%);
+    background-repeat: no-repeat, repeat;
+    background-position: right .7em top 50%, 0 0;
+    background-size: .65em auto, 100%;
+}
+
+.select-css::-ms-expand {
+    display: none;
+}
+
+.select-css:hover {
+    border-color: #888;
+}
+
+.select-css:focus {
+    border-color: #aaa;
+    box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
+    box-shadow: 0 0 0 3px -moz-mac-focusring;
+    color: #222;
+    outline: none;
+}
+
+.select-css option {
+    font-weight: normal;
+}
+
+input {
+    display: block;
+    width: 100%;
+    padding: .6em .8em;
+    margin-bottom: .5em;
+    font-size: 1.1em;
+    color: #1C2E36;
+    border: 1px solid rgb(7, 7, 7);
+    border-radius: 10px 10px 10px 10px;
+    -moz-border-radius: 10px 10px 10px 10px;
+    -webkit-border-radius: 10px 10px 10px 10px;
+    border: 1px solid #aaa;
+}
+
+input:focus {
+    background-color: rgb(255, 255, 255);
+    outline: 0;
+}
+
+input:placeholder-shown {
+    background-color: #FAFBFC;
+}
+
+input::-webkit-input-placeholder {
+    color: #A4B3B7;
+}
\ No newline at end of file

src/app/contrato/contrato-edit/contrato-edit.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ContratoEditComponent } from './contrato-edit.component';
+
+describe('ContratoEditComponent', () => {
+  let component: ContratoEditComponent;
+  let fixture: ComponentFixture<ContratoEditComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ContratoEditComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ContratoEditComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/contrato/contrato-edit/contrato-edit.component.ts

+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { FormBuilder } from '@angular/forms';
+import { ContratoService } from 'app/services/contrato.service';
+import { Contrato } from 'app/models/contrato';
+import { ProveedorService } from 'app/services/proveedor.service';
+import { Proveedor } from 'app/models/proveedor';
+import { EmpleadoService } from 'app/services/empleado.service';
+import { Empleado } from 'app/models/empleado';
+import { TipoContratoService } from 'app/services/tipo-contrato.service';
+import { TipoContrato } from 'app/models/tipo-contrato';
+
+@Component({
+  selector: 'app-contrato-edit',
+  templateUrl: './contrato-edit.component.html',
+  styleUrls: ['./contrato-edit.component.scss']
+})
+export class ContratoEditComponent implements OnInit {
+  fpcontrato: TipoContrato[];
+  proveedores: Proveedor[];
+  admin: Empleado[];
+  
+id: number;
+contrato: Contrato;
+  constructor( private route: ActivatedRoute,
+    private router: Router,
+    private formBuilder: FormBuilder,
+    private contratoService: ContratoService,
+    private proveedorService: ProveedorService,
+    private fpService: TipoContratoService,
+    private emmpleadoService: EmpleadoService
+      ) {
+        
+       }
+
+  ngOnInit() {
+    this.getProveedores();
+    this.getTipoContrato();
+    this.getEmpleado();
+
+    this.contrato = new Contrato();
+    this.id = this.route.snapshot.params['id'];
+    this.contratoService.getContrato(this.id)
+      .subscribe(data => {
+        console.log(data)
+        this.contrato = data;
+      }, error => console.log(error));
+  }
+  
+  update() {
+    this.contratoService.updateContrato(this.id, this.contrato)
+      .subscribe(data => console.log(data), error => console.log(error));
+    this.contrato = new Contrato();
+    this.router.navigate(['list-contrato']);
+  }
+
+  getProveedores() {
+    this.proveedorService.getProveedoresList().subscribe((data: Proveedor[]) => {
+      this.proveedores = data;
+    }, (error) => {
+      alert('A ocurrido un error al obtener proveedores');
+    });
+  }
+  getTipoContrato() {
+    this.fpService.getTiposList().subscribe((data: TipoContrato[]) => {
+      this.fpcontrato = data;
+    }, (error) => {
+      alert('A ocurrido un error al obtener las formas de pago');
+    });
+  }
+  getEmpleado() {
+    this.emmpleadoService.getEmpleadosList().subscribe((data: Empleado[]) => {
+      this.admin = data;
+    }, (error) => {
+      alert('A ocurrido un error al obtener los administradores')
+    });
+  }
+}

src/app/contrato/contrato-list/contrato-list.component.html

+<div class="main-content">
+  <div class="container-fluid">
+    <div class="card">
+      <div class="card-header card-header-danger">
+        <h4 class="card-title">Ordenes De Gasto</h4>
+        <p class="card-category">Sistema para generar órdenes de pagos ESPE.</p>
+      </div>
+      <div class="tbl-header">
+        <table class="table table-striped">
+          <thead>
+            <tr>
+              <th>Objeto de Contratación</th>
+              <th>Forma de pago</th>
+              <th>Proveedor</th>
+              <th>Administrador</th>
+              <th colspan="4">Acciones</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr *ngFor="let contrato of contra  | async">
+              <td>{{contrato.uzftcontrato_OBJETO}}</td>
+              <td>{{contrato.uzftformapago_DESCRIPCION }}</td>
+              <td>{{contrato.uzftproveedor_NOMBRE}}</td>
+              <td>{{contrato.uzfttrabajador_TITULO}}. {{contrato.uzfttrabajador_NOMBRES}} {{contrato.uzfttrabajador_APELLIDOS}}</td>
+              <td>
+                <img (click)="contratoDetails(contrato.uzftcontrato_ID)" src="../../assets/img/detalle.png"
+                  alt="new-img" height="25" width="25">
+              </td>
+              <td>
+                <img (click)="contratoEdit(contrato.uzftcontrato_ID)" src="../../assets/img/editar.png" alt="new-img"
+                  height="25" width="25">
+              </td>
+              <td>
+                <img (click)="deleteContrato(contrato.uzftcontrato_ID)" src="../../assets/img/borrar.png" alt="new-img"
+                  height="25" width="25">
+              </td>
+              <td>
+                <img (click)="certificadoAdd(contrato.uzftcontrato_ID)" src="../../assets/img/agregar.JPG" alt="new-img"
+                  height="25" width="25">
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file

src/app/contrato/contrato-list/contrato-list.component.scss

+.select-css {
+    display: block;
+    font-size: 16px;
+    font-family: 'Arial', sans-serif;
+    font-weight: 400;
+    color: #444;
+    line-height: 1.3;
+    padding: .4em 1.4em .3em .8em;
+    width: 150px;
+    max-width: 100%;
+    box-sizing: border-box;
+    margin: 0;
+    border: 1px solid #aaa;
+    box-shadow: 0 1px 0 1px rgba(0, 0, 0, .03);
+    border-radius: .3em;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    background-color: #fff;
+    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'), linear-gradient(to bottom, #ffffff 0%, #f7f7f7 100%);
+    background-repeat: no-repeat, repeat;
+    background-position: right .7em top 50%, 0 0;
+    background-size: .65em auto, 100%;
+}
+
+.select-css::-ms-expand {
+    display: none;
+}
+
+.select-css:hover {
+    border-color: #888;
+}
+
+.select-css:focus {
+    border-color: #aaa;
+    box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
+    box-shadow: 0 0 0 3px -moz-mac-focusring;
+    color: #222;
+    outline: none;
+}
+
+.select-css option {
+    font-weight: normal;
+}
+
+input {
+    display: block;
+    width: 100%;
+    padding: .6em .8em;
+    margin-bottom: .5em;
+    font-size: 1.1em;
+    color: #1C2E36;
+    border: 1px solid rgb(7, 7, 7);
+    border-radius: 10px 10px 10px 10px;
+    -moz-border-radius: 10px 10px 10px 10px;
+    -webkit-border-radius: 10px 10px 10px 10px;
+    border: 1px solid #aaa;
+}
+
+input:focus {
+    background-color: rgb(255, 255, 255);
+    outline: 0;
+}
+
+input:placeholder-shown {
+    background-color: #FAFBFC;
+}
+
+input::-webkit-input-placeholder {
+    color: #A4B3B7;
+}
\ No newline at end of file

src/app/contrato/contrato-list/contrato-list.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ContratoListComponent } from './contrato-list.component';
+
+describe('ContratoListComponent', () => {
+  let component: ContratoListComponent;
+  let fixture: ComponentFixture<ContratoListComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ContratoListComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ContratoListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/contrato/contrato-list/contrato-list.component.ts

+import { Component, OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
+import { Contra } from 'app/models/inner/contra';
+import { Router } from '@angular/router';
+import { ContratoService } from 'app/services/contrato.service';
+import { HttpClient } from '@angular/common/http';
+
+@Component({
+  selector: 'app-contrato-list',
+  templateUrl: './contrato-list.component.html',
+  styleUrls: ['./contrato-list.component.scss']
+})
+export class ContratoListComponent implements OnInit {
+
+  contra: Observable<Contra[]>;
+
+  constructor(private router: Router,
+    private http: HttpClient,
+    private contratoService:ContratoService) { }
+
+    ngOnInit() {  
+      this.reloadData();
+    }
+  
+    reloadData() {
+      this.contra = this.contratoService.getContratosL();
+    }
+  
+    deleteContrato(id: number) {
+      this.contratoService.deleteContrato(id)
+      .subscribe(
+        data => {
+          console.log(data);
+          this.reloadData();
+        },
+        error => console.log(error));
+    }
+  
+    contratoDetails(id: number){
+      this.router.navigate(['detalle-contrato', id]);
+    }
+  
+    contratoEdit(id: number){
+      this.router.navigate(['editar-contrato', id]);
+    }
+
+    certificadoAdd(id: number){
+      this.router.navigate(['add-certificado', id]);
+    }
+}
\ No newline at end of file

src/app/empleado/empleado-add/empleado-add.component.html

+<div class="main-content">
+    <div class="container-fluid">
+        <div class="card">
+            <div class="card-header card-header-danger">
+                <h4 class="card-title">Agregar Empleado</h4>
+            </div>
+            <div class="card-body">
+                <form (ngSubmit)="onSubmit()">
+                    <div class="row">
+                        <div class="col-4">
+                            <label class="font-weight-bold">Nombres</label>
+                            <div>
+                                <input [(ngModel)]="empleado.tra_nombre" type="text" placeholder="Ingrese el nombre"
+                                    id="tra_nombre" name="tra_nombre" class="outlinenone" required />
+                            </div>
+                        </div>
+                        <div class="col-4">
+                            <label class="font-weight-bold">Apellidos</label>
+                            <div>
+                                <input [(ngModel)]="empleado.tra_apellido" type="text" placeholder="Ingrese el nombre"
+                                    id="tra_apellido" name="tra_apellido" class="outlinenone" required />
+                            </div>
+                        </div>
+                        <div class="col-4">
+                            <label class="font-weight-bold">Titulo</label>
+                            <div>
+                                <input [(ngModel)]="empleado.tra_titulo" type="text" placeholder="Ingrese el abreviado del titulo"
+                                    id="tra_titulo" name="tra_titulo" class="outlinenone" required />
+                            </div>
+                        </div>
+                        <div class="col-4">
+                            <label class="font-weight-bold">Cédula:</label>
+                            <div>
+                                <input [(ngModel)]="empleado.tra_cedula" type="text" placeholder="Ingrese la C.I."
+                                    id="tra_cedula" name="tra_cedula" class="outlinenone" maxlength="10" required />
+                            </div>
+                        </div>
+                        <div class="col-4">
+                            <label class="font-weight-bold">Cargo</label>
+                            <div>
+                                <input [(ngModel)]="empleado.tra_cargo" type="text" placeholder="Ingrese el cargo"
+                                    id="tra_cargo"  name="tra_cargo" class="outlinenone" required />
+                            </div>
+                        </div>
+                    </div>
+                    <button type="submit" class="btn btn-success">Guardar</button>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file

src/app/empleado/empleado-add/empleado-add.component.scss

+.select-css {
+    display: block;
+    font-size: 16px;
+    font-family: 'Arial', sans-serif;
+    font-weight: 400;
+    color: #444;
+    line-height: 1.3;
+    padding: .4em 1.4em .3em .8em;
+    width: 150px;
+    max-width: 100%;
+    box-sizing: border-box;
+    margin: 0;
+    border: 1px solid #aaa;
+    box-shadow: 0 1px 0 1px rgba(0, 0, 0, .03);
+    border-radius: .3em;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    background-color: #fff;
+    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'), linear-gradient(to bottom, #ffffff 0%, #f7f7f7 100%);
+    background-repeat: no-repeat, repeat;
+    background-position: right .7em top 50%, 0 0;
+    background-size: .65em auto, 100%;
+}
+
+.select-css::-ms-expand {
+    display: none;
+}
+
+.select-css:hover {
+    border-color: #888;
+}
+
+.select-css:focus {
+    border-color: #aaa;
+    box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
+    box-shadow: 0 0 0 3px -moz-mac-focusring;
+    color: #222;
+    outline: none;
+}
+
+.select-css option {
+    font-weight: normal;
+}
+
+input {
+    display: block;
+    width: 100%;
+    padding: .6em .8em;
+    margin-bottom: .5em;
+    font-size: 1.1em;
+    color: #1C2E36;
+    border: 1px solid rgb(7, 7, 7);
+    border-radius: 10px 10px 10px 10px;
+    -moz-border-radius: 10px 10px 10px 10px;
+    -webkit-border-radius: 10px 10px 10px 10px;
+    border: 1px solid #aaa;
+}
+
+input:focus {
+    background-color: rgb(255, 255, 255);
+    outline: 0;
+}
+
+input:placeholder-shown {
+    background-color: #FAFBFC;
+}
+
+input::-webkit-input-placeholder {
+    color: #A4B3B7;
+}
\ No newline at end of file

src/app/empleado/empleado-add/empleado-add.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EmpleadoAddComponent } from './empleado-add.component';
+
+describe('EmpleadoAddComponent', () => {
+  let component: EmpleadoAddComponent;
+  let fixture: ComponentFixture<EmpleadoAddComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ EmpleadoAddComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EmpleadoAddComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/empleado/empleado-add/empleado-add.component.ts

+import { Component, OnInit } from '@angular/core';
+import { Empleado } from 'app/models/empleado';
+import { Router } from '@angular/router';
+import { FormBuilder } from '@angular/forms';
+import { EmpleadoService } from 'app/services/empleado.service';
+
+@Component({
+  selector: 'app-empleado-add',
+  templateUrl: './empleado-add.component.html',
+  styleUrls: ['./empleado-add.component.scss']
+})
+export class EmpleadoAddComponent implements OnInit {
+  empleado: Empleado = new Empleado();
+  submitted = false;
+   
+
+  constructor(
+    private router: Router,
+    private formBuilder: FormBuilder,
+    private empleadoService: EmpleadoService
+  ) {}
+
+  ngOnInit() {
+  }
+
+  
+newEmpleado(): void {
+  this.submitted = false;
+  this.empleado = new Empleado();
+}
+
+save() {
+  this.empleadoService.createEmpleado(this.empleado)
+    .subscribe( );
+  this.empleado = new Empleado();
+  this.gotoList();
+}
+
+onSubmit() {
+  this.submitted = true;
+  this.save();    
+}
+
+gotoList() {
+  this.router.navigate(['list-empleado']);
+}
+  
+
+}