Merge branch 'master' of https://bitbucket.org/venbaittech/sparqapi
This commit is contained in:
velz
commit
a3a407360d
@ -74,4 +74,9 @@ $route['saveMaster'] = 'Common_Masters_Controller/saveMaster';
|
||||
$route['login'] = 'Branch_Controller/testAWSS3';
|
||||
|
||||
|
||||
//USER MANAGEMENT
|
||||
$route['getListOfUsers'] = 'User_Management_Controller/listAllUsers';
|
||||
$route['saveNewUser'] = 'User_Management_Controller/saveNewUser';
|
||||
$route['updateExistUser'] = 'User_Management_Controller/updateExistUser';
|
||||
$route['getUsersDetails'] = 'User_Management_Controller/getUsersDetails';
|
||||
|
||||
|
||||
@ -23,8 +23,10 @@ class User_Management_Controller extends REST_Controller {
|
||||
|
||||
public function listAllUsers_get()
|
||||
{
|
||||
|
||||
$result = $this->User_Management_Model->$listAllUsers();
|
||||
//echo "function";
|
||||
|
||||
$result = $this->User_Management_Model->listAllUsers();
|
||||
//echo "result";
|
||||
if($result['data_status'])
|
||||
{
|
||||
$data['dataStatus'] = true;
|
||||
@ -42,20 +44,26 @@ class User_Management_Controller extends REST_Controller {
|
||||
|
||||
public function saveNewUser_post()
|
||||
{
|
||||
$this->load->library('AWS_S3');
|
||||
//print_r($this->post('roles'));die;
|
||||
//print_r($this->post());die;
|
||||
//print_r($_FILES['profilepic']['name']);die;
|
||||
$roles = "";
|
||||
$lender_hierarchy = "";
|
||||
|
||||
//print_r($this->post('roles'));die;
|
||||
if($this->post('roles')){ $roles = $this->post('roles'); }
|
||||
|
||||
if($this->post('lender_hierarchy')){ $lender_hierarchy = $this->post('lender_hierarchy'); }
|
||||
|
||||
|
||||
$records = $this->post('records');
|
||||
$roles = $this->post('roles');
|
||||
$records = json_decode($this->post('records'),true);
|
||||
|
||||
//print_r($records);die;
|
||||
$roles = json_decode($this->post('roles'),true);
|
||||
|
||||
$lender_hierarchy = $this->post('lender_hierarchy');
|
||||
|
||||
if($_FILES['profilepic']['tmp_name'])
|
||||
$lender_hierarchy = json_decode($this->post('lender_hierarchy'),true);
|
||||
//echo $_FILES['profilepic']['name'];die;
|
||||
if(!empty($_FILES['profilepic']['tmp_name']))
|
||||
{
|
||||
|
||||
|
||||
@ -64,7 +72,7 @@ class User_Management_Controller extends REST_Controller {
|
||||
$profilepicname = strtolower($profilepicname);
|
||||
$profilepics3path = "";
|
||||
|
||||
if(array_key_exists('fk_entity_id'),$records)
|
||||
if(array_key_exists('fk_entity_id',$records))
|
||||
{
|
||||
$entity_id = $records['fk_entity_id'];
|
||||
if($entity_id == 1) //1 means sine_edge Profile
|
||||
@ -85,10 +93,10 @@ class User_Management_Controller extends REST_Controller {
|
||||
$key = $profilepics3path;
|
||||
$sourcefile = $profilepic;
|
||||
|
||||
$data = array('bucket_name'=>$bucketname,'key'=>$key,'sourcefile'=>$sourcefile);
|
||||
$s3result= $this->aws_s3->uploadFileToS3Bucket($data);
|
||||
$bucket_data = array('bucket_name'=>$bucketname,'key'=>$key,'sourcefile'=>$sourcefile);
|
||||
$s3result= $this->aws_s3->uploadFileToS3Bucket($bucket_data);
|
||||
|
||||
if(is_object($s3result) && $s3result['ObjectURL'] != '' && [$s3result'@metadata']['statusCode'] == 200)
|
||||
if(is_object($s3result) && $s3result['ObjectURL'] != '' && $s3result['@metadata']['statusCode'] == 200)
|
||||
{
|
||||
$records['profilepic'] = $profilepicname;
|
||||
}
|
||||
@ -103,7 +111,7 @@ class User_Management_Controller extends REST_Controller {
|
||||
|
||||
}
|
||||
|
||||
$user_id = $this->User_Management_Model->saveRecords($recordrs,USERPROFILE);//insert user records and get userid
|
||||
$user_id = $this->User_Management_Model->saveRecords($records,USERPROFILE);//insert user records and get userid
|
||||
|
||||
if($roles != "")
|
||||
{
|
||||
@ -159,12 +167,12 @@ class User_Management_Controller extends REST_Controller {
|
||||
if($this->post('lender_hierarchy')){ $lender_hierarchy = $this->post('lender_hierarchy'); }
|
||||
|
||||
|
||||
$records = $this->post('records');
|
||||
$roles = $this->post('roles');
|
||||
$records = json_decode($this->post('records'),true);
|
||||
$roles = json_decode($this->post('roles'),true);
|
||||
|
||||
$lender_hierarchy = $this->post('lender_hierarchy');
|
||||
$lender_hierarchy = json_decode($this->post('lender_hierarchy'),true);
|
||||
|
||||
if($_FILES['profilepic']['tmp_name'])
|
||||
if(!empty($_FILES['profilepic']['tmp_name']))
|
||||
{
|
||||
|
||||
|
||||
@ -173,7 +181,7 @@ class User_Management_Controller extends REST_Controller {
|
||||
$profilepicname = strtolower($profilepicname);
|
||||
$profilepics3path = "";
|
||||
|
||||
if(array_key_exists('fk_entity_id'),$records)
|
||||
if(array_key_exists('fk_entity_id',$records))
|
||||
{
|
||||
$entity_id = $records['fk_entity_id'];
|
||||
if($entity_id == 1) //1 means sine_edge Profile
|
||||
@ -197,7 +205,7 @@ class User_Management_Controller extends REST_Controller {
|
||||
$data = array('bucket_name'=>$bucketname,'key'=>$key,'sourcefile'=>$sourcefile);
|
||||
$s3result= $this->aws_s3->uploadFileToS3Bucket($data);
|
||||
|
||||
if(is_object($s3result) && $s3result['ObjectURL'] != '' && [$s3result'@metadata']['statusCode'] == 200)
|
||||
if(is_object($s3result) && $s3result['ObjectURL'] != '' && $s3result['@metadata']['statusCode'] == 200)
|
||||
{
|
||||
$records['profilepic'] = $profilepicname;
|
||||
}
|
||||
@ -212,14 +220,14 @@ class User_Management_Controller extends REST_Controller {
|
||||
|
||||
}
|
||||
$where_condition_array = array('userid'=>$records['userid']);
|
||||
$modified = $this->User_Management_Model->updateRecords($recordrs,USERPROFILE,$where_condition_array);//insert user records and get userid
|
||||
$modified = $this->User_Management_Model->updateRecords($records,USERPROFILE,$where_condition_array);//insert user records and get userid
|
||||
|
||||
if($roles != "")
|
||||
{
|
||||
foreach($roles as $role)
|
||||
{
|
||||
|
||||
$this->User_Management_Model->updateRecords(array('isactive'=>0),USERPROFILEROLES,array('userid'=>$records['userid']));
|
||||
$this->User_Management_Model->updateRecords(array('isactive'=>0),USERPROFILEROLES,array('fk_userid'=>$records['userid']));
|
||||
$role_array = array('user_role'=>$role['user_role'],'fk_userid'=>$records['userid']);
|
||||
$this->User_Management_Model->saveRecords($role_array,USERPROFILEROLES);
|
||||
}
|
||||
@ -261,4 +269,27 @@ class User_Management_Controller extends REST_Controller {
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* sriram get roles function
|
||||
*/
|
||||
public function getUsersDetails_post(){
|
||||
|
||||
$userid = $this->post('userid');
|
||||
|
||||
$result = $this->User_Management_Model->getUserDetails($userid);
|
||||
//echo "result";
|
||||
if($result['data_status'])
|
||||
{
|
||||
$data['dataStatus'] = true;
|
||||
$data['status'] = REST_Controller::HTTP_OK;
|
||||
$data['records'] = $result['data'];
|
||||
$this->response($data,REST_Controller::HTTP_OK);
|
||||
}
|
||||
else
|
||||
{
|
||||
$data['dataStatus'] = false;
|
||||
$data['status'] = REST_Controller::HTTP_NO_CONTENT;
|
||||
$this->response($data,REST_Controller::HTTP_NO_CONTENT);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -12,22 +12,34 @@ class User_Management_Model extends SPARQ_Model {
|
||||
|
||||
public function listAllUsers()
|
||||
{
|
||||
|
||||
$result_data = array();
|
||||
|
||||
$this->select('USERPROFILE.userid, USERPROFILE.aws_name, USERPROFILE.first_name, USERPROFILE.last_name, USERPROFILE.email, USERPROFILE.alt_email, USERPROFILE.mobile_no, USERPROFILE.alt_mobile_no, USERPROFILE.addressline1, USERPROFILE.addressline2, USERPROFILE.profilepic, USERPROFILE.createdon, USERPROFILE.fk_createdby,USERPROFILE1.first_name,USERPROFILE1.last_name, USERPROFILE.updatedon, USERPROFILE.fk_updatedby,USERPROFILE2.first_name,USERPROFILE2.last_name, USERPROFILE.fk_entity_id,ENTITY.full_name, USERPROFILE.isactive, USERPROFILE.fk_designation,DESIGNATION.name, USERPROFILE.addressline3, USERPROFILE.fk_city,CITY.name, USERPROFILE.fk_state,STATE.name, USERPROFILE.pincode');
|
||||
$this->db->from(USERPROFILE.'as USERPROFILE');
|
||||
$this->db->join(ENTITY.'as ENTITY','USERPROFILE.fk_entity_id = ENTITY.entity_id and ENTITY.isactive = 1');
|
||||
$this->db->join(DESIGNATION.'as DESIGNATION','USERPROFILE.fk_designation = DESIGNATION.designation_id and DESIGNATION.isactive = 1');
|
||||
$this->db->join(STATE.'as STATE','USERPROFILE.fk_state = STATE.state_id and STATE.isactive = 1');
|
||||
$this->db->join(CITY.'as CITY','USERPROFILE.fk_city = CITY.city_id and CITY.isactive = 1');
|
||||
$this->db->join(USERPROFILE.'as USERPROFILE1','USERPROFILE.fk_createdby = USERPROFILE1.userid and USERPROFILE1.isactive = 1');
|
||||
$this->db->join(USERPROFILE.'as USERPROFILE2','USERPROFILE.fk_updatedby = USERPROFILE2.userid and USERPROFILE2.isactive = 1');
|
||||
$this->db->join(USERPROFILEHIERARCHY.'as USERPROFILEHIERARCHY','USERPROFILE.userid = USERPROFILEHIERARCHY.fk_user_id and LENDERHIERARCHY.isactive = 1','LEFT');
|
||||
$this->db->join(LENDERHIERARCHY.'as LENDERHIERARCHY','USERPROFILEHIERARCHY.user_lender_hierarchy_id = LENDERHIERARCHY.lender_hierarchy_id and LENDERHIERARCHY.isactive = 1');
|
||||
$this->db->join(USERPROFILEROLES.'as USERPROFILEROLES','USERPROFILE.userid = USERPROFILEROLES.fk_user_id and USERPROFILEROLES.isactive = 1');
|
||||
//$this->db->where('USERPROFILE.isactive = 1');
|
||||
$result = $this->db->get()->result_array();
|
||||
$this->db->select('USERPROFILE.userid, USERPROFILE.aws_name, USERPROFILE.first_name as user_first_name, USERPROFILE.last_name as user_last_name, USERPROFILE.email, USERPROFILE.alt_email, USERPROFILE.mobile_no, USERPROFILE.alt_mobile_no, USERPROFILE.addressline1, USERPROFILE.addressline2, USERPROFILE.profilepic, USERPROFILE.createdon, USERPROFILE.fk_createdby,concat(USERPROFILE1.first_name," ",USERPROFILE1.last_name) as created_full_name, USERPROFILE.updatedon, USERPROFILE.fk_updatedby,concat(USERPROFILE2.first_name," ",USERPROFILE2.last_name)as update_full_name, USERPROFILE.fk_entity_id,ENTITY.full_name, USERPROFILE.isactive, USERPROFILE.fk_designation,DESIGNATION.name, USERPROFILE.addressline3, USERPROFILE.fk_city,CITY.name as city_name, USERPROFILE.fk_state,STATE.name as state_name, USERPROFILE.pincode');
|
||||
$this->db->from(USERPROFILE.' as USERPROFILE');
|
||||
$this->db->join(ENTITY.' as ENTITY','USERPROFILE.fk_entity_id = ENTITY.entity_id and ENTITY.isactive = 1','LEFT');
|
||||
$this->db->join(DESIGNATION.' as DESIGNATION','USERPROFILE.fk_designation = DESIGNATION.designation_id and DESIGNATION.isactive = 1');
|
||||
$this->db->join(STATE.' as STATE','USERPROFILE.fk_state = STATE.state_id and STATE.isactive = 1');
|
||||
$this->db->join(CITY.' as CITY','USERPROFILE.fk_city = CITY.city_id and CITY.isactive = 1');
|
||||
$this->db->join(USERPROFILE.' as USERPROFILE1','USERPROFILE.fk_createdby = USERPROFILE1.userid and USERPROFILE1.isactive = 1');
|
||||
$this->db->join(USERPROFILE.' as USERPROFILE2','USERPROFILE.fk_updatedby = USERPROFILE2.userid and USERPROFILE2.isactive = 1','LEFT');
|
||||
$this->db->join(USERPROFILEHIERARCHY.' as USERPROFILEHIERARCHY','USERPROFILE.userid = USERPROFILEHIERARCHY.fk_user_id and USERPROFILEHIERARCHY.isactive = 1','LEFT');
|
||||
$this->db->join(LENDERHIERARCHY.' as LENDERHIERARCHY','USERPROFILEHIERARCHY.user_lender_hierarchy_id = LENDERHIERARCHY.lender_hierarchy_id and LENDERHIERARCHY.isactive = 1','LEFT');
|
||||
|
||||
$this->db->join(ENTITYTYPE.' as ENTITYTYPE','ENTITY.fk_entity_type_id = ENTITYTYPE.entity_type_id and ENTITYTYPE.isactive = 1','LEFT');
|
||||
//$this->db->where('USERPROFILE.isactive = 1');
|
||||
|
||||
|
||||
$result = $this->db->get()->result_array();
|
||||
if($result !=''){
|
||||
|
||||
foreach($result as $key =>$roles){
|
||||
$role = $this->db->get_where(USERPROFILEROLES.' as USERPROFILEROLES',array('fk_userid'=>$roles['userid'],'isactive'=>1))->result_array();
|
||||
array_push($result[$key], $role);
|
||||
}
|
||||
|
||||
}
|
||||
// print_r($result);die;
|
||||
if(count($result) > 0 )
|
||||
{
|
||||
$result_data['data_status'] = true;
|
||||
@ -44,4 +56,38 @@ class User_Management_Model extends SPARQ_Model {
|
||||
|
||||
}
|
||||
|
||||
public function getUserDetails($userid){
|
||||
|
||||
$this->db->select('USERPROFILE.userid, USERPROFILE.aws_name, concat(USERPROFILE.first_name," ", USERPROFILE.last_name) as user_full_name, USERPROFILE.email, USERPROFILE.alt_email, USERPROFILE.mobile_no, USERPROFILE.alt_mobile_no, USERPROFILE.addressline1, USERPROFILE.addressline2, USERPROFILE.profilepic, USERPROFILE.createdon, USERPROFILE.fk_createdby,concat(USERPROFILE1.first_name," ",USERPROFILE1.last_name) as created_full_name, USERPROFILE.updatedon, USERPROFILE.fk_updatedby,concat(USERPROFILE2.first_name," ",USERPROFILE2.last_name)as update_full_name, USERPROFILE.fk_entity_id,ENTITY.full_name, USERPROFILE.isactive, USERPROFILE.fk_designation,DESIGNATION.name, USERPROFILE.addressline3, USERPROFILE.fk_city,CITY.name as city_name, USERPROFILE.fk_state,STATE.name as state_name, USERPROFILE.pincode,USERPROFILEROLES.user_role_id,USERPROFILEROLES.user_role');
|
||||
$this->db->from(USERPROFILE.' as USERPROFILE');
|
||||
$this->db->join(ENTITY.' as ENTITY','USERPROFILE.fk_entity_id = ENTITY.entity_id and ENTITY.isactive = 1','LEFT');
|
||||
$this->db->join(DESIGNATION.' as DESIGNATION','USERPROFILE.fk_designation = DESIGNATION.designation_id and DESIGNATION.isactive = 1');
|
||||
$this->db->join(STATE.' as STATE','USERPROFILE.fk_state = STATE.state_id and STATE.isactive = 1');
|
||||
$this->db->join(CITY.' as CITY','USERPROFILE.fk_city = CITY.city_id and CITY.isactive = 1');
|
||||
$this->db->join(USERPROFILE.' as USERPROFILE1','USERPROFILE.fk_createdby = USERPROFILE1.userid and USERPROFILE1.isactive = 1');
|
||||
$this->db->join(USERPROFILE.' as USERPROFILE2','USERPROFILE.fk_updatedby = USERPROFILE2.userid and USERPROFILE2.isactive = 1','LEFT');
|
||||
$this->db->join(USERPROFILEHIERARCHY.' as USERPROFILEHIERARCHY','USERPROFILE.userid = USERPROFILEHIERARCHY.fk_user_id and USERPROFILEHIERARCHY.isactive = 1','LEFT');
|
||||
$this->db->join(LENDERHIERARCHY.' as LENDERHIERARCHY','USERPROFILEHIERARCHY.user_lender_hierarchy_id = LENDERHIERARCHY.lender_hierarchy_id and LENDERHIERARCHY.isactive = 1','LEFT');
|
||||
$this->db->join(USERPROFILEROLES.' as USERPROFILEROLES','USERPROFILE.userid = USERPROFILEROLES.fk_userid and USERPROFILEROLES.isactive = 1');
|
||||
$this->db->join(ENTITYTYPE.' as ENTITYTYPE','ENTITY.fk_entity_type_id = ENTITYTYPE.entity_type_id and ENTITYTYPE.isactive = 1','LEFT');
|
||||
|
||||
$this->db->where('USERPROFILE.userid',$userid);
|
||||
|
||||
$result = $this->db->get()->result_array();
|
||||
|
||||
if(count($result) > 0 )
|
||||
{
|
||||
$result_data['data_status'] = true;
|
||||
$result_data['data'] = $result;
|
||||
return $result_data;
|
||||
|
||||
}
|
||||
else
|
||||
{
|
||||
$result_data['data_status'] = false;
|
||||
$result_data['data'] = null;
|
||||
return $result_data;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
13
sineedge_front/.editorconfig
Executable file
13
sineedge_front/.editorconfig
Executable file
@ -0,0 +1,13 @@
|
||||
# Editor configuration, see http://editorconfig.org
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
|
||||
[*.md]
|
||||
max_line_length = off
|
||||
trim_trailing_whitespace = false
|
||||
41
sineedge_front/.gitignore
vendored
Executable file
41
sineedge_front/.gitignore
vendored
Executable file
@ -0,0 +1,41 @@
|
||||
# See http://help.github.com/ignore-files/ for more about ignoring files.
|
||||
|
||||
# compiled output
|
||||
/dist
|
||||
/tmp
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
|
||||
# IDEs and editors
|
||||
/.idea
|
||||
.project
|
||||
.classpath
|
||||
.c9/
|
||||
*.launch
|
||||
.settings/
|
||||
*.sublime-workspace
|
||||
|
||||
# IDE - VSCode
|
||||
.vscode/*
|
||||
!.vscode/settings.json
|
||||
!.vscode/tasks.json
|
||||
!.vscode/launch.json
|
||||
!.vscode/extensions.json
|
||||
|
||||
# misc
|
||||
/.sass-cache
|
||||
/connect.lock
|
||||
/coverage/*
|
||||
/libpeerconnection.log
|
||||
npm-debug.log
|
||||
testem.log
|
||||
/typings
|
||||
|
||||
# e2e
|
||||
/e2e/*.js
|
||||
/e2e/*.map
|
||||
|
||||
#System Files
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
170
sineedge_front/angular.json
Executable file
170
sineedge_front/angular.json
Executable file
@ -0,0 +1,170 @@
|
||||
{
|
||||
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
||||
"version": 1,
|
||||
"newProjectRoot": "projects",
|
||||
"projects": {
|
||||
"optima": {
|
||||
"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/quill/dist/quill.snow.css",
|
||||
"node_modules/dragula/dist/dragula.css",
|
||||
"node_modules/leaflet/dist/leaflet.css",
|
||||
"node_modules/angular-calendar/scss/angular-calendar.scss",
|
||||
"node_modules/@swimlane/ngx-datatable/release/index.css",
|
||||
"node_modules/@swimlane/ngx-datatable/release/themes/material.css",
|
||||
"src/assets/fonts/pe/css/pe-icon-set-weather.css",
|
||||
"src/assets/fonts/data-table/icons.css",
|
||||
"src/assets/styles/app.scss",
|
||||
"src/assets/cropper/cropper.css",
|
||||
"src/assets/glyphicons/glyphicons.css",
|
||||
"node_modules/font-awesome/scss/font-awesome.scss",
|
||||
"node_modules/perfect-scrollbar/css/perfect-scrollbar.css",
|
||||
"node_modules/simple-line-icons/scss/simple-line-icons.scss"
|
||||
],
|
||||
"scripts": [
|
||||
"node_modules/jquery/dist/jquery.min.js",
|
||||
"node_modules/tether/dist/js/tether.min.js",
|
||||
"node_modules/hammerjs/hammer.min.js",
|
||||
"node_modules/sortablejs/Sortable.js",
|
||||
"node_modules/chart.js/dist/Chart.bundle.min.js",
|
||||
"src/assets/cropper/cropper.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": "optima:build"
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"browserTarget": "optima:build:production"
|
||||
}
|
||||
}
|
||||
},
|
||||
"extract-i18n": {
|
||||
"builder": "@angular-devkit/build-angular:extract-i18n",
|
||||
"options": {
|
||||
"browserTarget": "optima: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.min.js",
|
||||
"node_modules/tether/dist/js/tether.min.js",
|
||||
"node_modules/hammerjs/hammer.min.js",
|
||||
"node_modules/sortablejs/Sortable.js",
|
||||
"node_modules/chart.js/dist/Chart.bundle.min.js",
|
||||
"src/assets/cropper/cropper.js"
|
||||
],
|
||||
"styles": [
|
||||
"node_modules/quill/dist/quill.snow.css",
|
||||
"node_modules/dragula/dist/dragula.css",
|
||||
"node_modules/leaflet/dist/leaflet.css",
|
||||
"node_modules/angular-calendar/scss/angular-calendar.scss",
|
||||
"node_modules/@swimlane/ngx-datatable/release/index.css",
|
||||
"node_modules/@swimlane/ngx-datatable/release/themes/material.css",
|
||||
"src/assets/fonts/pe/css/pe-icon-set-weather.css",
|
||||
"src/assets/fonts/data-table/icons.css",
|
||||
"src/assets/styles/app.scss",
|
||||
"src/assets/cropper/cropper.css",
|
||||
"src/assets/glyphicons/glyphicons.css",
|
||||
"node_modules/font-awesome/scss/font-awesome.scss",
|
||||
"node_modules/perfect-scrollbar/css/perfect-scrollbar.css",
|
||||
"node_modules/simple-line-icons/scss/simple-line-icons.scss"
|
||||
],
|
||||
"assets": [
|
||||
"src/assets",
|
||||
"src/favicon.ico"
|
||||
]
|
||||
}
|
||||
},
|
||||
"lint": {
|
||||
"builder": "@angular-devkit/build-angular:tslint",
|
||||
"options": {
|
||||
"tsConfig": [
|
||||
"src/tsconfig.app.json",
|
||||
"src/tsconfig.spec.json"
|
||||
],
|
||||
"exclude": []
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"optima-e2e": {
|
||||
"root": "",
|
||||
"sourceRoot": "",
|
||||
"projectType": "application",
|
||||
"architect": {
|
||||
"e2e": {
|
||||
"builder": "@angular-devkit/build-angular:protractor",
|
||||
"options": {
|
||||
"protractorConfig": "./protractor.conf.js",
|
||||
"devServerTarget": "optima:serve"
|
||||
}
|
||||
},
|
||||
"lint": {
|
||||
"builder": "@angular-devkit/build-angular:tslint",
|
||||
"options": {
|
||||
"tsConfig": [
|
||||
"e2e/tsconfig.e2e.json"
|
||||
],
|
||||
"exclude": []
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"defaultProject": "optima",
|
||||
"schematics": {
|
||||
"@schematics/angular:component": {
|
||||
"prefix": "app",
|
||||
"styleext": "scss"
|
||||
},
|
||||
"@schematics/angular:directive": {
|
||||
"prefix": "app"
|
||||
}
|
||||
}
|
||||
}
|
||||
13
sineedge_front/e2e/app.e2e-spec.ts
Executable file
13
sineedge_front/e2e/app.e2e-spec.ts
Executable file
@ -0,0 +1,13 @@
|
||||
import { PrimerPage } from './app.po';
|
||||
|
||||
describe('primer App', function() {
|
||||
let page: PrimerPage;
|
||||
|
||||
beforeEach(() => {
|
||||
page = new PrimerPage();
|
||||
});
|
||||
|
||||
it('should expect true to be true', () => {
|
||||
expect(true).toBe(true);
|
||||
});
|
||||
});
|
||||
11
sineedge_front/e2e/app.po.ts
Executable file
11
sineedge_front/e2e/app.po.ts
Executable file
@ -0,0 +1,11 @@
|
||||
import { browser, element, by } from 'protractor';
|
||||
|
||||
export class PrimerPage {
|
||||
navigateTo() {
|
||||
return browser.get('/');
|
||||
}
|
||||
|
||||
getParagraphText() {
|
||||
return element(by.css('app-root h1')).getText();
|
||||
}
|
||||
}
|
||||
19
sineedge_front/e2e/tsconfig.e2e.json
Executable file
19
sineedge_front/e2e/tsconfig.e2e.json
Executable file
@ -0,0 +1,19 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"sourceMap": true,
|
||||
"declaration": false,
|
||||
"moduleResolution": "node",
|
||||
"emitDecoratorMetadata": true,
|
||||
"experimentalDecorators": true,
|
||||
"lib": [
|
||||
"es2016"
|
||||
],
|
||||
"outDir": "../dist/out-tsc-e2e",
|
||||
"module": "commonjs",
|
||||
"target": "es6",
|
||||
"types":[
|
||||
"jasmine",
|
||||
"node"
|
||||
]
|
||||
}
|
||||
}
|
||||
44
sineedge_front/karma.conf.js
Executable file
44
sineedge_front/karma.conf.js
Executable file
@ -0,0 +1,44 @@
|
||||
// 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
|
||||
});
|
||||
};
|
||||
10993
sineedge_front/package-lock.json
generated
Executable file
10993
sineedge_front/package-lock.json
generated
Executable file
File diff suppressed because it is too large
Load Diff
86
sineedge_front/package.json
Executable file
86
sineedge_front/package.json
Executable file
@ -0,0 +1,86 @@
|
||||
{
|
||||
"name": "optima",
|
||||
"version": "0.0.0",
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"ng": "ng",
|
||||
"start": "ng serve",
|
||||
"build": "ng build",
|
||||
"test": "ng test",
|
||||
"lint": "ng lint",
|
||||
"e2e": "ng e2e"
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@agm/core": "^1.0.0-beta.2",
|
||||
"@angular/animations": "^6.0.0-rc.5",
|
||||
"@angular/cdk": "^6.0.0-rc.5",
|
||||
"@angular/common": "^6.0.0-rc.5",
|
||||
"@angular/compiler": "^6.0.0-rc.5",
|
||||
"@angular/core": "^6.0.0-rc.5",
|
||||
"@angular/flex-layout": "2.0.0-beta.10",
|
||||
"@angular/forms": "^6.0.0-rc.5",
|
||||
"@angular/http": "^6.0.0-rc.5",
|
||||
"@angular/material": "^6.0.0-rc.5",
|
||||
"@angular/platform-browser": "^6.0.0-rc.5",
|
||||
"@angular/platform-browser-dynamic": "^6.0.0-rc.5",
|
||||
"@angular/router": "^6.0.0-rc.5",
|
||||
"@swimlane/ngx-charts": "^7.0.1",
|
||||
"@swimlane/ngx-datatable": "11.1.5",
|
||||
"@types/aws-sdk": "^2.7.0",
|
||||
"amazon-cognito-identity-js": "^2.0.21",
|
||||
"angular-calendar": "0.23.3",
|
||||
"angular-sortablejs": "^2.0.6",
|
||||
"angular-tree-component": "6.1.0",
|
||||
"aws-sdk": "^2.300.0",
|
||||
"chart.js": "2.6.0",
|
||||
"core-js": "^2.5.5",
|
||||
"d3": "^4.9.1",
|
||||
"dragula": "3.7.2",
|
||||
"font-awesome": "4.7.0",
|
||||
"hammerjs": "2.0.8",
|
||||
"intl": "^1.2.4",
|
||||
"jquery": "3.2.1",
|
||||
"karma-jasmine": "^1.1.1",
|
||||
"leaflet": "^1.0.2",
|
||||
"moment": "^2.15.0",
|
||||
"ng2-charts": "1.6.0",
|
||||
"ng2-dragula": "1.3.1",
|
||||
"ng2-file-upload": "1.2.1",
|
||||
"ng2-translate": "5.0.0",
|
||||
"ng2-validation": "4.2.0",
|
||||
"ngx-color-picker": "^4.0.3",
|
||||
"ngx-perfect-scrollbar": "5.0.0-7",
|
||||
"node-sass": "^4.9.3",
|
||||
"perfect-scrollbar": "^1.3.0",
|
||||
"quill": "^1.2.0",
|
||||
"rxjs": "^6.0.0-uncanny-rc.7",
|
||||
"rxjs-compat": "^6.0.0-uncanny-rc.7",
|
||||
"screenfull": "^3.2.2",
|
||||
"simple-line-icons": "^2.4.1",
|
||||
"sortablejs": "^1.6.0",
|
||||
"tether": "^1.4.0",
|
||||
"zone.js": "^0.8.26"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "~0.6.1",
|
||||
"@angular/cli": "^6.1.5",
|
||||
"@angular/compiler-cli": "^6.0.0-rc.5",
|
||||
"@types/jasmine": "2.5.52",
|
||||
"@types/jquery": "3.2.0",
|
||||
"@types/node": "^8.10.27",
|
||||
"codelyzer": "~4.1.0",
|
||||
"jasmine-core": "2.6.3",
|
||||
"jasmine-spec-reporter": "4.1.0",
|
||||
"karma": "1.7.0",
|
||||
"karma-chrome-launcher": "2.1.1",
|
||||
"karma-cli": "1.0.1",
|
||||
"karma-coverage-istanbul-reporter": "1.3.0",
|
||||
"karma-jasmine": "1.1.0",
|
||||
"karma-jasmine-html-reporter": "^0.2.2",
|
||||
"protractor": "5.1.2",
|
||||
"ts-node": "~5.0.0",
|
||||
"tslint": "~5.9.1",
|
||||
"typescript": "2.7.2"
|
||||
}
|
||||
}
|
||||
644
sineedge_front/prepros-6.config
Executable file
644
sineedge_front/prepros-6.config
Executable file
@ -0,0 +1,644 @@
|
||||
{
|
||||
"name": "ng5",
|
||||
"firstRun": false,
|
||||
"exportConfig": true,
|
||||
"fileConfigs": [
|
||||
{
|
||||
"path": "src/assets/styles/app.scss",
|
||||
"configJson": "{\"forceCompile\":false,\"customOutput\":\"../../../../../../../../../Desktop/app.css\",\"autoCompile\":true,\"sourceMap\":false,\"compiler-node-sass\":{\"enabled\":true,\"outputStyle\":\"nested\"},\"compiler-autoprefixer\":{\"enabled\":true},\"compiler-minify-css\":{\"enabled\":false}}"
|
||||
}
|
||||
],
|
||||
"fileTree": {
|
||||
"expandedDirs": [
|
||||
"src",
|
||||
"src/assets",
|
||||
"src/assets/styles"
|
||||
],
|
||||
"hideSystemFiles": true,
|
||||
"systemFiles": [
|
||||
".*",
|
||||
"desktop.ini",
|
||||
"prepros.config",
|
||||
"$RECYCLE.BIN",
|
||||
"prepros.cfg",
|
||||
"prepros-6.config",
|
||||
"Prepros Export"
|
||||
],
|
||||
"hideUnwatchedFiles": false
|
||||
},
|
||||
"imports": [
|
||||
{
|
||||
"path": "src/assets/styles/app.scss",
|
||||
"imports": [
|
||||
"src/assets/styles/scss/_material.variables.scss",
|
||||
"src/assets/styles/scss/_material.themes.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_bi-app-ltr.scss",
|
||||
"src/assets/styles/scss/_app.variables.scss",
|
||||
"src/assets/styles/scss/_mixins.scss",
|
||||
"src/assets/styles/scss/_core.scss",
|
||||
"src/assets/styles/scss/_material.scss",
|
||||
"src/assets/styles/scss/utilities/utilities.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_variables-ltr.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_mixins.scss",
|
||||
"src/assets/styles/scss/mixins/_breakpoints.scss",
|
||||
"src/assets/styles/scss/mixins/_hover.scss",
|
||||
"src/assets/styles/scss/mixins/_text-emphasis.scss",
|
||||
"src/assets/styles/scss/mixins/_clearfix.scss",
|
||||
"src/assets/styles/scss/mixins/_flex.scss",
|
||||
"src/assets/styles/scss/mixins/_misc.scss",
|
||||
"src/assets/styles/scss/core/_scaffolding.scss",
|
||||
"src/assets/styles/scss/core/_typography.scss",
|
||||
"src/assets/styles/scss/core/_main-sidebar.scss",
|
||||
"src/assets/styles/scss/core/_main-header.scss",
|
||||
"src/assets/styles/scss/core/_main-panel.scss",
|
||||
"src/assets/styles/scss/core/_notification-sidebar.scss",
|
||||
"src/assets/styles/scss/core/_sessions.scss",
|
||||
"src/assets/styles/scss/components/_perfect-scrollbar.scss",
|
||||
"src/assets/styles/scss/components/_table.scss",
|
||||
"src/assets/styles/scss/components/_custom.scss",
|
||||
"src/assets/styles/scss/material/_buttons.scss",
|
||||
"src/assets/styles/scss/material/_cards.scss",
|
||||
"src/assets/styles/scss/material/_dialog.scss",
|
||||
"src/assets/styles/scss/material/_lists.scss",
|
||||
"src/assets/styles/scss/material/_select.scss",
|
||||
"src/assets/styles/scss/material/_menus.scss",
|
||||
"src/assets/styles/scss/material/_tabs.scss",
|
||||
"src/assets/styles/scss/utilities/_background.scss",
|
||||
"src/assets/styles/scss/utilities/_general.scss",
|
||||
"src/assets/styles/scss/utilities/_spacing.scss",
|
||||
"src/assets/styles/scss/utilities/_text.scss"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "src/app/apps/chat/chat.component.scss",
|
||||
"imports": [
|
||||
"src/assets/styles/scss/components/_chat.scss",
|
||||
"src/assets/styles/scss/_material.variables.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_bi-app-ltr.scss",
|
||||
"src/assets/styles/scss/_app.variables.scss",
|
||||
"src/assets/styles/scss/_mixins.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_variables-ltr.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_mixins.scss",
|
||||
"src/assets/styles/scss/mixins/_breakpoints.scss",
|
||||
"src/assets/styles/scss/mixins/_hover.scss",
|
||||
"src/assets/styles/scss/mixins/_text-emphasis.scss",
|
||||
"src/assets/styles/scss/mixins/_clearfix.scss",
|
||||
"src/assets/styles/scss/mixins/_flex.scss",
|
||||
"src/assets/styles/scss/mixins/_misc.scss"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "src/app/apps/fullcalendar/fullcalendar.component.scss",
|
||||
"imports": [
|
||||
"src/assets/styles/scss/components/_calendar.scss",
|
||||
"src/assets/styles/scss/_material.variables.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_bi-app-ltr.scss",
|
||||
"src/assets/styles/scss/_app.variables.scss",
|
||||
"src/assets/styles/scss/_mixins.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_variables-ltr.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_mixins.scss",
|
||||
"src/assets/styles/scss/mixins/_breakpoints.scss",
|
||||
"src/assets/styles/scss/mixins/_hover.scss",
|
||||
"src/assets/styles/scss/mixins/_text-emphasis.scss",
|
||||
"src/assets/styles/scss/mixins/_clearfix.scss",
|
||||
"src/assets/styles/scss/mixins/_flex.scss",
|
||||
"src/assets/styles/scss/mixins/_misc.scss"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "src/app/apps/mail/mail.component.scss",
|
||||
"imports": [
|
||||
"src/assets/styles/scss/components/_messages.scss",
|
||||
"src/assets/styles/scss/_material.variables.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_bi-app-ltr.scss",
|
||||
"src/assets/styles/scss/_app.variables.scss",
|
||||
"src/assets/styles/scss/_mixins.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_variables-ltr.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_mixins.scss",
|
||||
"src/assets/styles/scss/mixins/_breakpoints.scss",
|
||||
"src/assets/styles/scss/mixins/_hover.scss",
|
||||
"src/assets/styles/scss/mixins/_text-emphasis.scss",
|
||||
"src/assets/styles/scss/mixins/_clearfix.scss",
|
||||
"src/assets/styles/scss/mixins/_flex.scss",
|
||||
"src/assets/styles/scss/mixins/_misc.scss"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "src/app/apps/social/social.component.scss",
|
||||
"imports": [
|
||||
"src/assets/styles/scss/components/_social.scss",
|
||||
"src/assets/styles/scss/_material.variables.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_bi-app-ltr.scss",
|
||||
"src/assets/styles/scss/_app.variables.scss",
|
||||
"src/assets/styles/scss/_mixins.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_variables-ltr.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_mixins.scss",
|
||||
"src/assets/styles/scss/mixins/_breakpoints.scss",
|
||||
"src/assets/styles/scss/mixins/_hover.scss",
|
||||
"src/assets/styles/scss/mixins/_text-emphasis.scss",
|
||||
"src/assets/styles/scss/mixins/_clearfix.scss",
|
||||
"src/assets/styles/scss/mixins/_flex.scss",
|
||||
"src/assets/styles/scss/mixins/_misc.scss"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "src/app/forms/editor/editor.component.scss",
|
||||
"imports": [
|
||||
"src/assets/styles/scss/components/_editor.scss",
|
||||
"src/assets/styles/scss/_material.variables.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_bi-app-ltr.scss",
|
||||
"src/assets/styles/scss/_app.variables.scss",
|
||||
"src/assets/styles/scss/_mixins.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_variables-ltr.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_mixins.scss",
|
||||
"src/assets/styles/scss/mixins/_breakpoints.scss",
|
||||
"src/assets/styles/scss/mixins/_hover.scss",
|
||||
"src/assets/styles/scss/mixins/_text-emphasis.scss",
|
||||
"src/assets/styles/scss/mixins/_clearfix.scss",
|
||||
"src/assets/styles/scss/mixins/_flex.scss",
|
||||
"src/assets/styles/scss/mixins/_misc.scss"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "src/app/forms/form-tree/form-tree.component.scss",
|
||||
"imports": [
|
||||
"src/assets/styles/scss/components/_treeview.scss",
|
||||
"src/assets/styles/scss/_material.variables.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_bi-app-ltr.scss",
|
||||
"src/assets/styles/scss/_app.variables.scss",
|
||||
"src/assets/styles/scss/_mixins.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_variables-ltr.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_mixins.scss",
|
||||
"src/assets/styles/scss/mixins/_breakpoints.scss",
|
||||
"src/assets/styles/scss/mixins/_hover.scss",
|
||||
"src/assets/styles/scss/mixins/_text-emphasis.scss",
|
||||
"src/assets/styles/scss/mixins/_clearfix.scss",
|
||||
"src/assets/styles/scss/mixins/_flex.scss",
|
||||
"src/assets/styles/scss/mixins/_misc.scss"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "src/app/forms/form-upload/form-upload.component.scss",
|
||||
"imports": [
|
||||
"src/assets/styles/scss/components/_upload.scss",
|
||||
"src/assets/styles/scss/_material.variables.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_bi-app-ltr.scss",
|
||||
"src/assets/styles/scss/_app.variables.scss",
|
||||
"src/assets/styles/scss/_mixins.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_variables-ltr.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_mixins.scss",
|
||||
"src/assets/styles/scss/mixins/_breakpoints.scss",
|
||||
"src/assets/styles/scss/mixins/_hover.scss",
|
||||
"src/assets/styles/scss/mixins/_text-emphasis.scss",
|
||||
"src/assets/styles/scss/mixins/_clearfix.scss",
|
||||
"src/assets/styles/scss/mixins/_flex.scss",
|
||||
"src/assets/styles/scss/mixins/_misc.scss"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "src/app/maps/map-google/map-google.component.scss",
|
||||
"imports": [
|
||||
"src/assets/styles/scss/_material.variables.scss"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "src/assets/styles/scss/_core.scss",
|
||||
"imports": [
|
||||
"src/assets/styles/scss/core/_scaffolding.scss",
|
||||
"src/assets/styles/scss/core/_typography.scss",
|
||||
"src/assets/styles/scss/core/_main-sidebar.scss",
|
||||
"src/assets/styles/scss/core/_main-header.scss",
|
||||
"src/assets/styles/scss/core/_main-panel.scss",
|
||||
"src/assets/styles/scss/core/_notification-sidebar.scss",
|
||||
"src/assets/styles/scss/core/_sessions.scss",
|
||||
"src/assets/styles/scss/components/_perfect-scrollbar.scss",
|
||||
"src/assets/styles/scss/components/_table.scss",
|
||||
"src/assets/styles/scss/components/_custom.scss"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "src/assets/styles/scss/_material.scss",
|
||||
"imports": [
|
||||
"src/assets/styles/scss/material/_buttons.scss",
|
||||
"src/assets/styles/scss/material/_cards.scss",
|
||||
"src/assets/styles/scss/material/_dialog.scss",
|
||||
"src/assets/styles/scss/material/_lists.scss",
|
||||
"src/assets/styles/scss/material/_select.scss",
|
||||
"src/assets/styles/scss/material/_menus.scss",
|
||||
"src/assets/styles/scss/material/_tabs.scss"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "src/assets/styles/scss/_mixins.scss",
|
||||
"imports": [
|
||||
"src/assets/styles/scss/mixins/_breakpoints.scss",
|
||||
"src/assets/styles/scss/mixins/_hover.scss",
|
||||
"src/assets/styles/scss/mixins/_text-emphasis.scss",
|
||||
"src/assets/styles/scss/mixins/_clearfix.scss",
|
||||
"src/assets/styles/scss/mixins/_flex.scss",
|
||||
"src/assets/styles/scss/mixins/_misc.scss"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "src/assets/styles/scss/components/_calendar.scss",
|
||||
"imports": [
|
||||
"src/assets/styles/scss/_material.variables.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_bi-app-ltr.scss",
|
||||
"src/assets/styles/scss/_app.variables.scss",
|
||||
"src/assets/styles/scss/_mixins.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_variables-ltr.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_mixins.scss",
|
||||
"src/assets/styles/scss/mixins/_breakpoints.scss",
|
||||
"src/assets/styles/scss/mixins/_hover.scss",
|
||||
"src/assets/styles/scss/mixins/_text-emphasis.scss",
|
||||
"src/assets/styles/scss/mixins/_clearfix.scss",
|
||||
"src/assets/styles/scss/mixins/_flex.scss",
|
||||
"src/assets/styles/scss/mixins/_misc.scss"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "src/assets/styles/scss/components/_chat.scss",
|
||||
"imports": [
|
||||
"src/assets/styles/scss/_material.variables.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_bi-app-ltr.scss",
|
||||
"src/assets/styles/scss/_app.variables.scss",
|
||||
"src/assets/styles/scss/_mixins.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_variables-ltr.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_mixins.scss",
|
||||
"src/assets/styles/scss/mixins/_breakpoints.scss",
|
||||
"src/assets/styles/scss/mixins/_hover.scss",
|
||||
"src/assets/styles/scss/mixins/_text-emphasis.scss",
|
||||
"src/assets/styles/scss/mixins/_clearfix.scss",
|
||||
"src/assets/styles/scss/mixins/_flex.scss",
|
||||
"src/assets/styles/scss/mixins/_misc.scss"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "src/assets/styles/scss/components/_editor.scss",
|
||||
"imports": [
|
||||
"src/assets/styles/scss/_material.variables.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_bi-app-ltr.scss",
|
||||
"src/assets/styles/scss/_app.variables.scss",
|
||||
"src/assets/styles/scss/_mixins.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_variables-ltr.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_mixins.scss",
|
||||
"src/assets/styles/scss/mixins/_breakpoints.scss",
|
||||
"src/assets/styles/scss/mixins/_hover.scss",
|
||||
"src/assets/styles/scss/mixins/_text-emphasis.scss",
|
||||
"src/assets/styles/scss/mixins/_clearfix.scss",
|
||||
"src/assets/styles/scss/mixins/_flex.scss",
|
||||
"src/assets/styles/scss/mixins/_misc.scss"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "src/assets/styles/scss/components/_messages.scss",
|
||||
"imports": [
|
||||
"src/assets/styles/scss/_material.variables.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_bi-app-ltr.scss",
|
||||
"src/assets/styles/scss/_app.variables.scss",
|
||||
"src/assets/styles/scss/_mixins.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_variables-ltr.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_mixins.scss",
|
||||
"src/assets/styles/scss/mixins/_breakpoints.scss",
|
||||
"src/assets/styles/scss/mixins/_hover.scss",
|
||||
"src/assets/styles/scss/mixins/_text-emphasis.scss",
|
||||
"src/assets/styles/scss/mixins/_clearfix.scss",
|
||||
"src/assets/styles/scss/mixins/_flex.scss",
|
||||
"src/assets/styles/scss/mixins/_misc.scss"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "src/assets/styles/scss/components/_pricing.scss",
|
||||
"imports": [
|
||||
"src/assets/styles/scss/_material.variables.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_bi-app-ltr.scss",
|
||||
"src/assets/styles/scss/_app.variables.scss",
|
||||
"src/assets/styles/scss/_mixins.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_variables-ltr.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_mixins.scss",
|
||||
"src/assets/styles/scss/mixins/_breakpoints.scss",
|
||||
"src/assets/styles/scss/mixins/_hover.scss",
|
||||
"src/assets/styles/scss/mixins/_text-emphasis.scss",
|
||||
"src/assets/styles/scss/mixins/_clearfix.scss",
|
||||
"src/assets/styles/scss/mixins/_flex.scss",
|
||||
"src/assets/styles/scss/mixins/_misc.scss"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "src/assets/styles/scss/components/_social.scss",
|
||||
"imports": [
|
||||
"src/assets/styles/scss/_material.variables.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_bi-app-ltr.scss",
|
||||
"src/assets/styles/scss/_app.variables.scss",
|
||||
"src/assets/styles/scss/_mixins.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_variables-ltr.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_mixins.scss",
|
||||
"src/assets/styles/scss/mixins/_breakpoints.scss",
|
||||
"src/assets/styles/scss/mixins/_hover.scss",
|
||||
"src/assets/styles/scss/mixins/_text-emphasis.scss",
|
||||
"src/assets/styles/scss/mixins/_clearfix.scss",
|
||||
"src/assets/styles/scss/mixins/_flex.scss",
|
||||
"src/assets/styles/scss/mixins/_misc.scss"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "src/assets/styles/scss/components/_timeline.scss",
|
||||
"imports": [
|
||||
"src/assets/styles/scss/_material.variables.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_bi-app-ltr.scss",
|
||||
"src/assets/styles/scss/_app.variables.scss",
|
||||
"src/assets/styles/scss/_mixins.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_variables-ltr.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_mixins.scss",
|
||||
"src/assets/styles/scss/mixins/_breakpoints.scss",
|
||||
"src/assets/styles/scss/mixins/_hover.scss",
|
||||
"src/assets/styles/scss/mixins/_text-emphasis.scss",
|
||||
"src/assets/styles/scss/mixins/_clearfix.scss",
|
||||
"src/assets/styles/scss/mixins/_flex.scss",
|
||||
"src/assets/styles/scss/mixins/_misc.scss"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "src/assets/styles/scss/components/_treeview.scss",
|
||||
"imports": [
|
||||
"src/assets/styles/scss/_material.variables.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_bi-app-ltr.scss",
|
||||
"src/assets/styles/scss/_app.variables.scss",
|
||||
"src/assets/styles/scss/_mixins.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_variables-ltr.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_mixins.scss",
|
||||
"src/assets/styles/scss/mixins/_breakpoints.scss",
|
||||
"src/assets/styles/scss/mixins/_hover.scss",
|
||||
"src/assets/styles/scss/mixins/_text-emphasis.scss",
|
||||
"src/assets/styles/scss/mixins/_clearfix.scss",
|
||||
"src/assets/styles/scss/mixins/_flex.scss",
|
||||
"src/assets/styles/scss/mixins/_misc.scss"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "src/assets/styles/scss/components/_upload.scss",
|
||||
"imports": [
|
||||
"src/assets/styles/scss/_material.variables.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_bi-app-ltr.scss",
|
||||
"src/assets/styles/scss/_app.variables.scss",
|
||||
"src/assets/styles/scss/_mixins.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_variables-ltr.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_mixins.scss",
|
||||
"src/assets/styles/scss/mixins/_breakpoints.scss",
|
||||
"src/assets/styles/scss/mixins/_hover.scss",
|
||||
"src/assets/styles/scss/mixins/_text-emphasis.scss",
|
||||
"src/assets/styles/scss/mixins/_clearfix.scss",
|
||||
"src/assets/styles/scss/mixins/_flex.scss",
|
||||
"src/assets/styles/scss/mixins/_misc.scss"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "src/assets/styles/scss/utilities/utilities.scss",
|
||||
"imports": [
|
||||
"src/assets/styles/scss/utilities/_background.scss",
|
||||
"src/assets/styles/scss/utilities/_general.scss",
|
||||
"src/assets/styles/scss/utilities/_spacing.scss",
|
||||
"src/assets/styles/scss/utilities/_text.scss"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "src/assets/styles/scss/mixins/bi-app/_bi-app-ltr.scss",
|
||||
"imports": [
|
||||
"src/assets/styles/scss/mixins/bi-app/_variables-ltr.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_mixins.scss"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "src/assets/styles/scss/mixins/bi-app/_bi-app-rtl.scss",
|
||||
"imports": [
|
||||
"src/assets/styles/scss/mixins/bi-app/_variables-rtl.scss",
|
||||
"src/assets/styles/scss/mixins/bi-app/_mixins.scss"
|
||||
]
|
||||
}
|
||||
],
|
||||
"projectView": {
|
||||
"selectedView": "log"
|
||||
},
|
||||
"fileWatcher": {
|
||||
"enabled": true,
|
||||
"watchedExtensions": [
|
||||
"less",
|
||||
"sass",
|
||||
"scss",
|
||||
"styl",
|
||||
"md",
|
||||
"markdown",
|
||||
"coffee",
|
||||
"js",
|
||||
"jade",
|
||||
"haml",
|
||||
"slim",
|
||||
"ls",
|
||||
"kit",
|
||||
"png",
|
||||
"jpg",
|
||||
"jpeg",
|
||||
"ts",
|
||||
"pug",
|
||||
"css",
|
||||
"html",
|
||||
"htm",
|
||||
"php"
|
||||
]
|
||||
},
|
||||
"pathFilters": [
|
||||
"node_modules",
|
||||
".*",
|
||||
"bower_components",
|
||||
"prepros.config",
|
||||
"Prepros Export",
|
||||
"prepros-6.config",
|
||||
"prepros.cfg",
|
||||
"wp-admin",
|
||||
"wp-includes"
|
||||
],
|
||||
"server": {
|
||||
"port": 7879,
|
||||
"assignNewPortAutomatically": true,
|
||||
"enable": true,
|
||||
"proxy": {
|
||||
"enable": false,
|
||||
"url": ""
|
||||
}
|
||||
},
|
||||
"browser-sync": {
|
||||
"enable": false,
|
||||
"clicks": true,
|
||||
"forms": true,
|
||||
"scroll": true
|
||||
},
|
||||
"live-reload": {
|
||||
"enable": true,
|
||||
"animate": true,
|
||||
"delay": 0
|
||||
},
|
||||
"ftp-deploy": {
|
||||
"connectionType": "ftp",
|
||||
"remotePath": "",
|
||||
"uploadTimeout": 20000,
|
||||
"uploadOnChange": false,
|
||||
"ftp": {
|
||||
"secure": false,
|
||||
"host": "",
|
||||
"port": 21,
|
||||
"user": "",
|
||||
"password": ""
|
||||
},
|
||||
"sftp": {
|
||||
"host": "",
|
||||
"port": 22,
|
||||
"usePrivateKey": false,
|
||||
"username": "",
|
||||
"password": "",
|
||||
"privateKey": "",
|
||||
"passphrase": ""
|
||||
},
|
||||
"pathFilters": [
|
||||
"config.rb",
|
||||
"prepros.config",
|
||||
"prepros-6.config",
|
||||
"node_modules",
|
||||
"Prepros Export",
|
||||
".git",
|
||||
".idea",
|
||||
".sass-cache",
|
||||
".hg",
|
||||
".svn",
|
||||
".cache",
|
||||
".DS_Store",
|
||||
"*.sass",
|
||||
"*.scss",
|
||||
"*.less",
|
||||
"*.pug",
|
||||
"*.jade",
|
||||
"*.styl",
|
||||
"*.haml",
|
||||
"*.slim",
|
||||
"*.coffee",
|
||||
"*.ls",
|
||||
"*.kit",
|
||||
"*.ts"
|
||||
],
|
||||
"history": []
|
||||
},
|
||||
"file-type-sass": "{\"compilers\":[\"node-sass\",\"autoprefixer\",\"minify-css\"]}",
|
||||
"file-type-less": "{\"compilers\":[\"less\",\"autoprefixer\",\"minify-css\"]}",
|
||||
"autoprefixer": {
|
||||
"browsers": "last 5 versions"
|
||||
},
|
||||
"file-type-pug": "{\"compilers\":[\"pug\"]}",
|
||||
"file-type-css": "{\"compilers\":[\"autoprefixer\",\"cssnext\",\"minify-css\"]}",
|
||||
"file-type-javascript": "{\"compilers\":[\"concat-js\",\"babel\",\"uglify-js\"]}",
|
||||
"file-type-stylus": "{\"compilers\":[\"stylus\",\"autoprefixer\",\"minify-css\"]}",
|
||||
"file-type-markdown": "{\"compilers\":[\"markdown\"]}",
|
||||
"file-type-haml": "{\"compilers\":[\"haml\"]}",
|
||||
"file-type-slim": "{\"compilers\":[\"slim\"]}",
|
||||
"file-type-coffee-script": "{\"compilers\":[\"coffee-script\",\"uglify-js\"]}",
|
||||
"file-type-livescript": "{\"compilers\":[\"livescript\",\"uglify-js\"]}",
|
||||
"file-type-kit": "{\"compilers\":[\"kit\"]}",
|
||||
"uglify-js": {
|
||||
"ie8": false,
|
||||
"compress": {
|
||||
"sequences": true,
|
||||
"properties": true,
|
||||
"dead_code": true,
|
||||
"drop_debugger": true,
|
||||
"unsafe": false,
|
||||
"unsafe_comps": false,
|
||||
"unsafe_math": false,
|
||||
"unsafe_proto": false,
|
||||
"unsafe_regexp": false,
|
||||
"conditionals": true,
|
||||
"comparisons": true,
|
||||
"evaluate": true,
|
||||
"booleans": true,
|
||||
"loops": true,
|
||||
"unused": true,
|
||||
"toplevel": false,
|
||||
"top_retain": "",
|
||||
"hoist_funs": true,
|
||||
"hoist_vars": false,
|
||||
"if_return": true,
|
||||
"join_vars": true,
|
||||
"cascade": true,
|
||||
"collapse_vars": true,
|
||||
"reduce_vars": true,
|
||||
"warnings": true,
|
||||
"negate_iife": true,
|
||||
"pure_getters": false,
|
||||
"pure_funcs": [],
|
||||
"drop_console": false,
|
||||
"expression": false,
|
||||
"keep_fargs": true,
|
||||
"keep_fnames": false,
|
||||
"passes": 1,
|
||||
"keep_infinity": false,
|
||||
"side_effects": true,
|
||||
"global_defs": []
|
||||
},
|
||||
"output": {
|
||||
"ascii_only": false,
|
||||
"beautify": true,
|
||||
"bracketize": false,
|
||||
"comments": "",
|
||||
"indent_level": 4,
|
||||
"indent_start": 0,
|
||||
"inline_script": false,
|
||||
"keep_quoted_props": false,
|
||||
"max_line_len": false,
|
||||
"preamble": "",
|
||||
"preserve_line": false,
|
||||
"quote_keys": false,
|
||||
"quote_style": 0,
|
||||
"semicolons": true,
|
||||
"shebang": true,
|
||||
"width": 80
|
||||
}
|
||||
},
|
||||
"cssnext": {
|
||||
"customProperties": true,
|
||||
"applyRule": true,
|
||||
"calc": false,
|
||||
"nesting": true,
|
||||
"customMedia": true,
|
||||
"mediaQueriesRange": true,
|
||||
"customSelectors": true,
|
||||
"attributeCaseInsensitive": true,
|
||||
"colorRebeccapurple": true,
|
||||
"colorHwb": true,
|
||||
"colorGray": true,
|
||||
"colorHexAlpha": true,
|
||||
"colorFunction": true,
|
||||
"fontVariant": true,
|
||||
"filter": true,
|
||||
"initial": true,
|
||||
"rem": true,
|
||||
"pseudoElements": true,
|
||||
"pseudoClassMatches": true,
|
||||
"pseudoClassNot": true,
|
||||
"pseudoClassAnyLink": true,
|
||||
"colorRgba": true,
|
||||
"overflowWrap": true
|
||||
},
|
||||
"file-type-typescript": "{\"compilers\":[\"typescript\",\"uglify-js\"]}",
|
||||
"babel": {
|
||||
"useBabelRc": true,
|
||||
"presets": {
|
||||
"babel-preset-es2015": true
|
||||
},
|
||||
"plugins": {
|
||||
"babel-plugin-syntax-jsx": true,
|
||||
"babel-plugin-transform-react-jsx": true,
|
||||
"babel-plugin-transform-async-to-generator": true,
|
||||
"babel-plugin-transform-class-properties": true,
|
||||
"babel-plugin-transform-object-rest-spread": true
|
||||
}
|
||||
},
|
||||
"file-type-png": "{\"compilers\":[\"png\"]}",
|
||||
"file-type-jpg": "{\"compilers\":[\"jpg\"]}"
|
||||
}
|
||||
30
sineedge_front/protractor.conf.js
Executable file
30
sineedge_front/protractor.conf.js
Executable file
@ -0,0 +1,30 @@
|
||||
// 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 } }));
|
||||
}
|
||||
};
|
||||
5
sineedge_front/src/app/app.component.html
Executable file
5
sineedge_front/src/app/app.component.html
Executable file
@ -0,0 +1,5 @@
|
||||
<script src="../test.js"></script>
|
||||
<h1>
|
||||
|
||||
{{title}}
|
||||
</h1>
|
||||
5
sineedge_front/src/app/app.component.spec.ts
Executable file
5
sineedge_front/src/app/app.component.spec.ts
Executable file
@ -0,0 +1,5 @@
|
||||
describe('App: Optima', () => {
|
||||
it('should expect true to be true', () => {
|
||||
expect(true).toBe(true);
|
||||
});
|
||||
});
|
||||
28
sineedge_front/src/app/app.component.ts
Executable file
28
sineedge_front/src/app/app.component.ts
Executable file
@ -0,0 +1,28 @@
|
||||
import { Component,OnInit } from '@angular/core';
|
||||
import {TranslateService} from 'ng2-translate/ng2-translate';
|
||||
import { SharedService } from './shared.service';
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
template: '<router-outlet></router-outlet>'
|
||||
})
|
||||
|
||||
export class AppComponent implements OnInit {
|
||||
|
||||
|
||||
constructor(translate: TranslateService,public shared:SharedService) {
|
||||
translate.addLangs(['en', 'fr']);
|
||||
translate.setDefaultLang('en');
|
||||
//new aws_demo();
|
||||
//aws();
|
||||
this.shared;
|
||||
const browserLang: string = translate.getBrowserLang();
|
||||
translate.use(browserLang.match(/en|fr/) ? browserLang : 'en');
|
||||
|
||||
}
|
||||
ngOnInit(){
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
100
sineedge_front/src/app/app.module.ts
Executable file
100
sineedge_front/src/app/app.module.ts
Executable file
@ -0,0 +1,100 @@
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { NgModule } from '@angular/core';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { HttpModule, Http } from '@angular/http';
|
||||
|
||||
import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
|
||||
import { PERFECT_SCROLLBAR_CONFIG } from 'ngx-perfect-scrollbar';
|
||||
import { PerfectScrollbarConfigInterface } from 'ngx-perfect-scrollbar';
|
||||
|
||||
import { TranslateModule, TranslateLoader, TranslateStaticLoader } from 'ng2-translate/ng2-translate';
|
||||
import { FlexLayoutModule } from '@angular/flex-layout';
|
||||
|
||||
import { DemoMaterialModule } from './shared/demo.module';
|
||||
|
||||
import {MatSidenavModule} from '@angular/material/sidenav';
|
||||
import {MatInputModule} from '@angular/material/input';
|
||||
import {MatIconModule} from '@angular/material/icon';
|
||||
import {MatListModule} from '@angular/material/list';
|
||||
import {MatMenuModule} from '@angular/material/menu';
|
||||
import {MatToolbarModule} from '@angular/material/toolbar';
|
||||
import {MatTabsModule} from '@angular/material/tabs';
|
||||
import {MatCheckboxModule} from '@angular/material/checkbox';
|
||||
import {MatProgressBarModule} from '@angular/material/progress-bar';
|
||||
import {MatSelectModule} from '@angular/material/select';
|
||||
import {MatCardModule} from '@angular/material/card';
|
||||
import { HttpClientModule } from '@angular/common/http';
|
||||
import { JazzDialogComponent } from './material/dialog/dialog.component';
|
||||
|
||||
import { NewPasswordDialog } from './session/login/login.component';
|
||||
import { ForgotPass } from './session/login/login.component';
|
||||
import { ChangePasswordDialog } from './user-pages/user-profile/user-profile.component';
|
||||
import { AppRoutes } from './app.routing';
|
||||
import { AppComponent } from './app.component';
|
||||
import { AdminLayoutComponent } from './layouts/admin/admin-layout.component';
|
||||
import { AuthLayoutComponent } from './layouts/auth/auth-layout.component';
|
||||
import { SharedModule } from './shared/shared.module';
|
||||
|
||||
import { AwsService } from './aws.service';
|
||||
import { SharedService } from './shared.service';
|
||||
|
||||
export function createTranslateLoader(http: Http) {
|
||||
return new TranslateStaticLoader(http, './assets/i18n', '.json');
|
||||
}
|
||||
|
||||
const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
|
||||
suppressScrollX: true
|
||||
};
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
AppComponent,
|
||||
AdminLayoutComponent,
|
||||
AuthLayoutComponent,
|
||||
JazzDialogComponent,
|
||||
|
||||
NewPasswordDialog,ForgotPass,ChangePasswordDialog,
|
||||
|
||||
],
|
||||
imports: [
|
||||
BrowserModule,
|
||||
BrowserAnimationsModule,
|
||||
SharedModule,
|
||||
RouterModule.forRoot(AppRoutes,{
|
||||
onSameUrlNavigation: 'reload'
|
||||
}),
|
||||
FormsModule,
|
||||
HttpModule,
|
||||
HttpClientModule,
|
||||
MatSidenavModule,
|
||||
MatInputModule,
|
||||
MatIconModule,
|
||||
MatListModule,
|
||||
MatMenuModule,
|
||||
MatToolbarModule,
|
||||
MatTabsModule,
|
||||
MatCheckboxModule,
|
||||
MatProgressBarModule,
|
||||
MatSelectModule,
|
||||
MatCardModule,
|
||||
DemoMaterialModule,
|
||||
TranslateModule.forRoot({
|
||||
provide: TranslateLoader,
|
||||
useFactory: (createTranslateLoader),
|
||||
deps: [Http]
|
||||
}),
|
||||
FlexLayoutModule,
|
||||
],
|
||||
providers: [
|
||||
{
|
||||
provide: [{PERFECT_SCROLLBAR_CONFIG,AwsService,SharedService}],
|
||||
useValue: DEFAULT_PERFECT_SCROLLBAR_CONFIG,
|
||||
useClass:[{AwsService,SharedService}]
|
||||
}
|
||||
],
|
||||
entryComponents: [JazzDialogComponent, NewPasswordDialog,ForgotPass,ChangePasswordDialog ],
|
||||
bootstrap: [AppComponent]
|
||||
})
|
||||
export class AppModule { }
|
||||
36
sineedge_front/src/app/app.routing.ts
Executable file
36
sineedge_front/src/app/app.routing.ts
Executable file
@ -0,0 +1,36 @@
|
||||
import { Routes } from '@angular/router';
|
||||
|
||||
import { AdminLayoutComponent } from './layouts/admin/admin-layout.component';
|
||||
import { AuthLayoutComponent } from './layouts/auth/auth-layout.component';
|
||||
|
||||
export const AppRoutes: Routes = [{
|
||||
path: '',
|
||||
redirectTo: 'authentication',
|
||||
pathMatch: 'full',
|
||||
}, {
|
||||
path: '',
|
||||
component: AdminLayoutComponent,
|
||||
children: [{
|
||||
path: 'home',
|
||||
loadChildren: './dashboard/dashboard.module#DashboardModule'
|
||||
},{
|
||||
path: 'user-pages',
|
||||
loadChildren: './user-pages/users.module#UsersModule'
|
||||
},{
|
||||
path:'settings',
|
||||
loadChildren:'./settings/settings.module#SettingsModule'
|
||||
}]
|
||||
}, {
|
||||
path: '',
|
||||
component: AuthLayoutComponent,
|
||||
children: [{
|
||||
path: 'authentication',
|
||||
loadChildren: './session/session.module#SessionModule'
|
||||
},{
|
||||
path: 'error',
|
||||
loadChildren: './error/error.module#ErrorModule'
|
||||
}]
|
||||
}, {
|
||||
path: '**',
|
||||
redirectTo: 'session/404'
|
||||
}];
|
||||
15
sineedge_front/src/app/aws.service.spec.ts
Executable file
15
sineedge_front/src/app/aws.service.spec.ts
Executable file
@ -0,0 +1,15 @@
|
||||
import { TestBed, inject } from '@angular/core/testing';
|
||||
|
||||
import { AwsService } from './aws.service';
|
||||
|
||||
describe('AwsService', () => {
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({
|
||||
providers: [AwsService]
|
||||
});
|
||||
});
|
||||
|
||||
it('should be created', inject([AwsService], (service: AwsService) => {
|
||||
expect(service).toBeTruthy();
|
||||
}));
|
||||
});
|
||||
778
sineedge_front/src/app/aws.service.ts
Executable file
778
sineedge_front/src/app/aws.service.ts
Executable file
@ -0,0 +1,778 @@
|
||||
import { Injectable } from "@angular/core";
|
||||
import {
|
||||
AuthenticationDetails,
|
||||
CognitoUserPool,
|
||||
CognitoUser,
|
||||
CognitoUserAttribute,
|
||||
ICognitoUserAttributeData,
|
||||
ISignUpResult,
|
||||
CognitoUserSession
|
||||
} from "amazon-cognito-identity-js";
|
||||
import { Observable } from "rxjs/Observable";
|
||||
import "rxjs/add/operator/map";
|
||||
import * as AWS from "aws-sdk";
|
||||
import { LoginComponent } from "./session/login/login.component";
|
||||
|
||||
import { Http, Headers, RequestOptions } from '@angular/http';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import 'rxjs/add/operator/map';
|
||||
|
||||
import { SharedService } from './shared.service';
|
||||
|
||||
|
||||
let apiurl = 'localhost/sineedge/sparqapi/api/';
|
||||
const sineedge_poolData = {
|
||||
UserPoolId: "ap-south-1_y7dt3iEaX", //ap-south-1_qQ85yQZJO UserName :SPARQ_SINEEDGE_DEV
|
||||
ClientId: "291qt4smn5pql6o8cc2hi201lj" // ClientName: SINEEDGE_DEV_WEB
|
||||
};
|
||||
const sineedgedev_poolData = {
|
||||
UserPoolId: "ap-south-1_qQ85yQZJO", // UserName :SPARQ_SINEEDGE_DEV
|
||||
ClientId: "2o5c3cs9k3als16nqhp3irh8rs" // ClientName: SINEEDGE_DEV_WEB
|
||||
}
|
||||
const lender_poolData = {
|
||||
UserPoolId: "ap-south-1_hFiGyr1Gw", // Username :SPARQ_LENDER_DEV
|
||||
ClientId: "6egsdssf0i7h2o9mscqgqbn788" // ClientName:LENDER_DEV_WEB
|
||||
};
|
||||
const vendor_poolData = {
|
||||
UserPoolId: "",
|
||||
ClientId: ""
|
||||
}
|
||||
const sineedgeUserPool = new CognitoUserPool(sineedge_poolData);
|
||||
const lenderUserPool = new CognitoUserPool(lender_poolData);
|
||||
const sineedgedevUserpool = new CognitoUserPool(sineedgedev_poolData);
|
||||
|
||||
/**
|
||||
* Identity PoolID
|
||||
*/
|
||||
const sineedgeIdentity = "ap-south-1:9a551eab-97cf-4991-b677-2f9bcd058961";//"ap-south-1:9a551eab-97cf-4991-b677-2f9bcd058961";
|
||||
const lenderIdentity = "ap-south-1:ca22dabc-db59-4af5-9bb8-265f7ec95907";
|
||||
const vendorIdenttiy = "";
|
||||
// serviceProvider
|
||||
apiurl = "http://localhost/sineedge/sparqapi/api/";
|
||||
const currentdate = new Date().toJSON().slice(0,19).replace('T',' ');
|
||||
|
||||
@Injectable({
|
||||
providedIn: "root"
|
||||
})
|
||||
|
||||
|
||||
export class AwsService {
|
||||
|
||||
mySecData: any;
|
||||
|
||||
cognitoUser: any;
|
||||
jwttoken: any;
|
||||
cognitousers: any;
|
||||
localUserId:any = '';
|
||||
constructor(public http: Http, public RequestOptions: RequestOptions, public shared: SharedService) { }
|
||||
|
||||
/**
|
||||
* Login Function
|
||||
* @param authenticationData inside of(email and password for login user)
|
||||
* By sriram
|
||||
*/
|
||||
dologin(authenticationData) {
|
||||
//(authenticationData);
|
||||
const authenticationDetails = new AuthenticationDetails(authenticationData);
|
||||
let Newpassword = authenticationData.newpassword;
|
||||
let attributesData = [];
|
||||
const userData = {
|
||||
Username: authenticationData.Username, // User email id
|
||||
Pool: sineedgedevUserpool // user Pool ID
|
||||
};
|
||||
let cognitoUser = new CognitoUser(userData);
|
||||
return Observable.create(observer => {
|
||||
cognitoUser.authenticateUser(authenticationDetails, {
|
||||
newPasswordRequired: (userAttributes, requiredAttributes) => { // new password set
|
||||
cognitoUser.completeNewPasswordChallenge(
|
||||
Newpassword,
|
||||
attributesData,
|
||||
{
|
||||
onSuccess: function (result) {
|
||||
observer.next(result);
|
||||
observer.complete();
|
||||
},
|
||||
onFailure: function (err) {
|
||||
//(err);
|
||||
observer.error(err);
|
||||
//LoginComponent.prototype.open();
|
||||
}
|
||||
}
|
||||
);
|
||||
},
|
||||
onSuccess: function (result) { // success user login
|
||||
// let accessToken = result.getAccessToken().getJwtToken();
|
||||
////(result);
|
||||
window.localStorage.setItem('Currentuser', '1');
|
||||
observer.next(result);
|
||||
observer.complete();
|
||||
},
|
||||
onFailure: function (err) { // error user login
|
||||
|
||||
alert(err.message);
|
||||
observer.error(err);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
/**
|
||||
* End of login function
|
||||
*/
|
||||
|
||||
/**
|
||||
* User Session validate
|
||||
*/
|
||||
getAuthenticatedUser(): any {
|
||||
// gets the current user from the local storage
|
||||
this.cognitoUser = sineedgedevUserpool.getCurrentUser();
|
||||
//let sessions = '';
|
||||
|
||||
let jwttoken = "";
|
||||
let session = "";
|
||||
if (this.cognitoUser != null) {
|
||||
this.cognitoUser.getSession(function (err, session) {
|
||||
if (err) {
|
||||
alert(err.message || JSON.stringify(err));
|
||||
return;
|
||||
}
|
||||
console.log("session validity: " + session.isValid());
|
||||
jwttoken = session;
|
||||
////(jwttoken);
|
||||
AWS.config.region = "ap-south-1";
|
||||
AWS.config.credentials = new AWS.CognitoIdentityCredentials({
|
||||
IdentityPoolId: sineedgeIdentity, // for sineedge_DEV
|
||||
Logins: {
|
||||
"cognito-idp.ap-south-1.amazonaws.com/ap-south-1_qQ85yQZJO": session
|
||||
.getIdToken()
|
||||
.getJwtToken()
|
||||
}
|
||||
// NOTE: getSession must be called to authenticate user before calling getUserAttributes
|
||||
});
|
||||
});
|
||||
////()
|
||||
|
||||
|
||||
|
||||
return jwttoken;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* End of function
|
||||
*/
|
||||
getconfig() {
|
||||
let session = this.getAuthenticatedUser() || "";
|
||||
let config = "";
|
||||
config += AWS.config.region = "ap-south-1";
|
||||
config += AWS.config.credentials = new AWS.CognitoIdentityCredentials({
|
||||
IdentityPoolId: sineedgeIdentity, // for sineedge_DEV
|
||||
Logins: {
|
||||
"cognito-idp.ap-south-1.amazonaws.com/ap-south-1_qQ85yQZJO": session
|
||||
.getIdToken()
|
||||
.getJwtToken()
|
||||
}
|
||||
// NOTE: getSession must be called to authenticate user before calling getUserAttributes
|
||||
});
|
||||
return config;
|
||||
}
|
||||
|
||||
getlocale(){
|
||||
let session:any = this.getAuthenticatedUser() || "";
|
||||
return session.idToken.payload.locale;
|
||||
}
|
||||
/**----------------------*/
|
||||
/**----------------------*/
|
||||
/**
|
||||
* User Details
|
||||
*/
|
||||
getUser() {
|
||||
// gets the current user from the local storage
|
||||
|
||||
let currentUser = sineedgedevUserpool.getCurrentUser();
|
||||
//console.log(currentUser);
|
||||
return currentUser;
|
||||
}
|
||||
getuserdata() {
|
||||
let headers = this.shared.headercofig('');
|
||||
console.log(headers);
|
||||
let users = this.http.get(apiurl + 'getListOfUsers', { headers: headers }).map(res => res.json());
|
||||
console.log(users);
|
||||
return users;
|
||||
}
|
||||
/**
|
||||
* User Logout
|
||||
*/
|
||||
logOut() {
|
||||
window.localStorage.removeItem("Currentuser");
|
||||
this.getUser().signOut();
|
||||
this.cognitoUser = null;
|
||||
}
|
||||
/**
|
||||
* User Change Password
|
||||
*/
|
||||
changepassword(passData) {
|
||||
let session = this.getAuthenticatedUser() || "";
|
||||
console.log(session);
|
||||
this.getconfig();
|
||||
var params = {
|
||||
AccessToken: session.accessToken.jwtToken, /* required */
|
||||
PreviousPassword: passData.oldPassword, /* required */
|
||||
ProposedPassword: passData.newPassword /* required */
|
||||
};
|
||||
return Observable.create(observe => {
|
||||
let cognitoidentityserviceprovider = new AWS.CognitoIdentityServiceProvider();
|
||||
cognitoidentityserviceprovider.changePassword(params, function (err, data) {
|
||||
if (err) console.log(err, err.stack); // an error occurred
|
||||
console.log(data);
|
||||
observe.next(data);
|
||||
// successful response
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* user function end
|
||||
*/
|
||||
|
||||
/**
|
||||
* admin User Create
|
||||
* @param userData refer to register components
|
||||
*/
|
||||
register(userData) {
|
||||
let session = this.getAuthenticatedUser() || "";
|
||||
this.getconfig();
|
||||
let registeredData: any = "";
|
||||
let params: any;
|
||||
let userGroup = session.idToken.payload["cognito:groups"].filter(
|
||||
usergroup => usergroup == "ADMIN"
|
||||
)[0];
|
||||
// (userGroup);
|
||||
if (userGroup == "ADMIN") {
|
||||
if (userData.type.entity_type_id == 1) {
|
||||
params = {
|
||||
UserPoolId: sineedgedev_poolData.UserPoolId /* required */,
|
||||
Username: userData.email /* required */,
|
||||
DesiredDeliveryMediums: [
|
||||
"EMAIL"
|
||||
/* more items */
|
||||
],
|
||||
// ForceAliasCreation: true || false,
|
||||
MessageAction: "SUPPRESS",
|
||||
TemporaryPassword: "temp1234",
|
||||
UserAttributes: [
|
||||
{
|
||||
Name: "email" /* required */,
|
||||
Value: userData.email
|
||||
},
|
||||
{
|
||||
Name: "phone_number" /* required */,
|
||||
Value: "+91" + userData.phone
|
||||
}
|
||||
/* more items */
|
||||
]
|
||||
};
|
||||
} else if (userData.type.entity_type_id == 2) {
|
||||
params = {
|
||||
UserPoolId: lender_poolData.UserPoolId /* required */,
|
||||
Username: userData.email /* required */,
|
||||
DesiredDeliveryMediums: [
|
||||
"EMAIL"
|
||||
/* more items */
|
||||
],
|
||||
// ForceAliasCreation: true || false,
|
||||
MessageAction: "SUPPRESS",
|
||||
TemporaryPassword: "temp1234",
|
||||
UserAttributes: [
|
||||
{
|
||||
Name: "email" /* required */,
|
||||
Value: userData.email
|
||||
},
|
||||
{
|
||||
Name: "phone_number" /* required */,
|
||||
Value: "+91" + userData.phone
|
||||
}
|
||||
/* more items */
|
||||
]
|
||||
};
|
||||
}
|
||||
// .log(params);
|
||||
return Observable.create(observe => {
|
||||
let cognitoidentityserviceprovider = new AWS.CognitoIdentityServiceProvider();
|
||||
|
||||
cognitoidentityserviceprovider.adminCreateUser(params, (
|
||||
err,
|
||||
data
|
||||
) => {
|
||||
if (err) { alert(err.stack); }
|
||||
// an error occurred
|
||||
|
||||
|
||||
this.mySecData = data;
|
||||
AwsService.prototype.UserGroup(data, userData);
|
||||
observe.next(data);
|
||||
|
||||
// successful response
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
UserGroup(cognitodata, userData) {
|
||||
//(userData);
|
||||
|
||||
let session = this.getAuthenticatedUser() || "";
|
||||
this.getconfig();
|
||||
|
||||
//let cognitodata = "539bfefa-ae42-4bee-bf79-4b15d1a2af7f";
|
||||
if(userData.userid ==''){
|
||||
for(let role of userData.role){
|
||||
|
||||
let params: any;
|
||||
if (userData.type.entity_type_id == 1) {
|
||||
|
||||
params = {
|
||||
GroupName: role.value /* required */,
|
||||
UserPoolId: sineedgedev_poolData.UserPoolId,//"ap-south-1_y7dt3iEaX" /* required */,
|
||||
Username: cognitodata.User.Username //'539bfefa-ae42-4bee-bf79-4b15d1a2af7f' /* required */
|
||||
};
|
||||
|
||||
} else if (userData.type.entity_type_id == 2) {
|
||||
params = {
|
||||
GroupName: role.value /* required */,
|
||||
UserPoolId: lender_poolData.UserPoolId,//"ap-south-1_y7dt3iEaX" /* required */,
|
||||
Username: cognitodata.User.Username //'539bfefa-ae42-4bee-bf79-4b15d1a2af7f' /* required */
|
||||
};
|
||||
|
||||
|
||||
}
|
||||
//(params);
|
||||
let cognitoidentityserviceprovider = new AWS.CognitoIdentityServiceProvider();
|
||||
|
||||
cognitoidentityserviceprovider.adminAddUserToGroup(params, function (
|
||||
err,
|
||||
data
|
||||
) {
|
||||
if (err) {
|
||||
alert(err.stack);
|
||||
}//(err, err.stack);
|
||||
// an error occurred
|
||||
else {//(data);
|
||||
|
||||
return data;
|
||||
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
}
|
||||
}else{
|
||||
let params :any;
|
||||
console.log(userData);
|
||||
console.log(cognitodata);
|
||||
if (userData.fk_entity_id == 1) {
|
||||
|
||||
params = {
|
||||
GroupName: cognitodata.value /* required */,
|
||||
UserPoolId: sineedgedev_poolData.UserPoolId,//"ap-south-1_y7dt3iEaX" /* required */,
|
||||
Username: userData.aws_name //'539bfefa-ae42-4bee-bf79-4b15d1a2af7f' /* required */
|
||||
};
|
||||
|
||||
} else if (userData.fk_entity_id == 2) {
|
||||
params = {
|
||||
GroupName: cognitodata.value /* required */,
|
||||
UserPoolId: lender_poolData.UserPoolId,//"ap-south-1_y7dt3iEaX" /* required */,
|
||||
Username: userData.aws_name //'539bfefa-ae42-4bee-bf79-4b15d1a2af7f' /* required */
|
||||
};
|
||||
|
||||
|
||||
}
|
||||
//(params);
|
||||
let cognitoidentityserviceprovider = new AWS.CognitoIdentityServiceProvider();
|
||||
|
||||
cognitoidentityserviceprovider.adminAddUserToGroup(params, function (
|
||||
err,
|
||||
data
|
||||
) {
|
||||
if (err) {
|
||||
alert(err.stack);
|
||||
}//(err, err.stack);
|
||||
// an error occurred
|
||||
else {//(data);
|
||||
|
||||
console.log(data);
|
||||
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* AWS User Create Local DB
|
||||
* @param cognitousers,users
|
||||
**/
|
||||
saveRecords(cognitousers, users) {
|
||||
|
||||
let data: any = '';
|
||||
|
||||
if (cognitousers != '' && cognitousers !== undefined) {
|
||||
//console.log(users);
|
||||
let aws_name :any;
|
||||
let updateby:any;
|
||||
let createdby:any;
|
||||
let createdon:any;
|
||||
let updateon:any;
|
||||
if(users.userid != null){
|
||||
aws_name = users.aws_name;
|
||||
updateby = this.getlocale();
|
||||
updateon = currentdate;
|
||||
}else{
|
||||
aws_name = cognitousers.User.Username;
|
||||
createdby = this.getlocale();
|
||||
createdon = currentdate;
|
||||
}
|
||||
|
||||
let formData = new FormData();
|
||||
console.log(users);
|
||||
|
||||
let records:any = {
|
||||
"userid":users.userid,
|
||||
"aws_name": aws_name,
|
||||
"first_name": users.firstName,
|
||||
"last_name": users.lastName,
|
||||
"mobile_no": users.phone,
|
||||
"email": users.email,
|
||||
"alt_email":users.alt_email,
|
||||
"alt_mobile_no":users.alt_mobile_no,
|
||||
"addressline1":users.address1,
|
||||
"addressline2":users.address2,
|
||||
"addressline3":users.address3,
|
||||
"isactive":users.isactive,
|
||||
"fk_entity_id":users.type.entity_type_id,
|
||||
"fk_designation":users.designation.designation_id,
|
||||
"fk_city":users.city.city_id,
|
||||
"fk_state":users.state.state_id,
|
||||
"pincode":users.pincode,
|
||||
"profilepic":users.userpic.name,
|
||||
"fk_createdby":createdby,
|
||||
"fk_updatedby":updateby,
|
||||
"createdon":createdon,
|
||||
"updatedon":updateon,
|
||||
};
|
||||
let roles:any=[];
|
||||
for(var role of users.role){
|
||||
|
||||
roles.push({ "user_role": role.value });
|
||||
}
|
||||
console.log(roles);
|
||||
formData.append('records',JSON.stringify(records));
|
||||
formData.append('roles',JSON.stringify(roles));
|
||||
formData.append('profilepic',users.userpic);
|
||||
//new Response(formData).text().then(console.log);
|
||||
//let headers = this.shared.headercofig('');
|
||||
let session:any = this.getAuthenticatedUser() ||"";
|
||||
|
||||
let headers = new Headers(
|
||||
{
|
||||
'Authorization':'sparqvenba2018','Token':session.getIdToken().getJwtToken()
|
||||
});
|
||||
|
||||
//(request);
|
||||
if(users.userid !='' && users.userid !=null && users.userid !==undefined){
|
||||
return this.http.post(apiurl+'updateExistUser',formData,{headers:headers}).map(res=>res.json());
|
||||
}else{
|
||||
return this.http.post(apiurl + "saveNewUser", formData, { headers: headers }).map(res => res.json());
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
/**
|
||||
* admin User update
|
||||
* @param username,clientid params
|
||||
**/
|
||||
adminUpdateuser(user, cognitosdata) {
|
||||
let session = this.getAuthenticatedUser() || "";
|
||||
this.getconfig();
|
||||
|
||||
//let cognitodata = "539bfefa-ae42-4bee-bf79-4b15d1a2af7f";
|
||||
let userGroup = session.idToken.payload["cognito:groups"].filter(
|
||||
usergroup => usergroup == "ADMIN"
|
||||
)[0];
|
||||
//cognitosdata = 7;
|
||||
|
||||
if (userGroup == 'ADMIN') {
|
||||
var params = {
|
||||
UserAttributes: [ /* required */
|
||||
{
|
||||
Name: 'locale', /* required */
|
||||
Value: cognitosdata.toString()
|
||||
},
|
||||
/* more items */
|
||||
],
|
||||
UserPoolId: sineedgedev_poolData.UserPoolId, /* required */
|
||||
Username: user.email /* required */
|
||||
};
|
||||
//console.log(params);
|
||||
return Observable.create(observe => {
|
||||
let cognitoidentityserviceprovider = new AWS.CognitoIdentityServiceProvider();
|
||||
|
||||
cognitoidentityserviceprovider.adminUpdateUserAttributes(params, function (err, data) {
|
||||
if (err) //(err, err.stack);
|
||||
console.log(data); // an error occurred
|
||||
observe.next(data); // successful response
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
/**
|
||||
* Admin enable user
|
||||
* @param userdata
|
||||
* @param awsName
|
||||
*/
|
||||
adminenableUser(userdata, awsName) {
|
||||
let session = this.getAuthenticatedUser() || "";
|
||||
this.getconfig();
|
||||
let userGroup = session.idToken.payload["cognito:groups"].filter(
|
||||
usergroup => usergroup == "ADMIN"
|
||||
)[0];
|
||||
//cognitosdata = 7;
|
||||
let params: any;
|
||||
if (userGroup == 'ADMIN') {
|
||||
console.log(userdata);
|
||||
if (userdata.fk_entity_id == 1) {
|
||||
params = {
|
||||
UserPoolId: sineedgedev_poolData.UserPoolId, /* required */
|
||||
Username: awsName /* required */
|
||||
};
|
||||
} else if (userdata.fk_entity_id == 2) {
|
||||
params = {
|
||||
UserPoolId: lender_poolData.UserPoolId, /* required */
|
||||
Username: awsName /* required */
|
||||
};
|
||||
}
|
||||
console.log(params);
|
||||
return Observable.create(observe => {
|
||||
let cognitoidentityserviceprovider = new AWS.CognitoIdentityServiceProvider();
|
||||
cognitoidentityserviceprovider.adminEnableUser(params, function (err, data) {
|
||||
if (err) console.log(err, err.stack); // an error occurred
|
||||
observe.next("1"); // successful response
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
/**
|
||||
* admin Disable user
|
||||
* @param userdata
|
||||
* @param awsName
|
||||
*/
|
||||
admindisabelUser(userdata, awsName) {
|
||||
let session = this.getAuthenticatedUser() || "";
|
||||
this.getconfig();
|
||||
let userGroup = session.idToken.payload["cognito:groups"].filter(
|
||||
usergroup => usergroup == "ADMIN"
|
||||
)[0];
|
||||
//cognitosdata = 7;
|
||||
let params: any;
|
||||
if (userGroup == 'ADMIN') {
|
||||
console.log(userdata);
|
||||
if (userdata.fk_entity_id == 1) {
|
||||
params = {
|
||||
UserPoolId: sineedgedev_poolData.UserPoolId, /* required */
|
||||
Username: awsName /* required */
|
||||
};
|
||||
} else if (userdata.fk_entity_id == 2) {
|
||||
params = {
|
||||
UserPoolId: lender_poolData.UserPoolId, /* required */
|
||||
Username: awsName /* required */
|
||||
};
|
||||
}
|
||||
console.log(params);
|
||||
return Observable.create(observe => {
|
||||
let cognitoidentityserviceprovider = new AWS.CognitoIdentityServiceProvider();
|
||||
cognitoidentityserviceprovider.adminDisableUser(params, function (err, data) {
|
||||
if (err) console.log(err, err.stack); // an error occurred
|
||||
observe.next("0"); // successful response
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Admin Local Update
|
||||
* @param records
|
||||
*/
|
||||
adminupendis(records){
|
||||
let headers = this.shared.headercofig('');
|
||||
console.log(headers);
|
||||
let users = this.http.post(apiurl + 'updateExistUser',JSON.stringify(records), { headers: headers }).map(res => res.json());
|
||||
console.log(users);
|
||||
return users;
|
||||
}
|
||||
/**
|
||||
* Admin Create User End
|
||||
**/
|
||||
/************************************************************************************ */
|
||||
/**
|
||||
* Admin Upadte users
|
||||
*/
|
||||
|
||||
adminGetUsers(userId){
|
||||
this.localUserId = userId;
|
||||
|
||||
|
||||
|
||||
return Observable.create(observe=>{
|
||||
observe.next(this.localUserId);
|
||||
})
|
||||
}
|
||||
|
||||
adminchangeData(userData,changeusers){
|
||||
console.log(userData);
|
||||
console.log(changeusers);
|
||||
let session = this.getAuthenticatedUser() || "";
|
||||
this.getconfig();
|
||||
let registeredData: any = "";
|
||||
let params:any='';
|
||||
let userGroup = session.idToken.payload["cognito:groups"].filter(
|
||||
usergroup => usergroup == "ADMIN"
|
||||
)[0];
|
||||
// (userGroup);
|
||||
if (userGroup == "ADMIN") {
|
||||
if (userData.fk_entity_id == 1) {
|
||||
params = {
|
||||
UserPoolId: sineedgedev_poolData.UserPoolId /* required */,
|
||||
Username: userData.email,//userData.email /* required */,
|
||||
|
||||
// ForceAliasCreation: true || false,
|
||||
|
||||
UserAttributes: [
|
||||
{
|
||||
Name: "email" /* required */,
|
||||
Value: changeusers.email,//userData.email
|
||||
},
|
||||
{
|
||||
Name: "phone_number" /* required */,
|
||||
Value: "+91"+ changeusers.phone
|
||||
}
|
||||
/* more items */
|
||||
]
|
||||
};
|
||||
} else if (userData.fk_entity_id == 2) {
|
||||
params = {
|
||||
UserPoolId: lender_poolData.UserPoolId /* required */,
|
||||
Username: changeusers.email /* required */,
|
||||
|
||||
UserAttributes: [
|
||||
{
|
||||
Name: "email" /* required */,
|
||||
Value: changeusers.email
|
||||
},
|
||||
{
|
||||
Name: "phone_number" /* required */,
|
||||
Value: "+91" + changeusers.phone
|
||||
}
|
||||
/* more items */
|
||||
]
|
||||
};
|
||||
}
|
||||
return Observable.create(observe=>{
|
||||
let cognitoidentityserviceprovider = new AWS.CognitoIdentityServiceProvider();
|
||||
cognitoidentityserviceprovider.adminUpdateUserAttributes(params, function(err, data) {
|
||||
if (err) console.log(err, err.stack); // an error occurred
|
||||
observe.next(data); // successful response
|
||||
});
|
||||
})
|
||||
}
|
||||
}
|
||||
adminremoveGroup(roles,users){
|
||||
console.log(roles);
|
||||
console.log(users);
|
||||
if(users !==undefined){
|
||||
|
||||
let session = this.getAuthenticatedUser() ||"";
|
||||
this.getconfig();
|
||||
var params = {
|
||||
GroupName: roles.value, /* required */
|
||||
UserPoolId: sineedgedev_poolData.UserPoolId, /* required */
|
||||
Username: users.aws_name//'2c64866e-e96f-453b-903f-2b6f831688af' /* required */
|
||||
};
|
||||
let cognitoidentityserviceprovider = new AWS.CognitoIdentityServiceProvider();
|
||||
cognitoidentityserviceprovider.adminRemoveUserFromGroup(params, function(err, data) {
|
||||
if (err) console.log(err, err.stack); // an error occurred
|
||||
else console.log(data); // successful response
|
||||
});
|
||||
}
|
||||
}
|
||||
/************************************************************************************ */
|
||||
/**
|
||||
* user forgot password
|
||||
* @parms ClientId , Username(Email)
|
||||
*/
|
||||
|
||||
userforgotpass(auth) {
|
||||
////(auth);
|
||||
const userData = {
|
||||
Username: auth.Username,
|
||||
Pool: sineedgedevUserpool
|
||||
};
|
||||
let cognitoUser = new CognitoUser(userData);
|
||||
return Observable.create(observe => {
|
||||
cognitoUser.forgotPassword({
|
||||
onSuccess: function (data) {
|
||||
// successfully initiated reset password request
|
||||
//('CodeDeliveryData from forgotPassword: ' + data);
|
||||
observe.next(data);
|
||||
},
|
||||
onFailure: function (err) {
|
||||
alert(err.message || JSON.stringify(err));
|
||||
},
|
||||
//Optional automatic callback
|
||||
inputVerificationCode: function (data) {
|
||||
//('Code sent to: ' + data);
|
||||
var verificationCode = prompt('Please input verification code ', '');
|
||||
var newPassword = prompt('Enter new password ', '');
|
||||
cognitoUser.confirmPassword(verificationCode, newPassword, {
|
||||
onSuccess() {
|
||||
//('Password confirmed!');
|
||||
},
|
||||
onFailure(err) {
|
||||
//('Password not confirmed!');
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Get Local Data
|
||||
*/
|
||||
|
||||
entityType(){
|
||||
let headers = this.shared.headercofig('');
|
||||
let master_name = {'master_name':'ENTITYTYPE'};
|
||||
return this.http.post(apiurl+'getListOfMaster',master_name,{headers:headers}).map(res=>res.json());
|
||||
}
|
||||
City(){
|
||||
let headers = this.shared.headercofig('');
|
||||
let master_name = {'master_name':'CITY'};
|
||||
return this.http.post(apiurl+'getListOfMaster',master_name,{headers:headers}).map(res=>res.json());
|
||||
}
|
||||
State(){
|
||||
let headers = this.shared.headercofig('');
|
||||
let master_name = {'master_name':'STATE'};
|
||||
return this.http.post(apiurl+'getListOfMaster',master_name,{headers:headers}).map(res=>res.json());
|
||||
}
|
||||
designation(){
|
||||
let headers = this.shared.headercofig('');
|
||||
let master_name = {'master_name':'DESIGNATION'};
|
||||
return this.http.post(apiurl+'getListOfMaster',master_name,{headers:headers}).map(res=>res.json());
|
||||
}
|
||||
|
||||
}
|
||||
304
sineedge_front/src/app/awsLender.service.ts
Executable file
304
sineedge_front/src/app/awsLender.service.ts
Executable file
@ -0,0 +1,304 @@
|
||||
import { Injectable } from "@angular/core";
|
||||
import {
|
||||
AuthenticationDetails,
|
||||
CognitoUserPool,
|
||||
CognitoUser,
|
||||
CognitoUserAttribute,
|
||||
ICognitoUserAttributeData,
|
||||
ISignUpResult,
|
||||
CognitoUserSession
|
||||
} from "amazon-cognito-identity-js";
|
||||
import { Observable } from "rxjs/Observable";
|
||||
import "rxjs/add/operator/map";
|
||||
import * as AWS from "aws-sdk";
|
||||
import { LoginComponent } from "./session/login/login.component";
|
||||
let apiUrl = "http://localhost:8080/ApolloSC/api/";
|
||||
|
||||
const lender_poolData = {
|
||||
UserPoolId: "ap-south-1_bVF08ztrS", // Your user pool id here
|
||||
ClientId: "2aqnppt0nb3kqbskpuiv8hi2t9" // Your client id here
|
||||
};
|
||||
|
||||
|
||||
const lenderUserPool = new CognitoUserPool(lender_poolData);
|
||||
@Injectable({
|
||||
providedIn: "root"
|
||||
})
|
||||
export class AwsLenderService {
|
||||
cognitoUser: any;
|
||||
jwttoken: any;
|
||||
cognitousers: any;
|
||||
constructor() {}
|
||||
|
||||
/**
|
||||
* Login Function
|
||||
* @param authenticationData inside of(email and password for login user)
|
||||
* By sriram
|
||||
*/
|
||||
dologin(authenticationData) {
|
||||
console.log(authenticationData);
|
||||
|
||||
const authenticationDetails = new AuthenticationDetails(authenticationData);
|
||||
let Newpassword = "12345678";//authenticationData.newpassword;
|
||||
let attributesData = [];
|
||||
|
||||
const userData = {
|
||||
Username: authenticationData.Username,
|
||||
Pool: lenderUserPool
|
||||
};
|
||||
const cognitoUser = new CognitoUser(userData);
|
||||
|
||||
return Observable.create(observer => {
|
||||
cognitoUser.authenticateUser(authenticationDetails, {
|
||||
newPasswordRequired: (userAttributes, requiredAttributes) => {
|
||||
cognitoUser.completeNewPasswordChallenge(
|
||||
Newpassword,
|
||||
attributesData,
|
||||
{
|
||||
onSuccess: function(result) {
|
||||
observer.next(result);
|
||||
observer.complete();
|
||||
},
|
||||
onFailure: function(err) {
|
||||
console.log(err);
|
||||
observer.error(err);
|
||||
//LoginComponent.prototype.open();
|
||||
}
|
||||
}
|
||||
);
|
||||
},
|
||||
onSuccess: function(result) {
|
||||
// let accessToken = result.getAccessToken().getJwtToken();
|
||||
//console.log(result);
|
||||
window.localStorage.setItem('Currentuser','2');
|
||||
observer.next(result);
|
||||
observer.complete();
|
||||
},
|
||||
onFailure: function(err) {
|
||||
|
||||
alert(err.message);
|
||||
observer.error(err);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
/**
|
||||
* End of login function
|
||||
*/
|
||||
getUser() {
|
||||
// gets the current user from the local storage
|
||||
return lenderUserPool.getCurrentUser();
|
||||
}
|
||||
|
||||
logOut() {
|
||||
window.localStorage.removeItem("Currentuser");
|
||||
this.getUser().signOut();
|
||||
this.cognitoUser = null;
|
||||
}
|
||||
|
||||
/**
|
||||
* User Created for Admin
|
||||
* @param userDetails
|
||||
*/
|
||||
getAuthenticatedUser(): any {
|
||||
// gets the current user from the local storage
|
||||
this.cognitoUser = lenderUserPool.getCurrentUser();
|
||||
//let sessions = '';
|
||||
|
||||
let jwttoken = "";
|
||||
let session = "";
|
||||
if (this.cognitoUser != null) {
|
||||
this.cognitoUser.getSession(function(err, session) {
|
||||
if (err) {
|
||||
alert(err.message || JSON.stringify(err));
|
||||
return;
|
||||
}
|
||||
console.log("session validity: " + session.isValid());
|
||||
// this.session = ;
|
||||
// console.log(this.session);
|
||||
//this.checkuserstatus(session);
|
||||
jwttoken = session;
|
||||
//console.log(jwttoken);
|
||||
AWS.config.region = "ap-south-1";
|
||||
AWS.config.credentials = new AWS.CognitoIdentityCredentials({
|
||||
IdentityPoolId: "ap-south-1:2ab4b493-f99f-4a06-9621-349197e36a5d",
|
||||
Logins: {
|
||||
"cognito-idp.ap-south-1.amazonaws.com/ap-south-1_y7dt3iEaX": session
|
||||
.getIdToken()
|
||||
.getJwtToken()
|
||||
}
|
||||
// NOTE: getSession must be called to authenticate user before calling getUserAttributes
|
||||
});
|
||||
});
|
||||
//console.log()
|
||||
|
||||
//console.log("1");
|
||||
|
||||
return jwttoken;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* New admin User Create
|
||||
* @param userData refer to register components
|
||||
*/
|
||||
// register(userData) {
|
||||
// let session = this.getAuthenticatedUser() || "";
|
||||
// let localdata: any;
|
||||
|
||||
// // let idToken = session.idToken;
|
||||
// // console.log(idToken);return false;
|
||||
// console.log(session);
|
||||
|
||||
// AWS.config.region = "ap-south-1";
|
||||
// AWS.config.credentials = new AWS.CognitoIdentityCredentials({
|
||||
// IdentityPoolId: "ap-south-1:2ab4b493-f99f-4a06-9621-349197e36a5d",
|
||||
// Logins: {
|
||||
// "cognito-idp.ap-south-1.amazonaws.com/ap-south-1_y7dt3iEaX": session
|
||||
// .getIdToken()
|
||||
// .getJwtToken()
|
||||
// }
|
||||
// });
|
||||
// let params:any;
|
||||
// let userGroup = session.idToken.payload["cognito:groups"].filter(
|
||||
// usergroup => usergroup == "ADMIN"
|
||||
// )[0];
|
||||
// // console.log(userGroup);
|
||||
// if (userGroup == "ADMIN") {
|
||||
// if(userData.type.value ==1){
|
||||
// params = {
|
||||
// UserPoolId: lender_poolData.UserPoolId /* required */,
|
||||
// Username: userData.email /* required */,
|
||||
// DesiredDeliveryMediums: [
|
||||
// "EMAIL"
|
||||
// /* more items */
|
||||
// ],
|
||||
// // ForceAliasCreation: true || false,
|
||||
// MessageAction: "SUPPRESS",
|
||||
// TemporaryPassword: "temp1234",
|
||||
// UserAttributes: [
|
||||
// {
|
||||
// Name: "email" /* required */,
|
||||
// Value: userData.email
|
||||
// },
|
||||
// {
|
||||
// Name: "phone_number" /* required */,
|
||||
// Value: "+91" + userData.phone
|
||||
// }
|
||||
// /* more items */
|
||||
// ]
|
||||
// };
|
||||
// }else if(userData.type.value ==2){
|
||||
// params = {
|
||||
// UserPoolId: lender_poolData.UserPoolId /* required */,
|
||||
// Username: userData.email /* required */,
|
||||
// DesiredDeliveryMediums: [
|
||||
// "EMAIL"
|
||||
// /* more items */
|
||||
// ],
|
||||
// // ForceAliasCreation: true || false,
|
||||
// MessageAction: "SUPPRESS",
|
||||
// TemporaryPassword: "temp1234",
|
||||
// UserAttributes: [
|
||||
// {
|
||||
// Name: "email" /* required */,
|
||||
// Value: userData.email
|
||||
// },
|
||||
// {
|
||||
// Name: "phone_number" /* required */,
|
||||
// Value: "+91" + userData.phone
|
||||
// }
|
||||
// /* more items */
|
||||
// ]
|
||||
// };
|
||||
// }
|
||||
// console.log(params);
|
||||
// let cognitoidentityserviceprovider = new AWS.CognitoIdentityServiceProvider();
|
||||
// cognitoidentityserviceprovider.adminCreateUser(params, function(
|
||||
// err,
|
||||
// data
|
||||
// ) {
|
||||
// if (err) alert(err.stack);
|
||||
// // an error occurred
|
||||
// else {
|
||||
// console.log(data);
|
||||
// //localdata = data;
|
||||
// AwsLenderService.prototype.UserGroup(data, userData);
|
||||
// }
|
||||
// // successful response
|
||||
// });
|
||||
// //console.log(localdata);
|
||||
// }
|
||||
// }
|
||||
// UserGroup(cognitodata, userData) {
|
||||
// console.log(userData);
|
||||
|
||||
// let session = this.getAuthenticatedUser() || "";
|
||||
|
||||
// AWS.config.region = "ap-south-1";
|
||||
// AWS.config.credentials = new AWS.CognitoIdentityCredentials({
|
||||
// IdentityPoolId: "ap-south-1:2ab4b493-f99f-4a06-9621-349197e36a5d",
|
||||
// Logins: {
|
||||
// "cognito-idp.ap-south-1.amazonaws.com/ap-south-1_y7dt3iEaX": session
|
||||
// .getIdToken()
|
||||
// .getJwtToken()
|
||||
// }
|
||||
// });
|
||||
// //let cognitodata = "539bfefa-ae42-4bee-bf79-4b15d1a2af7f";
|
||||
// let userGroup = session.idToken.payload["cognito:groups"].filter(
|
||||
// usergroup => usergroup == "ADMIN"
|
||||
// )[0];
|
||||
// console.log(userGroup);
|
||||
// // if (userGroup == "ADMIN"){
|
||||
// //console.log(localdata);
|
||||
// let params:any;
|
||||
// if(userData.type.value == 1){
|
||||
|
||||
// params = {
|
||||
// GroupName: userData.role.value /* required */,
|
||||
// UserPoolId: lender_poolData.UserPoolId,//"ap-south-1_y7dt3iEaX" /* required */,
|
||||
// Username: cognitodata.User.Username //'539bfefa-ae42-4bee-bf79-4b15d1a2af7f' /* required */
|
||||
// };
|
||||
|
||||
// }else if(userData.type.value ==2){
|
||||
// params = {
|
||||
// GroupName: userData.role.value /* required */,
|
||||
// UserPoolId: lender_poolData.UserPoolId,//"ap-south-1_y7dt3iEaX" /* required */,
|
||||
// Username: cognitodata.User.Username //'539bfefa-ae42-4bee-bf79-4b15d1a2af7f' /* required */
|
||||
// };
|
||||
|
||||
|
||||
// }
|
||||
// console.log(params);
|
||||
// let cognitoidentityserviceprovider = new AWS.CognitoIdentityServiceProvider();
|
||||
// cognitoidentityserviceprovider.adminAddUserToGroup(params, function(
|
||||
// err,
|
||||
// data
|
||||
// ) {
|
||||
// if (err) console.log(err, err.stack);
|
||||
// // an error occurred
|
||||
// else console.log(data); // successful response
|
||||
// });
|
||||
// }
|
||||
|
||||
// /**
|
||||
// * Admin Get Users
|
||||
// */
|
||||
// adminGetuser() {
|
||||
// let session = this.getAuthenticatedUser() || "";
|
||||
// let userGroup = session.idToken.payload["cognito:groups"].filter(
|
||||
// usergroup => usergroup == "ADMIN"
|
||||
// )[0];
|
||||
// console.log(userGroup);
|
||||
// if (userGroup == "ADMIN") {
|
||||
// var params = {
|
||||
// UserPoolId: lender_poolData.UserPoolId /* required */
|
||||
// };
|
||||
// let cognitoidentityserviceprovider = new AWS.CognitoIdentityServiceProvider();
|
||||
// cognitoidentityserviceprovider.listUsers(params, function(err, data) {
|
||||
// if (err) console.log(err, err.stack);
|
||||
// // an error occurred
|
||||
// else console.log(data); // successful response
|
||||
// });
|
||||
// }
|
||||
// }
|
||||
}
|
||||
232
sineedge_front/src/app/dashboard/charts.data.ts
Executable file
232
sineedge_front/src/app/dashboard/charts.data.ts
Executable file
@ -0,0 +1,232 @@
|
||||
export const single = [
|
||||
{
|
||||
name: 'Germany',
|
||||
value: 40632
|
||||
},
|
||||
{
|
||||
name: 'USA',
|
||||
value: 49737
|
||||
},
|
||||
{
|
||||
name: 'France',
|
||||
value: 36745
|
||||
},
|
||||
{
|
||||
name: 'UK',
|
||||
value: 36240
|
||||
},
|
||||
{
|
||||
name: 'Spain',
|
||||
value: 33000
|
||||
},
|
||||
{
|
||||
name: 'Italy',
|
||||
value: 35800
|
||||
}
|
||||
];
|
||||
|
||||
export const multi = [
|
||||
{
|
||||
name: 'Germany',
|
||||
series: [
|
||||
{
|
||||
name: '2017',
|
||||
value: 71632
|
||||
},
|
||||
{
|
||||
name: '2010',
|
||||
value: 40632
|
||||
},
|
||||
{
|
||||
name: '2000',
|
||||
value: 76953
|
||||
},
|
||||
{
|
||||
name: '1990',
|
||||
value: 31476
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'USA',
|
||||
series: [
|
||||
{
|
||||
name: '2017',
|
||||
value: 82632
|
||||
},
|
||||
{
|
||||
name: '2010',
|
||||
value: 49737
|
||||
},
|
||||
{
|
||||
name: '2000',
|
||||
value: 55986
|
||||
},
|
||||
{
|
||||
name: '1990',
|
||||
value: 37060
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'France',
|
||||
series: [
|
||||
{
|
||||
name: '2017',
|
||||
value: 51732
|
||||
},
|
||||
{
|
||||
name: '2010',
|
||||
value: 36745
|
||||
},
|
||||
{
|
||||
name: '2000',
|
||||
value: 34774
|
||||
},
|
||||
{
|
||||
name: '1990',
|
||||
value: 29476
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'UK',
|
||||
series: [
|
||||
{
|
||||
name: '2017',
|
||||
value: 95652
|
||||
},
|
||||
{
|
||||
name: '2010',
|
||||
value: 36240
|
||||
},
|
||||
{
|
||||
name: '2000',
|
||||
value: 32543
|
||||
},
|
||||
{
|
||||
name: '1990',
|
||||
value: 26424
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
export const bubble = [
|
||||
{
|
||||
name: 'Germany',
|
||||
series: [
|
||||
{
|
||||
name: '2009',
|
||||
x: new Date(2009, 0, 1),
|
||||
y: 80.3,
|
||||
r: 80.4
|
||||
},
|
||||
{
|
||||
name: '2006',
|
||||
x: new Date(2006, 0, 1),
|
||||
y: 80.3,
|
||||
r: 78
|
||||
},
|
||||
{
|
||||
name: '1995',
|
||||
x: new Date(1995, 0, 1),
|
||||
y: 77.7,
|
||||
r: 58.1
|
||||
},
|
||||
{
|
||||
name: '1990',
|
||||
x: new Date(1990, 0, 1),
|
||||
y: 75.4,
|
||||
r: 79
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'USA',
|
||||
series: [
|
||||
{
|
||||
name: '2010',
|
||||
x: new Date(2010, 0, 1),
|
||||
y: 78.8,
|
||||
r: 310
|
||||
},
|
||||
{
|
||||
name: '2005',
|
||||
x: new Date(2005, 0, 1),
|
||||
y: 76.9,
|
||||
r: 283
|
||||
},
|
||||
{
|
||||
name: '1996',
|
||||
x: new Date(1996, 0, 1),
|
||||
y: 78.7,
|
||||
r: 59.1
|
||||
},
|
||||
{
|
||||
name: '1990',
|
||||
x: new Date(1990, 0, 1),
|
||||
y: 75.4,
|
||||
r: 253
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'France',
|
||||
series: [
|
||||
{
|
||||
name: '2008',
|
||||
x: new Date(2008, 0, 1),
|
||||
y: 81.4,
|
||||
r: 63
|
||||
},
|
||||
{
|
||||
name: '2000',
|
||||
x: new Date(2000, 0, 1),
|
||||
y: 79.1,
|
||||
r: 59.4
|
||||
},
|
||||
{
|
||||
name: '1994',
|
||||
x: new Date(1994, 0, 1),
|
||||
y: 76.7,
|
||||
r: 58.1
|
||||
},
|
||||
{
|
||||
name: '1990',
|
||||
x: new Date(1990, 0, 1),
|
||||
y: 77.2,
|
||||
r: 56.9
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'UK',
|
||||
series: [
|
||||
{
|
||||
name: '2007',
|
||||
x: new Date(2007, 0, 1),
|
||||
y: 80.2,
|
||||
r: 62.7
|
||||
},
|
||||
{
|
||||
name: '2003',
|
||||
x: new Date(2003, 0, 1),
|
||||
y: 77.8,
|
||||
r: 58.9
|
||||
},
|
||||
{
|
||||
name: '1995',
|
||||
x: new Date(1995, 0, 1),
|
||||
y: 78.7,
|
||||
r: 59.1
|
||||
},
|
||||
{
|
||||
name: '1990',
|
||||
x: new Date(1990, 0, 1),
|
||||
y: 75.7,
|
||||
r: 57.1
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
437
sineedge_front/src/app/dashboard/dashboard.component.html
Executable file
437
sineedge_front/src/app/dashboard/dashboard.component.html
Executable file
@ -0,0 +1,437 @@
|
||||
<div fxLayout="row" fxLayoutWrap="wrap">
|
||||
<div fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="33.33" fxFlex.lg="33.33" fxFlex.xl="33.33" fxFlex="100" class="m-gap p-gap">
|
||||
<mat-card>
|
||||
<div class="card-wheather grad-blue">
|
||||
<div class="city">New Orders</div>
|
||||
<div class="date">This Week</div>
|
||||
<div class="weather">
|
||||
<div class="sun d-flex justify-content-between">
|
||||
<i class="fa fa-shopping-bag fa-3x align-self-center"></i>
|
||||
<div class="temp align-self-center">190</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card>
|
||||
</div>
|
||||
<div fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="33.33" fxFlex.lg="33.33" fxFlex.xl="33.33" fxFlex="100" class="m-gap p-gap">
|
||||
<mat-card>
|
||||
<div class="card-wheather grad-green">
|
||||
<div class="city">Total Profit</div>
|
||||
<div class="date">This Week</div>
|
||||
<div class="weather">
|
||||
<div class="sun d-flex justify-content-between">
|
||||
<i class="fa fa fa-users fa-3x align-self-center"></i>
|
||||
<div class="temp align-self-center">987</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card>
|
||||
</div>
|
||||
<div fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="33.33" fxFlex.lg="33.33" fxFlex.xl="33.33" fxFlex="100" class="m-gap p-gap">
|
||||
<mat-card>
|
||||
<div class="card-wheather grad-red">
|
||||
<div class="city">Email</div>
|
||||
<div class="date">This Week</div>
|
||||
<div class="weather">
|
||||
<div class="sun d-flex justify-content-between">
|
||||
<i class="fa fa-usd fa-3x align-self-center"></i>
|
||||
<div class="temp align-self-center">236</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
<div fxLayout="row" fxLayoutWrap="wrap">
|
||||
<div fxFlex.gt-sm="100" fxFlex.gt-xs="100" fxFlex="100" class="m-gap p-gap">
|
||||
<mat-card>
|
||||
<mat-card-title fxLayout="row" fxLayoutAlign="start center">
|
||||
Total Sales
|
||||
<span fxFlex></span>
|
||||
<button mat-icon-button mat-button-sm [mat-menu-trigger-for]="card2" aria-label="Open card menu">
|
||||
<mat-icon>more_vert</mat-icon>
|
||||
</button>
|
||||
</mat-card-title>
|
||||
<hr>
|
||||
<mat-card-content>
|
||||
<div class="w-100 h-300px">
|
||||
<ngx-charts-area-chart [scheme]="colorScheme" [results]="multi" [gradient]="gradient" [xAxis]="showXAxis" [yAxis]="showYAxis" [legend]="showLegend" [showXAxisLabel]="showXAxisLabel" [showYAxisLabel]="showYAxisLabel" [xAxisLabel]="xAxisLabel" [yAxisLabel]="yAxisLabel" [autoScale]="autoScale" (select)="onSelect($event)">
|
||||
</ngx-charts-area-chart>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
<div fxFlex.gt-sm="33.33%" fxFlex="100" class="m-gap p-gap">
|
||||
<mat-card>
|
||||
<mat-card-title fxLayout="row" fxLayoutAlign="start center">
|
||||
Revenue
|
||||
<span fxFlex></span>
|
||||
<button mat-icon-button mat-button-sm [mat-menu-trigger-for]="card1" aria-label="Open card menu">
|
||||
<mat-icon>more_vert</mat-icon>
|
||||
</button>
|
||||
</mat-card-title>
|
||||
<mat-menu #card1="matMenu" x-position="before">
|
||||
<button mat-menu-item>
|
||||
<mat-icon>settings</mat-icon>
|
||||
Settings
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<mat-icon>more</mat-icon>
|
||||
View More
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<mat-icon>notifications_off</mat-icon>
|
||||
Disable notifications
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<mat-icon>exit_to_app</mat-icon>
|
||||
Remove Panel
|
||||
</button>
|
||||
</mat-menu>
|
||||
<hr>
|
||||
<mat-card-content>
|
||||
<canvas height="200" baseChart class="chart"
|
||||
[data]="pieChartData"
|
||||
[options]="doughnutOptions"
|
||||
[colors]="doughnutChartColors"
|
||||
[labels]="pieChartLabels"
|
||||
[chartType]="pieChartType"></canvas>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
<div fxFlex.gt-sm="33.33%" fxFlex.gt-xs="50" fxFlex="100" class="m-gap p-gap">
|
||||
<mat-card>
|
||||
<mat-card-title fxLayout="row" fxLayoutAlign="start center">
|
||||
Yearly Sales
|
||||
<span fxFlex></span>
|
||||
<button mat-icon-button mat-button-sm [mat-menu-trigger-for]="card2" aria-label="Open card menu">
|
||||
<mat-icon>more_vert</mat-icon>
|
||||
</button>
|
||||
</mat-card-title>
|
||||
<mat-menu #card2="matMenu" x-position="before">
|
||||
<button mat-menu-item>
|
||||
<mat-icon>settings</mat-icon>
|
||||
Settings
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<mat-icon>more</mat-icon>
|
||||
View More
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<mat-icon>notifications_off</mat-icon>
|
||||
Disable notifications
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<mat-icon>exit_to_app</mat-icon>
|
||||
Remove Panel
|
||||
</button>
|
||||
</mat-menu>
|
||||
<hr>
|
||||
<mat-card-content>
|
||||
<canvas height="200" baseChart class="chart" [datasets]="ComboChartData" [labels]="comboChartLabels" [options]="ComboChartOptions" [colors]="chartColors" [legend]="comboChartLegend" [chartType]="barChartType"></canvas>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
<div fxFlex.gt-sm="33.33%" fxFlex.gt-xs="50" fxFlex="100" class="m-gap p-gap">
|
||||
<mat-card>
|
||||
<mat-card-title fxLayout="row" fxLayoutAlign="start center">
|
||||
Sales Report
|
||||
<span fxFlex></span>
|
||||
<button mat-icon-button mat-button-sm [mat-menu-trigger-for]="card3" aria-label="Open card menu">
|
||||
<mat-icon>more_vert</mat-icon>
|
||||
</button>
|
||||
</mat-card-title>
|
||||
<mat-menu #card3="matMenu" x-position="before">
|
||||
<button mat-menu-item>
|
||||
<mat-icon>settings</mat-icon>
|
||||
Settings
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<mat-icon>more</mat-icon>
|
||||
View More
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<mat-icon>notifications_off</mat-icon>
|
||||
Disable notifications
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<mat-icon>exit_to_app</mat-icon>
|
||||
Remove Panel
|
||||
</button>
|
||||
</mat-menu>
|
||||
<hr>
|
||||
<mat-card-content>
|
||||
<canvas height="200" baseChart class="chart" [datasets]="bubbleChartData" [labels]="comboChartLabels" [options]="ComboChartOptions" [colors]="chartColors" [legend]="comboChartLegend" [chartType]="bubbleChartType"></canvas>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
<div fxLayout="row" fxLayoutWrap="wrap">
|
||||
<div fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="66.66" fxFlex.lg="66.66" fxFlex.xl="66.66" fxFlex="100" class="m-gap p-gap">
|
||||
<div class='profile' ontouchstart>
|
||||
<aside class='avatar'></aside>
|
||||
<section class='info'>
|
||||
<h1 class="mb-1 mr-1 ml-1">Gabrielle Wee</h1>
|
||||
<h2 class="mb-1 mr-1 ml-1">UI Designer</h2>
|
||||
<a class='follow'>+ Follow</a>
|
||||
<ul class="prof-list">
|
||||
<li>
|
||||
<a class='link' target='_blank'>
|
||||
<i class="fa fa-facebook"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class='link' target='_blank'>
|
||||
<i class="fa fa-google"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class='link' target='_blank'>
|
||||
<i class="fa fa-twitter"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column" fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="33.33" fxFlex.lg="33.33" fxFlex.xl="33.33" fxFlex="100">
|
||||
<mat-card>
|
||||
<div class="wheather-widget text-center grad-blue">
|
||||
<div class="wheather-today">
|
||||
<h3 class="mb-3">Today</h3>
|
||||
<i class="wi wi-day-cloudy mat-text-accent"></i>
|
||||
<h3>13 ℃</h3>
|
||||
Surrey, Canada
|
||||
</div>
|
||||
<div class="wheather-future">
|
||||
<div fxLayout="row" fxLayoutWrap="wrap">
|
||||
<div fxFlex.gt-sm="50%" fxFlex="100" class="m-gap p-gap wheather-child">
|
||||
<p>Yesterday</p>
|
||||
<i class="wi wi-day-rain-mix mb-2 mat-text-primary"></i>
|
||||
<h3>13 ℃</h3>
|
||||
</div>
|
||||
<div fxFlex.gt-sm="50%" fxFlex="100" class="m-gap p-gap wheather-child">
|
||||
<p>Tomorrow</p>
|
||||
<i class="wi wi-day-cloudy-high mb-2 mat-text-primary"></i>
|
||||
<h3>13 ℃</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
<div fxLayout="row" fxLayoutWrap="wrap">
|
||||
<div fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="66.66" fxFlex.lg="66.66" fxFlex.xl="66.66" fxFlex="100" class="m-gap p-gap">
|
||||
<mat-card>
|
||||
<mat-card-title fxLayout="row" fxLayoutAlign="start center">
|
||||
Recent Comments
|
||||
<span fxFlex></span>
|
||||
<button mat-icon-button mat-button-sm [mat-menu-trigger-for]="card3" aria-label="Open card menu">
|
||||
<mat-icon>more_vert</mat-icon>
|
||||
</button>
|
||||
</mat-card-title>
|
||||
<hr>
|
||||
<div class="card-comment-widget">
|
||||
<mat-list>
|
||||
<mat-list-item>
|
||||
<img mat-list-avatar src="assets/images/face3.jpg" alt="">
|
||||
<h3 mat-line>John Doe </h3>
|
||||
<p mat-line> Weekend - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quia natus ullam aperiam expedita aut deserunt officia harum culpa at sed consequuntur quidem eum voluptatibus laudantium saepe, facere, sint quibusdam </p>
|
||||
<div class="comment-time">
|
||||
Oct-11,17
|
||||
</div>
|
||||
</mat-list-item>
|
||||
<mat-list-item>
|
||||
<img mat-list-avatar src="assets/images/face3.jpg" alt="">
|
||||
<h3 mat-line> John Doe </h3>
|
||||
<p mat-line> Sunday - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quia natus ullam aperiam expedita aut deserunt officia harum culpa at sed consequuntur quidem eum voluptatibus laudantium saepe, facere, sint quibusdam </p>
|
||||
<div class="comment-time">
|
||||
Oct-11,17
|
||||
</div>
|
||||
</mat-list-item>
|
||||
<mat-list-item>
|
||||
<img mat-list-avatar src="assets/images/face3.jpg" alt="">
|
||||
<h3 mat-line> Mellisha Whill </h3>
|
||||
<p mat-line> Sturday - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quia natus ullam aperiam expedita aut deserunt officia harum culpa at sed consequuntur quidem eum voluptatibus laudantium saepe, facere, sint quibusdam </p>
|
||||
<div class="comment-time">
|
||||
Oct-11,17
|
||||
</div>
|
||||
</mat-list-item>
|
||||
<mat-list-item>
|
||||
<img mat-list-avatar src="assets/images/face3.jpg" alt="">
|
||||
<h3 mat-line> John Doe </h3>
|
||||
<p mat-line> Tuesday - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quia natus ullam aperiam expedita aut deserunt officia harum culpa at sed consequuntur quidem eum voluptatibus laudantium saepe, facere, sint quibusdam </p>
|
||||
<div class="comment-time">
|
||||
Oct-11,17
|
||||
</div>
|
||||
</mat-list-item>
|
||||
<mat-list-item>
|
||||
<img mat-list-avatar src="assets/images/face3.jpg" alt="">
|
||||
<h3 mat-line> Meek Mill </h3>
|
||||
<p mat-line> Monday - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quia natus ullam aperiam expedita aut deserunt officia harum culpa at sed consequuntur quidem eum voluptatibus laudantium saepe, facere, sint quibusdam </p>
|
||||
<div class="comment-time">
|
||||
Oct-11,17
|
||||
</div>
|
||||
</mat-list-item>
|
||||
<mat-list-item>
|
||||
<img mat-list-avatar src="assets/images/face3.jpg" alt="">
|
||||
<h3 mat-line> Kim Jama </h3>
|
||||
<p mat-line> Thursday - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quia natus ullam aperiam expedita aut deserunt officia harum culpa at sed consequuntur quidem eum voluptatibus laudantium saepe, facere, sint quibusdam </p>
|
||||
<div class="comment-time">
|
||||
Oct-11,17
|
||||
</div>
|
||||
</mat-list-item>
|
||||
</mat-list>
|
||||
</div>
|
||||
</mat-card>
|
||||
</div>
|
||||
<div class="column" fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="33.33" fxFlex.lg="33.33" fxFlex.xl="33.33" fxFlex="100">
|
||||
<!-- Post-->
|
||||
<div class="post-module">
|
||||
<!-- Thumbnail-->
|
||||
<div class="thumbnail">
|
||||
<div class="date">
|
||||
<div class="day">27</div>
|
||||
<div class="month">Mar</div>
|
||||
</div>
|
||||
<img src="assets/images/unsplash/1.jpg" />
|
||||
</div>
|
||||
<!-- Post Content-->
|
||||
<div class="post-content">
|
||||
<div class="category">Photos</div>
|
||||
<h1 class="title">City Lights in New York</h1>
|
||||
<div class="p-data">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam necessitatibus molestiae similique qui ad explicabo, laboriosam dolores autem maiores a.</p>
|
||||
</div>
|
||||
<div class="post-meta"><span class="timestamp"><i class="fa fa-clock-o"></i> 6 mins ago</span><span class="comments"><i class="fa fa-comments"></i><a href="#"> 39 comments</a></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div fxLayout="row" fxLayoutWrap="wrap">
|
||||
<div fxFlex.gt-sm="66.66%" fxFlex="100" class="m-gap p-gap">
|
||||
<ngx-datatable class="material" [rows]="rows" [columnMode]="'force'" [headerHeight]="50" [footerHeight]="0" [rowHeight]="'auto'">
|
||||
<ngx-datatable-column name="Project">
|
||||
<ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
|
||||
{{row['project']}}
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="Due Date">
|
||||
<ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
|
||||
{{row['date'] | date: 'MMMM dd'}}
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="Progress">
|
||||
<ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
|
||||
<mat-progress-bar mode="determinate" value="{{row['progress']}}" color="primary"></mat-progress-bar>
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
</ngx-datatable>
|
||||
</div>
|
||||
<div fxFlex.gt-sm="33.33%" fxFlex="100" class="m-gap p-gap">
|
||||
<mat-card>
|
||||
<mat-card-title>Newsfeed</mat-card-title>
|
||||
<mat-card-subtitle>Stories posted today</mat-card-subtitle>
|
||||
<hr>
|
||||
<mat-list>
|
||||
<ng-template let-item let-last="last" ngFor [ngForOf]="messages">
|
||||
<mat-list-item>
|
||||
<img mat-list-avatar src="{{item.photo}}" alt="">
|
||||
<h3 mat-line> {{item.from}} </h3>
|
||||
<p mat-line> {{item.subject}} - {{item.message}} </p>
|
||||
</mat-list-item>
|
||||
</ng-template>
|
||||
</mat-list>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
<div fxLayout="row" fxLayoutWrap="wrap">
|
||||
<div fxFlex.gt-sm="33.33%" fxFlex="100" class="m-gap p-gap">
|
||||
<mat-card>
|
||||
<div fxLayout="row" fxLayoutWrap="wrap">
|
||||
<div fxFlex.gt-sm="50%" fxLayoutAlign="center center" fxFlex="100" class="m-gap p-gap mb-0 grad-blue icon-tp">
|
||||
<div class="text-center">
|
||||
<i class="fa fa-facebook fa-3x"></i>
|
||||
<div class="d-inline-block">
|
||||
<h5>Facebook</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div fxFlex.gt-sm="50%" fxFlex="100" fxLayoutAlign="center center" class="m-gap p-gap mb-0">
|
||||
<div class="card-block text-center">
|
||||
<div class="row">
|
||||
<div>
|
||||
<h2>31</h2>
|
||||
<p class="text-muted">Online</p>
|
||||
</div>
|
||||
<hr>
|
||||
<div>
|
||||
<h2>11</h2>
|
||||
<p class="text-muted">Comment</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card>
|
||||
</div>
|
||||
<div fxFlex.gt-sm="33.33%" fxFlex="100" class="m-gap p-gap">
|
||||
<mat-card>
|
||||
<div fxLayout="row" fxLayoutWrap="wrap">
|
||||
<div fxFlex.gt-sm="50%" fxLayoutAlign="center center" fxFlex="100" class="m-gap p-gap mb-0 grad-green icon-tp">
|
||||
<div class="text-center">
|
||||
<i class="fa fa-twitter fa-3x"></i>
|
||||
<div class="d-inline-block">
|
||||
<h5>Twitter</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div fxFlex.gt-sm="50%" fxFlex="100" fxLayoutAlign="center center" class="m-gap p-gap mb-0">
|
||||
<div class="card-block text-center">
|
||||
<div class="row">
|
||||
<div>
|
||||
<h2>76</h2>
|
||||
<p class="text-muted">Online</p>
|
||||
</div>
|
||||
<hr>
|
||||
<div>
|
||||
<h2>19</h2>
|
||||
<p class="text-muted">Comment</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card>
|
||||
</div>
|
||||
<div fxFlex.gt-sm="33.33%" fxFlex="100" class="m-gap p-gap">
|
||||
<mat-card>
|
||||
<div fxLayout="row" fxLayoutWrap="wrap">
|
||||
<div fxFlex.gt-sm="50%" fxLayoutAlign="center center" fxFlex="100" class="m-gap p-gap mb-0 grad-red icon-tp">
|
||||
<div class="text-center">
|
||||
<i class="fa fa-linkedin fa-3x"></i>
|
||||
<div class="d-inline-block">
|
||||
<h5>Linkedin</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div fxFlex.gt-sm="50%" fxFlex="100" fxLayoutAlign="center center" class="m-gap p-gap mb-0">
|
||||
<div class="card-block text-center">
|
||||
<div class="row">
|
||||
<div>
|
||||
<h2>9</h2>
|
||||
<p class="text-muted">Online</p>
|
||||
</div>
|
||||
<hr>
|
||||
<div>
|
||||
<h2>21</h2>
|
||||
<p class="text-muted">Comment</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
539
sineedge_front/src/app/dashboard/dashboard.component.scss
Executable file
539
sineedge_front/src/app/dashboard/dashboard.component.scss
Executable file
@ -0,0 +1,539 @@
|
||||
$red: #f5515f;
|
||||
$blue: #05abe0;
|
||||
$grey: #343434;
|
||||
$p: 12px;
|
||||
.profile {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(white, .25);
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 0 20px rgba(darken($red, 40%), .2);
|
||||
&.pre-enter {
|
||||
transform-origin: center center;
|
||||
transform: scaleY(0);
|
||||
.avatar {
|
||||
transform-origin: center top;
|
||||
transform: scaleY(0);
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
a.follow,
|
||||
a.link {
|
||||
opacity: 0;
|
||||
transform: translateY(300px);
|
||||
}
|
||||
}
|
||||
&.on-enter {
|
||||
animation: scaleYIn 1000ms ease-out forwards;
|
||||
.avatar {
|
||||
animation: scaleYIn-small 750ms ease-out forwards 1000ms;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
a.follow,
|
||||
a.link {
|
||||
opacity: 1;
|
||||
animation: slideInUp 1000ms ease-out forwards;
|
||||
}
|
||||
h1 {
|
||||
animation-delay: 1050ms;
|
||||
}
|
||||
h2 {
|
||||
animation-delay: 1100ms;
|
||||
}
|
||||
a.follow {
|
||||
animation-delay: 1250ms;
|
||||
}
|
||||
li {
|
||||
&:nth-child(1) {
|
||||
a.link {
|
||||
animation-delay: 1300ms;
|
||||
}
|
||||
}
|
||||
&:nth-child(2) {
|
||||
a.link {
|
||||
animation-delay: 1350ms;
|
||||
}
|
||||
}
|
||||
&:nth-child(3) {
|
||||
a.link {
|
||||
animation-delay: 1400ms;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: white;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.avatar,
|
||||
.info {
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
background: url('../../assets/images/1.jpg') no-repeat center center / cover;
|
||||
clip-path: polygon(0 0, 100% 0, 100% 75%, 0% 100%);
|
||||
}
|
||||
|
||||
.prof-list {
|
||||
li {
|
||||
display: inline-block;
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
h1 {
|
||||
padding: $p $p 0;
|
||||
width: 100%;
|
||||
font-size: 24px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
h2,
|
||||
a.follow {
|
||||
display: block;
|
||||
|
||||
border-radius: 2px;
|
||||
padding: $p/2;
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
h2 {
|
||||
background: $red;
|
||||
background: linear-gradient(135deg, rgba(#f5825f, 1) 0%, rgba(#f5005f, 1) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5825f', endColorstr='#f5005f', GradientType=1);
|
||||
}
|
||||
a.follow {
|
||||
margin-left: $p;
|
||||
background: $blue;
|
||||
background: linear-gradient(135deg, rgba(#05c8e0, 1) 0%, rgba(#057fe0, 1) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#05c8e0', endColorstr='#057fe0', GradientType=1);
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: #05c8e0;
|
||||
background: linear-gradient(135deg, rgba(lighten(#05c8e0, 10%), 1) 0%, rgba(lighten(#057fe0, 10%), 1) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='lighten(#05c8e0, 10%)', endColorstr='lighten(#057fe0, 10%)', GradientType=1);
|
||||
}
|
||||
&:active {
|
||||
background: #057fe0;
|
||||
background: linear-gradient(135deg, rgba(darken(#05c8e0, 5%), 1) 0%, rgba(darken(#057fe0, 5%), 1) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='darken(#05c8e0, 5%)', endColorstr='darken(#057fe0, 5%)', GradientType=1);
|
||||
}
|
||||
}
|
||||
ul {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: $p/2;
|
||||
width: 100%;
|
||||
li {
|
||||
padding: $p/2;
|
||||
}
|
||||
}
|
||||
a.link {
|
||||
display: block;
|
||||
border-radius: 100%;
|
||||
background: $blue;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
a.link {
|
||||
&.portfolio {
|
||||
background: #f5c8bf;
|
||||
background: linear-gradient(135deg, rgba(#f5c8bf, 1) 0%, rgba(#f58dbf, 1) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5c8bf', endColorstr='#f58dbf', GradientType=1);
|
||||
box-shadow: inset 0 0 10px rgba(#f58dbf, .5);
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: lighten(#f5c8bf, 5%);
|
||||
background: linear-gradient(135deg, rgba(lighten(#f5c8bf, 5%), 1) 0%, rgba(lighten(#f58dbf, 5%), 1) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='lighten(#f5c8bf, 5%)', endColorstr='lighten(#f58dbf, 5%)', GradientType=1);
|
||||
box-shadow: inset 0 0 10px rgba(lighten(#f58dbf, 5%), .5);
|
||||
}
|
||||
&:active {
|
||||
background: darken(#f5c8bf, 5%);
|
||||
background: linear-gradient(135deg, rgba(darken(#f5c8bf, 5%), 1) 0%, rgba(darken(#f58dbf, 5%), 1) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='darken(#f5c8bf, 5%)', endColorstr='darken(#f58dbf, 5%)', GradientType=1);
|
||||
box-shadow: inset 0 0 10px rgba(darken(#f58dbf, 5%), .5);
|
||||
}
|
||||
}
|
||||
&.codepen {
|
||||
background: #fcd000;
|
||||
background: linear-gradient(135deg, rgba(#fcd000, 1) 0%, rgba(#fc9a00, 1) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcd000', endColorstr='#fc9a00', GradientType=1);
|
||||
box-shadow: inset 0 0 10px rgba(#fc9a00, .5);
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: lighten(#fcd000, 5%);
|
||||
background: linear-gradient(135deg, rgba(lighten(#fcd000, 5%), 1) 0%, rgba(lighten(#fc9a00, 5%), 1) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='lighten(#fcd000, 5%)', endColorstr='lighten(#fc9a00, 5%)', GradientType=1);
|
||||
box-shadow: inset 0 0 10px rgba(lighten(#fc9a00, 5%), .5);
|
||||
}
|
||||
&:active {
|
||||
background: darken(#fcd000, 5%);
|
||||
background: linear-gradient(135deg, rgba(darken(#fcd000, 5%), 1) 0%, rgba(darken(#fc9a00, 5%), 1) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='darken(#fcd000, 5%)', endColorstr='darken(#fc9a00, 5%)', GradientType=1);
|
||||
box-shadow: inset 0 0 10px rgba(darken(#fc9a00, 5%), .5);
|
||||
}
|
||||
}
|
||||
&.github {
|
||||
background: #41adc4;
|
||||
background: linear-gradient(135deg, rgba(#41adc4, 1) 0%, rgba(#4183c4, 1) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#41adc4', endColorstr='#4183c4', GradientType=1);
|
||||
box-shadow: inset 0 0 10px rgba(#4183c4, .5);
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: lighten(#41adc4, 5%);
|
||||
background: linear-gradient(135deg, rgba(lighten(#41adc4, 5%), 1) 0%, rgba(lighten(#4183c4, 5%), 1) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='lighten(#41adc4, 5%)', endColorstr='lighten(#4183c4, 5%)', GradientType=1);
|
||||
box-shadow: inset 0 0 10px rgba(lighten(#4183c4, 5%), .5);
|
||||
}
|
||||
&:active {
|
||||
background: darken(#41adc4, 5%);
|
||||
background: linear-gradient(135deg, rgba(darken(#41adc4, 5%), 1) 0%, rgba(darken(#4183c4, 5%), 1) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='darken(#41adc4, 5%)', endColorstr='darken(#4183c4, 5%)', GradientType=1);
|
||||
box-shadow: inset 0 0 10px rgba(darken(#4183c4, 5%), .5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 470px) {
|
||||
.profile {
|
||||
display: flex;
|
||||
&.pre-enter {
|
||||
transform: scaleX(0);
|
||||
.avatar {
|
||||
transform-origin: left center;
|
||||
transform: scaleX(0);
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
a.follow,
|
||||
a.link {
|
||||
transform: translateX(300px);
|
||||
}
|
||||
}
|
||||
&.on-enter {
|
||||
animation-name: scaleXIn;
|
||||
.avatar {
|
||||
animation-name: scaleXIn-small;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
a.follow,
|
||||
a.link {
|
||||
animation-name: slideInLeft;
|
||||
}
|
||||
}
|
||||
}
|
||||
.background {
|
||||
mix-blend-mode: overlay;
|
||||
}
|
||||
.avatar,
|
||||
.info {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
}
|
||||
.avatar {
|
||||
clip-path: polygon(0 0, 100% 0, 75% 100%, 0% 100%);
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 470px) and (min-height: 600px) {
|
||||
.profile {
|
||||
max-height: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* https://goo.gl/jIUq3E */
|
||||
|
||||
@keyframes scaleXIn {
|
||||
0% {
|
||||
transform: matrix3d(0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
4.7% {
|
||||
transform: matrix3d(0.45, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
9.41% {
|
||||
transform: matrix3d(0.883, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
14.11% {
|
||||
transform: matrix3d(1.141, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
18.72% {
|
||||
transform: matrix3d(1.212, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
24.32% {
|
||||
transform: matrix3d(1.151, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
29.93% {
|
||||
transform: matrix3d(1.048, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
35.54% {
|
||||
transform: matrix3d(0.979, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
41.04% {
|
||||
transform: matrix3d(0.961, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
52.15% {
|
||||
transform: matrix3d(0.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
63.26% {
|
||||
transform: matrix3d(1.007, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
85.49% {
|
||||
transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
100% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* https://goo.gl/auuhcg */
|
||||
|
||||
@keyframes scaleYIn {
|
||||
0% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
4.7% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 0.45, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
9.41% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 0.883, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
14.11% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1.141, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
18.72% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1.212, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
24.32% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1.151, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
29.93% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1.048, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
35.54% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 0.979, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
41.04% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 0.961, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
52.15% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 0.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
63.26% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1.007, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
85.49% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
100% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* https://goo.gl/dNBqrt */
|
||||
|
||||
@keyframes scaleXIn-small {
|
||||
0% {
|
||||
transform: matrix3d(0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
6.31% {
|
||||
transform: matrix3d(0.384, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
12.51% {
|
||||
transform: matrix3d(0.621, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
18.82% {
|
||||
transform: matrix3d(0.771, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
25.03% {
|
||||
transform: matrix3d(0.862, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
37.54% {
|
||||
transform: matrix3d(0.952, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
50.05% {
|
||||
transform: matrix3d(0.984, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
75.08% {
|
||||
transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
100% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* https://goo.gl/jZL0uj */
|
||||
|
||||
@keyframes scaleYIn-small {
|
||||
0% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
6.31% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 0.384, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
12.51% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 0.621, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
18.82% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 0.771, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
25.03% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 0.862, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
37.54% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 0.952, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
50.05% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 0.984, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
75.08% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
100% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* https://goo.gl/Ne0Mkr */
|
||||
|
||||
@keyframes slideInLeft {
|
||||
0% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 300, 0, 0, 1);
|
||||
}
|
||||
6.31% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 184.858, 0, 0, 1);
|
||||
}
|
||||
12.51% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 113.68, 0, 0, 1);
|
||||
}
|
||||
18.82% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 68.663, 0, 0, 1);
|
||||
}
|
||||
25.03% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 41.37, 0, 0, 1);
|
||||
}
|
||||
37.54% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 14.382, 0, 0, 1);
|
||||
}
|
||||
50.05% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 4.724, 0, 0, 1);
|
||||
}
|
||||
75.08% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.381, 0, 0, 1);
|
||||
}
|
||||
100% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* https://goo.gl/MSqtd5 */
|
||||
|
||||
@keyframes slideInUp {
|
||||
0% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 300, 0, 1);
|
||||
}
|
||||
6.31% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 184.858, 0, 1);
|
||||
}
|
||||
12.51% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 113.68, 0, 1);
|
||||
}
|
||||
18.82% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 68.663, 0, 1);
|
||||
}
|
||||
25.03% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 41.37, 0, 1);
|
||||
}
|
||||
37.54% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 14.382, 0, 1);
|
||||
}
|
||||
50.05% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 4.724, 0, 1);
|
||||
}
|
||||
75.08% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.381, 0, 1);
|
||||
}
|
||||
100% {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
}
|
||||
|
||||
//wheather
|
||||
.card-wheather {
|
||||
height: 220px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.city {
|
||||
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.date {
|
||||
font-size: 20px;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
.grad-blue {
|
||||
background: linear-gradient(58deg, #f44336, #673ab7);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.grad-green {
|
||||
background: linear-gradient(58deg, #009688, #673ab7);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.grad-red {
|
||||
background: linear-gradient(58deg, #f44336, #673ab7);
|
||||
color: #fff;
|
||||
}
|
||||
.card-wheather{
|
||||
padding: 2rem;
|
||||
}
|
||||
.temp {
|
||||
font-size: 50px;
|
||||
display: inline-block;
|
||||
}
|
||||
226
sineedge_front/src/app/dashboard/dashboard.component.ts
Executable file
226
sineedge_front/src/app/dashboard/dashboard.component.ts
Executable file
@ -0,0 +1,226 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { single, multi } from './charts.data';
|
||||
|
||||
@Component({
|
||||
selector: 'app-dashboard',
|
||||
templateUrl: './dashboard.component.html',
|
||||
styleUrls: ['./dashboard.component.scss']
|
||||
})
|
||||
export class DashboardComponent {
|
||||
|
||||
public single: any[];
|
||||
public multi: any[];
|
||||
|
||||
public showXAxis = true;
|
||||
public showYAxis = true;
|
||||
public gradient = false;
|
||||
public showLegend = false;
|
||||
public showXAxisLabel = false;
|
||||
public xAxisLabel = 'Year';
|
||||
public showYAxisLabel = false;
|
||||
public yAxisLabel = 'Population';
|
||||
public colorScheme = {
|
||||
domain: ['#673ab7', '#f44336', '#009688 ', '#2196f3']
|
||||
};
|
||||
public autoScale = true;
|
||||
|
||||
rows = [];
|
||||
|
||||
// Shared chart options
|
||||
globalChartOptions: any = {
|
||||
responsive: true,
|
||||
legend: {
|
||||
display: false,
|
||||
position: 'bottom'
|
||||
}
|
||||
};
|
||||
|
||||
pieChartData: number[] = [300, 500, 100];
|
||||
doughnutOptions: any = Object.assign({
|
||||
elements: {
|
||||
arc: {
|
||||
borderWidth: 0
|
||||
}
|
||||
}
|
||||
}, this.globalChartOptions);
|
||||
doughnutChartColors: any[] = [{
|
||||
backgroundColor: ['#673ab7', '#f44336', '#009688 ', '#2196f3']
|
||||
}];
|
||||
pieChartLabels: string[] = ['Download Sales', 'In-Store Sales', 'Mail Sales'];
|
||||
pieChartType = 'pie';
|
||||
|
||||
// Bar
|
||||
barChartLabels: string[] = ['1', '2', '3', '4', '5', '6', '7'];
|
||||
barChartType = 'bar';
|
||||
barChartLegend = true;
|
||||
barChartData: any[] = [{
|
||||
data: [6, 5, 8, 8, 5, 5, 4],
|
||||
label: 'Series A',
|
||||
borderWidth: 0
|
||||
}, {
|
||||
data: [5, 4, 4, 2, 6, 2, 5],
|
||||
label: 'Series B',
|
||||
borderWidth: 0
|
||||
}];
|
||||
barChartOptions: any = Object.assign({
|
||||
scaleShowVerticalLines: false,
|
||||
tooltips: {
|
||||
mode: 'index',
|
||||
intersect: false
|
||||
},
|
||||
responsive: true,
|
||||
scales: {
|
||||
xAxes: [{
|
||||
gridLines: {
|
||||
color: 'rgba(0,0,0,0.02)',
|
||||
defaultFontColor: 'rgba(0,0,0,0.02)',
|
||||
zeroLineColor: 'rgba(0,0,0,0.02)'
|
||||
},
|
||||
stacked: true,
|
||||
ticks: {
|
||||
beginAtZero: true
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
gridLines: {
|
||||
color: 'rgba(0,0,0,0.02)',
|
||||
defaultFontColor: 'rgba(0,0,0,0.02)',
|
||||
zeroLineColor: 'rgba(0,0,0,0.02)'
|
||||
},
|
||||
stacked: true
|
||||
}]
|
||||
}
|
||||
}, this.globalChartOptions);
|
||||
|
||||
// Bubble Chart
|
||||
bubbleChartData: Array <any> = [{
|
||||
data: [{
|
||||
x: 6,
|
||||
y: 5,
|
||||
r: 15,
|
||||
}, {
|
||||
x: 5,
|
||||
y: 4,
|
||||
r: 10,
|
||||
}, {
|
||||
x: 8,
|
||||
y: 4,
|
||||
r: 6,
|
||||
}, {
|
||||
x: 8,
|
||||
y: 4,
|
||||
r: 6,
|
||||
}, {
|
||||
x: 5,
|
||||
y: 14,
|
||||
r: 14,
|
||||
}, {
|
||||
x: 5,
|
||||
y: 6,
|
||||
r: 8,
|
||||
}, {
|
||||
x: 4,
|
||||
y: 2,
|
||||
r: 10,
|
||||
}],
|
||||
label: 'Series A',
|
||||
borderWidth: 1
|
||||
}];
|
||||
bubbleChartType = 'bubble';
|
||||
|
||||
// combo chart
|
||||
comboChartLabels: Array <any> = ['1', '2', '3', '4', '5', '6', '7'];
|
||||
chartColors: Array <any> = [{ // red
|
||||
backgroundColor: '#f44336',
|
||||
borderColor: '#f44336',
|
||||
pointBackgroundColor: '#f44336',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(148,159,177,0.8)'
|
||||
}, { // blue
|
||||
backgroundColor: '#7986cb',
|
||||
borderColor: '#3f51b5',
|
||||
pointBackgroundColor: '#3f51b5',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(148,159,177,0.8)'
|
||||
}, { // grey
|
||||
backgroundColor: 'rgba(148,159,177,0.2)',
|
||||
borderColor: 'rgba(148,159,177,1)',
|
||||
pointBackgroundColor: 'rgba(148,159,177,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(148,159,177,0.8)'
|
||||
}];
|
||||
comboChartLegend = true;
|
||||
ComboChartData: Array <any> = [{
|
||||
data: [6, 5, 8, 8, 5, 5, 4],
|
||||
label: 'Series A',
|
||||
borderWidth: 1,
|
||||
type: 'line',
|
||||
fill: false
|
||||
}, {
|
||||
data: [5, 4, 4, 2, 6, 2, 5],
|
||||
label: 'Series B',
|
||||
borderWidth: 1,
|
||||
type: 'bar',
|
||||
}];
|
||||
ComboChartOptions: any = Object.assign({
|
||||
animation: false,
|
||||
scales: {
|
||||
xAxes: [{
|
||||
gridLines: {
|
||||
color: 'rgba(0,0,0,0.02)',
|
||||
zeroLineColor: 'rgba(0,0,0,0.02)'
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
gridLines: {
|
||||
color: 'rgba(0,0,0,0.02)',
|
||||
zeroLineColor: 'rgba(0,0,0,0.02)'
|
||||
},
|
||||
ticks: {
|
||||
beginAtZero: true,
|
||||
suggestedMax: 9,
|
||||
}
|
||||
}]
|
||||
}
|
||||
}, this.globalChartOptions);
|
||||
|
||||
// newsfeed
|
||||
messages: Object[] = [{
|
||||
from: 'Carolyn',
|
||||
message: 'Contrary to popular belief, Lorem Ipsum',
|
||||
photo: 'assets/images/face3.jpg',
|
||||
subject: 'Met, consectetur adipisic',
|
||||
}, {
|
||||
from: 'Chloe',
|
||||
message: 'It has roots in a piece of classica',
|
||||
photo: 'assets/images/face6.jpg',
|
||||
subject: 'Consectetur adipisic',
|
||||
}, {
|
||||
from: 'Diana',
|
||||
message: 'Professor at Hampden-Sydney College in Virginia',
|
||||
photo: 'assets/images/face4.jpg',
|
||||
subject: 'Onsectetur adipisic',
|
||||
}, ];
|
||||
|
||||
constructor() {
|
||||
this.fetch((data) => { this.rows = data; });
|
||||
Object.assign(this, {single, multi})
|
||||
}
|
||||
|
||||
onSelect(event) {
|
||||
console.log(event);
|
||||
}
|
||||
|
||||
// project table
|
||||
fetch(cb) {
|
||||
const req = new XMLHttpRequest();
|
||||
req.open('GET', `assets/data/projects.json`);
|
||||
req.onload = () => {
|
||||
cb(JSON.parse(req.response));
|
||||
};
|
||||
req.send();
|
||||
}
|
||||
}
|
||||
32
sineedge_front/src/app/dashboard/dashboard.module.ts
Executable file
32
sineedge_front/src/app/dashboard/dashboard.module.ts
Executable file
@ -0,0 +1,32 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { MatIconModule, MatCardModule, MatButtonModule, MatListModule, MatProgressBarModule, MatMenuModule } from '@angular/material';
|
||||
import { FlexLayoutModule } from '@angular/flex-layout';
|
||||
|
||||
import { ChartsModule } from 'ng2-charts/ng2-charts';
|
||||
import { NgxChartsModule} from '@swimlane/ngx-charts';
|
||||
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
|
||||
|
||||
import { DashboardComponent } from './dashboard.component';
|
||||
import { DashboardRoutes } from './dashboard.routing';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
RouterModule.forChild(DashboardRoutes),
|
||||
MatIconModule,
|
||||
MatCardModule,
|
||||
MatButtonModule,
|
||||
MatListModule,
|
||||
MatProgressBarModule,
|
||||
MatMenuModule,
|
||||
ChartsModule,
|
||||
NgxChartsModule,
|
||||
NgxDatatableModule,
|
||||
FlexLayoutModule
|
||||
],
|
||||
declarations: [ DashboardComponent ]
|
||||
})
|
||||
|
||||
export class DashboardModule {}
|
||||
8
sineedge_front/src/app/dashboard/dashboard.routing.ts
Executable file
8
sineedge_front/src/app/dashboard/dashboard.routing.ts
Executable file
@ -0,0 +1,8 @@
|
||||
import { Routes } from '@angular/router';
|
||||
|
||||
import { DashboardComponent } from './dashboard.component';
|
||||
|
||||
export const DashboardRoutes: Routes = [{
|
||||
path: '',
|
||||
component: DashboardComponent
|
||||
}];
|
||||
533
sineedge_front/src/app/layouts/admin/admin-layout.component.html
Executable file
533
sineedge_front/src/app/layouts/admin/admin-layout.component.html
Executable file
@ -0,0 +1,533 @@
|
||||
<div class="app search-i" [dir]="layoutDir" [ngClass]="[ menuLayout, selectedSidebarImage, selectedSidebarColor, selectedHeaderColor, collapsedClass]" [class.app-dark]="dark" [class.boxed]="boxed" [class.collapsed-sidebar]="collapseSidebar" [class.compact-sidebar]="compactSidebar" [class.bg-img-disable]="!sidebarBg">
|
||||
<mat-sidenav-container class="app-inner">
|
||||
<mat-sidenav #sidemenu class="sidebar-panel" id="sidebar-panel" [mode]="isOver() ? 'over' : 'side'" [opened]="!isOver()" (mouseover)="menuMouseOver()" (mouseout)="menuMouseOut()">
|
||||
<div class="opt-side relative ">
|
||||
<div class="sidebar-container ">
|
||||
<div class="branding text-center">
|
||||
<h2><i class="fa fa-superpowers" aria-hidden="true"></i>
|
||||
<span> {{userDep}}</span>
|
||||
|
||||
</h2>
|
||||
<span style="color:#fff">{{roles}}</span>
|
||||
</div>
|
||||
<div class="main-nav">
|
||||
<div class="user-pro-wrap">
|
||||
<div class="user-profile-thumb text-center">
|
||||
<div class="user-i">
|
||||
<img src="assets/images/userpic.jpg" class="rad-full mb-1" width="100" height="100" alt="">
|
||||
<div *ngIf="currentUser !=''"> <span>{{currentUser.user_full_name}}</span></div>
|
||||
<div *ngIf="currentUser.user_full_name ==''"> <span>----</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="most-used text-center">
|
||||
<a class="most-link" color="primary">
|
||||
<mat-icon>home</mat-icon>
|
||||
</a>
|
||||
<a class="most-link" color="primary">
|
||||
<mat-icon>person</mat-icon>
|
||||
</a>
|
||||
<a class="most-link" color="primary">
|
||||
<mat-icon>settings</mat-icon>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<mat-nav-list appAccordion class="navigation relative">
|
||||
<mat-list-item appAccordionLink *ngFor="let menuitem of menuItems.getAll()">
|
||||
<a appAccordionToggle class="relative" mat-ripple [routerLink]="['/', menuitem.state]" *ngIf="menuitem.type === 'link'">
|
||||
<mat-icon>{{ menuitem.icon }}</mat-icon>
|
||||
<span>{{ menuitem.name | translate }}</span>
|
||||
<span fxFlex></span>
|
||||
<span class="menu-badge mat-{{ badge.type }}" *ngFor="let badge of menuitem.badge">{{ badge.value }}</span>
|
||||
</a>
|
||||
<a appAccordionToggle class="relative" mat-ripple href="{{menuitem.state}}" *ngIf="menuitem.type === 'extLink'">
|
||||
<mat-icon>{{ menuitem.icon }}</mat-icon>
|
||||
<span>{{ menuitem.name | translate }}</span>
|
||||
<span fxFlex></span>
|
||||
<span class="menu-badge mat-{{ badge.type }}" *ngFor="let badge of menuitem.badge">{{ badge.value }}</span>
|
||||
</a>
|
||||
<a appAccordionToggle class="relative" mat-ripple href="{{menuitem.state}}" target="_blank" *ngIf="menuitem.type === 'extTabLink'">
|
||||
<mat-icon>{{ menuitem.icon }}</mat-icon>
|
||||
<span>{{ menuitem.name | translate }}</span>
|
||||
<span fxFlex></span>
|
||||
<span class="menu-badge mat-{{ badge.type }}" *ngFor="let badge of menuitem.badge">{{ badge.value }}</span>
|
||||
</a>
|
||||
<a appAccordionToggle class="relative" mat-ripple href="javascript:;" *ngIf="menuitem.type === 'sub'">
|
||||
<mat-icon>{{ menuitem.icon }}</mat-icon>
|
||||
<span>{{ menuitem.name | translate }}</span>
|
||||
<span fxFlex></span>
|
||||
<span class="menu-badge mat-{{ badge.type }}" *ngFor="let badge of menuitem.badge">{{ badge.value }}</span>
|
||||
<mat-icon class="menu-caret">arrow_drop_down</mat-icon>
|
||||
</a>
|
||||
<mat-nav-list class="sub-menu" *ngIf="menuitem.type === 'sub'">
|
||||
<mat-list-item *ngFor="let childitem of menuitem.children" routerLinkActive="open">
|
||||
<a [routerLink]="['/', menuitem.state, childitem.state ]" class="relative" mat-ripple>{{ childitem.name | translate }}</a>
|
||||
</mat-list-item>
|
||||
</mat-nav-list>
|
||||
</mat-list-item>
|
||||
<mat-divider></mat-divider>
|
||||
<mat-list-item>
|
||||
<a (click)="addMenuItem()">
|
||||
<mat-icon>add</mat-icon>
|
||||
<span>Add</span>
|
||||
</a>
|
||||
</mat-list-item>
|
||||
</mat-nav-list>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-overlay"></div>
|
||||
</mat-sidenav>
|
||||
<mat-toolbar class="main-header">
|
||||
<div class="horizontal-top-bar w-100">
|
||||
<div fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="33.33" fxFlex.lg="33.33" fxFlex.xl="33.33" fxFlex="100">
|
||||
<div class="search-bar" fxFlex>
|
||||
<form class="search-form">
|
||||
<mat-icon>search</mat-icon>
|
||||
<input type="text" placeholder="Search" autofocus="true" />
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="33.33" fxFlex.lg="33.33" fxFlex.xl="33.33" fxFlex="100">
|
||||
<div class="horizontal-logo">
|
||||
<div class="branding text-center">
|
||||
|
||||
<h2><i class="fa fa-superpowers" aria-hidden="true"></i> <span> {{userDep}}({{roles}})
|
||||
<!-- <h4>Welcome to {{currentUser.user_full_name}}</h4> -->
|
||||
</span>
|
||||
</h2>
|
||||
<!-- <h4><i class="fa fa-superpowers" aria-hidden="true"></i> <span> {{roles}}</span>
|
||||
</h4> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="33.33" fxFlex.lg="33.33" fxFlex.xl="33.33" fxFlex="100">
|
||||
<div class="menu-links">
|
||||
<button appToggleFullscreen mat-icon-button>
|
||||
<mat-icon>fullscreen</mat-icon>
|
||||
</button>
|
||||
<button [mat-menu-trigger-for]="user2" mat-icon-button class="ml-xs overflow-visible">
|
||||
<mat-icon>message</mat-icon>
|
||||
</button>
|
||||
<mat-menu #user2="matMenu" class="opt-menu" x-position="after">
|
||||
<div mat-menu-item class="head-menu grad-blue">
|
||||
Message Menu
|
||||
</div>
|
||||
<button mat-menu-item>
|
||||
<img width="40" src="assets/images/user-1.jpg" alt="">
|
||||
Next Update for angular 5
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<img width="40" src="assets/images/user-2.jpg" alt="">
|
||||
Check out our new admin theme
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<img width="40" src="assets/images/user-3.jpg" alt="">
|
||||
Expedita quo, laboriosam officia.
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<img width="40" src="assets/images/user-4.jpg" alt="">
|
||||
Lorem ipsum dolor sit amet consectetur.
|
||||
</button>
|
||||
</mat-menu>
|
||||
<button [mat-menu-trigger-for]="user1" mat-icon-button class="ml-xs overflow-visible">
|
||||
<mat-icon>reorder</mat-icon>
|
||||
<span class="notification-label">3</span>
|
||||
</button>
|
||||
<mat-menu #user1="matMenu" class="opt-menu" x-position="before">
|
||||
<div mat-menu-item class="head-menu grad-blue">
|
||||
User Menu
|
||||
</div>
|
||||
<button mat-menu-item>
|
||||
<mat-icon>show_chart</mat-icon>
|
||||
Charts
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<mat-icon>navigation</mat-icon>
|
||||
Maps
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<mat-icon>web</mat-icon>
|
||||
Calendar Settings
|
||||
</button>
|
||||
</mat-menu>
|
||||
<button (click)="end.toggle()" mat-icon-button class="ml-xs overflow-visible">
|
||||
<mat-icon>notifications</mat-icon>
|
||||
<span class="notification-label">2</span>
|
||||
</button>
|
||||
<button [mat-menu-trigger-for]="user" mat-icon-button class="ml-xs">
|
||||
<mat-icon>person</mat-icon>
|
||||
</button>
|
||||
<mat-menu #user="matMenu" class="opt-menu" x-position="before">
|
||||
<div mat-menu-item class="head-menu grad-blue">
|
||||
Settings
|
||||
</div>
|
||||
<button mat-menu-item>
|
||||
<mat-icon>settings</mat-icon>
|
||||
Setting
|
||||
</button>
|
||||
<button mat-menu-item (click)="userProfile()">
|
||||
<mat-icon>account_box</mat-icon>
|
||||
Profile
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<mat-icon>notifications_off</mat-icon>
|
||||
Disable notifications
|
||||
</button>
|
||||
<button mat-menu-item (click)="logout()">
|
||||
<mat-icon>exit_to_app</mat-icon>
|
||||
Sign Out
|
||||
</button>
|
||||
</mat-menu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="vertical-menu w-100">
|
||||
<button (click)="menuToggleFunc()" mat-icon-button class="lines-btn">
|
||||
<mat-icon>menu</mat-icon>
|
||||
</button>
|
||||
<div class="search-bar" fxFlex>
|
||||
<form class="search-form" fxShow="false" fxShow.gt-xs>
|
||||
<mat-icon>search</mat-icon>
|
||||
<input type="text" placeholder="Search" autofocus="true" />
|
||||
</form>
|
||||
</div>
|
||||
<span fxFlex></span>
|
||||
<button appToggleFullscreen mat-icon-button>
|
||||
<mat-icon>fullscreen</mat-icon>
|
||||
</button>
|
||||
<button [mat-menu-trigger-for]="user2" mat-icon-button class="ml-xs overflow-visible">
|
||||
<mat-icon>message</mat-icon>
|
||||
</button>
|
||||
<mat-menu #user2="matMenu" class="opt-menu" x-position="after">
|
||||
<div mat-menu-item class="head-menu grad-blue">
|
||||
Message Menu
|
||||
</div>
|
||||
<button mat-menu-item>
|
||||
<img width="40" src="assets/images/user-1.jpg" alt="">
|
||||
Next Update for angular 5
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<img width="40" src="assets/images/user-2.jpg" alt="">
|
||||
Check out our new admin theme
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<img width="40" src="assets/images/user-3.jpg" alt="">
|
||||
Expedita quo, laboriosam officia.
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<img width="40" src="assets/images/user-4.jpg" alt="">
|
||||
Lorem ipsum dolor sit amet consectetur.
|
||||
</button>
|
||||
</mat-menu>
|
||||
<button [mat-menu-trigger-for]="user1" mat-icon-button class="ml-xs overflow-visible">
|
||||
<mat-icon>reorder</mat-icon>
|
||||
<span class="notification-label">3</span>
|
||||
</button>
|
||||
<mat-menu #user1="matMenu" class="opt-menu" x-position="before">
|
||||
<div mat-menu-item class="head-menu grad-blue">
|
||||
User Menu
|
||||
</div>
|
||||
<button mat-menu-item>
|
||||
<mat-icon>show_chart</mat-icon>
|
||||
Charts
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<mat-icon>navigation</mat-icon>
|
||||
Maps
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<mat-icon>web</mat-icon>
|
||||
Calendar Settings
|
||||
</button>
|
||||
</mat-menu>
|
||||
<button (click)="end.toggle()" mat-icon-button class="ml-xs overflow-visible">
|
||||
<mat-icon>notifications</mat-icon>
|
||||
<span class="notification-label">2</span>
|
||||
</button>
|
||||
<button [mat-menu-trigger-for]="user" mat-icon-button class="ml-xs">
|
||||
<mat-icon>person</mat-icon>
|
||||
</button>
|
||||
<mat-menu #user="matMenu" class="opt-menu" x-position="before">
|
||||
<div mat-menu-item class="head-menu grad-blue">
|
||||
Settings
|
||||
</div>
|
||||
<button mat-menu-item>
|
||||
<mat-icon>settings</mat-icon>
|
||||
Setting
|
||||
</button>
|
||||
<button mat-menu-item (click)="userProfile()">
|
||||
<mat-icon>account_box</mat-icon>
|
||||
Profile
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<mat-icon>notifications_off</mat-icon>
|
||||
Disable notifications
|
||||
</button>
|
||||
<button mat-menu-item (click)="logout()">
|
||||
<mat-icon>exit_to_app</mat-icon>
|
||||
Sign Out
|
||||
</button>
|
||||
</mat-menu>
|
||||
</div>
|
||||
</mat-toolbar>
|
||||
<div class="horizontal-menu text-center">
|
||||
<nav>
|
||||
<ul class="main-h-list">
|
||||
<li *ngFor="let menuitem of horizontalMenuItems.getAll()">
|
||||
<a [routerLink]="['/'+menuitem.state]" *ngIf="menuitem.type === 'link'">
|
||||
<mat-icon>{{ menuitem.icon }}</mat-icon>
|
||||
<span>{{ menuitem.name | translate }}</span>
|
||||
</a>
|
||||
<a [routerLink]="['/'+menuitem.state]" *ngIf="menuitem.type === 'sub'">
|
||||
<mat-icon>{{ menuitem.icon }}</mat-icon>
|
||||
<span>{{ menuitem.name | translate }}</span>
|
||||
</a>
|
||||
<ul class="dropdown" *ngIf="menuitem.type === 'sub'">
|
||||
<li *ngFor="let childitem of menuitem.children">
|
||||
<a [routerLink]="['/'+childitem.state ]">{{ childitem.name | translate }}</a>
|
||||
<ul class="dropdown" *ngIf="childitem.type === 'super-sub'">
|
||||
<li *ngFor="let subchild of childitem.subchildren">
|
||||
<a [routerLink]="['/'+subchild.state ]">{{subchild.name | translate}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="body-container">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
<mat-sidenav #end position="end" class="chat-panel" mode="over" opened="false">
|
||||
<mat-tab-group [selectedIndex]="1" mat-stretch-tabs>
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>Today</ng-template>
|
||||
<div class="scroll">
|
||||
<mat-list class="pt-1 pb-1">
|
||||
<mat-list-item>
|
||||
<div fxLayout="column">
|
||||
<h2 class="ma-0">{{ today | date:'EEEE' }}</h2>
|
||||
<h6 class="mat-text-muted ma-0"><span>{{ today | date:'dd' }}</span> <span>{{ today | date:'MMMM' }}</span></h6>
|
||||
</div>
|
||||
</mat-list-item>
|
||||
</mat-list>
|
||||
<mat-nav-list>
|
||||
<mat-divider></mat-divider>
|
||||
<h3 mat-subheader class="text-uppercase font-weight-bold">Projects Stats</h3>
|
||||
<mat-list-item>
|
||||
<p class="text-mat" mat-line>Project A</p>
|
||||
<mat-progress-bar mat-line mode="determinate" color="warn" value="20"></mat-progress-bar>
|
||||
</mat-list-item>
|
||||
<mat-list-item>
|
||||
<p class="text-mat" mat-line>Project B </p>
|
||||
<mat-progress-bar mat-line mode="determinate" color="accent" value="80"></mat-progress-bar>
|
||||
</mat-list-item>
|
||||
<mat-list-item>
|
||||
<p class="text-mat" mat-line>Project C</p>
|
||||
<mat-progress-bar mat-line mode="determinate" value="30"></mat-progress-bar>
|
||||
</mat-list-item>
|
||||
<mat-divider></mat-divider>
|
||||
<h3 mat-subheader class="text-uppercase font-weight-bold">Todo</h3>
|
||||
<mat-list-item>
|
||||
<a mat-line href="javascript:;">Consectetur adipisicing elit. Nemo omnis.</a>
|
||||
<p mat-line class="mat-text-muted text-mat">2:45PM</p>
|
||||
</mat-list-item>
|
||||
<mat-list-item>
|
||||
<a mat-line href="javascript:;"> Temporibus cumque cupiditate </a>
|
||||
<p mat-line class="mat-text-muted text-mat">3:20PM</p>
|
||||
</mat-list-item>
|
||||
<mat-list-item>
|
||||
<a mat-line href="javascript:;">Libero voluptatibus harum quis accusamus</a>
|
||||
<p mat-line class="mat-text-muted text-mat">16:00PM</p>
|
||||
</mat-list-item>
|
||||
</mat-nav-list>
|
||||
</div>
|
||||
</mat-tab>
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>Notifications</ng-template>
|
||||
<div class="scroll">
|
||||
<mat-nav-list>
|
||||
<mat-list-item>
|
||||
<mat-icon mat-list-avatar class="mat-text-primary">people</mat-icon>
|
||||
<h4 mat-line>Social</h4>
|
||||
<p mat-line> 5 new members joined today</p>
|
||||
</mat-list-item>
|
||||
<mat-list-item>
|
||||
<mat-icon mat-list-avatar class="mat-text-warn">local_offer</mat-icon>
|
||||
<h4 mat-line>Promotions</h4>
|
||||
<p mat-line>Updated your email
|
||||
</p>
|
||||
</mat-list-item>
|
||||
<mat-list-item>
|
||||
<mat-icon mat-list-avatar class="mat-text-accent">info</mat-icon>
|
||||
<h4 mat-line>Updates</h4>
|
||||
<p mat-line> 15 new product added</p>
|
||||
</mat-list-item>
|
||||
<mat-list-item>
|
||||
<mat-icon mat-list-avatar class="mat-deep-purple">delete_sweep</mat-icon>
|
||||
<h4 mat-line> 2 order cancelled</h4>
|
||||
<span class="text-mat mat-text-muted" mat-line>{{ 1427207139000 | date: 'fullDate' }}</span>
|
||||
</mat-list-item>
|
||||
<mat-list-item>
|
||||
<mat-icon mat-list-avatar>check_circle</mat-icon>
|
||||
<h4 mat-line>System Scan completed</h4>
|
||||
<span class="text-mat mat-text-muted" mat-line>{{ 1427412725000 | date: 'fullDate' }}</span>
|
||||
</mat-list-item>
|
||||
<mat-list-item>
|
||||
<mat-icon mat-list-avatar>person_add</mat-icon>
|
||||
<h4 mat-line>4 Users connected</h4>
|
||||
<span class="text-mat mat-text-muted" mat-line>{{ 1428275520000 | date: 'fullDate' }}</span>
|
||||
</mat-list-item>
|
||||
</mat-nav-list>
|
||||
</div>
|
||||
</mat-tab>
|
||||
</mat-tab-group>
|
||||
</mat-sidenav>
|
||||
</mat-sidenav-container>
|
||||
<!-- Demo Purposes Only -->
|
||||
<button mat-fab color="warn" class="mat-fab-bottom-right" (click)="showSettings = true">
|
||||
<mat-icon class="mat-24">settings</mat-icon>
|
||||
</button>
|
||||
<mat-card class="settings-panel" *ngIf="showSettings">
|
||||
<mat-toolbar color="warn">
|
||||
<span fxFlex>Options</span>
|
||||
<button mat-icon-button (click)="showSettings = false">
|
||||
<mat-icon>close</mat-icon>
|
||||
</button>
|
||||
</mat-toolbar>
|
||||
<mat-card-content class="demo-checkbox">
|
||||
<span class="mb-2 d-block"><strong>Sidebar Image</strong></span>
|
||||
<div class="bg-img clearfix">
|
||||
<div class="pb-1" [ngClass]="{'border-active' : isBgActive('bg-1')}">
|
||||
<a (click)="onSelectSidebarImage('bg-1')">
|
||||
<img src="assets/images/bg-5.jpg" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="pb-1" [ngClass]="{'border-active' : isBgActive('bg-2')}">
|
||||
<a (click)="onSelectSidebarImage('bg-2')">
|
||||
<img src="assets/images/bg-2.jpg" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="pb-1" [ngClass]="{'border-active' : isBgActive('bg-3')}">
|
||||
<a (click)="onSelectSidebarImage('bg-3')">
|
||||
<img src="assets/images/bg-3.jpg" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="pb-2" [ngClass]="{'border-active' : isBgActive('bg-4')}">
|
||||
<a (click)="onSelectSidebarImage('bg-4')">
|
||||
<img src="assets/images/bg-4.jpg" alt="">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-sidebar clearfix">
|
||||
<div class="pb-1">
|
||||
<mat-checkbox [(ngModel)]="sidebarBg">Sidebar Image</mat-checkbox>
|
||||
</div>
|
||||
<span class="mb-2 d-block"><strong>Sidebar Color</strong></span>
|
||||
<div class="mb-1" [ngClass]="{'border-active' : isSidebarActive('sidebar-default')}">
|
||||
<a href="javascript:void(0)" (click)="onSelectedSidebarColor('sidebar-default')"><i aria-hidden="true" class="color-default fa fa-circle fa-lg def"></i>
|
||||
Default</a>
|
||||
</div>
|
||||
<div class="mb-1" [ngClass]="{'border-active' : isSidebarActive('sidebar-green')}">
|
||||
<a href="javascript:void(0)" (click)="onSelectedSidebarColor('sidebar-green')"><i aria-hidden="true" class="color-green fa fa-circle fa-lg"></i>
|
||||
Green</a>
|
||||
</div>
|
||||
<div class="mb-1" [ngClass]="{'border-active' : isSidebarActive('sidebar-red')}">
|
||||
<a href="javascript:void(0)" (click)="onSelectedSidebarColor('sidebar-red')"><i aria-hidden="true" class="color-red fa fa-circle fa-lg"></i>
|
||||
Red</a>
|
||||
</div>
|
||||
<div class="mb-1" [ngClass]="{'border-active' : isSidebarActive('sidebar-purple')}">
|
||||
<a href="javascript:void(0)" (click)="onSelectedSidebarColor('sidebar-purple')"><i aria-hidden="true" class="color-purple fa fa-circle fa-lg"></i>
|
||||
Purple</a>
|
||||
</div>
|
||||
<div class="mb-1" [ngClass]="{'border-active' : isSidebarActive('sidebar-pink')}">
|
||||
<a href="javascript:void(0)" (click)="onSelectedSidebarColor('sidebar-pink')"><i aria-hidden="true" class="color-pink fa fa-circle fa-lg"></i>
|
||||
Pink</a>
|
||||
</div>
|
||||
<div class="mb-1" [ngClass]="{'border-active' : isSidebarActive('sidebar-blue')}">
|
||||
<a href="javascript:void(0)" (click)="onSelectedSidebarColor('sidebar-blue')"><i aria-hidden="true" class="color-blue fa fa-circle fa-lg"></i>
|
||||
Blue</a>
|
||||
</div>
|
||||
<div class="mb-1" [ngClass]="{'border-active' : isSidebarActive('sidebar-green-deep')}">
|
||||
<a href="javascript:void(0)" (click)="onSelectedSidebarColor('sidebar-green-deep')"><i aria-hidden="true" class="color-green-deep fa fa-circle fa-lg"></i>
|
||||
Green Deep</a>
|
||||
</div>
|
||||
<div class="mb-1" [ngClass]="{'border-active' : isSidebarActive('sidebar-brown')}">
|
||||
<a href="javascript:void(0)" (click)="onSelectedSidebarColor('sidebar-brown')"><i aria-hidden="true" class="color-brown fa fa-circle fa-lg"></i>
|
||||
Brown</a>
|
||||
</div>
|
||||
<div class="mb-1" [ngClass]="{'border-active' : isSidebarActive('sidebar-orange')}">
|
||||
<a href="javascript:void(0)" (click)="onSelectedSidebarColor('sidebar-orange')"><i aria-hidden="true" class="color-orange fa fa-circle fa-lg"></i>
|
||||
Orange</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-header clearfix">
|
||||
<span class="mb-2 d-block"><strong>Header Color</strong></span>
|
||||
<div class="mb-1" [ngClass]="{'border-active' : isHeaderActive('header-default')}">
|
||||
<a href="javascript:void(0)" (click)="onSelectedHeaderColor('header-default')"><i aria-hidden="true" class="color-default fa fa-circle fa-lg def"></i>
|
||||
Default</a>
|
||||
</div>
|
||||
<div class="mb-1" [ngClass]="{'border-active' : isHeaderActive('header-green')}">
|
||||
<a href="javascript:void(0)" (click)="onSelectedHeaderColor('header-green')"><i aria-hidden="true" class="color-green fa fa-circle fa-lg"></i>
|
||||
Green</a>
|
||||
</div>
|
||||
<div class="mb-1" [ngClass]="{'border-active' : isHeaderActive('header-red')}">
|
||||
<a href="javascript:void(0)" (click)="onSelectedHeaderColor('header-red')"><i aria-hidden="true" class="color-red fa fa-circle fa-lg"></i>
|
||||
Red</a>
|
||||
</div>
|
||||
<div class="mb-1" [ngClass]="{'border-active' : isHeaderActive('header-purple')}">
|
||||
<a href="javascript:void(0)" (click)="onSelectedHeaderColor('header-purple')"><i aria-hidden="true" class="color-purple fa fa-circle fa-lg"></i>
|
||||
Purple</a>
|
||||
</div>
|
||||
<div class="mb-1" [ngClass]="{'border-active' : isHeaderActive('header-pink')}">
|
||||
<a href="javascript:void(0)" (click)="onSelectedHeaderColor('header-pink')"><i aria-hidden="true" class="color-pink fa fa-circle fa-lg"></i>
|
||||
Pink</a>
|
||||
</div>
|
||||
<div class="mb-1" [ngClass]="{'border-active' : isHeaderActive('header-blue')}">
|
||||
<a href="javascript:void(0)" (click)="onSelectedHeaderColor('header-blue')"><i aria-hidden="true" class="color-blue fa fa-circle fa-lg"></i>
|
||||
Blue</a>
|
||||
</div>
|
||||
<div class="mb-1" [ngClass]="{'border-active' : isHeaderActive('header-green-deep')}">
|
||||
<a href="javascript:void(0)" (click)="onSelectedHeaderColor('header-green-deep')"><i aria-hidden="true" class="color-green-deep fa fa-circle fa-lg"></i>
|
||||
Green Deep</a>
|
||||
</div>
|
||||
<div class="mb-1" [ngClass]="{'border-active' : isHeaderActive('header-brown')}">
|
||||
<a href="javascript:void(0)" (click)="onSelectedHeaderColor('header-brown')"><i aria-hidden="true" class="color-brown fa fa-circle fa-lg"></i>
|
||||
Brown</a>
|
||||
</div>
|
||||
<div class="mb-1" [ngClass]="{'border-active' : isHeaderActive('header-orange')}">
|
||||
<a href="javascript:void(0)" (click)="onSelectedHeaderColor('header-orange')"><i aria-hidden="true" class="color-orange fa fa-circle fa-lg"></i>
|
||||
Orange</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pb-1">
|
||||
<mat-checkbox (change)="changeMenuLayout($event.checked)">Horizontal Menu</mat-checkbox>
|
||||
</div>
|
||||
<div class="pb-1">
|
||||
<mat-checkbox [(ngModel)]="collapseSidebar" (change)="compactSidebar = false">Collapsed Sidebar</mat-checkbox>
|
||||
</div>
|
||||
<div class="pb-1">
|
||||
<mat-checkbox [(ngModel)]="compactSidebar" (change)="collapseSidebar = false">Compact Sidebar</mat-checkbox>
|
||||
</div>
|
||||
<div class="pb-1">
|
||||
<mat-checkbox [(ngModel)]="boxed">Boxed Layout</mat-checkbox>
|
||||
</div>
|
||||
<div class="pb-1">
|
||||
<mat-checkbox [(ngModel)]="dark" >Dark Mode</mat-checkbox>
|
||||
</div>
|
||||
<div class="pb-1">
|
||||
<mat-checkbox (change)="layoutDir = (layoutDir == 'rtl' ? 'ltr' : 'rtl')" >RTL</mat-checkbox>
|
||||
</div>
|
||||
<div class="pb-3">
|
||||
<mat-form-field>
|
||||
<mat-select placeholder="Language" class="mt-1" [(ngModel)]="currentLang" #langSelect="ngModel" (ngModelChange)="translate.use(currentLang)">
|
||||
<mat-option *ngFor="let lang of translate.getLangs()" [value]="lang">{{ lang }}</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
<!-- /Demo Purposes Only -->
|
||||
</div>
|
||||
|
||||
224
sineedge_front/src/app/layouts/admin/admin-layout.component.ts
Executable file
224
sineedge_front/src/app/layouts/admin/admin-layout.component.ts
Executable file
@ -0,0 +1,224 @@
|
||||
import { Component, OnInit, OnDestroy, ViewChild, HostListener } from '@angular/core';
|
||||
import { Router, NavigationEnd } from '@angular/router';
|
||||
import { MenuItems } from '../../shared/menu-items/menu-items';
|
||||
import { HorizontalMenuItems } from '../../shared/menu-items/horizontal-menu-items';
|
||||
import { Subscription } from 'rxjs';
|
||||
import { filter } from 'rxjs/operators';
|
||||
|
||||
|
||||
import { TranslateService } from 'ng2-translate/ng2-translate';
|
||||
import PerfectScrollbar from 'perfect-scrollbar';
|
||||
import { PerfectScrollbarConfigInterface,
|
||||
PerfectScrollbarComponent, PerfectScrollbarDirective } from 'ngx-perfect-scrollbar';
|
||||
import { SharedService } from '../../shared.service';
|
||||
@Component({
|
||||
selector: 'app-layout',
|
||||
templateUrl: './admin-layout.component.html'
|
||||
})
|
||||
export class AdminLayoutComponent implements OnInit, OnDestroy {
|
||||
|
||||
roles: string ='';
|
||||
userDep: string = '';
|
||||
currentUser: any = [];
|
||||
private _router: Subscription;
|
||||
|
||||
today: number = Date.now();
|
||||
url: string;
|
||||
showSettings = false;
|
||||
dark: boolean;
|
||||
boxed: boolean;
|
||||
collapseSidebar: boolean;
|
||||
compactSidebar: boolean;
|
||||
sidebarBg: boolean = true;
|
||||
currentLang = 'en';
|
||||
layoutDir = 'ltr';
|
||||
|
||||
menuLayout : any = 'vertical-menu';
|
||||
selectedSidebarImage : any = 'bg-1';
|
||||
selectedSidebarColor : any = 'sidebar-default';
|
||||
selectedHeaderColor : any = 'header-default';
|
||||
collapsedClass : any = 'side-panel-opened';
|
||||
|
||||
@ViewChild('sidemenu') sidemenu;
|
||||
public config: PerfectScrollbarConfigInterface = {};
|
||||
|
||||
constructor(private router: Router, public menuItems: MenuItems, public horizontalMenuItems : HorizontalMenuItems, public translate: TranslateService,public shared:SharedService ) {
|
||||
const browserLang: string = translate.getBrowserLang();
|
||||
translate.use(browserLang.match(/en|fr/) ? browserLang : 'en');
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.shared.getroles().subscribe(res=>{
|
||||
if(res.dataStatus == true){
|
||||
this.currentUser = res.records[0];
|
||||
console.log(this.currentUser);
|
||||
if(this.currentUser.fk_entity_id == 1 ){
|
||||
this.userDep = "SINEEGDE";
|
||||
}else if(this.currentUser.fk_entity_id ==2){
|
||||
this.userDep = "LENDOR";
|
||||
|
||||
}else{
|
||||
this.userDep = "VENDOR";
|
||||
}
|
||||
if(this.currentUser.user_role =="ADMIN"){
|
||||
this.roles = this.currentUser.user_role;
|
||||
}
|
||||
}
|
||||
});
|
||||
const elemSidebar = <HTMLElement>document.querySelector('.sidebar-container ');
|
||||
|
||||
if (window.matchMedia(`(min-width: 960px)`).matches && !this.isMac() && !this.compactSidebar && this.layoutDir != 'rtl') {
|
||||
const ps = new PerfectScrollbar(elemSidebar, {
|
||||
wheelSpeed: 2,
|
||||
suppressScrollX: true
|
||||
});
|
||||
}
|
||||
|
||||
this._router = this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe((event: NavigationEnd) => {
|
||||
this.url = event.url;
|
||||
if (this.isOver()) {
|
||||
this.sidemenu.close();
|
||||
}
|
||||
|
||||
if (window.matchMedia(`(min-width: 960px)`).matches && !this.isMac() && !this.compactSidebar && this.layoutDir != 'rtl') {
|
||||
// Ps.update(elemContent);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@HostListener('click', ['$event'])
|
||||
onClick(e: any) {
|
||||
const elemSidebar = <HTMLElement>document.querySelector('.sidebar-container ');
|
||||
setTimeout(() => {
|
||||
if (window.matchMedia(`(min-width: 960px)`).matches && !this.isMac() && !this.compactSidebar && this.layoutDir != 'rtl') {
|
||||
const ps = new PerfectScrollbar(elemSidebar, {
|
||||
wheelSpeed: 2,
|
||||
suppressScrollX: true
|
||||
});
|
||||
}
|
||||
}, 350);
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this._router.unsubscribe();
|
||||
}
|
||||
|
||||
isOver(): boolean {
|
||||
if (this.url === '/apps/messages' || this.url === '/apps/calendar' || this.url === '/apps/media' || this.url === '/maps/leaflet') {
|
||||
return true;
|
||||
} else {
|
||||
return window.matchMedia(`(max-width: 960px)`).matches;
|
||||
}
|
||||
}
|
||||
|
||||
isMac(): boolean {
|
||||
let bool = false;
|
||||
if (navigator.platform.toUpperCase().indexOf('MAC') >= 0 || navigator.platform.toUpperCase().indexOf('IPAD') >= 0) {
|
||||
bool = true;
|
||||
}
|
||||
return bool;
|
||||
}
|
||||
|
||||
menuMouseOver(): void {
|
||||
if (window.matchMedia(`(min-width: 960px)`).matches && this.collapseSidebar) {
|
||||
this.sidemenu.mode = 'over';
|
||||
}
|
||||
}
|
||||
|
||||
menuMouseOut(): void {
|
||||
if (window.matchMedia(`(min-width: 960px)`).matches && this.collapseSidebar) {
|
||||
this.sidemenu.mode = 'side';
|
||||
}
|
||||
}
|
||||
|
||||
menuToggleFunc()
|
||||
{
|
||||
this.sidemenu.toggle();
|
||||
|
||||
if(this.collapsedClass == 'side-panel-opened')
|
||||
{
|
||||
this.collapsedClass = 'side-panel-closed';
|
||||
}
|
||||
else
|
||||
{
|
||||
this.collapsedClass= 'side-panel-opened';
|
||||
}
|
||||
}
|
||||
|
||||
changeMenuLayout(value)
|
||||
{
|
||||
console.log(value)
|
||||
if(value)
|
||||
{
|
||||
this.menuLayout = 'top-menu';
|
||||
}
|
||||
else
|
||||
{
|
||||
this.menuLayout = 'vertical-menu';
|
||||
}
|
||||
}
|
||||
|
||||
onSelectSidebarImage(selectedClass, event)
|
||||
{
|
||||
this.selectedSidebarImage = selectedClass;
|
||||
}
|
||||
|
||||
onSelectedSidebarColor(selectedClass)
|
||||
{
|
||||
this.selectedSidebarColor = selectedClass;
|
||||
}
|
||||
|
||||
onSelectedHeaderColor(selectedClass)
|
||||
{
|
||||
this.selectedHeaderColor = selectedClass;
|
||||
}
|
||||
|
||||
isBgActive(value)
|
||||
{
|
||||
if(value == this.selectedSidebarImage)
|
||||
{
|
||||
return true;
|
||||
}
|
||||
else
|
||||
{
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
isSidebarActive(value)
|
||||
{
|
||||
if(value == this.selectedSidebarColor)
|
||||
{
|
||||
return true;
|
||||
}
|
||||
else
|
||||
{
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
isHeaderActive(value)
|
||||
{
|
||||
if(value == this.selectedHeaderColor)
|
||||
{
|
||||
return true;
|
||||
}
|
||||
else
|
||||
{
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
addMenuItem(): void {
|
||||
this.menuItems.add({
|
||||
state: 'menu',
|
||||
name: 'MENU',
|
||||
type: 'sub',
|
||||
icon: 'trending_flat',
|
||||
children: [
|
||||
{state: 'menu', name: 'MENU'},
|
||||
{state: 'timelmenuine', name: 'MENU'}
|
||||
]
|
||||
});
|
||||
}
|
||||
}
|
||||
3
sineedge_front/src/app/layouts/auth/auth-layout.component.html
Executable file
3
sineedge_front/src/app/layouts/auth/auth-layout.component.html
Executable file
@ -0,0 +1,3 @@
|
||||
<mat-sidenav-container>
|
||||
<router-outlet></router-outlet>
|
||||
</mat-sidenav-container>
|
||||
8
sineedge_front/src/app/layouts/auth/auth-layout.component.ts
Executable file
8
sineedge_front/src/app/layouts/auth/auth-layout.component.ts
Executable file
@ -0,0 +1,8 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-layout',
|
||||
styles: [':host /deep/ .mat-sidenav-content {padding: 0;} .mat-sidenav-container {z-index: 1000}'],
|
||||
templateUrl: './auth-layout.component.html'
|
||||
})
|
||||
export class AuthLayoutComponent {}
|
||||
53
sineedge_front/src/app/material/autocomplete/autocomplete.component.html
Executable file
53
sineedge_front/src/app/material/autocomplete/autocomplete.component.html
Executable file
@ -0,0 +1,53 @@
|
||||
<mat-card>
|
||||
<mat-card-title>Autocomplete</mat-card-title>
|
||||
<mat-card-subtitle>Use auto-complete text fields to present real-time suggestions or completions in dropdowns, so users can enter information more accurately and efficiently.</mat-card-subtitle>
|
||||
<hr>
|
||||
<mat-card-content>
|
||||
<div fxLayout="row" fxLayoutWrap="wrap">
|
||||
<div fxFlex.gt-sm="50" fxFlex="100">
|
||||
<p>Reactive length: {{ reactiveStates.length }}</p>
|
||||
<p>Reactive value: {{ stateCtrl.value | json }}</p>
|
||||
<p>Reactive dirty: {{ stateCtrl.dirty }}</p>
|
||||
|
||||
<p>
|
||||
<mat-form-field>
|
||||
<input matInput placeholder="State" [matAutocomplete]="reactiveAuto" [formControl]="stateCtrl">
|
||||
</mat-form-field>
|
||||
</p>
|
||||
|
||||
<button mat-button (click)="stateCtrl.reset()">RESET</button>
|
||||
<button mat-button (click)="stateCtrl.setValue(states[10])">SET VALUE</button>
|
||||
<button mat-button (click)="stateCtrl.enabled ? stateCtrl.disable() : stateCtrl.enable()">TOGGLE DISABLED</button>
|
||||
</div>
|
||||
<div fxFlex.gt-sm="50" fxFlex="100">
|
||||
<p> </p>
|
||||
<p>Template-driven value (currentState): {{ currentState }}</p>
|
||||
<p>Template-driven dirty: {{ modelDir.dirty }}</p>
|
||||
|
||||
<p>
|
||||
<mat-form-field>
|
||||
<input matInput placeholder="State" [matAutocomplete]="tdAuto" [(ngModel)]="currentState" #modelDir="ngModel"
|
||||
(ngModelChange)="this.tdStates = filterStates(currentState)" [disabled]="tdDisabled">
|
||||
</mat-form-field>
|
||||
</p>
|
||||
|
||||
<button mat-button (click)="modelDir.reset()">RESET</button>
|
||||
<button mat-button (click)="currentState='California'">SET VALUE</button>
|
||||
<button mat-button (click)="tdDisabled=!tdDisabled">TOGGLE DISABLED</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<mat-autocomplete #reactiveAuto="matAutocomplete" [displayWith]="displayFn">
|
||||
<mat-option *ngFor="let state of reactiveStates | async" [value]="state">
|
||||
<span>{{ state.name }}</span>
|
||||
<span> ({{state.code}}) </span>
|
||||
</mat-option>
|
||||
</mat-autocomplete>
|
||||
|
||||
<mat-autocomplete #tdAuto="matAutocomplete">
|
||||
<mat-option *ngFor="let state of tdStates" [value]="state.name">
|
||||
<span>{{ state.name }}</span>
|
||||
</mat-option>
|
||||
</mat-autocomplete>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
0
sineedge_front/src/app/material/autocomplete/autocomplete.component.scss
Executable file
0
sineedge_front/src/app/material/autocomplete/autocomplete.component.scss
Executable file
96
sineedge_front/src/app/material/autocomplete/autocomplete.component.ts
Executable file
96
sineedge_front/src/app/material/autocomplete/autocomplete.component.ts
Executable file
@ -0,0 +1,96 @@
|
||||
import { Component } from '@angular/core';
|
||||
import {FormControl} from '@angular/forms';
|
||||
import {Observable} from 'rxjs';
|
||||
import {map, startWith} from 'rxjs/operators';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-autocomplete',
|
||||
templateUrl: './autocomplete.component.html',
|
||||
styleUrls: ['./autocomplete.component.scss']
|
||||
})
|
||||
export class AutocompleteComponent {
|
||||
|
||||
stateCtrl: FormControl;
|
||||
currentState = '';
|
||||
|
||||
reactiveStates: any;
|
||||
tdStates: any[];
|
||||
|
||||
tdDisabled = false;
|
||||
|
||||
tdAuto: string;
|
||||
|
||||
reactiveAuto: string;
|
||||
|
||||
states = [
|
||||
{code: 'AL', name: 'Alabama'},
|
||||
{code: 'AK', name: 'Alaska'},
|
||||
{code: 'AZ', name: 'Arizona'},
|
||||
{code: 'AR', name: 'Arkansas'},
|
||||
{code: 'CA', name: 'California'},
|
||||
{code: 'CO', name: 'Colorado'},
|
||||
{code: 'CT', name: 'Connecticut'},
|
||||
{code: 'DE', name: 'Delaware'},
|
||||
{code: 'FL', name: 'Florida'},
|
||||
{code: 'GA', name: 'Georgia'},
|
||||
{code: 'HI', name: 'Hawaii'},
|
||||
{code: 'ID', name: 'Idaho'},
|
||||
{code: 'IL', name: 'Illinois'},
|
||||
{code: 'IN', name: 'Indiana'},
|
||||
{code: 'IA', name: 'Iowa'},
|
||||
{code: 'KS', name: 'Kansas'},
|
||||
{code: 'KY', name: 'Kentucky'},
|
||||
{code: 'LA', name: 'Louisiana'},
|
||||
{code: 'ME', name: 'Maine'},
|
||||
{code: 'MD', name: 'Maryland'},
|
||||
{code: 'MA', name: 'Massachusetts'},
|
||||
{code: 'MI', name: 'Michigan'},
|
||||
{code: 'MN', name: 'Minnesota'},
|
||||
{code: 'MS', name: 'Mississippi'},
|
||||
{code: 'MO', name: 'Missouri'},
|
||||
{code: 'MT', name: 'Montana'},
|
||||
{code: 'NE', name: 'Nebraska'},
|
||||
{code: 'NV', name: 'Nevada'},
|
||||
{code: 'NH', name: 'New Hampshire'},
|
||||
{code: 'NJ', name: 'New Jersey'},
|
||||
{code: 'NM', name: 'New Mexico'},
|
||||
{code: 'NY', name: 'New York'},
|
||||
{code: 'NC', name: 'North Carolina'},
|
||||
{code: 'ND', name: 'North Dakota'},
|
||||
{code: 'OH', name: 'Ohio'},
|
||||
{code: 'OK', name: 'Oklahoma'},
|
||||
{code: 'OR', name: 'Oregon'},
|
||||
{code: 'PA', name: 'Pennsylvania'},
|
||||
{code: 'RI', name: 'Rhode Island'},
|
||||
{code: 'SC', name: 'South Carolina'},
|
||||
{code: 'SD', name: 'South Dakota'},
|
||||
{code: 'TN', name: 'Tennessee'},
|
||||
{code: 'TX', name: 'Texas'},
|
||||
{code: 'UT', name: 'Utah'},
|
||||
{code: 'VT', name: 'Vermont'},
|
||||
{code: 'VA', name: 'Virginia'},
|
||||
{code: 'WA', name: 'Washington'},
|
||||
{code: 'WV', name: 'West Virginia'},
|
||||
{code: 'WI', name: 'Wisconsin'},
|
||||
{code: 'WY', name: 'Wyoming'},
|
||||
];
|
||||
|
||||
constructor() {
|
||||
this.tdStates = this.states;
|
||||
this.stateCtrl = new FormControl({code: 'CA', name: 'California'});
|
||||
this.reactiveStates = this.stateCtrl.valueChanges
|
||||
.pipe(startWith(this.stateCtrl.value))
|
||||
.map(val => this.displayFn(val))
|
||||
.map(name => this.filterStates(name));
|
||||
}
|
||||
|
||||
displayFn(value: any): string {
|
||||
return value && typeof value === 'object' ? value.name : value;
|
||||
}
|
||||
|
||||
filterStates(val: string) {
|
||||
return val ? this.states.filter((s) => s.name.match(new RegExp(val, 'gi'))) : this.states;
|
||||
}
|
||||
|
||||
}
|
||||
61
sineedge_front/src/app/material/buttons/buttons.component.html
Executable file
61
sineedge_front/src/app/material/buttons/buttons.component.html
Executable file
@ -0,0 +1,61 @@
|
||||
<mat-card>
|
||||
<mat-card-title>Buttons</mat-card-title>
|
||||
<mat-card-subtitle>mat-button is an HTML button or a tag enhanced with styling and animation to match the Material Design button spec</mat-card-subtitle>
|
||||
<hr>
|
||||
<mat-card-content>
|
||||
<div class="pb-1">
|
||||
<p>Flat buttons</p>
|
||||
<button mat-icon-button><mat-icon>favorite</mat-icon></button>
|
||||
<button mat-button class="mr-1 mb-1">Default</button>
|
||||
<button mat-button color="primary" class="mr-1 mb-1">Primary</button>
|
||||
<button mat-button color="accent" class="mr-1 mb-1">Accent</button>
|
||||
<button mat-button color="warn" class="mr-1 mb-1">Warn</button>
|
||||
<button mat-button disabled class="mr-1 mb-1">off</button>
|
||||
</div>
|
||||
|
||||
<div class="pb-1">
|
||||
<p>Raised buttons</p>
|
||||
<button mat-raised-button mat-icon-button class="mr-1 mb-1"><mat-icon>favorite</mat-icon></button>
|
||||
<button mat-raised-button class="mr-1 mb-1">Default</button>
|
||||
<button mat-raised-button color="primary" class="mr-1 mb-1">Primary</button>
|
||||
<button mat-raised-button color="accent" class="mr-1 mb-1">Accent</button>
|
||||
<button mat-raised-button color="warn" class="mr-1 mb-1">Warn</button>
|
||||
<button mat-raised-button disabled class="mr-1 mb-1">off</button>
|
||||
</div>
|
||||
|
||||
<div class="pb-1">
|
||||
<p>Small buttons</p>
|
||||
<button mat-raised-button mat-icon-button mat-button-sm class="mr-1 mb-1"><mat-icon>favorite</mat-icon></button>
|
||||
<button mat-raised-button mat-button-sm class="mr-1 mb-1">Default</button>
|
||||
<button mat-raised-button mat-button-sm color="primary" class="mr-1 mb-1">Primary</button>
|
||||
<button mat-raised-button mat-button-sm color="accent" class="mr-1 mb-1">Accent</button>
|
||||
<button mat-raised-button mat-button-sm color="warn" class="mr-1 mb-1">Warn</button>
|
||||
<button mat-raised-button mat-button-sm disabled class="mr-1 mb-1">off</button>
|
||||
</div>
|
||||
|
||||
<div class="pb-1">
|
||||
<p>Fab buttons</p>
|
||||
<button mat-fab class="mr-1 mb-1"><mat-icon>add</mat-icon></button>
|
||||
<button mat-fab disabled="" class="mr-1 mb-1"><mat-icon>add</mat-icon></button>
|
||||
<button mat-mini-fab class="mr-1 mb-1"><mat-icon>add</mat-icon></button>
|
||||
<button mat-mini-fab disabled class="mr-1 mb-1"><mat-icon>add</mat-icon></button>
|
||||
</div>
|
||||
|
||||
<div class="pb-0">
|
||||
<p>Button toggles</p>
|
||||
<mat-button-toggle class="mr-1 mb-1">Single toggle</mat-button-toggle>
|
||||
<mat-button-toggle-group name="alignment" class="mr-1 mb-1">
|
||||
<mat-button-toggle value="left"><mat-icon>format_align_left</mat-icon></mat-button-toggle>
|
||||
<mat-button-toggle value="center"><mat-icon>format_align_center</mat-icon></mat-button-toggle>
|
||||
<mat-button-toggle value="right"><mat-icon>format_align_right</mat-icon></mat-button-toggle>
|
||||
<mat-button-toggle value="justify"><mat-icon>format_align_justify</mat-icon></mat-button-toggle>
|
||||
</mat-button-toggle-group>
|
||||
<mat-button-toggle-group multiple class="mr-1 mb-1">
|
||||
<mat-button-toggle>Flour</mat-button-toggle>
|
||||
<mat-button-toggle>Eggs</mat-button-toggle>
|
||||
<mat-button-toggle disabled>Sugar</mat-button-toggle>
|
||||
<mat-button-toggle>Milk</mat-button-toggle>
|
||||
</mat-button-toggle-group>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
0
sineedge_front/src/app/material/buttons/buttons.component.scss
Executable file
0
sineedge_front/src/app/material/buttons/buttons.component.scss
Executable file
10
sineedge_front/src/app/material/buttons/buttons.component.ts
Executable file
10
sineedge_front/src/app/material/buttons/buttons.component.ts
Executable file
@ -0,0 +1,10 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-buttons',
|
||||
templateUrl: './buttons.component.html',
|
||||
styleUrls: ['./buttons.component.scss']
|
||||
})
|
||||
export class ButtonsComponent {
|
||||
constructor() { }
|
||||
}
|
||||
65
sineedge_front/src/app/material/cards/cards.component.html
Executable file
65
sineedge_front/src/app/material/cards/cards.component.html
Executable file
@ -0,0 +1,65 @@
|
||||
<mat-card>
|
||||
<mat-card-title>Cards</mat-card-title>
|
||||
<mat-card-subtitle>mat-card is a content container component that conforms to the spec of a Material Design card.</mat-card-subtitle>
|
||||
<hr>
|
||||
<mat-card-content>
|
||||
<mat-card class="mb-2">
|
||||
<mat-card-content>Hello</mat-card-content>
|
||||
</mat-card>
|
||||
<mat-card class="mb-2">
|
||||
<mat-card-subtitle>Subtitle</mat-card-subtitle>
|
||||
<mat-card-title>Card with title and footer</mat-card-title>
|
||||
<mat-card-content>
|
||||
<p>This is supporting text.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
</mat-card-content>
|
||||
<mat-card-actions>
|
||||
<button mat-button>LIKE</button>
|
||||
<button mat-button>SHARE</button>
|
||||
</mat-card-actions>
|
||||
<mat-card-footer>
|
||||
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
|
||||
</mat-card-footer>
|
||||
</mat-card>
|
||||
<mat-card class="mat-card-flat mb-2">
|
||||
<mat-card-title>Easily customizable</mat-card-title>
|
||||
<mat-card-actions>
|
||||
<button mat-button>First</button>
|
||||
<button mat-button>Second</button>
|
||||
</mat-card-actions>
|
||||
</mat-card>
|
||||
<mat-card class="mb-2">
|
||||
<mat-card-title>Standard Card</mat-card-title>
|
||||
<mat-card-subtitle>Subtitle</mat-card-subtitle>
|
||||
<hr>
|
||||
<mat-card-content>
|
||||
<p>Standard card with content</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad</p>
|
||||
</mat-card-content>
|
||||
<hr>
|
||||
<mat-card-actions>
|
||||
<button mat-button color="accent">Action</button>
|
||||
<button mat-button>Cancel</button>
|
||||
</mat-card-actions>
|
||||
</mat-card>
|
||||
<mat-card class="mb-2">
|
||||
<mat-card-header>
|
||||
<img mat-card-avatar src="assets/images/avatar.jpg">
|
||||
<mat-card-title>Header title</mat-card-title>
|
||||
<mat-card-subtitle>Header subtitle</mat-card-subtitle>
|
||||
</mat-card-header>
|
||||
<img mat-card-image src="assets/images/coridoor.jpg">
|
||||
<mat-card-content>
|
||||
<p>Here is some more content</p>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
<mat-card class="mb-2">
|
||||
<mat-card-title-group>
|
||||
<img width="60" src="assets/images/curve.jpg">
|
||||
<mat-card-title>Card with title</mat-card-title>
|
||||
<mat-card-subtitle>Subtitle</mat-card-subtitle>
|
||||
</mat-card-title-group>
|
||||
</mat-card>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
0
sineedge_front/src/app/material/cards/cards.component.scss
Executable file
0
sineedge_front/src/app/material/cards/cards.component.scss
Executable file
10
sineedge_front/src/app/material/cards/cards.component.ts
Executable file
10
sineedge_front/src/app/material/cards/cards.component.ts
Executable file
@ -0,0 +1,10 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-cards',
|
||||
templateUrl: './cards.component.html',
|
||||
styleUrls: ['./cards.component.scss']
|
||||
})
|
||||
export class CardsComponent {
|
||||
constructor() { }
|
||||
}
|
||||
59
sineedge_front/src/app/material/checkbox/checkbox.component.html
Executable file
59
sineedge_front/src/app/material/checkbox/checkbox.component.html
Executable file
@ -0,0 +1,59 @@
|
||||
<mat-card>
|
||||
<mat-card-title>Checkbox</mat-card-title>
|
||||
<mat-card-subtitle>mat-checkbox is a Material Design selection control that allows users to make a binary choice for a predetermined conditioned</mat-card-subtitle>
|
||||
<hr>
|
||||
<mat-card-content>
|
||||
<form class="mb-1">
|
||||
<mat-checkbox [(ngModel)]="isChecked"
|
||||
name="cb"
|
||||
color="checkboxColor()"
|
||||
(change)="isIndeterminate = false"
|
||||
[indeterminate]="isIndeterminate"
|
||||
[disabled]="isDisabled">
|
||||
Do you want to <em>foobar</em> the <em>bazquux</em>?
|
||||
</mat-checkbox> - <strong>{{printResult()}}</strong>
|
||||
</form>
|
||||
|
||||
<div fxLayout="row" fxLayoutAlign="start center" class="mb-1">
|
||||
<div>
|
||||
<input id="indeterminate-toggle"
|
||||
type="checkbox"
|
||||
[(ngModel)]="isIndeterminate"
|
||||
[disabled]="isDisabled">
|
||||
<label for="indeterminate-toggle" class="mr-xs">Toggle Indeterminate</label>
|
||||
</div>
|
||||
<div>
|
||||
<input id="disabled-toggle" type="checkbox" [(ngModel)]="isDisabled">
|
||||
<label for="disabled-toggle" class="mr-xs">Toggle Disabled</label>
|
||||
</div>
|
||||
<div>
|
||||
<input id="color-toggle" type="checkbox" [(ngModel)]="useAlternativeColor">
|
||||
<label for="color-toggle">Toggle Color</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div fxLayout="row" fxLayoutAlign="start center" class="mb-1">
|
||||
<p class="mr-xs">Alignment:</p>
|
||||
<div class="mr-xs">
|
||||
<input #start type="radio"
|
||||
value="start"
|
||||
id="align-start"
|
||||
name="alignment"
|
||||
(click)="alignment = start.value"
|
||||
checked>
|
||||
<label for="align-start">Start</label>
|
||||
</div>
|
||||
<div>
|
||||
<input #end type="radio"
|
||||
value="end"
|
||||
id="align-end"
|
||||
name="alignment"
|
||||
(click)="alignment = end.value">
|
||||
<label for="align-end">End</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>Nested Checklist</p>
|
||||
<app-mat-checkbox-demo-nested-checklist></app-mat-checkbox-demo-nested-checklist>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
7
sineedge_front/src/app/material/checkbox/checkbox.component.scss
Executable file
7
sineedge_front/src/app/material/checkbox/checkbox.component.scss
Executable file
@ -0,0 +1,7 @@
|
||||
:host /deep/ {
|
||||
ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
87
sineedge_front/src/app/material/checkbox/checkbox.component.ts
Executable file
87
sineedge_front/src/app/material/checkbox/checkbox.component.ts
Executable file
@ -0,0 +1,87 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
export interface Task {
|
||||
name: string;
|
||||
completed: boolean;
|
||||
subtasks?: Task[];
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-checkbox',
|
||||
templateUrl: './checkbox.component.html',
|
||||
styleUrls: ['./checkbox.component.scss']
|
||||
})
|
||||
export class CheckboxComponent {
|
||||
|
||||
isIndeterminate = false;
|
||||
isChecked = false;
|
||||
isDisabled = false;
|
||||
alignment = 'start';
|
||||
useAlternativeColor = false;
|
||||
|
||||
constructor() {}
|
||||
|
||||
printResult() {
|
||||
if (this.isIndeterminate) {
|
||||
return 'Maybe!';
|
||||
}
|
||||
return this.isChecked ? 'Yes!' : 'No!';
|
||||
}
|
||||
|
||||
checkboxColor() {
|
||||
return this.useAlternativeColor ? 'primary' : 'accent';
|
||||
}
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-mat-checkbox-demo-nested-checklist',
|
||||
styles: [`
|
||||
li {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
`],
|
||||
templateUrl: './nested-checklist.html',
|
||||
})
|
||||
export class MatCheckboxDemoNestedChecklistComponent {
|
||||
tasks: Task[] = [{
|
||||
name: 'Reminders',
|
||||
completed: false,
|
||||
subtasks: [{
|
||||
name: 'Cook Dinner',
|
||||
completed: false
|
||||
}, {
|
||||
name: 'Read the Material Design Spec',
|
||||
completed: false
|
||||
}, {
|
||||
name: 'Upgrade Application to Angular2',
|
||||
completed: false
|
||||
}]
|
||||
}, {
|
||||
name: 'Groceries',
|
||||
completed: false,
|
||||
subtasks: [{
|
||||
name: 'Organic Eggs',
|
||||
completed: false
|
||||
}, {
|
||||
name: 'Protein Powder',
|
||||
completed: false
|
||||
}, {
|
||||
name: 'Almond Meal Flour',
|
||||
completed: false
|
||||
}]
|
||||
}];
|
||||
|
||||
allComplete(task: Task): boolean {
|
||||
const subtasks = task.subtasks;
|
||||
return subtasks.every(t => t.completed) ? true : subtasks.every(t => !t.completed) ? false : task.completed;
|
||||
}
|
||||
|
||||
someComplete(tasks: Task[]): boolean {
|
||||
const numComplete = tasks.filter(t => t.completed).length;
|
||||
return numComplete > 0 && numComplete < tasks.length;
|
||||
}
|
||||
|
||||
setAllCompleted(tasks: Task[], completed: boolean) {
|
||||
tasks.forEach(t => t.completed = completed);
|
||||
}
|
||||
}
|
||||
24
sineedge_front/src/app/material/checkbox/nested-checklist.html
Executable file
24
sineedge_front/src/app/material/checkbox/nested-checklist.html
Executable file
@ -0,0 +1,24 @@
|
||||
<mat-card>
|
||||
<mat-toolbar color="primary">
|
||||
<span>Tasks</span>
|
||||
</mat-toolbar>
|
||||
<mat-card-content>
|
||||
<ul>
|
||||
<li *ngFor="let task of tasks">
|
||||
<mat-checkbox [(ngModel)]="task.completed"
|
||||
[checked]="allComplete(task)"
|
||||
[indeterminate]="someComplete(task.subtasks)"
|
||||
(change)="setAllCompleted(task.subtasks, $event.checked)">
|
||||
<h6 class="ma-0">{{task.name}}</h6>
|
||||
</mat-checkbox>
|
||||
<ul class="ml-3">
|
||||
<li *ngFor="let subtask of task.subtasks">
|
||||
<mat-checkbox [(ngModel)]="subtask.completed">
|
||||
{{subtask.name}}
|
||||
</mat-checkbox>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
65
sineedge_front/src/app/material/chips/chips.component.html
Executable file
65
sineedge_front/src/app/material/chips/chips.component.html
Executable file
@ -0,0 +1,65 @@
|
||||
|
||||
<mat-card class="mb-2">
|
||||
<mat-card-title>Chips</mat-card-title>
|
||||
<mat-card-subtitle>an input component for building lists of strings or objects. The list items are displayed as 'chips'.</mat-card-subtitle>
|
||||
<hr>
|
||||
<mat-card-content>
|
||||
<div class="pb-1">
|
||||
<p class="mt-0">Simple</p>
|
||||
<mat-chip-list>
|
||||
<mat-chip>Chip 1</mat-chip>
|
||||
<mat-chip>Chip 2</mat-chip>
|
||||
<mat-chip>Chip 3</mat-chip>
|
||||
</mat-chip-list>
|
||||
</div>
|
||||
|
||||
<div class="pb-1">
|
||||
<p>Unstyled</p>
|
||||
<mat-chip-list>
|
||||
<mat-basic-chip>Basic Chip 1</mat-basic-chip>
|
||||
<mat-basic-chip>Basic Chip 2</mat-basic-chip>
|
||||
<mat-basic-chip>Basic Chip 3</mat-basic-chip>
|
||||
</mat-chip-list>
|
||||
</div>
|
||||
|
||||
<p>Advanced</p>
|
||||
<mat-chip-list selectable="false">
|
||||
<mat-chip color="accent" selected="true">Selected/Colored</mat-chip>
|
||||
<mat-chip color="warn" selected="true" *ngIf="visible"
|
||||
(destroy)="alert('chip destroyed')" (click)="toggleVisible()">
|
||||
With Events
|
||||
</mat-chip>
|
||||
</mat-chip-list>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
<mat-card class="mb-2">
|
||||
<mat-card-title>Dynamic Chips</mat-card-title>
|
||||
<mat-card-subtitle>an input component for building lists of strings or objects. The list items are displayed as 'chips'.</mat-card-subtitle>
|
||||
<mat-card-content>
|
||||
<div class="pb-1">
|
||||
<p class="mt-0">Input Container</p>
|
||||
<mat-chip-list>
|
||||
<mat-chip *ngFor="let person of people" [color]="color">
|
||||
{{person.name}}
|
||||
</mat-chip>
|
||||
</mat-chip-list>
|
||||
|
||||
<mat-form-field class="mt-1">
|
||||
<input matInput #input (keyup.enter)="add(input)" placeholder="New Contributor..."/>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<p>Stacked Chips</p>
|
||||
<p>
|
||||
You can also stack the chips if you want them on top of each other and/or use the
|
||||
<code>(focus)</code> event to run custom code.
|
||||
</p>
|
||||
<mat-chip-list class="mat-chip-list-stacked">
|
||||
<mat-chip *ngFor="let aColor of availableColors"
|
||||
(focus)="color = aColor.color" color="{{aColor.color}}" selected="true">
|
||||
{{aColor.name}}
|
||||
</mat-chip>
|
||||
</mat-chip-list>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
0
sineedge_front/src/app/material/chips/chips.component.scss
Executable file
0
sineedge_front/src/app/material/chips/chips.component.scss
Executable file
58
sineedge_front/src/app/material/chips/chips.component.ts
Executable file
58
sineedge_front/src/app/material/chips/chips.component.ts
Executable file
@ -0,0 +1,58 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
export interface Person {
|
||||
name: string;
|
||||
}
|
||||
|
||||
export interface DemoColor {
|
||||
name: string;
|
||||
color: string;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-chips',
|
||||
templateUrl: './chips.component.html',
|
||||
styleUrls: ['./chips.component.scss']
|
||||
})
|
||||
export class ChipsComponent implements OnInit {
|
||||
|
||||
visible = true;
|
||||
color = '';
|
||||
|
||||
people: Person[] = [
|
||||
{ name: 'Kara' },
|
||||
{ name: 'Jeremy' },
|
||||
{ name: 'Topher' },
|
||||
{ name: 'Elad' },
|
||||
{ name: 'Kristiyan' },
|
||||
{ name: 'Paul' }
|
||||
];
|
||||
|
||||
availableColors: DemoColor[] = [
|
||||
{ name: 'none', color: '' },
|
||||
{ name: 'Primary', color: 'primary' },
|
||||
{ name: 'Accent', color: 'accent' },
|
||||
{ name: 'Warn', color: 'warn' }
|
||||
];
|
||||
|
||||
alert(message: string): void {
|
||||
alert(message);
|
||||
}
|
||||
|
||||
add(input: HTMLInputElement): void {
|
||||
if (input.value && input.value.trim() !== '') {
|
||||
this.people.push({ name: input.value.trim() });
|
||||
input.value = '';
|
||||
}
|
||||
}
|
||||
|
||||
toggleVisible(): void {
|
||||
this.visible = false;
|
||||
}
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
}
|
||||
37
sineedge_front/src/app/material/dialog/dialog.component.html
Executable file
37
sineedge_front/src/app/material/dialog/dialog.component.html
Executable file
@ -0,0 +1,37 @@
|
||||
<mat-card class="demo-dialog-card">
|
||||
<mat-card-title>Dialog</mat-card-title>
|
||||
<mat-card-subtitle>matDialog is a service, which opens dialogs components in the view.</mat-card-subtitle>
|
||||
<hr>
|
||||
<mat-card-content>
|
||||
<button mat-raised-button color="primary" (click)="open()" [disabled]="dialogRef">Open dialog</button>
|
||||
|
||||
<p>Dialog dimensions</p>
|
||||
<mat-form-field style="width: 100%">
|
||||
<input matInput [(ngModel)]="config.width" placeholder="Width">
|
||||
</mat-form-field>
|
||||
<mat-form-field style="width: 100%">
|
||||
<input matInput [(ngModel)]="config.height" placeholder="Height">
|
||||
</mat-form-field>
|
||||
|
||||
<p>Dialog position</p>
|
||||
|
||||
<mat-form-field style="width: 100%">
|
||||
<input matInput [(ngModel)]="config.position.top" (change)="config.position.bottom = ''" placeholder="Top">
|
||||
</mat-form-field>
|
||||
<mat-form-field style="width: 100%">
|
||||
<input matInput [(ngModel)]="config.position.bottom" (change)="config.position.top = ''" placeholder="Bottom">
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field style="width: 100%">
|
||||
<input matInput [(ngModel)]="config.position.left" (change)="config.position.right = ''" placeholder="Left">
|
||||
</mat-form-field>
|
||||
<mat-form-field style="width: 100%">
|
||||
<input matInput [(ngModel)]="config.position.right" (change)="config.position.left = ''" placeholder="Right">
|
||||
</mat-form-field>
|
||||
|
||||
<p>Other options</p>
|
||||
<mat-checkbox [(ngModel)]="config.disableClose">Disable close</mat-checkbox>
|
||||
|
||||
<p>Last close result: {{lastCloseResult}}</p>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
0
sineedge_front/src/app/material/dialog/dialog.component.scss
Executable file
0
sineedge_front/src/app/material/dialog/dialog.component.scss
Executable file
47
sineedge_front/src/app/material/dialog/dialog.component.ts
Executable file
47
sineedge_front/src/app/material/dialog/dialog.component.ts
Executable file
@ -0,0 +1,47 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { MatDialog, MatDialogRef, MatDialogConfig } from '@angular/material';
|
||||
|
||||
@Component({
|
||||
selector: 'app-dialog',
|
||||
templateUrl: './dialog.component.html',
|
||||
styleUrls: ['./dialog.component.scss']
|
||||
})
|
||||
export class DialogComponent {
|
||||
|
||||
lastCloseResult: string;
|
||||
config: MatDialogConfig = {
|
||||
disableClose: false,
|
||||
width: '',
|
||||
height: '',
|
||||
position: {
|
||||
top: '',
|
||||
bottom: '',
|
||||
left: '',
|
||||
right: ''
|
||||
}
|
||||
};
|
||||
|
||||
constructor(public dialog: MatDialog) {}
|
||||
|
||||
open() {
|
||||
let dialogRef = this.dialog.open(JazzDialogComponent, this.config);
|
||||
dialogRef.afterClosed().subscribe(result => {
|
||||
this.lastCloseResult = result;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-jazz-dialog',
|
||||
template: `
|
||||
<h5 class="mt-0">Maecenas faucibus mollis interdum.</h5>
|
||||
<mat-form-field>
|
||||
<input matInput placeholder="How much?" #howMuch type="number" style="width: 100%;">
|
||||
</mat-form-field>
|
||||
<p> {{ jazzMessage }} </p>
|
||||
<button mat-button type="button" (click)="dialogRef.close(howMuch.value)">Close dialog</button>`
|
||||
})
|
||||
export class JazzDialogComponent {
|
||||
jazzMessage = 'Jazzy jazz jazz';
|
||||
constructor(public dialogRef: MatDialogRef <JazzDialogComponent> ) {}
|
||||
}
|
||||
92
sineedge_front/src/app/material/grid/grid.component.html
Executable file
92
sineedge_front/src/app/material/grid/grid.component.html
Executable file
@ -0,0 +1,92 @@
|
||||
<mat-card>
|
||||
<mat-card-title>Grid List</mat-card-title>
|
||||
<mat-card-subtitle>mat-grid-list is an alternative list view that arranges cells into grid-based layout.</mat-card-subtitle>
|
||||
<hr>
|
||||
<mat-tab-group>
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>Fixed height</ng-template>
|
||||
<mat-card-content>
|
||||
<mat-grid-list [cols]="fixedCols" [rowHeight]="fixedRowHeight">
|
||||
<mat-grid-tile *ngFor="let tile of tiles" [colspan]="tile.cols" [rowspan]="tile.rows"
|
||||
[style.background]="tile.color">
|
||||
{{tile.text}}
|
||||
</mat-grid-tile>
|
||||
</mat-grid-list>
|
||||
<div fxLayout="row" fxLayoutAlign="start center" class="mt-2">
|
||||
<mat-form-field>
|
||||
<input matInput placeholder="Change list cols" type="number" [(ngModel)]="fixedCols">
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<input matInput placeholder="Change row height" type="number" [(ngModel)]="fixedRowHeight">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
<hr>
|
||||
<mat-card-actions>
|
||||
<button mat-button (click)="addTileCols()" color="primary">ADD COLSPAN (THREE)</button>
|
||||
</mat-card-actions>
|
||||
</mat-tab>
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>Ratio height</ng-template>
|
||||
<mat-card-content>
|
||||
<mat-grid-list cols="2" [rowHeight]="ratio" gutterSize="4px">
|
||||
<mat-grid-tile *ngFor="let tile of tiles" [style.background]="'lightblue'">
|
||||
{{tile.text}}
|
||||
</mat-grid-tile>
|
||||
</mat-grid-list>
|
||||
<div fxLayout="row" fxLayoutAlign="start center" class="mt-2">
|
||||
<mat-form-field>
|
||||
<input matInput placeholder="Change ratio" [(ngModel)]="ratio">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-tab>
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>Fit height</ng-template>
|
||||
<mat-card-content>
|
||||
<mat-grid-list cols="2" rowHeight="fit" [gutterSize]="ratioGutter"
|
||||
[style.height]="fitListHeight">
|
||||
<mat-grid-tile *ngFor="let tile of tiles" [style.background]="'#F1EBBA'">
|
||||
{{tile.text}}
|
||||
</mat-grid-tile>
|
||||
</mat-grid-list>
|
||||
<div fxLayout="row" fxLayoutAlign="start center" class="mt-2">
|
||||
<mat-form-field>
|
||||
<input matInput placeholder="Change list height" [(ngModel)]="fitListHeight">
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<input matInput placeholder="Change gutter" type="number" [(ngModel)]="ratioGutter">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-tab>
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>Headers</ng-template>
|
||||
<mat-card-content class="pa-0">
|
||||
<mat-grid-list cols="3" rowHeight="200px">
|
||||
<mat-grid-tile *ngFor="let dog of dogs" style="background:gray">
|
||||
<mat-grid-tile-header>
|
||||
<mat-icon mat-grid-avatar>info_outline</mat-icon>
|
||||
{{dog.name}}
|
||||
</mat-grid-tile-header>
|
||||
</mat-grid-tile>
|
||||
</mat-grid-list>
|
||||
</mat-card-content>
|
||||
</mat-tab>
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>Footers</ng-template>
|
||||
<mat-card-content class="pa-0">
|
||||
<mat-grid-list cols="3" rowHeight="200px">
|
||||
<mat-grid-tile *ngFor="let dog of dogs">
|
||||
<img [alt]="dog.name" src="https://material.angularjs.org/material2_assets/ngconf/{{dog.name}}.png">
|
||||
<mat-grid-tile-footer>
|
||||
<h3 mat-line>{{dog.name}}</h3>
|
||||
<span mat-line>Human: {{dog.human}}</span>
|
||||
<mat-icon>star_border</mat-icon>
|
||||
</mat-grid-tile-footer>
|
||||
</mat-grid-tile>
|
||||
</mat-grid-list>
|
||||
</mat-card-content>
|
||||
</mat-tab>
|
||||
</mat-tab-group>
|
||||
</mat-card>
|
||||
0
sineedge_front/src/app/material/grid/grid.component.scss
Executable file
0
sineedge_front/src/app/material/grid/grid.component.scss
Executable file
64
sineedge_front/src/app/material/grid/grid.component.ts
Executable file
64
sineedge_front/src/app/material/grid/grid.component.ts
Executable file
@ -0,0 +1,64 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-grid',
|
||||
templateUrl: './grid.component.html',
|
||||
styleUrls: ['./grid.component.scss']
|
||||
})
|
||||
export class GridComponent {
|
||||
|
||||
tiles: any[] = [{
|
||||
text: 'One',
|
||||
cols: 3,
|
||||
rows: 1,
|
||||
color: 'lightblue'
|
||||
}, {
|
||||
text: 'Two',
|
||||
cols: 1,
|
||||
rows: 2,
|
||||
color: 'lightgreen'
|
||||
}, {
|
||||
text: 'Three',
|
||||
cols: 1,
|
||||
rows: 1,
|
||||
color: 'lightpink'
|
||||
}, {
|
||||
text: 'Four',
|
||||
cols: 2,
|
||||
rows: 1,
|
||||
color: '#DDBDF1'
|
||||
}];
|
||||
|
||||
dogs: Object[] = [{
|
||||
name: 'Porter',
|
||||
human: 'Kara'
|
||||
}, {
|
||||
name: 'Mal',
|
||||
human: 'Jeremy'
|
||||
}, {
|
||||
name: 'Koby',
|
||||
human: 'Igor'
|
||||
}, {
|
||||
name: 'Razzle',
|
||||
human: 'Ward'
|
||||
}, {
|
||||
name: 'Molly',
|
||||
human: 'Rob'
|
||||
}, {
|
||||
name: 'Husi',
|
||||
human: 'Matias'
|
||||
}];
|
||||
|
||||
basicRowHeight = 80;
|
||||
fixedCols = 4;
|
||||
fixedRowHeight = 200;
|
||||
ratioGutter = 1;
|
||||
fitListHeight = '400px';
|
||||
ratio = '4:1';
|
||||
|
||||
addTileCols() {
|
||||
this.tiles[2].cols++;
|
||||
}
|
||||
|
||||
constructor() {}
|
||||
}
|
||||
98
sineedge_front/src/app/material/input/input.component.html
Executable file
98
sineedge_front/src/app/material/input/input.component.html
Executable file
@ -0,0 +1,98 @@
|
||||
<mat-card>
|
||||
<mat-card-title>Input</mat-card-title>
|
||||
<mat-card-subtitle>Inputs are the basic input component of Material 2</mat-card-subtitle>
|
||||
<hr>
|
||||
<mat-card-content>
|
||||
<div fxLayout="row" fxLayoutAlign="start center" class="mb-2">
|
||||
<mat-form-field class="ml-xs mr-xs" style="width: 100%;">
|
||||
<input matInput placeholder="Password" type="password">
|
||||
</mat-form-field>
|
||||
<mat-form-field class="ml-xs mr-xs" style="width: 100%;">
|
||||
<input matInput placeholder="Email" type="email">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div fxLayout="row" fxLayoutAlign="start center" class="mb-2">
|
||||
<mat-form-field position="end" class="ml-xs mr-xs" style="width: 100%;">
|
||||
<input matInput placeholder="amount">
|
||||
<span matPrefix>$ </span>
|
||||
<span matSuffix>.00</span>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="ml-xs mr-xs" style="width: 100%;">
|
||||
<input matInput placeholder="Character count (100 max)" maxLength="100"
|
||||
value="Hello world. How are you?"
|
||||
#characterCountHintExample>
|
||||
<mat-hint position="end">{{characterCountHintExample.characterCount}} / 100</mat-hint>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div fxLayout="row" fxLayoutAlign="start center" class="mb-2">
|
||||
<mat-form-field dividerColor="primary" class="ml-xs mr-xs" style="width: 100%;">
|
||||
<input matInput placeholder="Default Color" value="example">
|
||||
</mat-form-field>
|
||||
<mat-form-field dividerColor="accent" class="ml-xs mr-xs" style="width: 100%;">
|
||||
<input matInput placeholder="Accent Color" value="example">
|
||||
</mat-form-field>
|
||||
<mat-form-field dividerColor="warn" class="ml-xs mr-xs" style="width: 100%;">
|
||||
<input matInput placeholder="Warn Color" value="example">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div fxLayout="row" fxLayoutAlign="start center" class="mb-2">
|
||||
<mat-form-field dividerColor="primary" class="ml-xs mr-xs" style="width: 100%;">
|
||||
<textarea matInput placeholder="Default Color" value="example"></textarea>
|
||||
</mat-form-field>
|
||||
<mat-form-field dividerColor="accent" class="ml-xs mr-xs" style="width: 100%;">
|
||||
<textarea matInput placeholder="Accent Color" value="example"></textarea>
|
||||
</mat-form-field>
|
||||
<mat-form-field dividerColor="warn" class="ml-xs mr-xs" style="width: 100%;">
|
||||
<textarea matInput placeholder="Warn Color" value="example"></textarea>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div fxLayout="row" fxLayoutAlign="start center" class="mb-2">
|
||||
<mat-form-field dividerColor="warn" class="ml-xs mr-xs" style="width: 100%;">
|
||||
<textarea matInput placeholder="Character count (100 max)" maxLength="100" class="demo-full-width"
|
||||
value="Hello world. How are you?"
|
||||
#characterCountHintExample></textarea>
|
||||
<mat-hint position="end">{{characterCountHintExample.characterCount}} / 100</mat-hint>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div fxLayout="row" fxLayoutAlign="start center" class="mb-2">
|
||||
<mat-form-field class="ml-xs mr-xs" style="width: 100%;">
|
||||
<input matInput disabled placeholder="Disabled field" value="Value">
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="ml-xs mr-xs" style="width: 100%;">
|
||||
<input matInput required placeholder="Required field">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div fxLayout="row" fxLayoutAlign="start center" class="mb-2">
|
||||
<mat-form-field hintLabel="Hint label" class="ml-xs mr-xs" style="width: 100%;">
|
||||
<input matInput placeholder="Show Hint Label">
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field hintLabel="Hint label" class="ml-xs mr-xs" style="width: 100%;">
|
||||
<input matInput placeholder="Show Hint Label With Character Count">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div fxLayout="row" fxLayoutAlign="start center" class="mb-2">
|
||||
<div class="ml-xs mr-xs" style="width: 100%;">Hello <mat-form-field dividerColor="accent"><input matInput [(ngModel)]="name" type="text" placeholder="First name"></mat-form-field>, how are you?</div>
|
||||
|
||||
<mat-form-field style="width: 100%;">
|
||||
<input matInput>
|
||||
<mat-placeholder>
|
||||
I <mat-icon class="demo-icons">favorite</mat-icon> <b>bold</b> placeholder
|
||||
</mat-placeholder>
|
||||
<mat-hint>
|
||||
I also <mat-icon class="demo-icons">home</mat-icon> <i>italic</i> hint labels
|
||||
</mat-hint>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
38
sineedge_front/src/app/material/input/input.component.js
Executable file
38
sineedge_front/src/app/material/input/input.component.js
Executable file
@ -0,0 +1,38 @@
|
||||
"use strict";
|
||||
|
||||
var __decorate = this && this.__decorate || function(e, t, o, n) {
|
||||
var r, p = arguments.length, u = p < 3 ? t : null === n ? n = Object.getOwnPropertyDescriptor(t, o) : n;
|
||||
if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) u = Reflect.decorate(e, t, o, n); else for (var c = e.length - 1; c >= 0; c--) (r = e[c]) && (u = (p < 3 ? r(u) : p > 3 ? r(t, o, u) : r(t, o)) || u);
|
||||
return p > 3 && u && Object.defineProperty(t, o, u), u;
|
||||
};
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: !0
|
||||
});
|
||||
|
||||
var core_1 = require("@angular/core"), max = 5, InputComponent = function() {
|
||||
function e() {
|
||||
this.items = [ {
|
||||
value: 10
|
||||
}, {
|
||||
value: 20
|
||||
}, {
|
||||
value: 30
|
||||
}, {
|
||||
value: 40
|
||||
}, {
|
||||
value: 50
|
||||
} ], this.rows = 8;
|
||||
}
|
||||
return e.prototype.addABunch = function(e) {
|
||||
for (var t = 0; t < e; t++) this.items.push({
|
||||
value: ++max
|
||||
});
|
||||
}, e;
|
||||
}();
|
||||
|
||||
InputComponent = __decorate([ core_1.Component({
|
||||
selector: "app-input",
|
||||
templateUrl: "./input.component.html",
|
||||
styleUrls: [ "./input.component.scss" ]
|
||||
}) ], InputComponent), exports.InputComponent = InputComponent;
|
||||
0
sineedge_front/src/app/material/input/input.component.scss
Executable file
0
sineedge_front/src/app/material/input/input.component.scss
Executable file
40
sineedge_front/src/app/material/input/input.component.ts
Executable file
40
sineedge_front/src/app/material/input/input.component.ts
Executable file
@ -0,0 +1,40 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
let max = 5;
|
||||
|
||||
@Component({
|
||||
selector: 'app-input',
|
||||
templateUrl: './input.component.html',
|
||||
styleUrls: ['./input.component.scss']
|
||||
})
|
||||
export class InputComponent {
|
||||
|
||||
dividerColor: boolean;
|
||||
requiredField: boolean;
|
||||
floatingLabel: boolean;
|
||||
name: string;
|
||||
|
||||
items: any[] = [{
|
||||
value: 10
|
||||
}, {
|
||||
value: 20
|
||||
}, {
|
||||
value: 30
|
||||
}, {
|
||||
value: 40
|
||||
}, {
|
||||
value: 50
|
||||
}];
|
||||
|
||||
rows = 8;
|
||||
|
||||
addABunch(n: number) {
|
||||
for (let x = 0; x < n; x++) {
|
||||
this.items.push({
|
||||
value: ++max
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
constructor() {}
|
||||
}
|
||||
145
sineedge_front/src/app/material/lists/lists.component.html
Executable file
145
sineedge_front/src/app/material/lists/lists.component.html
Executable file
@ -0,0 +1,145 @@
|
||||
<mat-card>
|
||||
<mat-card-title>Lists</mat-card-title>
|
||||
<mat-card-subtitle>mat-list is a container component that wraps and formats a series of line items</mat-card-subtitle>
|
||||
<hr>
|
||||
<mat-card-content>
|
||||
<p>Normal lists</p>
|
||||
<mat-card>
|
||||
<mat-list>
|
||||
<h3 mat-subheader>Items</h3>
|
||||
<mat-list-item *ngFor="let item of items">
|
||||
{{item}}
|
||||
</mat-list-item>
|
||||
</mat-list>
|
||||
</mat-card>
|
||||
|
||||
<p>Multiline lists <button (click)="thirdLine=!thirdLine">Show third line</button></p>
|
||||
<mat-card>
|
||||
<mat-list>
|
||||
<mat-list-item *ngFor="let contact of contacts">
|
||||
<h3 mat-line>{{contact.name}}</h3>
|
||||
<p mat-line *ngIf="thirdLine">extra line</p>
|
||||
<p mat-line>{{contact.headline}}</p>
|
||||
</mat-list-item>
|
||||
</mat-list>
|
||||
</mat-card>
|
||||
|
||||
<p>3 Line List Item with Avatars and Icons</p>
|
||||
<mat-card>
|
||||
<mat-list>
|
||||
<h3 mat-subheader>Today</h3>
|
||||
<mat-list-item *ngFor="let message of messages">
|
||||
<img mat-list-avatar [src]="message.image" alt="Image of {{message.from}}">
|
||||
<h4 mat-line>{{message.from}}</h4>
|
||||
<p mat-line>
|
||||
<span>{{message.subject}} -- </span>
|
||||
<span class="text-mat mat-text-muted">{{message.message}}</span>
|
||||
</p>
|
||||
</mat-list-item>
|
||||
<mat-divider></mat-divider>
|
||||
<mat-list-item *ngFor="let message of messages">
|
||||
<h4 mat-line>{{message.from}}</h4>
|
||||
<p mat-line> {{message.subject}} </p>
|
||||
<p mat-line class="text-mat mat-text-muted">{{message.message}} </p>
|
||||
</mat-list-item>
|
||||
<mat-divider></mat-divider>
|
||||
<mat-list-item *ngFor="let message of messages">
|
||||
<mat-icon mat-list-avatar>person</mat-icon>
|
||||
<h4 mat-line>{{message.from}}</h4>
|
||||
<p mat-line>
|
||||
<span>{{message.subject}} -- </span>
|
||||
<span class="text-mat mat-text-muted">{{message.message}}</span>
|
||||
</p>
|
||||
</mat-list-item>
|
||||
</mat-list>
|
||||
</mat-card>
|
||||
|
||||
<p>Dense lists</p>
|
||||
<mat-card>
|
||||
<mat-list dense>
|
||||
<h3 mat-subheader>Items</h3>
|
||||
<mat-list-item *ngFor="let item of items">
|
||||
{{item}}
|
||||
</mat-list-item>
|
||||
</mat-list>
|
||||
</mat-card>
|
||||
|
||||
<p>Multiline dense list</p>
|
||||
<mat-card>
|
||||
<mat-list dense>
|
||||
<mat-list-item *ngFor="let contact of contacts">
|
||||
<h3 mat-line>{{contact.name}}</h3>
|
||||
<p mat-line>{{contact.headline}}</p>
|
||||
</mat-list-item>
|
||||
</mat-list>
|
||||
</mat-card>
|
||||
|
||||
<p>3 Line List Item with Avatars and Icons</p>
|
||||
<mat-card>
|
||||
<mat-list dense>
|
||||
<h3 mat-subheader>Today</h3>
|
||||
<mat-list-item *ngFor="let message of messages">
|
||||
<img mat-list-avatar [src]="message.image" alt="Image of {{message.from}}">
|
||||
<h4 mat-line>{{message.from}}</h4>
|
||||
<p mat-line> {{message.subject}} </p>
|
||||
<p mat-line>{{message.message}} </p>
|
||||
</mat-list-item>
|
||||
</mat-list>
|
||||
</mat-card>
|
||||
|
||||
<p>Checkbox list</p>
|
||||
<mat-card>
|
||||
<mat-list>
|
||||
<ng-template ngFor let-todo [ngForOf]="todos">
|
||||
<mat-list-item>
|
||||
<div fxLayout="row" fxLayoutAlign="start center" style="width: 100%;">
|
||||
<div fxFlex>
|
||||
<mat-checkbox [checked]="todo.finished">
|
||||
{{todo.name}}
|
||||
</mat-checkbox>
|
||||
</div>
|
||||
<div><mat-icon>more_horiz</mat-icon></div>
|
||||
</div>
|
||||
</mat-list-item>
|
||||
</ng-template>
|
||||
</mat-list>
|
||||
</mat-card>
|
||||
|
||||
<p>Nav lists</p>
|
||||
<mat-card>
|
||||
<mat-nav-list>
|
||||
<a mat-list-item *ngFor="let link of links" href="http://www.google.com">
|
||||
{{ link.name }}
|
||||
</a>
|
||||
</mat-nav-list>
|
||||
<hr>
|
||||
<mat-nav-list>
|
||||
<h3 mat-subheader *ngIf="infoClicked">More info!</h3>
|
||||
<mat-list-item *ngFor="let link of links">
|
||||
<a mat-line href="http://www.google.com">{{ link.name }}</a>
|
||||
<button mat-icon-button (click)="infoClicked=!infoClicked">
|
||||
<mat-icon>info</mat-icon>
|
||||
</button>
|
||||
</mat-list-item>
|
||||
</mat-nav-list>
|
||||
<hr>
|
||||
<mat-nav-list>
|
||||
<a mat-list-item *ngFor="let link of links" href="http://www.google.com">
|
||||
<mat-icon mat-list-icon>folder</mat-icon>
|
||||
<span mat-line>{{ link.name }}</span>
|
||||
<span mat-line> Description </span>
|
||||
</a>
|
||||
</mat-nav-list>
|
||||
<hr>
|
||||
<mat-nav-list dense>
|
||||
<mat-list-item *ngFor="let link of links">
|
||||
<a mat-line href="http://www.google.com">{{ link.name }}</a>
|
||||
<button mat-icon-button (click)="infoClicked=!infoClicked">
|
||||
<mat-icon class="material-icons">info</mat-icon>
|
||||
</button>
|
||||
</mat-list-item>
|
||||
</mat-nav-list>
|
||||
</mat-card>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
0
sineedge_front/src/app/material/lists/lists.component.scss
Executable file
0
sineedge_front/src/app/material/lists/lists.component.scss
Executable file
74
sineedge_front/src/app/material/lists/lists.component.ts
Executable file
74
sineedge_front/src/app/material/lists/lists.component.ts
Executable file
@ -0,0 +1,74 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-lists',
|
||||
templateUrl: './lists.component.html',
|
||||
styleUrls: ['./lists.component.scss']
|
||||
})
|
||||
export class ListsComponent {
|
||||
|
||||
todos: Object[] = [{
|
||||
finished: true,
|
||||
name: 'Learn Angular 2.0',
|
||||
}, {
|
||||
finished: true,
|
||||
name: 'Learn Angular Material 2.0',
|
||||
}, {
|
||||
finished: false,
|
||||
name: 'Build examples',
|
||||
}, {
|
||||
finished: false,
|
||||
name: 'Documentation',
|
||||
}, {
|
||||
finished: false,
|
||||
name: 'Write about your findings',
|
||||
}, {
|
||||
finished: false,
|
||||
name: 'Contribute back to the community',
|
||||
}];
|
||||
|
||||
items: string[] = ['Pepper', 'Salt', 'Paprika'];
|
||||
|
||||
contacts: any[] = [{
|
||||
name: 'Nancy',
|
||||
headline: 'Software engineer'
|
||||
}, {
|
||||
name: 'Mary',
|
||||
headline: 'TPM'
|
||||
}, {
|
||||
name: 'Bobby',
|
||||
headline: 'UX designer'
|
||||
}];
|
||||
|
||||
messages: any[] = [{
|
||||
from: 'Nancy',
|
||||
subject: 'Brunch?',
|
||||
message: 'Did you want to go on Sunday? I was thinking that might work.',
|
||||
image: 'https://angular.io/resources/images/bios/julie-ralph.jpg'
|
||||
}, {
|
||||
from: 'Mary',
|
||||
subject: 'Summer BBQ',
|
||||
message: 'Wish I could come, but I have some prior obligations.',
|
||||
image: 'https://angular.io/resources/images/bios/juleskremer.jpg'
|
||||
}, {
|
||||
from: 'Bobby',
|
||||
subject: 'Oui oui',
|
||||
message: 'Do you have Paris reservations for the 15th? I just booked!',
|
||||
image: 'https://angular.io/resources/images/bios/jelbourn.jpg'
|
||||
}];
|
||||
|
||||
links: any[] = [{
|
||||
name: 'Inbox'
|
||||
}, {
|
||||
name: 'Outbox'
|
||||
}, {
|
||||
name: 'Spam'
|
||||
}, {
|
||||
name: 'Trash'
|
||||
}];
|
||||
|
||||
thirdLine = false;
|
||||
infoClicked = false;
|
||||
|
||||
constructor() {}
|
||||
}
|
||||
66
sineedge_front/src/app/material/material.module.ts
Executable file
66
sineedge_front/src/app/material/material.module.ts
Executable file
@ -0,0 +1,66 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { HttpModule } from '@angular/http';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
||||
import { FlexLayoutModule } from '@angular/flex-layout';
|
||||
import {MatCardModule} from '@angular/material/card';
|
||||
import { DemoMaterialModule } from '../shared/demo.module';
|
||||
import 'hammerjs';
|
||||
|
||||
import { MaterialRoutes } from './material.routing';
|
||||
import { ButtonsComponent } from './buttons/buttons.component';
|
||||
import { CardsComponent } from './cards/cards.component';
|
||||
import { InputComponent } from './input/input.component';
|
||||
import { CheckboxComponent, MatCheckboxDemoNestedChecklistComponent } from './checkbox/checkbox.component';
|
||||
import { RadioComponent } from './radio/radio.component';
|
||||
import { ToolbarComponent } from './toolbar/toolbar.component';
|
||||
import { ListsComponent } from './lists/lists.component';
|
||||
import { GridComponent } from './grid/grid.component';
|
||||
import { ProgressComponent } from './progress/progress.component';
|
||||
import { TabsComponent } from './tabs/tabs.component';
|
||||
import { ToggleComponent } from './toggle/toggle.component';
|
||||
import { TooltipComponent } from './tooltip/tooltip.component';
|
||||
import { MenuComponent } from './menu/menu.component';
|
||||
import { SliderComponent } from './slider/slider.component';
|
||||
import { SnackbarComponent } from './snackbar/snackbar.component';
|
||||
import { DialogComponent } from './dialog/dialog.component';
|
||||
import { SelectComponent } from './select/select.component';
|
||||
import { AutocompleteComponent } from './autocomplete/autocomplete.component';
|
||||
import { ChipsComponent } from './chips/chips.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
RouterModule.forChild(MaterialRoutes),
|
||||
HttpModule,
|
||||
FormsModule,
|
||||
ReactiveFormsModule,
|
||||
DemoMaterialModule,
|
||||
FlexLayoutModule
|
||||
],
|
||||
declarations: [
|
||||
ButtonsComponent,
|
||||
CardsComponent,
|
||||
InputComponent,
|
||||
CheckboxComponent,
|
||||
MatCheckboxDemoNestedChecklistComponent,
|
||||
RadioComponent,
|
||||
ToolbarComponent,
|
||||
ListsComponent,
|
||||
GridComponent,
|
||||
ProgressComponent,
|
||||
TabsComponent,
|
||||
ToggleComponent,
|
||||
TooltipComponent,
|
||||
MenuComponent,
|
||||
SliderComponent,
|
||||
SnackbarComponent,
|
||||
DialogComponent,
|
||||
SelectComponent,
|
||||
AutocompleteComponent,
|
||||
ChipsComponent
|
||||
],
|
||||
})
|
||||
|
||||
export class MaterialComponentsModule {}
|
||||
85
sineedge_front/src/app/material/material.routing.ts
Executable file
85
sineedge_front/src/app/material/material.routing.ts
Executable file
@ -0,0 +1,85 @@
|
||||
import { Routes } from '@angular/router';
|
||||
|
||||
import { ButtonsComponent } from './buttons/buttons.component';
|
||||
import { CardsComponent } from './cards/cards.component';
|
||||
import { InputComponent } from './input/input.component';
|
||||
import { CheckboxComponent } from './checkbox/checkbox.component';
|
||||
import { RadioComponent } from './radio/radio.component';
|
||||
import { ToolbarComponent } from './toolbar/toolbar.component';
|
||||
import { ListsComponent } from './lists/lists.component';
|
||||
import { GridComponent } from './grid/grid.component';
|
||||
import { ProgressComponent } from './progress/progress.component';
|
||||
import { TabsComponent } from './tabs/tabs.component';
|
||||
import { ToggleComponent } from './toggle/toggle.component';
|
||||
import { TooltipComponent } from './tooltip/tooltip.component';
|
||||
import { MenuComponent } from './menu/menu.component';
|
||||
import { SliderComponent } from './slider/slider.component';
|
||||
import { SnackbarComponent } from './snackbar/snackbar.component';
|
||||
import { DialogComponent } from './dialog/dialog.component';
|
||||
import { SelectComponent } from './select/select.component';
|
||||
import { AutocompleteComponent } from './autocomplete/autocomplete.component';
|
||||
import { ChipsComponent } from './chips/chips.component';
|
||||
|
||||
export const MaterialRoutes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
children: [{
|
||||
path: 'button',
|
||||
component: ButtonsComponent
|
||||
}, {
|
||||
path: 'cards',
|
||||
component: CardsComponent
|
||||
}, {
|
||||
path: 'input',
|
||||
component: InputComponent
|
||||
}, {
|
||||
path: 'checkbox',
|
||||
component: CheckboxComponent
|
||||
}, {
|
||||
path: 'radio',
|
||||
component: RadioComponent
|
||||
}, {
|
||||
path: 'toolbar',
|
||||
component: ToolbarComponent
|
||||
}, {
|
||||
path: 'lists',
|
||||
component: ListsComponent
|
||||
}, {
|
||||
path: 'grid',
|
||||
component: GridComponent
|
||||
}, {
|
||||
path: 'progress',
|
||||
component: ProgressComponent
|
||||
}, {
|
||||
path: 'tabs',
|
||||
component: TabsComponent
|
||||
}, {
|
||||
path: 'switch',
|
||||
component: ToggleComponent
|
||||
}, {
|
||||
path: 'tooltip',
|
||||
component: TooltipComponent
|
||||
}, {
|
||||
path: 'menu',
|
||||
component: MenuComponent
|
||||
}, {
|
||||
path: 'slider',
|
||||
component: SliderComponent
|
||||
}, {
|
||||
path: 'snackbar',
|
||||
component: SnackbarComponent
|
||||
}, {
|
||||
path: 'dialog',
|
||||
component: DialogComponent
|
||||
}, {
|
||||
path: 'select',
|
||||
component: SelectComponent
|
||||
}, {
|
||||
path: 'autocomplete',
|
||||
component: AutocompleteComponent
|
||||
}, {
|
||||
path: 'chips',
|
||||
component: ChipsComponent
|
||||
}]
|
||||
}
|
||||
];
|
||||
63
sineedge_front/src/app/material/menu/menu.component.html
Executable file
63
sineedge_front/src/app/material/menu/menu.component.html
Executable file
@ -0,0 +1,63 @@
|
||||
<mat-card>
|
||||
<mat-card-title>Menus (dropdowns)</mat-card-title>
|
||||
<mat-card-subtitle>mat-menu is a list of options that displays when triggered.</mat-card-subtitle>
|
||||
<hr>
|
||||
<mat-card-content>
|
||||
<p>You clicked on: {{ selected }}</p>
|
||||
</mat-card-content>
|
||||
<mat-toolbar>
|
||||
<button mat-icon-button [mat-menu-trigger-for]="menu" aria-label="Open basic menu">
|
||||
<mat-icon>more_vert</mat-icon>
|
||||
</button>
|
||||
</mat-toolbar>
|
||||
<mat-menu #menu="matMenu">
|
||||
<button mat-menu-item *ngFor="let item of items" (click)="select(item.text)" [disabled]="item.disabled">
|
||||
{{ item.text }}
|
||||
</button>
|
||||
</mat-menu>
|
||||
|
||||
<mat-card-content>
|
||||
<p> Clicking these will navigate:</p>
|
||||
</mat-card-content>
|
||||
<mat-toolbar>
|
||||
<button mat-icon-button [mat-menu-trigger-for]="anchorMenu" aria-label="Open anchor menu">
|
||||
<mat-icon>more_vert</mat-icon>
|
||||
</button>
|
||||
</mat-toolbar>
|
||||
<mat-menu #anchorMenu="matMenu">
|
||||
<a mat-menu-item *ngFor="let item of items" href="http://www.google.com" [disabled]="item.disabled">
|
||||
{{ item.text }}
|
||||
</a>
|
||||
</mat-menu>
|
||||
|
||||
<mat-card-content>
|
||||
<p>Position x: before</p>
|
||||
</mat-card-content>
|
||||
<mat-toolbar class="end-icon">
|
||||
<button mat-icon-button [mat-menu-trigger-for]="posXMenu" aria-label="Open x-positioned menu">
|
||||
<mat-icon>more_vert</mat-icon>
|
||||
</button>
|
||||
</mat-toolbar>
|
||||
|
||||
<mat-menu x-position="before" #posXMenu="matMenu" class="before">
|
||||
<button mat-menu-item *ngFor="let item of iconItems" [disabled]="item.disabled">
|
||||
<mat-icon>{{ item.icon }}</mat-icon>
|
||||
{{ item.text }}
|
||||
</button>
|
||||
</mat-menu>
|
||||
|
||||
<mat-card-content>
|
||||
<p>Position y: above</p>
|
||||
</mat-card-content>
|
||||
<mat-toolbar>
|
||||
<button mat-icon-button [mat-menu-trigger-for]="posYMenu" aria-label="Open y-positioned menu">
|
||||
<mat-icon>more_vert</mat-icon>
|
||||
</button>
|
||||
</mat-toolbar>
|
||||
|
||||
<mat-menu y-position="above" #posYMenu="matMenu">
|
||||
<button mat-menu-item *ngFor="let item of items" [disabled]="item.disabled">
|
||||
{{ item.text }}
|
||||
</button>
|
||||
</mat-menu>
|
||||
</mat-card>
|
||||
0
sineedge_front/src/app/material/menu/menu.component.scss
Executable file
0
sineedge_front/src/app/material/menu/menu.component.scss
Executable file
38
sineedge_front/src/app/material/menu/menu.component.ts
Executable file
38
sineedge_front/src/app/material/menu/menu.component.ts
Executable file
@ -0,0 +1,38 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-menu',
|
||||
templateUrl: './menu.component.html',
|
||||
styleUrls: ['./menu.component.scss']
|
||||
})
|
||||
export class MenuComponent {
|
||||
selected = '';
|
||||
items = [{
|
||||
text: 'Refresh'
|
||||
}, {
|
||||
text: 'Settings'
|
||||
}, {
|
||||
text: 'Help',
|
||||
disabled: true
|
||||
}, {
|
||||
text: 'Sign Out'
|
||||
}];
|
||||
|
||||
iconItems = [{
|
||||
text: 'Redial',
|
||||
icon: 'dialpad'
|
||||
}, {
|
||||
text: 'Check voicemail',
|
||||
icon: 'voicemail',
|
||||
disabled: true
|
||||
}, {
|
||||
text: 'Disable alerts',
|
||||
icon: 'notifications_off'
|
||||
}];
|
||||
|
||||
select(text: string) {
|
||||
this.selected = text;
|
||||
}
|
||||
|
||||
constructor() {}
|
||||
}
|
||||
78
sineedge_front/src/app/material/progress/progress.component.html
Executable file
78
sineedge_front/src/app/material/progress/progress.component.html
Executable file
@ -0,0 +1,78 @@
|
||||
<mat-card class="mb-2">
|
||||
<mat-card-title>Progress spinner</mat-card-title>
|
||||
<mat-card-subtitle>mat-progress-spinner is a component for indicating progress and activity, matching the spec of Material Design Progress & Activity.</mat-card-subtitle>
|
||||
<hr>
|
||||
<mat-card-content>
|
||||
<p>Determinate</p>
|
||||
<div class="mb-1">
|
||||
<div fxLayout="row">
|
||||
<mat-progress-spinner mode="determinate"
|
||||
[value]="progressValue"
|
||||
class="primary"></mat-progress-spinner>
|
||||
<mat-progress-spinner mode="determinate" [value]="progressValue"
|
||||
color="accent"></mat-progress-spinner>
|
||||
<mat-progress-spinner mode="determinate" [value]="progressValue"
|
||||
color="warn"></mat-progress-spinner>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button mat-raised-button class="mr-1" (click)="step(10)">Increase</button>
|
||||
<button mat-raised-button (click)="step(-10)">Decrease</button>
|
||||
|
||||
<p class="mt-1">Indeterminate</p>
|
||||
<div>
|
||||
<div fxLayout="row">
|
||||
<mat-progress-spinner mode="indeterminate"
|
||||
class="primary"></mat-progress-spinner>
|
||||
<mat-progress-spinner mode="indeterminate"
|
||||
color="accent"></mat-progress-spinner>
|
||||
<mat-progress-spinner mode="indeterminate"
|
||||
color="warn"></mat-progress-spinner>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
<mat-card>
|
||||
<mat-card-title>Progress bar</mat-card-title>
|
||||
<mat-card-subtitle>mat-progress-bar is a component for indicating progress and activity, matching the spec of Material Design Progress & Activity</mat-card-subtitle>
|
||||
<hr>
|
||||
<mat-card-content>
|
||||
<p>Determinate</p>
|
||||
<mat-progress-bar mode="determinate"
|
||||
[value]="determinateProgressValue"
|
||||
color="primary"
|
||||
class="mb-1"></mat-progress-bar>
|
||||
<button mat-raised-button class="mr-1" (click)="stepDeterminateProgressVal(10)">Increase</button>
|
||||
<button mat-raised-button (click)="stepDeterminateProgressVal(-10)">Decrease</button>
|
||||
|
||||
<p>Buffer</p>
|
||||
<mat-progress-bar [value]="bufferProgressValue"
|
||||
[bufferValue]="bufferBufferValue"
|
||||
mode="buffer"
|
||||
color="warn"
|
||||
class="mb-1"></mat-progress-bar>
|
||||
|
||||
<div fxLayout="row" fxLayoutWrap="wrap">
|
||||
<button mat-raised-button class="mr-1 mb-xs" (click)="stepBufferProgressVal(10)">Increase</button>
|
||||
<button mat-raised-button class="mb-xs" (click)="stepBufferProgressVal(-10)">Decrease</button>
|
||||
<span fxFlex></span>
|
||||
<button mat-raised-button class="mr-1 mb-xs" (click)="stepBufferBufferVal(10)">Increase</button>
|
||||
<button mat-raised-button class="mb-xs" (click)="stepBufferBufferVal(-10)">Decrease</button>
|
||||
</div>
|
||||
|
||||
<p>Indeterminate</p>
|
||||
<mat-progress-bar mode="indeterminate"
|
||||
class="mb-1"></mat-progress-bar>
|
||||
|
||||
<p>Query</p>
|
||||
<mat-progress-bar mode="query"
|
||||
class="mb-1"></mat-progress-bar>
|
||||
|
||||
<p>Colors</p>
|
||||
<mat-progress-bar mode="indeterminate" color="primary" class="mb-1"></mat-progress-bar>
|
||||
<mat-progress-bar mode="indeterminate" color="accent" class="mb-1"></mat-progress-bar>
|
||||
<mat-progress-bar mode="indeterminate" color="warn" class="mb-1"></mat-progress-bar>
|
||||
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
0
sineedge_front/src/app/material/progress/progress.component.scss
Executable file
0
sineedge_front/src/app/material/progress/progress.component.scss
Executable file
32
sineedge_front/src/app/material/progress/progress.component.ts
Executable file
32
sineedge_front/src/app/material/progress/progress.component.ts
Executable file
@ -0,0 +1,32 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-progress',
|
||||
templateUrl: './progress.component.html',
|
||||
styleUrls: ['./progress.component.scss']
|
||||
})
|
||||
export class ProgressComponent {
|
||||
|
||||
progressValue = 40;
|
||||
determinateProgressValue = 30;
|
||||
bufferProgressValue = 30;
|
||||
bufferBufferValue = 40;
|
||||
|
||||
step(val: number) {
|
||||
this.progressValue += val;
|
||||
}
|
||||
|
||||
stepDeterminateProgressVal(val: number) {
|
||||
this.determinateProgressValue += val;
|
||||
}
|
||||
|
||||
stepBufferProgressVal(val: number) {
|
||||
this.bufferProgressValue += val;
|
||||
}
|
||||
|
||||
stepBufferBufferVal(val: number) {
|
||||
this.bufferBufferValue += val;
|
||||
}
|
||||
|
||||
constructor() { }
|
||||
}
|
||||
45
sineedge_front/src/app/material/radio/radio.component.html
Executable file
45
sineedge_front/src/app/material/radio/radio.component.html
Executable file
@ -0,0 +1,45 @@
|
||||
<mat-card>
|
||||
<mat-card-title>Radios</mat-card-title>
|
||||
<mat-card-subtitle>Radio buttons allow the user to select one option from a set</mat-card-subtitle>
|
||||
<hr>
|
||||
<mat-card-content fxLayout="row" fxLayoutWrap="wrap">
|
||||
<div fxFlex.gt-sm="33" fxFlex="100">
|
||||
<p>Basic Example</p>
|
||||
<div fxLayout="column">
|
||||
<mat-radio-button name="group1">Option 1</mat-radio-button>
|
||||
<mat-radio-button name="group1">Option 2</mat-radio-button>
|
||||
<mat-radio-button name="group1" disabled="true">Option 3 (disabled)</mat-radio-button>
|
||||
</div>
|
||||
</div>
|
||||
<div fxFlex.gt-sm="33" fxFlex="100">
|
||||
<p>Dynamic Example</p>
|
||||
<div>
|
||||
<mat-radio-group name="my_options" [disabled]="isDisabled" fxLayout="column">
|
||||
<mat-radio-button value="option_1">Option 1</mat-radio-button>
|
||||
<mat-radio-button value="option_2">Option 2</mat-radio-button>
|
||||
<mat-radio-button value="option_3">Option 3</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
<p>
|
||||
<span>isDisabled: {{isDisabled}}</span>
|
||||
<button (click)="isDisabled=!isDisabled" class="demo-button">
|
||||
Disable buttons
|
||||
</button>
|
||||
</p>
|
||||
<p>
|
||||
<span><mat-checkbox [(ngModel)]="isAlignEnd">Align end</mat-checkbox></span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div fxFlex.gt-sm="33" fxFlex="100">
|
||||
<p>Dynamic Example with two-way data-binding</p>
|
||||
<div>
|
||||
<mat-radio-group name="more_options" [(ngModel)]="favoriteSeason" fxLayout="column">
|
||||
<mat-radio-button *ngFor="let season of seasonOptions" name="more_options" [value]="season">
|
||||
{{season}}
|
||||
</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
<p>Your favorite season is: {{favoriteSeason}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
0
sineedge_front/src/app/material/radio/radio.component.scss
Executable file
0
sineedge_front/src/app/material/radio/radio.component.scss
Executable file
16
sineedge_front/src/app/material/radio/radio.component.ts
Executable file
16
sineedge_front/src/app/material/radio/radio.component.ts
Executable file
@ -0,0 +1,16 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-radio',
|
||||
templateUrl: './radio.component.html',
|
||||
styleUrls: ['./radio.component.scss']
|
||||
})
|
||||
export class RadioComponent {
|
||||
|
||||
isDisabled = false;
|
||||
isAlignEnd = false;
|
||||
favoriteSeason = 'Autumn';
|
||||
seasonOptions: string[] = ['Winter', 'Spring', 'Summer', 'Autumn', ];
|
||||
|
||||
constructor() {}
|
||||
}
|
||||
22
sineedge_front/src/app/material/select/select.component.html
Executable file
22
sineedge_front/src/app/material/select/select.component.html
Executable file
@ -0,0 +1,22 @@
|
||||
<mat-card>
|
||||
<mat-card-title>Select</mat-card-title>
|
||||
<mat-card-subtitle>Select buttons allow the user to select one option from a set</mat-card-subtitle>
|
||||
<hr>
|
||||
<mat-card-content>
|
||||
<mat-form-field>
|
||||
<mat-select placeholder="Drink" [(ngModel)]="currentDrink" [required]="isRequired" [disabled]="isDisabled" #drinkControl="ngModel">
|
||||
<mat-option *ngFor="let drink of drinks" [value]="drink.value" [disabled]="drink.disabled">
|
||||
{{ drink.viewValue }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<p> Value: {{ currentDrink }} </p>
|
||||
<p> Touched: {{ drinkControl.touched }} </p>
|
||||
<p> Dirty: {{ drinkControl.dirty }} </p>
|
||||
<p> Status: {{ drinkControl.control?.status }} </p>
|
||||
<button mat-button (click)="currentDrink='sprite-1'">SET VALUE</button>
|
||||
<button mat-button (click)="isRequired=!isRequired">TOGGLE REQUIRED</button>
|
||||
<button mat-button (click)="isDisabled=!isDisabled">TOGGLE DISABLED</button>
|
||||
<button mat-button (click)="drinkControl.reset()">RESET</button>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
0
sineedge_front/src/app/material/select/select.component.scss
Executable file
0
sineedge_front/src/app/material/select/select.component.scss
Executable file
42
sineedge_front/src/app/material/select/select.component.ts
Executable file
42
sineedge_front/src/app/material/select/select.component.ts
Executable file
@ -0,0 +1,42 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { FormControl } from '@angular/forms';
|
||||
|
||||
@Component({
|
||||
selector: 'app-select',
|
||||
templateUrl: './select.component.html',
|
||||
styleUrls: ['./select.component.scss']
|
||||
})
|
||||
export class SelectComponent {
|
||||
isRequired = false;
|
||||
isDisabled = false;
|
||||
currentDrink: string;
|
||||
|
||||
drinks = [{
|
||||
value: 'coke-0',
|
||||
viewValue: 'Coke'
|
||||
}, {
|
||||
value: 'sprite-1',
|
||||
viewValue: 'Sprite'
|
||||
}, {
|
||||
value: 'water-2',
|
||||
viewValue: 'Water'
|
||||
}, {
|
||||
value: 'pepper-3',
|
||||
viewValue: 'Dr. Pepper'
|
||||
}, {
|
||||
value: 'coffee-4',
|
||||
viewValue: 'Coffee'
|
||||
}, {
|
||||
value: 'tea-5',
|
||||
viewValue: 'Tea'
|
||||
}, {
|
||||
value: 'juice-6',
|
||||
viewValue: 'Orange juice'
|
||||
}, {
|
||||
value: 'wine-7',
|
||||
viewValue: 'Wine'
|
||||
}, {
|
||||
value: 'milk-8',
|
||||
viewValue: 'Milk'
|
||||
}];
|
||||
}
|
||||
51
sineedge_front/src/app/material/slider/slider.component.html
Executable file
51
sineedge_front/src/app/material/slider/slider.component.html
Executable file
@ -0,0 +1,51 @@
|
||||
<mat-card>
|
||||
<mat-card-title>Slider</mat-card-title>
|
||||
<mat-card-subtitle>mat-slider is a component that allows users to select from a range of values by moving the slider thumb</mat-card-subtitle>
|
||||
<hr>
|
||||
<mat-card-content>
|
||||
<p>Default Slider</p>
|
||||
Label <mat-slider #slidey></mat-slider>
|
||||
{{slidey.value}}
|
||||
|
||||
<p>Slider with Min and Max</p>
|
||||
<input [(ngModel)]="min">
|
||||
<mat-slider [min]="min" [max]="max" tick-interval="5" #slider2></mat-slider>
|
||||
{{slider2.value}}
|
||||
<input [(ngModel)]="max">
|
||||
|
||||
<p>Disabled Slider</p>
|
||||
<mat-slider disabled #slider3></mat-slider>
|
||||
{{slider3.value}}
|
||||
|
||||
<p>Slider with set value</p>
|
||||
<mat-slider value="43"></mat-slider>
|
||||
|
||||
<p>Slider with step defined</p>
|
||||
<mat-slider min="1" max="100" step="20" #slider5></mat-slider>
|
||||
{{slider5.value}}
|
||||
|
||||
<p>Slider with set tick interval</p>
|
||||
<mat-slider tick-interval="auto"></mat-slider>
|
||||
<mat-slider tick-interval="9"></mat-slider>
|
||||
|
||||
<p>Slider with Thumb Label</p>
|
||||
<mat-slider thumb-label></mat-slider>
|
||||
|
||||
<p>Slider with one-way binding</p>
|
||||
<mat-slider [value]="val" step="40"></mat-slider>
|
||||
<input [(ngModel)]="val">
|
||||
|
||||
<p>Slider with two-way binding</p>
|
||||
<mat-slider [(ngModel)]="demo" step="40"></mat-slider>
|
||||
<input [(ngModel)]="demo">
|
||||
|
||||
<p>Inverted slider</p>
|
||||
<mat-slider invert value="50" tick-interval="5"></mat-slider>
|
||||
|
||||
<p>Vertical slider</p>
|
||||
<mat-slider vertical thumb-label tick-interval="auto" value="50"></mat-slider>
|
||||
|
||||
<p>Inverted vertical slider</p>
|
||||
<mat-slider vertical invert thumb-label tick-interval="auto" value="50"></mat-slider>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
0
sineedge_front/src/app/material/slider/slider.component.scss
Executable file
0
sineedge_front/src/app/material/slider/slider.component.scss
Executable file
16
sineedge_front/src/app/material/slider/slider.component.ts
Executable file
16
sineedge_front/src/app/material/slider/slider.component.ts
Executable file
@ -0,0 +1,16 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-slider',
|
||||
templateUrl: './slider.component.html',
|
||||
styleUrls: ['./slider.component.scss']
|
||||
})
|
||||
export class SliderComponent {
|
||||
|
||||
demo: number;
|
||||
val = 50;
|
||||
min = 0;
|
||||
max = 100;
|
||||
|
||||
constructor() {}
|
||||
}
|
||||
31
sineedge_front/src/app/material/snackbar/snackbar.component.html
Executable file
31
sineedge_front/src/app/material/snackbar/snackbar.component.html
Executable file
@ -0,0 +1,31 @@
|
||||
<mat-card>
|
||||
<mat-card-title>Snack Bar</mat-card-title>
|
||||
<mat-card-subtitle>matSnackBar is a service, which opens snack bar notifications in the view.</mat-card-subtitle>
|
||||
<hr>
|
||||
<mat-card-content>
|
||||
<p>Message: <mat-form-field><input matInput type="text" [(ngModel)]="message"></mat-form-field></p>
|
||||
<mat-checkbox [(ngModel)]="action">
|
||||
<p *ngIf="!action">Show button on snack bar</p>
|
||||
<mat-form-field *ngIf="action">
|
||||
<input matInput
|
||||
type="text"
|
||||
class="demo-button-label-input"
|
||||
placeholder="Snack bar action label"
|
||||
[(ngModel)]="actionButtonLabel">
|
||||
</mat-form-field>
|
||||
</mat-checkbox>
|
||||
|
||||
<mat-checkbox [(ngModel)]="setAutoHide">
|
||||
<p *ngIf="!setAutoHide">Auto hide after duration</p>
|
||||
<mat-form-field *ngIf="setAutoHide">
|
||||
<input matInput
|
||||
type="number"
|
||||
class="demo-button-label-input"
|
||||
placeholder="Auto Hide Duration in ms"
|
||||
[(ngModel)]="autoHide">
|
||||
</mat-form-field>
|
||||
</mat-checkbox>
|
||||
<p><mat-checkbox [(ngModel)]="addExtraClass">Add extra class to container</mat-checkbox></p>
|
||||
<button mat-raised-button (click)="open()">Show Snack bar</button>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
0
sineedge_front/src/app/material/snackbar/snackbar.component.scss
Executable file
0
sineedge_front/src/app/material/snackbar/snackbar.component.scss
Executable file
25
sineedge_front/src/app/material/snackbar/snackbar.component.ts
Executable file
25
sineedge_front/src/app/material/snackbar/snackbar.component.ts
Executable file
@ -0,0 +1,25 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { MatSnackBar, MatSnackBarConfig } from '@angular/material';
|
||||
|
||||
@Component({
|
||||
selector: 'app-snackbar',
|
||||
templateUrl: './snackbar.component.html',
|
||||
styleUrls: ['./snackbar.component.scss']
|
||||
})
|
||||
export class SnackbarComponent {
|
||||
message = 'Snack Bar opened.';
|
||||
actionButtonLabel = 'Retry';
|
||||
action = false;
|
||||
setAutoHide = true;
|
||||
autoHide = 10000;
|
||||
addExtraClass = false;
|
||||
|
||||
constructor(public snackBar: MatSnackBar) {}
|
||||
|
||||
open() {
|
||||
const config = new MatSnackBarConfig();
|
||||
config.duration = this.autoHide;
|
||||
config.panelClass = this.addExtraClass ? ['party'] : null;
|
||||
this.snackBar.open(this.message, this.action && this.actionButtonLabel, config);
|
||||
}
|
||||
}
|
||||
138
sineedge_front/src/app/material/tabs/tabs.component.html
Executable file
138
sineedge_front/src/app/material/tabs/tabs.component.html
Executable file
@ -0,0 +1,138 @@
|
||||
<mat-card class="mb-2">
|
||||
<mat-card-title>Tab Group Demo - Dynamic Tabs</mat-card-title>
|
||||
<div class="mat-blue-grey">
|
||||
<mat-card-title>Add New Tab</mat-card-title>
|
||||
<mat-card-content>
|
||||
<mat-checkbox [(ngModel)]="createWithLongContent">
|
||||
Include extra content
|
||||
</mat-checkbox>
|
||||
<mat-checkbox [(ngModel)]="gotoNewTabAfterAdding">
|
||||
Select after adding
|
||||
</mat-checkbox>
|
||||
<div>
|
||||
Position:
|
||||
<mat-form-field>
|
||||
<input matInput type="number" [(ngModel)]="addTabPosition">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<button mat-raised-button color="primary"
|
||||
(click)="addTab(createWithLongContent)">
|
||||
Add Tab
|
||||
</button>
|
||||
</mat-card-content>
|
||||
</div>
|
||||
<mat-card-content>
|
||||
<mat-form-field>
|
||||
<input matInput type="number" placeholder="Selected tab index" [(ngModel)]="activeTabIndex">
|
||||
</mat-form-field>
|
||||
<mat-card>
|
||||
<mat-tab-group mat-dynamic-height [(selectedIndex)]="activeTabIndex">
|
||||
<mat-tab *ngFor="let tab of dynamicTabs" [disabled]="tab.disabled">
|
||||
<ng-template mat-tab-label>{{tab.label}}</ng-template>
|
||||
<mat-card-content>
|
||||
<p class="mb-1">{{tab.content}}</p>
|
||||
<div *ngIf="tab.extraContent" class="mb-1">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas faucibus mollis interdum. Sed posuere consectetur est at lobortis. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
|
||||
</div>
|
||||
<p>
|
||||
<mat-form-field>
|
||||
<input matInput placeholder="Tab Label" [(ngModel)]="tab.label">
|
||||
</mat-form-field>
|
||||
</p>
|
||||
<button mat-raised-button color="primary" [disabled]="dynamicTabs.length == 1" (click)="deleteTab(tab)">Delete Tab</button>
|
||||
</mat-card-content>
|
||||
</mat-tab>
|
||||
</mat-tab-group>
|
||||
</mat-card>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
<mat-card class="mb-2">
|
||||
<mat-card-title>Tab Group Demo - Dynamic Tabs</mat-card-title>
|
||||
<mat-card-content>
|
||||
<mat-card>
|
||||
<mat-tab-group mat-dynamic-height>
|
||||
<mat-tab *ngFor="let tab of tabs" [disabled]="tab.disabled">
|
||||
<ng-template mat-tab-label>{{tab.label}}</ng-template>
|
||||
<mat-card-content>
|
||||
<p class="mb-1">{{tab.content}}</p>
|
||||
<div *ngIf="tab.extraContent" class="mb-1">
|
||||
Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Etiam porta sem malesuada magna mollis euismod. Vestibulum id ligula porta felis euismod semper. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
|
||||
</div>
|
||||
<mat-form-field>
|
||||
<input matInput placeholder="Tab Label" [(ngModel)]="tab.label">
|
||||
</mat-form-field>
|
||||
</mat-card-content>
|
||||
</mat-tab>
|
||||
</mat-tab-group>
|
||||
</mat-card>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
<mat-card class="mb-2">
|
||||
<mat-card-title>Tab Group Demo - Dynamic Tabs</mat-card-title>
|
||||
<mat-card-content>
|
||||
<mat-card>
|
||||
<mat-tab-group style="height: 200px">
|
||||
<mat-tab *ngFor="let tab of tabs" [disabled]="tab.disabled">
|
||||
<ng-template mat-tab-label>{{tab.label}}</ng-template>
|
||||
<mat-card-content>
|
||||
<p class="mb-1">{{tab.content}}</p>
|
||||
<div *ngIf="tab.extraContent" class="mb-1">
|
||||
Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Etiam porta sem malesuada magna mollis euismod. Vestibulum id ligula porta felis euismod semper. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
|
||||
</div>
|
||||
<mat-form-field>
|
||||
<input matInput placeholder="Tab Label" [(ngModel)]="tab.label">
|
||||
</mat-form-field>
|
||||
</mat-card-content>
|
||||
</mat-tab>
|
||||
</mat-tab-group>
|
||||
</mat-card>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
<mat-card class="mb-2">
|
||||
<mat-card-title>Stretched Tabs</mat-card-title>
|
||||
<mat-card-content>
|
||||
<mat-card>
|
||||
<mat-tab-group style="height: 200px" mat-stretch-tabs>
|
||||
<mat-tab *ngFor="let tab of tabs" [disabled]="tab.disabled">
|
||||
<ng-template mat-tab-label>{{tab.label}}</ng-template>
|
||||
<mat-card-content>{{tab.content}}</mat-card-content>
|
||||
</mat-tab>
|
||||
</mat-tab-group>
|
||||
</mat-card>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
<mat-card class="mb-2">
|
||||
<mat-card-title>Async Tabs</mat-card-title>
|
||||
<mat-card-content>
|
||||
<mat-card>
|
||||
<mat-tab-group>
|
||||
<mat-tab *ngFor="let tab of asyncTabs | async; let i = index" [disabled]="i == 1">
|
||||
<ng-template mat-tab-label>{{tab.label}}</ng-template>
|
||||
<mat-card-content>
|
||||
<p class="mb-2">{{tab.content}}</p>
|
||||
<mat-form-field>
|
||||
<input matInput placeholder="Tab Label" [(ngModel)]="tab.label">
|
||||
</mat-form-field>
|
||||
</mat-card-content>
|
||||
</mat-tab>
|
||||
</mat-tab-group>
|
||||
</mat-card>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
<mat-card class="mb-2">
|
||||
<mat-card-title>Tabs with simplified api</mat-card-title>
|
||||
<mat-card-content>
|
||||
<mat-card>
|
||||
<mat-tab-group>
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>Earth</ng-template>
|
||||
<mat-card-content>This tab is about the Earth!</mat-card-content>
|
||||
</mat-tab>
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>Fire</ng-template>
|
||||
<mat-card-content>This tab is about combustion!</mat-card-content>
|
||||
</mat-tab>
|
||||
</mat-tab-group>
|
||||
</mat-card>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
0
sineedge_front/src/app/material/tabs/tabs.component.scss
Executable file
0
sineedge_front/src/app/material/tabs/tabs.component.scss
Executable file
90
sineedge_front/src/app/material/tabs/tabs.component.ts
Executable file
90
sineedge_front/src/app/material/tabs/tabs.component.ts
Executable file
@ -0,0 +1,90 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
import { Observable } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector: 'app-tabs',
|
||||
templateUrl: './tabs.component.html',
|
||||
styleUrls: ['./tabs.component.scss']
|
||||
})
|
||||
export class TabsComponent {
|
||||
|
||||
// Nav bar demo
|
||||
tabLinks = [{
|
||||
label: 'Sun',
|
||||
link: 'sunny-tab'
|
||||
}, {
|
||||
label: 'Rain',
|
||||
link: 'rainy-tab'
|
||||
}, {
|
||||
label: 'Fog',
|
||||
link: 'foggy-tab'
|
||||
}];
|
||||
activeLinkIndex = 0;
|
||||
|
||||
// Standard tabs demo
|
||||
tabs = [{
|
||||
label: 'Tab 1',
|
||||
content: 'This is the body of the first tab'
|
||||
}, {
|
||||
label: 'Tab 2',
|
||||
disabled: true,
|
||||
content: 'This is the body of the second tab'
|
||||
}, {
|
||||
label: 'Tab 3',
|
||||
extraContent: true,
|
||||
content: 'This is the body of the third tab'
|
||||
}, {
|
||||
label: 'Tab 4',
|
||||
content: 'This is the body of the fourth tab'
|
||||
}];
|
||||
|
||||
// Dynamic tabs demo
|
||||
activeTabIndex = 0;
|
||||
addTabPosition = 0;
|
||||
gotoNewTabAfterAdding = false;
|
||||
createWithLongContent = false;
|
||||
dynamicTabs = [{
|
||||
label: 'Tab 1',
|
||||
content: 'This is the body of the first tab'
|
||||
}, {
|
||||
label: 'Tab 2',
|
||||
disabled: true,
|
||||
content: 'This is the body of the second tab'
|
||||
}, {
|
||||
label: 'Tab 3',
|
||||
extraContent: true,
|
||||
content: 'This is the body of the third tab'
|
||||
}, {
|
||||
label: 'Tab 4',
|
||||
content: 'This is the body of the fourth tab'
|
||||
}];
|
||||
|
||||
asyncTabs: Observable <any> ;
|
||||
constructor(private router: Router) {
|
||||
this.asyncTabs = Observable.create((observer: any) => {
|
||||
setTimeout(() => {
|
||||
observer.next(this.tabs);
|
||||
}, 1000);
|
||||
});
|
||||
// Initialize the index by checking if a tab link is contained in the url.
|
||||
// This is not an ideal check and can be removed if routerLink exposes if it is active.
|
||||
// https://github.com/angular/angular/pull/12525
|
||||
this.activeLinkIndex = this.tabLinks.indexOf(this.tabLinks.find(tab => router.url.indexOf(tab.link) !== -1));
|
||||
}
|
||||
|
||||
addTab(includeExtraContent: boolean): void {
|
||||
this.dynamicTabs.splice(this.addTabPosition, 0, {
|
||||
label: 'New Tab ' + (this.dynamicTabs.length + 1),
|
||||
content: 'New tab contents ' + (this.dynamicTabs.length + 1),
|
||||
extraContent: includeExtraContent
|
||||
});
|
||||
if (this.gotoNewTabAfterAdding) {
|
||||
this.activeTabIndex = this.addTabPosition;
|
||||
}
|
||||
}
|
||||
|
||||
deleteTab(tab: any) {
|
||||
this.dynamicTabs.splice(this.dynamicTabs.indexOf(tab), 1);
|
||||
}
|
||||
}
|
||||
28
sineedge_front/src/app/material/toggle/toggle.component.html
Executable file
28
sineedge_front/src/app/material/toggle/toggle.component.html
Executable file
@ -0,0 +1,28 @@
|
||||
<mat-card>
|
||||
<mat-card-title>Slide Toggle</mat-card-title>
|
||||
<mat-card-subtitle>matSlideToggle is a two-state control, which can be also called switch.</mat-card-subtitle>
|
||||
<mat-card-content>
|
||||
<mat-slide-toggle color="primary" [(ngModel)]="firstToggle">
|
||||
Default Slide Toggle
|
||||
</mat-slide-toggle>
|
||||
|
||||
<mat-slide-toggle [(ngModel)]="firstToggle" disabled>
|
||||
Disabled Slide Toggle
|
||||
</mat-slide-toggle>
|
||||
|
||||
<mat-slide-toggle [disabled]="firstToggle">
|
||||
Disable Bound
|
||||
</mat-slide-toggle>
|
||||
|
||||
<p>Example where the slide toggle is required inside of a form.</p>
|
||||
|
||||
<form #form="ngForm" (ngSubmit)="onFormSubmit()">
|
||||
<mat-slide-toggle name="slideToggle" required ngModel>
|
||||
Slide Toggle
|
||||
</mat-slide-toggle>
|
||||
<p>
|
||||
<button mat-raised-button type="submit">Submit Form</button>
|
||||
</p>
|
||||
</form>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
0
sineedge_front/src/app/material/toggle/toggle.component.scss
Executable file
0
sineedge_front/src/app/material/toggle/toggle.component.scss
Executable file
17
sineedge_front/src/app/material/toggle/toggle.component.ts
Executable file
17
sineedge_front/src/app/material/toggle/toggle.component.ts
Executable file
@ -0,0 +1,17 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-toggle',
|
||||
templateUrl: './toggle.component.html',
|
||||
styleUrls: ['./toggle.component.scss']
|
||||
})
|
||||
export class ToggleComponent {
|
||||
|
||||
firstToggle: boolean;
|
||||
|
||||
onFormSubmit() {
|
||||
alert(`You submitted the form.`);
|
||||
}
|
||||
|
||||
constructor() { }
|
||||
}
|
||||
64
sineedge_front/src/app/material/toolbar/toolbar.component.html
Executable file
64
sineedge_front/src/app/material/toolbar/toolbar.component.html
Executable file
@ -0,0 +1,64 @@
|
||||
<mat-card>
|
||||
<mat-card-title>Toolbar</mat-card-title>
|
||||
<mat-card-subtitle>matToolbar is a vertical aligned bar, which can hold the application title or actions.</mat-card-subtitle>
|
||||
<hr>
|
||||
<mat-card-content>
|
||||
<p>The default color toolbar:</p>
|
||||
<mat-toolbar>
|
||||
<button mat-button href="#" mat-icon-button>
|
||||
<mat-icon>menu</mat-icon>
|
||||
</button>
|
||||
<span>Default Toolbar</span>
|
||||
<span fxFlex></span>
|
||||
<button mat-button href="#" mat-icon-button>
|
||||
<mat-icon>search</mat-icon>
|
||||
</button>
|
||||
<button mat-button href="#" mat-icon-button>
|
||||
<mat-icon>more_vert</mat-icon>
|
||||
</button>
|
||||
</mat-toolbar>
|
||||
<p>The primary color toolbar:</p>
|
||||
<mat-toolbar color="primary">
|
||||
<button mat-button href="#" mat-icon-button>
|
||||
<mat-icon>menu</mat-icon>
|
||||
</button>
|
||||
<span>Primary Toolbar</span>
|
||||
<span fxFlex></span>
|
||||
<button mat-button href="#" mat-icon-button>
|
||||
<mat-icon>search</mat-icon>
|
||||
</button>
|
||||
<button mat-button href="#" mat-icon-button>
|
||||
<mat-icon>more_vert</mat-icon>
|
||||
</button>
|
||||
</mat-toolbar>
|
||||
<p>The accent color toolbar:</p>
|
||||
<mat-toolbar color="accent">
|
||||
<button mat-button href="#" mat-icon-button>
|
||||
<mat-icon>menu</mat-icon>
|
||||
</button>
|
||||
<span>Accent Toolbar</span>
|
||||
<span fxFlex></span>
|
||||
<button mat-button href="#" mat-icon-button>
|
||||
<mat-icon>search</mat-icon>
|
||||
</button>
|
||||
<button mat-button href="#" mat-icon-button>
|
||||
<mat-icon>more_vert</mat-icon>
|
||||
</button>
|
||||
</mat-toolbar>
|
||||
<p>An accent toolbar using the second toolbar row:</p>
|
||||
<mat-toolbar color="accent">
|
||||
<mat-toolbar-row>
|
||||
<span>Second Line Toolbar</span>
|
||||
</mat-toolbar-row>
|
||||
</mat-toolbar>
|
||||
<p>A primary toolbar using the third toolbar row:</p>
|
||||
<mat-toolbar color="primary">
|
||||
<mat-toolbar-row></mat-toolbar-row>
|
||||
<mat-toolbar-row>
|
||||
<span fxFlex>Third Line Toolbar</span>
|
||||
<mat-icon>favorite</mat-icon>
|
||||
<mat-icon>delete</mat-icon>
|
||||
</mat-toolbar-row>
|
||||
</mat-toolbar>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
0
sineedge_front/src/app/material/toolbar/toolbar.component.scss
Executable file
0
sineedge_front/src/app/material/toolbar/toolbar.component.scss
Executable file
15
sineedge_front/src/app/material/toolbar/toolbar.component.ts
Executable file
15
sineedge_front/src/app/material/toolbar/toolbar.component.ts
Executable file
@ -0,0 +1,15 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-toolbar',
|
||||
templateUrl: './toolbar.component.html',
|
||||
styleUrls: ['./toolbar.component.scss']
|
||||
})
|
||||
export class ToolbarComponent implements OnInit {
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
}
|
||||
59
sineedge_front/src/app/material/tooltip/tooltip.component.html
Executable file
59
sineedge_front/src/app/material/tooltip/tooltip.component.html
Executable file
@ -0,0 +1,59 @@
|
||||
<mat-card>
|
||||
<mat-card-title>Tooltips</mat-card-title>
|
||||
<mat-card-subtitle>Tooltip allows the user to specify text to be displayed when the mouse hovers over an element.</mat-card-subtitle>
|
||||
<hr>
|
||||
<mat-card-content>
|
||||
<button #tooltip="matTooltip"
|
||||
mat-raised-button
|
||||
color="primary"
|
||||
[matTooltip]="message"
|
||||
[matTooltipPosition]="position"
|
||||
[matTooltipDisabled]="disabled"
|
||||
[matTooltipShowDelay]="showDelay"
|
||||
[matTooltipHideDelay]="hideDelay"
|
||||
[matTooltipClass]="{'red-tooltip': showExtraClass}">
|
||||
Mouse over to see the tooltip
|
||||
</button>
|
||||
|
||||
<mat-radio-group [(ngModel)]="position">
|
||||
<mat-radio-button value="below">Below</mat-radio-button>
|
||||
<mat-radio-button value="above">Above</mat-radio-button>
|
||||
<mat-radio-button value="left">Left</mat-radio-button>
|
||||
<mat-radio-button value="right">Right</mat-radio-button>
|
||||
<mat-radio-button value="before">Before</mat-radio-button>
|
||||
<mat-radio-button value="after">After</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
|
||||
<p>
|
||||
<strong>Message: </strong>
|
||||
<mat-form-field style="width: 100%">
|
||||
<input matInput type="text" [(ngModel)]="message">
|
||||
</mat-form-field>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<strong>Show Delay (ms): </strong>
|
||||
<mat-form-field style="width: 100%">
|
||||
<input matInput type="number" [(ngModel)]="showDelay">
|
||||
</mat-form-field>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<strong>Hide Delay (ms): </strong>
|
||||
<mat-form-field style="width: 100%">
|
||||
<input matInput type="number" [(ngModel)]="hideDelay">
|
||||
</mat-form-field>
|
||||
</p>
|
||||
|
||||
<strong>Mouse over to</strong>
|
||||
<button mat-raised-button color="primary" (mouseenter)="tooltip.show()">
|
||||
Show tooltip
|
||||
</button>
|
||||
<button mat-raised-button color="primary" (mouseenter)="tooltip.hide(0)">
|
||||
Hide tooltip
|
||||
</button>
|
||||
<button mat-raised-button color="primary" (mouseenter)="tooltip.toggle()">
|
||||
Toggle tooltip
|
||||
</button>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
0
sineedge_front/src/app/material/tooltip/tooltip.component.scss
Executable file
0
sineedge_front/src/app/material/tooltip/tooltip.component.scss
Executable file
17
sineedge_front/src/app/material/tooltip/tooltip.component.ts
Executable file
17
sineedge_front/src/app/material/tooltip/tooltip.component.ts
Executable file
@ -0,0 +1,17 @@
|
||||
import { Component } from '@angular/core';
|
||||
import {TooltipPosition} from '@angular/material';
|
||||
|
||||
@Component({
|
||||
selector: 'app-tooltip',
|
||||
templateUrl: './tooltip.component.html',
|
||||
styleUrls: ['./tooltip.component.scss']
|
||||
})
|
||||
export class TooltipComponent {
|
||||
position: TooltipPosition = 'below';
|
||||
message: string = 'Here is the tooltip';
|
||||
tooltips: string[] = [];
|
||||
disabled = false;
|
||||
showDelay = 0;
|
||||
hideDelay = 1000;
|
||||
showExtraClass = false;
|
||||
}
|
||||
@ -0,0 +1,23 @@
|
||||
<div class="relative">
|
||||
<div class="form-bg">
|
||||
<div fxLayout="row" fxLayoutAlign="center start" class="pt-2">
|
||||
<div fxLayout="column" fxFlex.xl="40" fxFlex.lg="40" fxFlex.md="50" fxFlex.sm="80" fxFlex.xs="90">
|
||||
<mat-card class="login-session">
|
||||
<div class="text-center">
|
||||
<h2 class="base-border mat-text-warn mb-1">Forgot Password?</h2>
|
||||
<i class="fa fa-lock fa-4x"></i>
|
||||
<p>You can reset your password here.</p>
|
||||
<form #form="ngForm">
|
||||
<div fxLayout="column" fxLayoutAlign="start stretch">
|
||||
<mat-form-field style="width: 100%">
|
||||
<input matInput placeholder="Email" type="text" name="name" required>
|
||||
</mat-form-field>
|
||||
<button class="mat-blue" mat-raised-button>Submit</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,3 @@
|
||||
.silk-forget-pass{
|
||||
background-color:#fff;
|
||||
}
|
||||
26
sineedge_front/src/app/session/forgot-password/forgot-password.component.ts
Executable file
26
sineedge_front/src/app/session/forgot-password/forgot-password.component.ts
Executable file
@ -0,0 +1,26 @@
|
||||
import { Component, OnInit,ViewEncapsulation } from '@angular/core';
|
||||
import {Router} from "@angular/router";
|
||||
|
||||
@Component({
|
||||
selector: 'ms-forgot-password',
|
||||
templateUrl:'./forgot-password-component.html',
|
||||
styleUrls: ['./forgot-password-component.scss'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
})
|
||||
export class ForgotPasswordComponent {
|
||||
|
||||
email: string;
|
||||
password: string;
|
||||
|
||||
constructor(
|
||||
private router: Router
|
||||
) { }
|
||||
|
||||
send() {
|
||||
this.router.navigate(['/']);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
25
sineedge_front/src/app/session/lockscreen/lockscreen-component.html
Executable file
25
sineedge_front/src/app/session/lockscreen/lockscreen-component.html
Executable file
@ -0,0 +1,25 @@
|
||||
<div class="relative">
|
||||
<div class="form-bg">
|
||||
<div fxLayout="row" fxLayoutAlign="center start" class="pt-2">
|
||||
<div fxLayout="column" fxFlex.xl="40" fxFlex.lg="40" fxFlex.md="50" fxFlex.sm="80" fxFlex.xs="90">
|
||||
<mat-card class="login-session">
|
||||
<div class="text-center">
|
||||
<h2 class="base-border mat-text-warn mb-1">Session Expired</h2>
|
||||
<img src="assets/images/test4.jpg" class="rad-full forgot-img" alt="" width="100" height="100">
|
||||
<h4><strong>Welcome back John</strong></h4>
|
||||
<p>Enter your password to continue</p>
|
||||
<form #form="ngForm">
|
||||
<div fxLayout="column" fxLayoutAlign="start stretch">
|
||||
<mat-form-field style="width: 100%" class="mb-1">
|
||||
<input matInput placeholder="Password" type="password" name="password" required>
|
||||
</mat-form-field>
|
||||
<button class="mat-blue" mat-raised-button>Submit</button>
|
||||
<p class="mat-text-warn mb-0"><a href="#">Forgot password?</a></p>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
5
sineedge_front/src/app/session/lockscreen/lockscreen-component.scss
Executable file
5
sineedge_front/src/app/session/lockscreen/lockscreen-component.scss
Executable file
@ -0,0 +1,5 @@
|
||||
.silk-user-section{
|
||||
.lockscreen-form{
|
||||
background-color:#fff;
|
||||
}
|
||||
}
|
||||
24
sineedge_front/src/app/session/lockscreen/lockscreen.component.ts
Executable file
24
sineedge_front/src/app/session/lockscreen/lockscreen.component.ts
Executable file
@ -0,0 +1,24 @@
|
||||
import { Component, OnInit,ViewEncapsulation } from '@angular/core';
|
||||
import {Router} from "@angular/router";
|
||||
|
||||
@Component({
|
||||
selector: 'ms-lockscreen',
|
||||
templateUrl:'./lockscreen-component.html',
|
||||
styleUrls: ['./lockscreen-component.scss'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
})
|
||||
export class LockScreenComponent {
|
||||
|
||||
username: string;
|
||||
|
||||
constructor(
|
||||
private router: Router
|
||||
) { }
|
||||
onSubmit() {
|
||||
this.router.navigate ( ['/'] );
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
30
sineedge_front/src/app/session/login/login-component.html
Executable file
30
sineedge_front/src/app/session/login/login-component.html
Executable file
@ -0,0 +1,30 @@
|
||||
<div class="relative">
|
||||
<div class="form-bg">
|
||||
<div fxLayout="row" fxLayoutAlign="center start" class="pt-2">
|
||||
<div fxLayout="column" fxFlex.xl="40" fxFlex.lg="40" fxFlex.md="50" fxFlex.sm="80" fxFlex.xs="90">
|
||||
<mat-card class="login-session">
|
||||
<div>
|
||||
<h2 class="base-border">Login Form</h2>
|
||||
<p>Enter Your Login Details</p>
|
||||
<form #form="ngForm" (ngSubmit)="login()">
|
||||
<div fxLayout="column" fxLayoutAlign="start stretch">
|
||||
<mat-form-field style="width: 100%">
|
||||
<input matInput placeholder="E-Mail/Mobile Num" type="text" name="email" required [(ngModel)]="email">
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field style="width: 100%" class="mb-1">
|
||||
<input matInput placeholder="Password" minlength= "8" type="password" name="password" required [(ngModel)]="password">
|
||||
</mat-form-field>
|
||||
<button class="mat-green" mat-raised-button>SIGN IN</button><br/>
|
||||
<div *ngIf="email">
|
||||
<a class="mat-text-warn mb-0" (click)="forgotpassword();">Forgot password?</a></div>
|
||||
<!-- <p class="mb-0">Don't have an account? <a [routerLink]="['/register']" class="mat-text-primary">Register Here</a></p> -->
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user