├── website-creator
    ├── web-site-manifest.json
    ├── package.json
    ├── index.js
    ├── website-helper.js
    ├── css
    │   └── style.css
    ├── queue.html
    └── js
    │   └── queue.js
├── CODE_OF_CONDUCT.md
├── README.md
├── LICENSE
├── CONTRIBUTING.md
└── template.yaml


/website-creator/web-site-manifest.json:
--------------------------------------------------------------------------------
1 | {
2 |     "files": [
3 |         "./queue.html",
4 |         "./css/style.css",
5 |         "./js/aws-sdk.min-queue.js",
6 | 		"./js/queue.js"
7 |     ]
8 | }


--------------------------------------------------------------------------------
/website-creator/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "website-creator",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "author": "",
10 |   "license": "ISC"
11 | }
12 | 


--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
1 | ## Code of Conduct
2 | This project has adopted the [Amazon Open Source Code of Conduct](https://aws.github.io/code-of-conduct).
3 | For more information see the [Code of Conduct FAQ](https://aws.github.io/code-of-conduct-faq) or contact
4 | opensource-codeofconduct@amazon.com with any additional questions or comments.
5 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | # Amazon Connect queue API's demo  
 3 | 
 4 | This demo shows how you can leverage [Amazon Connect](https://aws.amazon.com/connect/) api's to manage queues under your instance.  
 5 | 
 6 | ## Usage
 7 | Use `sam` to build, invoke and deploy the function.
 8 | 
 9 | ##### SAM Build:
10 | Ensure you are in the root folder
11 | 
12 | `sam build --use-container`
13 | 
14 | ##### SAM Deploy:
15 | `sam deploy template.yaml --s3-bucket REPLACE_ME --stack-name REPLACE_ME --parameter-overrides ParameterKey=CFS3BucketForWebSite,ParameterValue=REPLACE_ME --capabilities CAPABILITY_IAM`
16 |       
17 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 2 | 
 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of
 4 | this software and associated documentation files (the "Software"), to deal in
 5 | the Software without restriction, including without limitation the rights to
 6 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
 7 | the Software, and to permit persons to whom the Software is furnished to do so.
 8 | 
 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
10 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
11 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
12 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
13 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
14 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
15 | 
16 | 


--------------------------------------------------------------------------------
/website-creator/index.js:
--------------------------------------------------------------------------------
 1 | const AWS = require('aws-sdk');
 2 | const https = require('https');
 3 | const url = require('url');
 4 | const WebsiteHelper = require('./website-helper.js');
 5 | 
 6 | exports.handler = (event, context, callback) => {
 7 | console.log('Received event:', JSON.stringify(event, null, 2));
 8 | 
 9 |     let responseStatus = 'FAILED';
10 |     let responseData = {};
11 | 
12 |     if (event.RequestType === 'Delete') {
13 |             sendResponse(event, callback, context.logStreamName, 'SUCCESS');
14 |     }
15 | 
16 |     if (event.RequestType === 'Create') {
17 |         if (event.ResourceProperties.customAction === 'configureWebsite') {
18 |             console.log('Starting to copy the files');
19 |             let _websiteHelper = new WebsiteHelper();
20 | 
21 |             _websiteHelper.copyWebSiteAssets(event.ResourceProperties,
22 |                 function(err, data) {
23 |                     if (err) {
24 |                         responseData = {
25 |                             Error: 'Copy of website assets failed'
26 |                         };
27 |                         console.log([responseData.Error, ':\n', err].join(''));
28 |                     } else {
29 |                         responseStatus = 'SUCCESS';
30 |                         responseData = {};
31 |                     }
32 | 
33 |                     sendResponse(event, callback, context.logStreamName, responseStatus, responseData);
34 |                 });
35 | 
36 |         }
37 |         //sendResponse(event, callback, context.logStreamName, 'SUCCESS');
38 |         }
39 |     
40 |     
41 | };
42 | 
43 | /**
44 |  * Sends a response to the pre-signed S3 URL
45 |  */
46 | 
47 | let sendResponse = function(event, callback, logStreamName, responseStatus, responseData) {
48 |     const responseBody = JSON.stringify({
49 |         Status: responseStatus,
50 |         Reason: `See the details in CloudWatch Log Stream: ${logStreamName}`,
51 |         PhysicalResourceId: logStreamName,
52 |         StackId: event.StackId,
53 |         RequestId: event.RequestId,
54 |         LogicalResourceId: event.LogicalResourceId,
55 |         Data: responseData,
56 |     });
57 | 
58 |     console.log('RESPONSE BODY:\n', responseBody);
59 |     const parsedUrl = url.parse(event.ResponseURL);
60 |     const options = {
61 |         hostname: parsedUrl.hostname,
62 |         port: 443,
63 |         path: parsedUrl.path,
64 |         method: 'PUT',
65 |         headers: {
66 |             'Content-Type': '',
67 |             'Content-Length': responseBody.length,
68 |         }
69 |     };
70 | 
71 |     const req = https.request(options, (res) => {
72 |         console.log('STATUS:', res.statusCode);
73 |         console.log('HEADERS:', JSON.stringify(res.headers));
74 |         callback(null, 'Successfully sent stack response!');
75 |     });
76 | 
77 |     req.on('error', (err) => {
78 |         console.log('sendResponse Error:\n', err);
79 |         callback(err);
80 |     });
81 | 
82 |     req.write(responseBody);
83 |     req.end();
84 | };


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | # Contributing Guidelines
 2 | 
 3 | Thank you for your interest in contributing to our project. Whether it's a bug report, new feature, correction, or additional
 4 | documentation, we greatly value feedback and contributions from our community.
 5 | 
 6 | Please read through this document before submitting any issues or pull requests to ensure we have all the necessary
 7 | information to effectively respond to your bug report or contribution.
 8 | 
 9 | 
10 | ## Reporting Bugs/Feature Requests
11 | 
12 | We welcome you to use the GitHub issue tracker to report bugs or suggest features.
13 | 
14 | When filing an issue, please check existing open, or recently closed, issues to make sure somebody else hasn't already
15 | reported the issue. Please try to include as much information as you can. Details like these are incredibly useful:
16 | 
17 | * A reproducible test case or series of steps
18 | * The version of our code being used
19 | * Any modifications you've made relevant to the bug
20 | * Anything unusual about your environment or deployment
21 | 
22 | 
23 | ## Contributing via Pull Requests
24 | Contributions via pull requests are much appreciated. Before sending us a pull request, please ensure that:
25 | 
26 | 1. You are working against the latest source on the *main* branch.
27 | 2. You check existing open, and recently merged, pull requests to make sure someone else hasn't addressed the problem already.
28 | 3. You open an issue to discuss any significant work - we would hate for your time to be wasted.
29 | 
30 | To send us a pull request, please:
31 | 
32 | 1. Fork the repository.
33 | 2. Modify the source; please focus on the specific change you are contributing. If you also reformat all the code, it will be hard for us to focus on your change.
34 | 3. Ensure local tests pass.
35 | 4. Commit to your fork using clear commit messages.
36 | 5. Send us a pull request, answering any default questions in the pull request interface.
37 | 6. Pay attention to any automated CI failures reported in the pull request, and stay involved in the conversation.
38 | 
39 | GitHub provides additional document on [forking a repository](https://help.github.com/articles/fork-a-repo/) and
40 | [creating a pull request](https://help.github.com/articles/creating-a-pull-request/).
41 | 
42 | 
43 | ## Finding contributions to work on
44 | Looking at the existing issues is a great way to find something to contribute on. As our projects, by default, use the default GitHub issue labels (enhancement/bug/duplicate/help wanted/invalid/question/wontfix), looking at any 'help wanted' issues is a great place to start.
45 | 
46 | 
47 | ## Code of Conduct
48 | This project has adopted the [Amazon Open Source Code of Conduct](https://aws.github.io/code-of-conduct).
49 | For more information see the [Code of Conduct FAQ](https://aws.github.io/code-of-conduct-faq) or contact
50 | opensource-codeofconduct@amazon.com with any additional questions or comments.
51 | 
52 | 
53 | ## Security issue notifications
54 | If you discover a potential security issue in this project we ask that you notify AWS/Amazon Security via our [vulnerability reporting page](http://aws.amazon.com/security/vulnerability-reporting/). Please do **not** create a public github issue.
55 | 
56 | 
57 | ## Licensing
58 | 
59 | See the [LICENSE](LICENSE) file for our project's licensing. We will ask you to confirm the licensing of your contribution.
60 | 


--------------------------------------------------------------------------------
/website-creator/website-helper.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | let AWS = require('aws-sdk');
  4 | let s3 = new AWS.S3();
  5 | const fs = require('fs');
  6 | const _downloadLocation = './web-site-manifest.json';
  7 | 
  8 | /**
  9 |  * Helper function to interact with s3 hosted website for cfn custom resource.
 10 |  *
 11 |  * @class websiteHelper
 12 |  */
 13 | let websiteHelper = (function() {
 14 | 
 15 |     /**
 16 |      * @class websiteHelper
 17 |      * @constructor
 18 |      */
 19 |     let websiteHelper = function() {};
 20 | 
 21 |     websiteHelper.prototype.copyWebSiteAssets = function(resourceProperties, cb) {
 22 | 		var destS3Bucket = resourceProperties.destS3Bucket;
 23 | 		var destS3KeyPrefix = resourceProperties.destS3KeyPrefix;
 24 | 		var region = resourceProperties.Region;
 25 | 
 26 |         console.log("Copying UI web site");
 27 |         console.log(['destination bucket:', destS3Bucket].join(' '));
 28 |         console.log(['destination s3 key prefix:', destS3KeyPrefix].join(' '));
 29 |         console.log(['region:', region].join(' '));
 30 | 
 31 |         fs.readFile(_downloadLocation, 'utf8', function(err, data) {
 32 |             if (err) {
 33 |                 console.log(err);
 34 |                 return cb(err, null);
 35 |             }
 36 | 
 37 |             console.log(data);
 38 |             let _manifest = validateJSON(data);
 39 | 
 40 |             if (!_manifest) {
 41 |                 return cb('Unable to validate downloaded manifest file JSON', null);
 42 |             } else {
 43 |                 uploadToS3(_manifest.files, 0, destS3Bucket, destS3KeyPrefix,
 44 |                     function(err, result) {
 45 |                         if (err) {
 46 |                             return cb(err, null);
 47 |                         }
 48 |                         console.log(result);
 49 |                         return cb(null, result);
 50 |                     });
 51 |             }
 52 | 
 53 |         });
 54 |     };
 55 |     
 56 | 
 57 |     /**
 58 |      * Helper function to validate the JSON structure of contents of an import manifest file.
 59 |      * @param {string} body -  JSON object stringify-ed.
 60 |      * @returns {JSON} - The JSON parsed string or null if string parsing failed
 61 |      */
 62 |     let validateJSON = function(body) {
 63 |         try {
 64 |             let data = JSON.parse(body);
 65 |             console.log(data);
 66 |             return data;
 67 |         } catch (e) {
 68 |             // failed to parse
 69 |             console.log('Manifest file contains invalid JSON.');
 70 |             return null;
 71 |         }
 72 |     };
 73 |     
 74 |     async function uploadToS3(filelist, index, destS3Bucket, destS3KeyPrefix, cb) {
 75 |       if (filelist.length > index) {
 76 | 
 77 |           const response = fs.readFileSync(filelist[index], 'utf8');
 78 |           var fileDetails = filelist[index]
 79 |           fileDetails = fileDetails.substring(2, fileDetails.length);
 80 | 
 81 |           let params2 = {
 82 |               Bucket: destS3Bucket,
 83 |               Key: destS3KeyPrefix + '/' + fileDetails,
 84 |               Body: response
 85 |           };
 86 |             if (filelist[index].endsWith('.htm') || filelist[index].endsWith('.html')) {
 87 |                 params2.ContentType = "text/html";
 88 |             } else if (filelist[index].endsWith('.css')) {
 89 |                 params2.ContentType = "text/css";
 90 |             } else if (filelist[index].endsWith('.js')) {
 91 |                 params2.ContentType = "application/javascript";
 92 |             } else if (filelist[index].endsWith('.png')) {
 93 |                 params2.ContentType = "image/png";
 94 |             } else if (filelist[index].endsWith('.jpg') || filelist[index].endsWith('.jpeg')) {
 95 |                 params2.ContentType = "image/jpeg";
 96 |               } else if (filelist[index].endsWith('.pdf')) {
 97 |                   params2.ContentType = "application/pdf";
 98 |             } else if (filelist[index].endsWith('.gif')) {
 99 |                 params2.ContentType = "image/gif";
100 |             } else if (filelist[index].endsWith('.svg')) {
101 |                 params2.ContentType = "image/svg+xml";
102 |             };
103 | 
104 |           s3.putObject(params2, function(err, data) {
105 |                 if (err) {
106 |                     console.log(err);
107 |                     return cb(['error copying ', [filelist[index]].join('/'), '\n', err]
108 |                         .join(
109 |                             ''),
110 |                         null);
111 |                 }
112 | 
113 |                 console.log([
114 |                     [filelist[index]].join('/'), 'uploaded successfully'
115 |                 ].join(' '));
116 |                 let _next = index + 1;
117 |                 uploadToS3(filelist, _next, destS3Bucket, destS3KeyPrefix, function(err, resp) {
118 |                     if (err) {
119 |                         return cb(err, null);
120 |                     }
121 | 
122 |                     cb(null, resp);
123 |                 });
124 |             });
125 |         } else {
126 |             cb(null, [index, 'files copied'].join(' '));
127 |         }
128 |     }
129 |     return websiteHelper;
130 | 
131 | })();
132 | 
133 | module.exports = websiteHelper;


--------------------------------------------------------------------------------
/template.yaml:
--------------------------------------------------------------------------------
  1 | AWSTemplateFormatVersion: 2010-09-09
  2 | Description: >
  3 |   Amazon Connect Queue APIs demo
  4 | 
  5 | Mappings: 
  6 |   FunctionMap:
  7 |       Configuration:
  8 |           S3Bucket: "amazon-connect-blogs2"
  9 |           S3Key: "2021/queueapis/"
 10 |  
 11 | Parameters:
 12 |   CFS3BucketForWebSite:
 13 |     Default:  "queueapi-website"
 14 |     Type: String
 15 |     AllowedPattern: '(?=^.{3,63}$)(?!^(\d+\.)+\d+$)(^(([a-z0-9]|[a-z0-9][a-z0-9\-]*[a-z0-9])\.)*([a-z0-9]|[a-z0-9][a-z0-9\-]*[a-z0-9])$)'
 16 |     ConstraintDescription: 'Invalid S3 Bucket name'
 17 |     Description: Enter the (globally unique) name you would like to use for the Amazon S3 bucket where we will store the website assets and the sample queue. This template will fail to deploy if the bucket name you chose is currently in use.
 18 | 
 19 |             
 20 | Metadata:
 21 |   'AWS::CloudFormation::Interface':
 22 |     ParameterGroups:
 23 |       - Label:
 24 |           default: Amazon S3 Configuration 
 25 |         Parameters:
 26 |           - CFS3BucketForWebSite
 27 | 
 28 | Outputs:
 29 |   CloudfrontEndpoint:
 30 |       Description: Endpoint for Cloudfront distribution
 31 |       Value: !Join
 32 |         - ''
 33 |         - - 'https://'
 34 |           - !GetAtt [CFCloudFrontDistribution, DomainName]
 35 |           - '/queue.html'
 36 |       
 37 | Resources:
 38 |            
 39 |     createWebSiteS3Bucket:
 40 |         Type: 'AWS::S3::Bucket'
 41 |         Properties:
 42 |             BucketName: !Ref CFS3BucketForWebSite
 43 |             VersioningConfiguration:
 44 |               Status : Enabled
 45 |             BucketEncryption:
 46 |               ServerSideEncryptionConfiguration:
 47 |               - ServerSideEncryptionByDefault:
 48 |                   SSEAlgorithm: AES256
 49 |             PublicAccessBlockConfiguration:
 50 |                 BlockPublicAcls: True
 51 |                 BlockPublicPolicy: True
 52 |                 IgnorePublicAcls: True
 53 |                 RestrictPublicBuckets: True
 54 |             WebsiteConfiguration:
 55 |                 IndexDocument: queue.html
 56 |                 ErrorDocument: error.html
 57 |  
 58 |  
 59 |     CFS3BucketPolicy:
 60 |         Type: AWS::S3::BucketPolicy
 61 |         DependsOn:
 62 |             - CFCloudFrontDistributionAccessIdentity
 63 |         Properties:
 64 |             Bucket: !Ref createWebSiteS3Bucket
 65 |             PolicyDocument:
 66 |                 Statement:
 67 |                     -
 68 |                         Action:
 69 |                             - "s3:GetObject"
 70 |                         Effect: "Allow"
 71 |                         Principal:
 72 |                             CanonicalUser:
 73 |                                 Fn::GetAtt: [ CFCloudFrontDistributionAccessIdentity , S3CanonicalUserId ]
 74 |                         Resource:
 75 |                             !Sub ${createWebSiteS3Bucket.Arn}/queuesite/*
 76 | 
 77 |     CFCloudFrontDistributionAccessIdentity:
 78 |         Type: AWS::CloudFront::CloudFrontOriginAccessIdentity
 79 |         Properties:
 80 |           CloudFrontOriginAccessIdentityConfig:
 81 |             Comment: 'CloudFront endpoint for Queue s3'
 82 |             
 83 |     CFCloudFrontDistribution:
 84 |         Type: AWS::CloudFront::Distribution
 85 |         Properties:
 86 |           DistributionConfig:
 87 |             Origins:
 88 |             - DomainName:
 89 |                 !Join
 90 |                     - ''
 91 |                     - - !Ref CFS3BucketForWebSite
 92 |                       - .s3.amazonaws.com
 93 |               Id: !Ref CFS3BucketForWebSite
 94 |               OriginPath: '/queuesite'
 95 |               S3OriginConfig:
 96 |                 OriginAccessIdentity:
 97 |                     !Join
 98 |                         - ''
 99 |                         - - 'origin-access-identity/cloudfront/'
100 |                           - !Ref CFCloudFrontDistributionAccessIdentity
101 |             Enabled: 'true'
102 |             Logging:
103 |                 Bucket: !GetAtt createWebSiteS3Bucket.DomainName
104 |                 Prefix: 'logs/'
105 |                 IncludeCookies: 'true'
106 |             Comment: CloudFront for Queue apis
107 |             DefaultRootObject: queue.html
108 |             DefaultCacheBehavior:
109 |                 AllowedMethods:
110 |                     - DELETE
111 |                     - GET
112 |                     - HEAD
113 |                     - OPTIONS
114 |                     - PATCH
115 |                     - POST
116 |                     - PUT
117 |                 TargetOriginId: !Ref CFS3BucketForWebSite
118 |                 ForwardedValues:
119 |                     QueryString: true
120 |                     Cookies:
121 |                         Forward: all
122 |                 ViewerProtocolPolicy: redirect-to-https
123 |             Restrictions:
124 |                 GeoRestriction:
125 |                     RestrictionType: whitelist
126 |                     Locations:
127 |                         - US
128 | 
129 |     CFWebsiteCreatorRole:
130 |         Type: "AWS::IAM::Role"
131 |         Properties:
132 |           AssumeRolePolicyDocument:
133 |             Version: "2012-10-17"
134 |             Statement:
135 |               -
136 |                 Effect: "Allow"
137 |                 Principal:
138 |                   Service:
139 |                     - "lambda.amazonaws.com"
140 |                 Action:
141 |                   - "sts:AssumeRole"
142 |           Path: "/"
143 |           Policies:
144 |             -
145 |               PolicyName: !Sub ${AWS::StackName}-queue-creator-policy
146 |               PolicyDocument:
147 |                 Version: "2012-10-17"
148 |                 Statement:
149 |                   -
150 |                     Effect: "Allow"
151 |                     Action:
152 |                       - 'logs:CreateLogGroup'
153 |                       - 'logs:CreateLogStream'
154 |                       - 'logs:PutLogEvents'
155 |                     Resource:
156 |                       - !Sub "arn:${AWS::Partition}:logs:${AWS::Region}:${AWS::AccountId}:log-group:/aws/lambda/*"
157 |                   -
158 |                     Effect: "Allow"
159 |                     Action:
160 |                       - "s3:PutObject"
161 |                       - "s3:GetObject"
162 |                       - "s3:PutObjectAcl"
163 |                     Resource:
164 |                       -  !Join
165 |                           - ''
166 |                           - - 'arn:'
167 |                             - !Ref 'AWS::Partition'
168 |                             - ':s3:::'
169 |                             - !Ref CFS3BucketForWebSite
170 |                             - '/*'
171 |                   -
172 |                     Effect: "Allow"
173 |                     Action:
174 |                       - "s3:PutBucketPublicAccessBlock"
175 |                     Resource:
176 |                       -  !Join
177 |                           - ''
178 |                           - - 'arn:'
179 |                             - !Ref 'AWS::Partition'
180 |                             - ':s3:::'
181 |                             - !Ref CFS3BucketForWebSite
182 |                   -
183 |                     Effect: "Allow"
184 |                     Action:
185 |                       - "s3:GetObject"
186 |                     Resource:
187 |                       -  !Join
188 |                           - ''
189 |                           - - 'arn:'
190 |                             - !Ref 'AWS::Partition'
191 |                             - ':s3:::'
192 |                             - 'amazon-connect-blogs2'
193 |                             - '/*'
194 | 
195 |     webSiteCreator:
196 |       Type: "AWS::Lambda::Function"
197 |       Properties:
198 |         Description:  >
199 |             AWS Lambda Function that will create the website and upload it to the S3 bucket
200 |         Handler: "index.handler"
201 |         Role: !GetAtt CFWebsiteCreatorRole.Arn
202 |         Runtime: "nodejs12.x"
203 |         MemorySize: 256
204 |         Timeout: 120
205 |         Code: ./website-creator/                                            
206 |         
207 |     invokeWebSiteCreator:
208 |         Type: Custom::CreateWebSite
209 |         DependsOn: createWebSiteS3Bucket
210 |         Properties:  
211 |             ServiceToken:  !GetAtt webSiteCreator.Arn
212 |             customAction: configureWebsite
213 |             Region: !Ref AWS::Region
214 |             destS3Bucket: !Ref CFS3BucketForWebSite
215 |             destS3KeyPrefix: queuesite


--------------------------------------------------------------------------------
/website-creator/css/style.css:
--------------------------------------------------------------------------------
  1 | html,
  2 | body {
  3 | 	border: 0;
  4 | 	margin: 0;
  5 | 	padding: 0;
  6 | }
  7 | 
  8 | body {
  9 | 	font: 100% "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif;
 10 | 	min-width: 100%;
 11 | 	min-height: 101%;
 12 | 	color: #666;
 13 | 	background: #eee;
 14 | }
 15 | 
 16 | p,
 17 | label,
 18 | legend {
 19 | 	font: 1em "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif;
 20 | }
 21 | 
 22 | h1 {
 23 | 	margin: 10px 0 10px;
 24 | 	font-size: 20px;
 25 | 	color: #333333;
 26 | }
 27 | 
 28 | hr {
 29 | 	color: inherit;
 30 | 	height: 0;
 31 | 	margin: 6px 0 6px 0;
 32 | 	padding: 0;
 33 | 	border: 1px solid #d9d9d9;
 34 | 	border-style: none none solid;
 35 | }
 36 | 
 37 | section {
 38 | 	display: block;
 39 | 	width: 800px;
 40 | 	margin: 10px auto;
 41 | 	padding: 35px;
 42 | 	border: 1px solid #cbcbcb;
 43 | 	background-color: #FFF;
 44 | 	-webkit-border-radius: 5px;
 45 | 	-moz-border-radius: 5px;
 46 | 	border-radius: 5px;
 47 | 	box-shadow: 0 2px 5px rgba(50, 50, 50, 0.1);
 48 | 	-webkit-box-shadow: 0 2px 5px rgba(50, 50, 50, 0.1);
 49 | 	-moz-box-shadow: 0 2px 5px rgba(50, 50, 50, 0.1);
 50 | }
 51 | 
 52 | 
 53 | /* Special CSS for Call Controls Section */
 54 | 
 55 | fieldset.salesOrder {
 56 | 	padding: 7px;
 57 | }
 58 | 
 59 | fieldset.callControls {
 60 | 	padding: 3px;
 61 | 	margin: 4px;
 62 | 	-webkit-transition: margin-left 1s ease-in-out;
 63 | 	z-index: 1;
 64 | }
 65 | 
 66 | .callControls {
 67 | 	margin: 2px 2px;
 68 | 	display: inline-block;
 69 | 	border: 1px solid #bfbfbf;
 70 | 	border-radius: 5px 5px 5px 5px;
 71 | 	-webkit-border-radius: 5px 5px 5px 5px;
 72 | 	-moz-border-radius: 5px 5px 5px 5px;
 73 | 	font: 1em "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif;
 74 | 	width: auto;
 75 | 	height: auto;
 76 | 	font-size: 16px;
 77 | 	box-shadow: inset 0 1px 0 0 #fff, inset 0 -1px 0 0 #d9d9d9, inset 0 0 0 1px #f2f2f2, 0 2px 4px 0 #f2f2f2;
 78 | 	-moz-box-shadow: inset 0 1px 0 0 #fff, inset 0 -1px 0 0 #d9d9d9, inset 0 0 0 1px #f2f2f2, 0 2px 4px 0 #f2f2f2;
 79 | 	-webkit-box-shadow: inset 0 1px 0 0 #fff, inset 0 -1px 0 0 #d9d9d9, inset 0 0 0 1px #f2f2f2, 0 2px 4px 0 #f2f2f2;
 80 | 	text-shadow: 0 1px 0 #fff;
 81 | 	background-image: linear-gradient(to top, #f2f2f2, #f2f2f2);
 82 | 	background-color: #f2f2f2;
 83 | }
 84 | 
 85 | .callControls:hover,
 86 | .callControls:active {
 87 | 	border: 1px solid #8c8c8c;
 88 | 	color: #8c8c8c;
 89 | 	box-shadow: inset 0 1px 0 0 #ffffff, inset 0 -1px 0 0 #d9d9d9, inset 0 0 0 1px #f2f2f2;
 90 | 	-moz-box-shadow: inset 0 1px 0 0 #ffffff, inset 0 -1px 0 0 #d9d9d9, inset 0 0 0 1px #f2f2f2;
 91 | 	-webkit-box-shadow: inset 0 1px 0 0 #ffffff, inset 0 -1px 0 0 #d9d9d9, inset 0 0 0 1px #f2f2f2;
 92 | 	background-color: #f2f2f2;
 93 | }
 94 | 
 95 | 
 96 | /* Form style */
 97 | 
 98 | mark.validate {
 99 | 	display: inline-block;
100 | 	margin: 12px 0 0 10px;
101 | 	width: 16px;
102 | 	height: 16px;
103 | 	background: transparent none;
104 | }
105 | 
106 | mark.valid {
107 | 	background: url(images/success.gif) no-repeat top left;
108 | }
109 | 
110 | mark.error {
111 | 	background: url(images/error.gif) no-repeat top left;
112 | }
113 | 
114 | form label,
115 | section label {
116 | 	display: inline-block;
117 | 	float: left;
118 | 	height: 1em;
119 | 	line-height: 1em;
120 | 	padding: 6px 0 0;
121 | 	width: 135px;
122 | 	font-size: 1em;
123 | 	margin: 5px 0;
124 | 	clear: both;
125 | }
126 | 
127 | form label small,
128 | section label small {
129 | 	font-size: 0.75em;
130 | 	color: #ccc;
131 | }
132 | 
133 | form label.verify {
134 | 	padding: 0;
135 | 	margin: 2px 10px 2px 0;
136 | 	width: 145px;
137 | 	text-align: right;
138 | }
139 | 
140 | form label.verify img {
141 | 	padding: 1px;
142 | 	border: 1px solid #cccccc;
143 | 	-webkit-border-radius: 3px;
144 | 	-moz-border-radius: 3px;
145 | 	border-radius: 3px;
146 | }
147 | 
148 | form button {
149 | 	width: 120px;
150 | 	padding: 4px;
151 | 	color: #666;
152 | 	background: #f5f5f5;
153 | 	border: 1px solid #ccc;
154 | 	margin: 5px 0;
155 | 	font: 1em "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif;
156 | 	-webkit-border-radius: 5px;
157 | 	-moz-border-radius: 5px;
158 | 	border-radius: 5px;
159 | 	vertical-align: top;
160 | 	transition: all 0.25s ease-in-out;
161 | 	-webkit-transition: all 0.25s ease-in-out;
162 | 	-moz-transition: all 0.25s ease-in-out;
163 | 	box-shadow: 0 0 5px rgba(81, 203, 238, 0);
164 | 	-webkit-box-shadow: 0 0 5px rgba(81, 203, 238, 0);
165 | 	-moz-box-shadow: 0 0 5px rgba(81, 203, 238, 0);
166 | }
167 | 
168 | form input,
169 | form textarea,
170 | form select,
171 | section select,
172 | section input,
173 | section textarea {
174 | 	width: 220px;
175 | 	padding: 5px;
176 | 	color: #666;
177 | 	background: #f5f5f5;
178 | 	border: 1px solid #ccc;
179 | 	margin: 5px 0;
180 | 	font: 1em "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif;
181 | 	-webkit-border-radius: 5px;
182 | 	-moz-border-radius: 5px;
183 | 	border-radius: 5px;
184 | 	vertical-align: top;
185 | 	transition: all 0.25s ease-in-out;
186 | 	-webkit-transition: all 0.25s ease-in-out;
187 | 	-moz-transition: all 0.25s ease-in-out;
188 | 	box-shadow: 0 0 5px rgba(81, 203, 238, 0);
189 | 	-webkit-box-shadow: 0 0 5px rgba(81, 203, 238, 0);
190 | 	-moz-box-shadow: 0 0 5px rgba(81, 203, 238, 0);
191 | }
192 | 
193 | form select {
194 | 	width: 232px;
195 | 	margin: 8px 0;
196 | }
197 | 
198 | form input#verify {
199 | 	width: 55px;
200 | }
201 | 
202 | form textarea,
203 | section textarea {
204 | 	width: 414px;
205 | }
206 | 
207 | form input:focus,
208 | form textarea:focus,
209 | form select:focus,
210 | form button:focus,
211 | section input:focus,
212 | section textarea:focus,
213 | section select:focus {
214 | 	border: 1px solid #ddd;
215 | 	background-color: #fff;
216 | 	color: #333;
217 | 	outline: none;
218 | 	position: relative;
219 | 	z-index: 5;
220 | 	box-shadow: 0 0 5px rgba(81, 203, 238, 1);
221 | 	-webkit-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
222 | 	-moz-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
223 | 	-webkit-transform: scale(1.05);
224 | 	-moz-transform: scale(1.05);
225 | 	transition: all 0.25s ease-in-out;
226 | 	-webkit-transition: all 0.25s ease-in-out;
227 | 	-moz-transition: all 0.25s ease-in-out;
228 | }
229 | 
230 | form input.error,
231 | form textarea.error,
232 | form select.error {
233 | 	box-shadow: 0 0 5px rgba(204, 0, 0, 0.5);
234 | 	-webkit-box-shadow: 0 0 5px rgba(204, 0, 0, 0.5);
235 | 	-moz-box-shadow: 0 0 5px rgba(204, 0, 0, 0.5);
236 | 	border: 1px solid #faabab;
237 | 	background: #fef3f3
238 | }
239 | 
240 | form input.submit {
241 | 	width: auto;
242 | 	cursor: pointer;
243 | 	position: relative;
244 | 	border: 1px solid #282828;
245 | 	color: #fff;
246 | 	padding: 6px 16px;
247 | 	text-decoration: none;
248 | 	font-size: 1.1em;
249 | 	background: #555;
250 | 	background: -webkit-gradient( linear, left bottom, left top, color-stop(0.12, rgb(60, 60, 60)), color-stop(1, rgb(85, 85, 85)));
251 | 	background: -moz-linear-gradient( center bottom, rgb(60, 60, 60) 12%, rgb(85, 85, 85) 100%);
252 | 	box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25);
253 | 	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
254 | 	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
255 | 	text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
256 | }
257 | 
258 | form input.submit:hover {
259 | 	background: #282828 !important;
260 | 	transition: none;
261 | 	-webkit-transition: none;
262 | 	-moz-transition: none;
263 | }
264 | 
265 | form input.submit:active,
266 | form input.submit:focus {
267 | 	top: 1px;
268 | }
269 | 
270 | form button.delete-comment {
271 | 	width: auto;
272 | 	cursor: pointer;
273 | 	position: relative;
274 | 	border: 1px solid #282828;
275 | 	color: #fff;
276 | 	border-radius: 5px;
277 | 	padding: 6px 16px;
278 | 	text-decoration: none;
279 | 	font-size: 1.1em;
280 | 	background: #555;
281 | 	background: -webkit-gradient( linear, left bottom, left top, color-stop(0.12, rgb(60, 60, 60)), color-stop(1, rgb(85, 85, 85)));
282 | 	background: -moz-linear-gradient( center bottom, rgb(60, 60, 60) 12%, rgb(85, 85, 85) 100%);
283 | 	box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25);
284 | 	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
285 | 	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
286 | 	text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
287 | }
288 | 
289 | .copy {
290 | 	width: 30px;
291 | 	height: 29px;
292 | 	padding: 5px;
293 | 	color: #666;
294 | 	background: #f5f5f5;
295 | 	border: 1px solid #ccc;
296 | 	margin: 5px 0;
297 | }
298 | 
299 | form button.delete-comment:hover {
300 | 	background: #282828 !important;
301 | 	transition: none;
302 | 	-webkit-transition: none;
303 | 	-moz-transition: none;
304 | }
305 | 
306 | form button.delete-comment:active,
307 | form button.delet-comment:focus {
308 | 	top: 1px;
309 | }
310 | 
311 | form button:hover {
312 | 	background: #eeeeee;
313 | 	transition: none;
314 | 	-webkit-transition: none;
315 | 	-moz-transition: none;
316 | }
317 | 
318 | form input[type="submit"][disabled] {
319 | 	background: #888;
320 | }
321 | 
322 | form fieldset {
323 | 	padding: 7px;
324 | 	border: 1px solid #eee;
325 | 	-webkit-border-radius: 5px;
326 | 	-moz-border-radius: 5px;
327 | 	margin: 0 0 20px;
328 | }
329 | 
330 | form legend {
331 | 	padding: 7px 10px;
332 | 	font-weight: bold;
333 | 	color: #000;
334 | 	border: 1px solid #eee;
335 | 	-webkit-border-radius: 5px;
336 | 	-moz-border-radius: 5px;
337 | 	margin-bottom: 0 !important;
338 | 	margin-bottom: 20px;
339 | }
340 | 
341 | form span.required {
342 | 	font-size: 13px;
343 | 	color: #ff0000;
344 | }
345 | 
346 | section span.required {
347 | 	font-size: 13px;
348 | 	color: #ff0000;
349 | }
350 | 
351 | fieldset {
352 | 	padding: 20px;
353 | 	border: 1px solid #eee;
354 | 	-webkit-border-radius: 5px;
355 | 	-moz-border-radius: 5px;
356 | 	margin: 0 0 20px;
357 | }
358 | 
359 | legend {
360 | 	padding: 7px 10px;
361 | 	font-weight: bold;
362 | 	color: #000;
363 | 	border: 1px solid #eee;
364 | 	-webkit-border-radius: 5px;
365 | 	-moz-border-radius: 5px;
366 | 	margin-bottom: 0 !important;
367 | 	margin-bottom: 20px;
368 | }
369 | 
370 | #message {
371 | 	margin: 1em 0;
372 | 	padding: 0;
373 | 	display: block;
374 | 	background: transparent none;
375 | }
376 | 
377 | acronym {
378 | 	border-bottom: 1px dotted #ccc;
379 | }


--------------------------------------------------------------------------------
/website-creator/queue.html:
--------------------------------------------------------------------------------
  1 | 
  2 | <!DOCTYPE html>
  3 | <html lang="en">
  4 | 
  5 | <head>
  6 |   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7 |   <title>Amazon Connect - Queue API's</title>
  8 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  9 |     <meta content="utf-8" http-equiv="encoding">
 10 |     <link href="css/style.css" rel="stylesheet" type="text/css" />
 11 |     
 12 |     <script src=https://cdn.jsdelivr.net/npm/jquery@3.5/dist/jquery.min.js></script>
 13 |     
 14 |         
 15 |     <script src="js/queue.js"></script>
 16 |     <script src="js/aws-sdk.min-queue.js"></script>
 17 |     
 18 |     
 19 |     <script src=https://cdn.jsdelivr.net/npm/dna.js@1.6/dist/dna.min.js></script>
 20 |     <script src=https://cdn.jsdelivr.net/npm/web-ignition@1.2/dist/library.min.js></script>
 21 |     
 22 |     <link rel=stylesheet href=https://cdn.jsdelivr.net/npm/pretty-print-json@0.2/dist/pretty-print-json.css>
 23 |     <script src=https://cdn.jsdelivr.net/npm/pretty-print-json@0.2/dist/pretty-print-json.js></script>
 24 |     <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>    
 25 |     <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.21/sl-1.3.1/datatables.min.css"/>
 26 |     <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.21/sl-1.3.1/datatables.min.js"></script>
 27 |     <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
 28 |     
 29 | <style>
 30 |     #section-rp-main {
 31 |         padding: 10px;
 32 |         max-width: 250px;
 33 |         height: 900px;
 34 |         margin-left: 0px;
 35 |         float: left;
 36 |         overflow: auto;
 37 |     }
 38 |     #section-json-output {
 39 |         padding: 10px;
 40 |         max-width: 550px;
 41 |         height: 900px;
 42 |         margin-left: 0px;
 43 |         float: left;
 44 |     }
 45 |     
 46 |     #section-rp-list {
 47 |         padding: 10px;
 48 |         max-width: 600px;
 49 |         height: 900px;
 50 |         margin-left: 0px;
 51 |         float: left;
 52 |     }
 53 |     
 54 |     #rpFormatted{
 55 |         white-space: break-spaces;
 56 |         word-break: break-word;
 57 |     }
 58 |     #rpDivFormatted{
 59 |         overflow: scroll;
 60 |         height: 830px;
 61 |     }        
 62 |     #manageRPdialog{
 63 |         display: flex;    align-items: center;  justify-content: center;    
 64 |     }
 65 |     table.tblDetails {
 66 |       border-collapse: collapse;
 67 |       width: 700px;
 68 |     }
 69 |     
 70 |     table.tblDetails td, table.tblDetails th {
 71 |       border: 1px solid #ddd;
 72 |       padding: 8px;
 73 |     }
 74 |     
 75 |     table.tblDetails tr:nth-child(even){background-color: #f2f2f2;}
 76 |     
 77 |     table.tblDetails tr:hover {background-color: #ddd;}
 78 |     
 79 |     table.tblDetails th {
 80 |       padding-top: 12px;
 81 |       padding-bottom: 12px;
 82 |       text-align: left;
 83 |       color: black;
 84 |     }
 85 |     table.tblDetails label{
 86 |         display: inline-block;
 87 |         float: right;
 88 |         height: 1em;
 89 |         line-height: 1em;
 90 |         padding: 6px 0 0;
 91 |         width: 100%; 
 92 |         font-size: 1em;
 93 |         margin: 5px 0;
 94 |         clear: both;
 95 |     }
 96 | 	table.QCList {
 97 | 	  border-collapse: collapse;
 98 | 	  width: 100%;
 99 | 	}
100 | 	
101 | 	table.QCList td, table.QCList th {
102 | 	  border: 1px solid #ddd;
103 | 	  padding: 8px;
104 | 	}
105 | 	
106 | 	table.QCList tr:nth-child(even){background-color: #f2f2f2;}
107 | 	
108 | 	table.QCList tr:hover {background-color: #ddd;}
109 | 	
110 | 	table.QCList th {
111 | 	  padding-top: 12px;
112 | 	  padding-bottom: 12px;
113 | 	  text-align: left;
114 | 	  color: black;
115 | 	}
116 |    
117 |     .spnLeft {
118 |         display: block;
119 |         float: left;
120 |         font-weight: bold;
121 |     }
122 |     
123 |     .spnRight {
124 |         display: block;
125 |         float: right;
126 |         font-weight: bold;
127 |         color: blue
128 |     }
129 |     .btnOptions{
130 |         width: 200px;
131 |     }    
132 |     </style>
133 |     
134 | </head>
135 | 
136 | <body>
137 | 
138 | <!--navbar div with the id-->
139 |     <section id="section-rp-main">
140 |         <form>
141 |          <fieldset>
142 |             <legend>Amazon Connect Queue APIs</legend>
143 |             <div>
144 |                <input type="button" id="awsConfiguration" value="AWS Configurations">
145 |                <input type="button" id="listQC" value="List all queue">
146 |                <input type="button" id="createQC" value="Create queue">
147 |                <input type="button" id="modifyQC" value="Modify queue">
148 |                <input type="button" id="describeQC" value="Describe queue">               
149 |                <!-- <input type="button" id="describeHOP" value="Describe HOP">  -->
150 |             </div>               
151 |          </fieldset>
152 |          </form>
153 |     </section>
154 |     <section id="section-rp-list">
155 |         <legend>Selected queue details</legend>
156 |         <input type="text" id="selectedQC" value="" > 
157 |         <div style="height: 90%;  overflow: scroll;">
158 |             <table id="qcListTable" style="width:100%;border:1px;height:80%" class="cell-border compact stripe" /></table>
159 |         </div>
160 |     </section>
161 | 
162 |     <section id="section-json-output">
163 |         <legend>JSON Output</legend>
164 |         <div id="rpDivFormatted"><pre id="rpFormatted"></pre></div>
165 |     </section>
166 | 
167 |     <div id="dialog" title="Waiting">
168 |           <span id="waitingSpan">Waiting for server to respond</span>
169 |     </div>
170 |     <div id="resultDialog" title="API Result">
171 |           <span id="resultSpan"></span>
172 |     </div>
173 |     
174 |     <!--  This is the beginning of add queue dialog -->
175 |     <div id="qcDialog" title="Queue">
176 |               <form name="qcForm" id="qcForm">
177 |               <fieldset class="agent-info">
178 |                 <legend>Queue configuration</legend>
179 |                 <div id="createTabs">
180 |                     <ul>
181 |                         <li><a href="#tabs-1">Overview</a></li>
182 |                         <li><a href="#tabs-2">Quick connects</a></li>
183 |                     </ul>
184 |                  <div id="tabs-1">
185 | 
186 |                   <table class='tblDetails' style="width: 300px;">
187 |                     <tbody>
188 |                       <tr>
189 |                         <td>Name</td>
190 |                         <td>
191 |                           <input name="qcName" type="text" id="qcName" placeholder="Name">
192 |                         </td>
193 |                         <td>Description</td>
194 |                         <td colspan="3">
195 |                           <input name="qcDescription" type="text" id="qcDescription" placeholder="Description" style="width: 95%;">
196 |                         </td>
197 |                       </tr>
198 |                       <tr>                         
199 |                         <td>Caller Id Name</td>
200 |                         <td>
201 |                           <input name="qcOutboundCallerIdName" type="text" id="qcOutboundCallerIdName" placeholder="Caller Id Name">
202 |                         </td>
203 |                         <td>Number</td>
204 |                         <td>
205 |                             <select name="qcOutboundCallerIdNumberId" id="qcOutboundCallerIdNumberId"></select>
206 |                         </td>
207 |                         <td>Contact flow</td>
208 |                         <td>
209 |                             <select name="qcOutboundFlowId" id="qcOutboundFlowId"></select>
210 |                         </td>
211 |                       </tr>  
212 |                       <tr>
213 |                         <td>Maximum Contacts</td>
214 |                         <td><input name="qcMaxContacts" type="text" id="qcMaxContacts" placeholder="Max Contacts"></td>
215 |                         <td>Hours of operation</td>
216 |                         <td>
217 |                             <select name="qcHoursOfOperationId" id="qcHoursOfOperationId" style="width: 95%;"></select>
218 |                         </td>
219 |                         <td>Status </td>
220 |                         <td>
221 |                             <input name="qcStatus" type="checkbox" id="qcStatus" placeholder="Status" style="width: 70px;">
222 |                             <span id='queueStatus'></span>
223 |                         </td>                        
224 |                       </tr>                      
225 |                      </tbody>
226 |                    </table>
227 |                    <button class="btn btnOptions" type="button" id="btnCreate" > Create queue</button>
228 |                    <button class="btn btnOptions" type="button" id="btnRename" > Update name  description</button>
229 |                    <button class="btn btnOptions" type="button" id="btnUpdateHoursOfOperation" >Update hours of operation</button>
230 |                    <button class="btn btnOptions" type="button" id="btnUpdateOutboundConfig" >Update outbound config</button>
231 |                    <button class="btn btnOptions" type="button" id="btnUpdateMaxContacts" >Update max contacts</button>
232 |                    <button class="btn btnOptions" type="button" id="btnUpdateStatus" >Enable/Disable</button>
233 |                    <button class="btn btnOptions" type="button" id="btnDescribeHOP" >Hours of operations</button>
234 |                 </div>
235 |                 <div id="tabs-2">
236 | 			         <div>
237 | 			             <div>
238 | 			                 <span class="spnLeft"><h2>Quick Connects</h2></span> 
239 | 			                 <span id="spnAddOriginNew" class="spnRight" style="padding-top:25px;">
240 | 			                     <a title="Add Quick Connect" href="#" onclick="showAddQuickConnectDialog();return false;">Add Quick Connect</a>
241 | 			                 </span>
242 | 			             </div>
243 | 			             <table class="QCList" id="tblQuickConnects">
244 | 			                 <thead>
245 | 			                     <tr>
246 | 			                         <th>Quick Connect</th>
247 | 			                         <th>Remove</th>
248 | 			                     </tr>
249 | 			                 </thead>
250 | 			                 <tbody></tbody>
251 | 			             </table>
252 | 			         </div>
253 |                  </div>
254 |                 </div>
255 |                </fieldset>
256 |              </form>
257 | 
258 |     </div>    
259 |     <!--  This is the end of add queue dialog -->
260 | 
261 |     <!--  This is the start of add quick connect dialog -->
262 |     <div id="describeHOPDialog" title="Hours of operation">
263 |         <div>
264 |              <form name="frmHOP" id="frmHOP">
265 |               <fieldset class="agent-info">
266 |                 <legend>Hour of operations</legend>
267 |                 <div>
268 |                   <table class="QCList" >
269 |                     <tbody>
270 |                       <tr>
271 |                         <td>
272 |                           Name : 
273 |                         </td>
274 |                         <td>
275 |                            <span id='spnHOPName'></span>
276 |                         </td>
277 |                         <td>
278 |                           TimeZone : 
279 |                         </td>
280 |                         <td>
281 |                            <span id='spnHOPTZ'></span>
282 |                         </td>                        
283 |                       </tr>
284 |                       <tr>
285 |                       <td>
286 |                         Description : 
287 |                       </td>
288 |                       <td colspan=3>
289 |                         <span id='spnHOPDescription'></span>
290 |                       </td>  
291 |                       </tr>
292 |                     </tbody>
293 |                    </table>
294 |                  </div>
295 |                 <div>
296 |                   <table class="QCList" >
297 |                     <thead><th>Day</th><th>Start</th><th>End</th></thead>
298 |                     <tbody>                        
299 |                       <tr>
300 |                         <td>Sunday </td>
301 |                         <td><span id='spnSundayStart'></span></td>
302 |                         <td><span id='spnSundayEnd'></span></td>                        
303 |                       </tr>
304 |                       <tr>
305 |                         <td>Monday </td>
306 |                         <td><span id='spnMondayStart'></span></td>
307 |                         <td><span id='spnMondayEnd'></span></td>                        
308 |                       </tr>
309 |                       <tr>
310 |                         <td>Tuesday </td>
311 |                         <td><span id='spnTuesdayStart'></span></td>
312 |                         <td><span id='spnTuesdayEnd'></span></td>                        
313 |                       </tr>
314 |                       <tr>
315 |                         <td>Wednesday </td>
316 |                         <td><span id='spnWednesdayStart'></span></td>
317 |                         <td><span id='spnWednesdayEnd'></span></td>                        
318 |                       </tr>
319 |                       <tr>
320 |                         <td>Thursday </td>
321 |                         <td><span id='spnThursdayStart'></span></td>
322 |                         <td><span id='spnThursdayEnd'></span></td>                        
323 |                       </tr>
324 |                       <tr>
325 |                         <td>Friday </td>
326 |                         <td><span id='spnFridayStart'></span></td>
327 |                         <td><span id='spnFridayEnd'></span></td>                        
328 |                       </tr>
329 |                       <tr>
330 |                         <td>Saturday </td>
331 |                         <td><span id='spnSaturdayStart'></span></td>
332 |                         <td><span id='spnSaturdayEnd'></span></td>                        
333 |                       </tr>
334 |                     </tbody>
335 |                    </table>
336 |                  </div>  
337 |                    
338 |               </fieldset>
339 |              </form>
340 |             
341 |         </div>
342 |     
343 |     </div>
344 |     <!--  This is the end of add quick connect dialog -->
345 |         
346 |     <!--  This is the start of add quick connect dialog -->
347 |     <div id="addQuickConnectDialog" title="Add Quick Connect">
348 |         <div>
349 |              <form name="frmQuickConnect" id="frmQuickConnect">
350 |               <fieldset class="agent-info">
351 |                 <legend>Quick Connect Details</legend>
352 |                 <div>
353 |                   <table>
354 |                     <tbody>
355 |                       <tr>
356 |                         <td>
357 |                           <select name="sltQuickConnect" id="sltQuickConnect" style="width: 350px;"> </select>
358 |                         </td>
359 |                       </tr>
360 |                     </tbody>
361 |                    </table>
362 |               </fieldset>
363 |              </form>
364 |             
365 |         </div>
366 |     
367 |     </div>
368 |     <!--  This is the end of add quick connect dialog -->
369 |     <!-- Beginning of AWS Configurations -->
370 |     <div id="configDialog" title="AWS IAM Credentials">
371 |          <form  name="AWSIAMInfo" id="AWSIAMInfo" autocomplete="on">
372 |               <fieldset class="config-info">
373 |                    <legend>Enter AWS credentials for quick connects management</legend>
374 |                       <div>
375 |                       <table>
376 |                         <tbody>
377 |                           <tr>
378 |                             <td>
379 |                               <label for="dlgSourceAccessKey">Access Key : </label>
380 |                             </td>
381 |                             <td>
382 |                               <input name="dlgSourceAccessKey" type="text" id="dlgSourceAccessKey" placeholder="Access Key">
383 |                             </td>
384 |                             <td>
385 |                                 <label for="dlgSourceRegion">Region : </label>
386 |                             </td>
387 |                             <td>
388 |                               <input name="dlgSourceRegion" type="text" id="dlgSourceRegion" placeholder="Region">
389 |                             </td>
390 |                             </tr>
391 |                             <tr>
392 |                             <td>
393 |                               <label for="dlgSourceSecretKey">Secret Key : </label>
394 |                             </td>
395 |                             <td colspan=3>
396 |                               <input name="dlgSourceSecretKey" type="text" id="dlgSourceSecretKey" placeholder="Secret Key" style="width:100%;">
397 |                             </td>
398 |                             
399 |                             </tr>
400 |                             <tr>
401 |                             <td>
402 |                               <label for="dlgInstanceId">Instance Id : </label>
403 |                             </td>
404 |                             <td colspan=3>
405 |                               <input name="dlgInstanceId" type="text" id="dlgInstanceId" placeholder="Instance Id" style="width:100%;">
406 |                             </td>
407 |                             </tr>
408 |                             
409 |                           </tbody>
410 |                         </table>
411 |                    </div>
412 |               </fieldset>
413 |               <span id="spnAWSMessage" style="color: red;font-weight: bold;float:left"></span><button class="btn" type="button" id="btnConfiguration" style="width: 200px;float:right"> Save Configurations </button>
414 |            </form>
415 |      </div>
416 |     <div id="confirmDialog" title="Delete?">
417 |       <p><span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;"></span>Are you sure you want to delete the quick connect?</p>
418 |     </div>    
419 | </body>
420 | </html>
421 | 


--------------------------------------------------------------------------------
/website-creator/js/queue.js:
--------------------------------------------------------------------------------
  1 | 
  2 | var credentials;
  3 | var secretKey;
  4 | var accessKey;
  5 | var sessionId;
  6 | var connect;
  7 | var qcList;
  8 | var selectedQC;
  9 | var selectedId;
 10 | var queueList;
 11 | var cfList;
 12 | var hopList;
 13 | var phoneList;
 14 | var quickConnectList;
 15 | var timerID;
 16 | var dlgSourceAccessKey, dlgSourceSecretKey, dlgSourceRegion, dlgInstanceId;
 17 | const GCREATE = 'CREATE';
 18 | const GMODIFY = 'MODIFY';
 19 | const GVOICE = 'VOICE';
 20 | const GCHAT = 'CHAT';
 21 | const GSTANDARD = 'STANDARD';
 22 | 
 23 | // allowed will be CREATE and MODIFY
 24 | var currentOperation = GCREATE;
 25 | 
 26 | $( document ).ready(function() {
 27 |     if (!checkCookie()) {
 28 |         setAWSConfig(dlgSourceAccessKey, dlgSourceSecretKey, dlgSourceRegion);
 29 |         setupAll();
 30 |     } else {
 31 |         setupAll();
 32 |         $( "#configDialog" ).dialog( "open" );
 33 |     }
 34 | });
 35 | 
 36 | function setupAll() {
 37 |     loadConnectAPIs();
 38 |     $( "#createTabs" ).tabs();
 39 |     $("#modifyQC").click(() => {
 40 |         currentOperation=GMODIFY;
 41 |         clear_form_elements('#qcForm');
 42 |         $("#btnCreate").hide();
 43 |         $("#btnRename").show();
 44 |         $("#btnUpdateHoursOfOperation").show();        
 45 |         $("#btnUpdateOutboundConfig").show();
 46 |         $("#btnUpdateMaxContacts").show();
 47 |         $("#btnUpdateStatus").show();
 48 |         $("#qcStatus").show();
 49 |         $("#queueStatus").show();
 50 |         $( "#qcDialog" ).dialog( "open" );
 51 |         modifyQC(selectedId);
 52 |     });
 53 |     
 54 |         
 55 |     $("#listQC").click(() => {
 56 |         getAllQueues();
 57 |     });
 58 |     
 59 |     $("#btnDescribeHOP").click(() => {
 60 |         getHoursOfOperations();
 61 |     });
 62 |     
 63 |     
 64 |     $("#createQC").click(() => {
 65 |         currentOperation=GCREATE;
 66 |         clear_form_elements('#qcForm');
 67 |         $("#btnCreate").show();
 68 |         $("#btnRename").hide();
 69 |         $("#btnUpdateHoursOfOperation").hide();        
 70 |         $("#btnUpdateOutboundConfig").hide();
 71 |         $("#btnUpdateMaxContacts").hide();
 72 |         $("#btnUpdateStatus").hide();
 73 |         $("#qcStatus").hide();
 74 |         $("#queueStatus").hide();
 75 |         populateContactFlow("OUTBOUND_WHISPER", "1");
 76 |         populatePhoneNumber("1");
 77 |         populateHoursOfOperation("1");
 78 |         $( "#qcDialog" ).dialog( "open" );
 79 |     });
 80 |     
 81 |     $("#describeQC").click(() => {
 82 |         describeQC(selectedId);
 83 |     });
 84 |     
 85 |     $("#btnRename").click(() => {
 86 |     	updateQueueNameDesc();
 87 |     });
 88 |     
 89 |     $("#btnUpdateHoursOfOperation").click(() => {
 90 |         updateQueueHoursOfOps();
 91 |     });
 92 |     
 93 |     $("#btnUpdateOutboundConfig").click(() => {
 94 |     	updateQueueOBConfig();
 95 |     });
 96 |     
 97 |     $("#btnUpdateMaxContacts").click(() => {
 98 |     	updateQueueContactsMax();
 99 |     });
100 | 
101 |     $("#btnUpdateStatus").click(() => {
102 |     	updateQueueStatusEnableDisable();
103 |     });
104 |     
105 |     
106 |         
107 |     $("#btnCreate").click(() => {
108 |         createQC();
109 |         $( "#qcDialog" ).dialog( "close" );
110 |     });
111 |     
112 |     $("#awsConfiguration").click(() => {
113 |         $( "#configDialog" ).dialog( "open" );
114 |     });
115 |     
116 |     $("#btnConfiguration").click(() => {
117 |         if (saveCookie()) {
118 |             $( "#configDialog" ).dialog( "close" );
119 |         } else {
120 |             $( "#configDialog" ).dialog( "open" );
121 |         }
122 |     });
123 |        
124 |     $("#dialog").dialog({
125 |         autoOpen: false,
126 |         modal: true
127 |       });
128 |     
129 |     $("#qcDialog").dialog({
130 |         autoOpen: false,
131 |         width: 1100,
132 |         modal: true,
133 |         resizable: false,
134 |         height: "auto"        
135 |         
136 |     });
137 |     
138 |     $("#resultDialog").dialog({
139 |         autoOpen: false,
140 |         modal: true
141 |     });
142 | 
143 |     
144 |     $('#describeHOPDialog').dialog({
145 |         autoOpen: false,
146 |         width: 850,
147 |         modal: true,
148 |         resizable: false,
149 |         height: "auto"        
150 |     });
151 |     
152 |     $('#configDialog').dialog({
153 |         autoOpen: false,
154 |         width: 850,
155 |         modal: true,
156 |         resizable: false,
157 |         height: "auto"        
158 |     });
159 | 
160 |     $( "#confirmDialog" ).dialog({
161 |         autoOpen: false,
162 |         resizable: false,
163 |         height: "auto",
164 |         width: 400,
165 |         modal: true,
166 |         buttons: {
167 |           "Yes": function() {
168 |             $( this ).dialog( "close" );
169 |           },
170 |           Cancel: function() {
171 |             $( this ).dialog( "close" );
172 |           }
173 |         }
174 |     });
175 |     $( "#addQuickConnectDialog" ).dialog({
176 |         autoOpen: false,
177 |         resizable: false,
178 |         height: "auto",
179 |         width: 400,
180 |         modal: true,
181 |         buttons: {
182 |           "Add": function() {
183 |             $( this ).dialog( "close" );
184 |             addQuickConnect();
185 |           },
186 |           Cancel: function() {
187 |             $( this ).dialog( "close" );
188 |           }
189 |         }
190 |     });        
191 |     
192 |     
193 |     qcListTable = $('#qcListTable').DataTable({
194 |         columnDefs: [
195 |             {
196 |                 targets: -1,
197 |                 className: 'dt-body-right'
198 |             }
199 |           ],        
200 |         columns: [{title: "Name"},{title: "Type"}],
201 |         select: true,
202 |         paging: false,
203 |         info: false,
204 |         searching: false
205 |     });
206 |     
207 |     qcListTable.on( 'select', function ( e, dt, type, indexes ) {
208 |         if ( type === 'row' ) {
209 |             selectedQC = qcListTable.rows( indexes ).data()[0][0];
210 |             $('#selectedQC').val(selectedQC);
211 |             for (var i=0; i< queueList.QueueSummaryList.length; i++) {
212 |                 if (selectedQC === queueList.QueueSummaryList[i].Name) {
213 |                     selectedId = queueList.QueueSummaryList[i].Id;
214 |                     break;
215 |                 }
216 |             }
217 |         }
218 |     });
219 |     
220 |     getAllQueues();
221 |         
222 | }
223 | 
224 | 
225 | async function addQuickConnect() {
226 | 	try{
227 | 		var qc = [];
228 | 		qc.push($("#sltQuickConnect").val());
229 | 		
230 | 		if(currentOperation ===GMODIFY){
231 | 			let resp = await associateQueueQuickConnects(dlgInstanceId, selectedId, qc);
232 | 			fillQuickConnectTable();
233 | 		}else{
234 | 			var tbody = $('#tblQuickConnects').children('tbody');
235 | 			var table = tbody.length ? tbody : $('#tblQuickConnects');
236 | 			var qName = $( "#sltQuickConnect option:selected" ).text();
237 | 			var a = '<a href="" onclick="removeQuickConnect(\'-\',\'' + qName + '\');return false;">Remove</>';
238 | 			table.append("<tr><td>" + qName + "</td><td>" + a +"</td</tr>");			
239 | 		}
240 | 	}catch(e){
241 | 		console.log(e);
242 | 		showResults(e);
243 | 	}
244 | }
245 | 
246 | async function removeQuickConnect(qcId, qName){
247 | 	try{
248 | 		if(currentOperation ===GMODIFY){
249 | 			var qc = [];
250 | 			qc.push(qcId);
251 | 			let resp = await disassociateQueueQuickConnects(dlgInstanceId, selectedId, qc);
252 | 			fillQuickConnectTable();
253 | 		}else{
254 | 			removeRowFromTable("#tblQuickConnects", qName);
255 | 		}
256 | 	}catch(e){
257 | 		console.log(e);
258 | 		showResults(e);
259 | 		
260 | 	}
261 | 	 	
262 | }
263 | 
264 | async function fillQuickConnectTable(){
265 | 	try{
266 | 		let resp = await listQueueQuickConnects(dlgInstanceId, selectedId);
267 | 		console.log(resp);
268 | 		$("#tblQuickConnects").empty();
269 | 		var tbody = $('#tblQuickConnects').children('tbody');
270 | 		var table = tbody.length ? tbody : $('#tblQuickConnects');
271 | 		table.append("<tr><th>Quick Connect</th><th>Remove</th></tr>");
272 | 		for(var i=0; i<resp.QuickConnectSummaryList.length; i++){
273 | 			var item = resp.QuickConnectSummaryList[i];
274 | 			var a = '<a href="" onclick="removeQuickConnect(\'' + item.Id + '\',\'' + item.Name + '\');return false;">Remove</>';
275 | 			table.append("<tr><td>" + item.Name + "</td><td>" + a +"</td</tr>");			
276 | 		}
277 | 	}catch(e){
278 | 		console.log(e);
279 | 		handleWindow(false,'');
280 | 		showResults(e);
281 | 	}
282 | 	
283 | }
284 | 
285 | function removeRowFromTable(ele, searchString){
286 | 	var indexFind =0;
287 | 	$(ele + " tr").each(function(parentIndex) {
288 | 		//var val1 = $(t.rows[i].cells[0]).text();
289 | 		$(this).find('td').each (function(index) {
290 | 			  if(index == 0){
291 | 				  var str = $(this).text();
292 | 				  if(searchString.localeCompare(str)==0){
293 | 					  indexFind = parentIndex+1;
294 | 				  }
295 | 			  }
296 | 		});
297 | 		if(indexFind > 0){
298 | 			$(this).remove();
299 | 			indexFind =0;
300 | 		}
301 | 	});
302 | }
303 | 
304 | function showAddQuickConnectDialog() {
305 | 	$('#sltQuickConnect').empty();
306 |     for(var i=0; i < quickConnectList.QuickConnectSummaryList.length; i++){
307 |     	var j = quickConnectList.QuickConnectSummaryList[i];
308 |  		$('#sltQuickConnect').append('<option selected value="' +  j.Id + '">' + j.Name +'</option>');
309 |     }
310 | 	
311 |     $( "#addQuickConnectDialog" ).dialog( "open" );
312 | }
313 | 
314 | async function createQC() { 
315 | 	try {
316 | 		handleWindow(true, '');
317 | 		var name = $('#qcName').val();
318 | 		var description = $('#qcDescription').val();
319 | 		var hop = $('#qcHoursOfOperationId').val();
320 | 		var occ = {};
321 | 		var cidName = $('#qcOutboundCallerIdName').val();
322 | 		var cidNumId = $('#qcOutboundCallerIdNumberId').val();
323 | 		var cidFlowId = $('#qcOutboundFlowId').val();
324 | 		occ['OutboundCallerIdName'] = cidName.isEmpty() ? null : cidName;
325 | 		occ['OutboundCallerIdNumberId'] = cidNumId === '-' ? null : cidNumId;	
326 | 		occ['OutboundFlowId'] = cidFlowId === '-' ? null : cidFlowId;
327 | 		var max = $('#qcMaxContacts').val();
328 | 		max = max.isEmpty() ? "0" : max;
329 | 		var status;
330 | 		if ($('#qcStatus').is(':checked')) {
331 | 			status = 'ENABLED'
332 | 		} else {
333 | 			status = 'DISABLED'
334 | 		}
335 | 		var qc = [];
336 | 		var table = document.getElementById("tblQuickConnects");
337 | 		for (var i = 0, row; row = table.rows[i]; i++) {
338 | 		  for (var j = 0, col; col = row.cells[j]; j++) {
339 | 			  if(j==0){
340 | 				  if(i>0){
341 | 					  qc.push(getQuickConnectId(col.innerText));
342 | 				  }
343 | 					  
344 | 			  }
345 | 		  }
346 | 		}
347 | 		
348 | 		let resp = await createQueue (dlgInstanceId, name, description, occ, hop, max, qc);
349 | 		handleWindow(false, '');
350 | 		getAllQueues();
351 | 	} catch (e) {		
352 | 		console.log(e);
353 | 		handleWindow(false, '');
354 | 	}
355 | 	
356 | }
357 | 
358 | function getQuickConnectId(qcName) {
359 | 	
360 | 	for(var i=0; i<quickConnectList.QuickConnectSummaryList.length; i++){
361 | 		var item = quickConnectList.QuickConnectSummaryList[i];
362 | 		if(qcName === item.Name)
363 | 			return item.Id;
364 | 	}
365 | 	
366 | }
367 | 
368 | async function updateQueueNameDesc() {
369 | 	try {
370 | 		handleWindow(true, '');
371 | 		var name = $('#qcName').val();
372 | 		var description = $('#qcDescription').val();
373 | 		let resp = await updateQueueName(dlgInstanceId, selectedId, name, description);
374 | 		console.log(resp);
375 | 		handleWindow(false, '');
376 | 		modifyQC(selectedId);
377 | 	} catch (e) {		
378 | 		console.log(e);
379 | 		handleWindow(false, '');
380 | 	}
381 | }
382 | 
383 | async function updateQueueHoursOfOps() {
384 | 	try {
385 | 		handleWindow(true, '');
386 | 		var hop = $('#qcHoursOfOperationId').val();
387 | 		let resp = await updateQueueHoursOfOperation(dlgInstanceId, selectedId, hop);
388 | 		console.log(resp);
389 | 		handleWindow(false, '');
390 | 		modifyQC(selectedId);
391 | 	} catch (e) {		
392 | 		console.log(e);
393 | 		handleWindow(false, '');
394 | 	}
395 | 	
396 | }
397 | 
398 | async function updateQueueOBConfig() {
399 | 	try {
400 | 		handleWindow(true, '');
401 | 		var occ = {};
402 | 		var cidName = $('#qcOutboundCallerIdName').val();
403 | 		var cidNumId = $('#qcOutboundCallerIdNumberId').val();
404 | 		var cidFlowId = $('#qcOutboundFlowId').val();
405 | 		occ['OutboundCallerIdName'] = cidName.isEmpty() ? null : cidName;
406 | 		occ['OutboundCallerIdNumberId'] = cidNumId === '-' ? null : cidNumId;	
407 | 		occ['OutboundFlowId'] = cidFlowId === '-' ? null : cidFlowId;
408 | 		let resp = await updateQueueOutboundCallerConfig(dlgInstanceId, selectedId, occ);
409 | 		console.log(resp);
410 | 		handleWindow(false, '');
411 | 		modifyQC(selectedId);
412 | 	} catch (e) {		
413 | 		console.log(e);
414 | 		handleWindow(false, '');
415 | 	}
416 | 	
417 | }
418 | 
419 | 
420 | async function updateQueueContactsMax() {
421 | 	try {
422 | 		handleWindow(true, '');
423 | 		var max = $('#qcMaxContacts').val();
424 | 		let resp = await updateQueueMaxContacts(dlgInstanceId, selectedId, max);
425 | 		console.log(resp);
426 | 		handleWindow(false, '');
427 | 		modifyQC(selectedId);
428 | 	} catch (e) {		
429 | 		console.log(e);
430 | 		handleWindow(false, '');
431 | 	}
432 | 	
433 | }
434 | 
435 | async function updateQueueStatusEnableDisable() {
436 | 	try {
437 | 		handleWindow(true, '');
438 | 		var status;
439 | 		if ($('#qcStatus').is(':checked')) {
440 | 			status = 'ENABLED'
441 | 		} else {
442 | 			status = 'DISABLED'
443 | 		}
444 | 		let resp = await updateQueueStatus(dlgInstanceId, selectedId, status);
445 | 		console.log(resp);
446 | 		handleWindow(false, '');
447 | 		modifyQC(selectedId);
448 | 	} catch (e) {		
449 | 		console.log(e);
450 | 		handleWindow(false, '');
451 | 	}
452 | 	
453 | }
454 | 
455 | async function modifyQC() {
456 |     try {
457 |         handleWindow(true, '');
458 |         var resp = await describeQueue(dlgInstanceId, selectedId);
459 |         console.log(resp);
460 |         formatJSON(resp, '#rpFormatted');
461 |         $('#qcName').val(resp.Queue.Name);
462 |         $('#qcDescription').val(resp.Queue.Description);
463 |         $('#qcMaxContacts').val(resp.Queue.MaxContacts);
464 |         if(resp.Queue.OutboundCallerConfig) {
465 |             $('#qcOutboundCallerIdName').val(resp.Queue.OutboundCallerConfig.OutboundCallerIdName);
466 |             populateContactFlow('OUTBOUND_WHISPER', resp.Queue.OutboundCallerConfig.OutboundFlowId);
467 |             populatePhoneNumber(resp.Queue.OutboundCallerConfig.OutboundCallerIdNumberId);
468 |         }
469 |         populateHoursOfOperation(resp.Queue.HoursOfOperationId);
470 |         if(resp.Queue.Status === 'ENABLED') {
471 |         	$('#qcStatus').prop('checked', true);
472 |         	$('#queueStatus').text('Enabled');
473 |         } else {
474 |         	$('#qcStatus').prop('checked', false);
475 |         	$('#queueStatus').text('Disabled');
476 |         }
477 |         fillQuickConnectTable();
478 |         console.log(resp);
479 |         handleWindow(false, '');
480 |     } catch(e) {
481 |         console.log(e);        
482 |         handleWindow(false, '');
483 |         showResults(e);
484 |     }
485 | 	
486 | }
487 | 
488 |  
489 | function populateContactFlow(flowType, selectId) {
490 | 	$('#qcOutboundFlowId').empty();
491 | 	$('#qcOutboundFlowId').append('<option value="-">-</option>');
492 |     for(var i=0; i < cfList.ContactFlowSummaryList.length; i++){
493 |     	var j = cfList.ContactFlowSummaryList[i];
494 |     	
495 |     	if(j.ContactFlowType === flowType) {
496 |     		if(j.Id == selectId) {
497 |     			$('#qcOutboundFlowId').append('<option selected value="' +  j.Id + '">' + j.Name +'</option>');
498 |     		} else {
499 |     			$('#qcOutboundFlowId').append('<option value="' +  j.Id + '">' + j.Name +'</option>');	
500 |     		}
501 |     		
502 |     	}
503 |     }
504 | }
505 | 
506 | function populatePhoneNumber(selectId) {
507 | 	$('#qcOutboundCallerIdNumberId').empty();
508 | 	$('#qcOutboundCallerIdNumberId').append('<option value="-">-</option>');
509 |     for(var i=0; i < phoneList.PhoneNumberSummaryList.length; i++){
510 |     	var j = phoneList.PhoneNumberSummaryList[i];
511 |     		if(j.Id == selectId) {
512 |     			$('#qcOutboundCallerIdNumberId').append('<option selected value="' +  j.Id + '">' + j.PhoneNumber +'</option>');
513 |     		} else {
514 |     			$('#qcOutboundCallerIdNumberId').append('<option value="' +  j.Id + '">' + j.PhoneNumber +'</option>');	
515 |     		}
516 |     }
517 | }
518 | 
519 | function populateHoursOfOperation(selectId) {
520 | 	$('#qcHoursOfOperationId').empty();
521 |     for(var i=0; i < hopList.HoursOfOperationSummaryList.length; i++){
522 |     	var j = hopList.HoursOfOperationSummaryList[i];
523 |     		if(j.Id == selectId) {
524 |     			$('#qcHoursOfOperationId').append('<option selected value="' +  j.Id + '">' + j.Name +'</option>');
525 |     		} else {
526 |     			$('#qcHoursOfOperationId').append('<option value="' +  j.Id + '">' + j.Name +'</option>');	
527 |     		}
528 |     }
529 | }
530 | 
531 | async function describeQC() {
532 |     try {
533 |         handleWindow(true, '');
534 |         var resp = await describeQueue(dlgInstanceId, selectedId);
535 |         console.log(resp);
536 |         formatJSON(resp, '#rpFormatted');
537 |         handleWindow(false, '');
538 |     } catch(e) {
539 |         console.log(e);        
540 |         handleWindow(false, '');
541 |         showResults(e);
542 |     }
543 | }
544 | function formatHoursMinutes(hoursMinutes) {
545 | 	if(hoursMinutes <= 9) {
546 | 		return '0' + hoursMinutes; 
547 | 	} else {
548 | 		return hoursMinutes;
549 | 	}
550 | }
551 | async function getHoursOfOperations() {
552 | 	try{
553 | 		var hopID = $('#qcHoursOfOperationId').val();
554 | 		let resp = await describeHoursOfOperation(dlgInstanceId, hopID);
555 | 		console.log(resp);
556 | 		$( "#spnHOPName").text(resp.HoursOfOperation.Name); 
557 | 		$( "#spnHOPDescription").text(resp.HoursOfOperation.Description);
558 | 		$( "#spnHOPTZ").text(resp.HoursOfOperation.TimeZone);
559 | 		for(var i = 0; i < resp.HoursOfOperation.Config.length; i ++) {
560 | 			var j = resp.HoursOfOperation.Config[i];
561 | 			if(j.Day === 'SUNDAY') {
562 | 				$('#spnSundayStart').text(formatHoursMinutes(j.StartTime.Hours) + ':' + formatHoursMinutes(j.StartTime.Minutes));
563 | 				$('#spnSundayEnd').text(formatHoursMinutes(j.EndTime.Hours) + ':' + formatHoursMinutes(j.EndTime.Minutes));
564 | 			}
565 | 			if(j.Day === 'MONDAY') {
566 | 				$('#spnMondayStart').text(formatHoursMinutes(j.StartTime.Hours) + ':' + formatHoursMinutes(j.StartTime.Minutes));
567 | 				$('#spnMondayEnd').text(formatHoursMinutes(j.EndTime.Hours) + ':' + formatHoursMinutes(j.EndTime.Minutes));
568 | 			}
569 | 			if(j.Day === 'TUESDAY') {
570 | 				$('#spnTuesdayStart').text(formatHoursMinutes(j.StartTime.Hours) + ':' + formatHoursMinutes(j.StartTime.Minutes));
571 | 				$('#spnTuesdayEnd').text(formatHoursMinutes(j.EndTime.Hours) + ':' + formatHoursMinutes(j.EndTime.Minutes));
572 | 			}
573 | 			if(j.Day === 'WEDNESDAY') {
574 | 				$('#spnWednesdayStart').text(formatHoursMinutes(j.StartTime.Hours) + ':' + formatHoursMinutes(j.StartTime.Minutes));
575 | 				$('#spnWednesdayEnd').text(formatHoursMinutes(j.EndTime.Hours) + ':' + formatHoursMinutes(j.EndTime.Minutes));
576 | 			}
577 | 			if(j.Day === 'THURSDAY') {
578 | 				$('#spnThursdayStart').text(formatHoursMinutes(j.StartTime.Hours) + ':' + formatHoursMinutes(j.StartTime.Minutes));
579 | 				$('#spnThursdayEnd').text(formatHoursMinutes(j.EndTime.Hours) + ':' + formatHoursMinutes(j.EndTime.Minutes));
580 | 			}
581 | 			if(j.Day === 'FRIDAY') {
582 | 				$('#spnFridayStart').text(formatHoursMinutes(j.StartTime.Hours) + ':' + formatHoursMinutes(j.StartTime.Minutes));
583 | 				$('#spnFridayEnd').text(formatHoursMinutes(j.EndTime.Hours) + ':' + formatHoursMinutes(j.EndTime.Minutes));
584 | 			}
585 | 			if(j.Day === 'SATURDAY') {
586 | 				$('#spnSaturdayStart').text(formatHoursMinutes(j.StartTime.Hours) + ':' + formatHoursMinutes(j.StartTime.Minutes));
587 | 				$('#spnSaturdayEnd').text(formatHoursMinutes(j.EndTime.Hours) + ':' + formatHoursMinutes(j.EndTime.Minutes));
588 | 			}
589 | 			
590 | 		}
591 |         $( "#describeHOPDialog" ).dialog( "open" );
592 | 		formatJSON(resp, '#rpFormatted');
593 | 	}catch(e){
594 | 		console.log(e);
595 | 		showResults(e);
596 | 		
597 | 	}
598 | }
599 | 
600 | 
601 | async function getAllQueues() {
602 |     try {
603 |         handleWindow(true, '');
604 |         queueList = await listQueues(dlgInstanceId);
605 |         console.log(queueList);
606 | 
607 |         formatJSON(queueList, '#rpFormatted');
608 |         qcListTable.clear();
609 |         for (var i=0; i< queueList.QueueSummaryList.length; i++) {
610 |             var value = queueList.QueueSummaryList[i];
611 |             if(value.QueueType === 'STANDARD') {
612 |             	qcListTable.row.add([value.Name, value.QueueType]);
613 |             }
614 |             	
615 |         }
616 |         qcListTable.draw();
617 | 
618 |         cfList = await listContactFlows(dlgInstanceId);
619 |         console.log(cfList);
620 |         hopList = await listHoursOfOperations(dlgInstanceId);
621 |         console.log(hopList);
622 |         phoneList = await listPhoneNumbers(dlgInstanceId);
623 |         console.log(phoneList);
624 |         quickConnectList = await listQuickConnects(dlgInstanceId);
625 |         console.log(quickConnectList);
626 |         handleWindow(false, '');
627 |     } catch(e) {
628 |         console.log(e);        
629 |         handleWindow(false, '');
630 |         showResults(e);
631 |     }
632 |     
633 | }
634 | 
635 | 
636 | const describeHoursOfOperation = (instanceId, hoursOfOperationId) => {
637 |     return new Promise((resolve,reject) => {
638 |            var params = {InstanceId : instanceId, HoursOfOperationId : hoursOfOperationId};       
639 |            console.log(params);
640 |            connect.describeHoursOfOperation(params, function (err, res) {        
641 |                 if (err) 
642 |                      reject(err);
643 |                  else 
644 |                     resolve(res);
645 |             });
646 |         });
647 |     }
648 | 
649 | const disassociateQueueQuickConnects = (instanceId, queueId, quickConnects) => {
650 |     return new Promise((resolve,reject) => {
651 |            var params = {InstanceId : instanceId, QueueId : queueId, QuickConnectIds : quickConnects};       
652 |            console.log(params);
653 |            connect.disassociateQueueQuickConnects(params, function (err, res) {        
654 |                 if (err) 
655 |                      reject(err);
656 |                  else 
657 |                     resolve(res);
658 |             });
659 |         });
660 |     }
661 | 
662 | const associateQueueQuickConnects = (instanceId, queueId, quickConnects) => {
663 |     return new Promise((resolve,reject) => {
664 |            var params = {InstanceId : instanceId, QueueId : queueId, QuickConnectIds : quickConnects};       
665 |            console.log(params);
666 |            connect.associateQueueQuickConnects(params, function (err, res) {        
667 |                 if (err) 
668 |                      reject(err);
669 |                  else 
670 |                     resolve(res);
671 |             });
672 |         });
673 |     }
674 | 
675 | const createQueue = (instanceId, name, description, outboundCallerConfig, hoursOfOperationId, maxContacts, quickConnects) => {
676 |     return new Promise((resolve,reject) => {
677 |            var params = {InstanceId : instanceId, Name : name, Description : description, OutboundCallerConfig : outboundCallerConfig, 
678 |         		   HoursOfOperationId : hoursOfOperationId, MaxContacts : maxContacts, QuickConnectIds : quickConnects};       
679 |            console.log(params);
680 |            connect.createQueue(params, function (err, res) {        
681 |                 if (err) 
682 |                      reject(err);
683 |                  else 
684 |                     resolve(res);
685 |             });
686 |         });
687 |     }
688 | 
689 | const listQueueQuickConnects = (instanceId, queueId) => {
690 |     return new Promise((resolve,reject) => {
691 |            var params = {InstanceId : instanceId, QueueId : queueId};       
692 |            console.log(params);
693 |            connect.listQueueQuickConnects(params, function (err, res) {        
694 |                 if (err) 
695 |                      reject(err);
696 |                  else 
697 |                     resolve(res);
698 |             });
699 |         });
700 |     }
701 | 
702 | 
703 | const updateQueueStatus = (instanceId, queueId, status) => {
704 |     return new Promise((resolve,reject) => {
705 |            var params = {InstanceId : instanceId, QueueId : queueId, Status : status};       
706 |            console.log(params);
707 |            connect.updateQueueStatus(params, function (err, res) {        
708 |                 if (err) 
709 |                      reject(err);
710 |                  else 
711 |                     resolve(res);
712 |             });
713 |         });
714 |     }
715 | 
716 | const updateQueueMaxContacts = (instanceId, queueId, maxContacts) => {
717 |     return new Promise((resolve,reject) => {
718 |            var params = {InstanceId : instanceId, QueueId : queueId, MaxContacts : maxContacts};       
719 |            console.log(params);
720 |            connect.updateQueueMaxContacts(params, function (err, res) {        
721 |                 if (err) 
722 |                      reject(err);
723 |                  else 
724 |                     resolve(res);
725 |             });
726 |         });
727 |     }
728 | 
729 | const updateQueueOutboundCallerConfig = (instanceId, queueId, outboundCallerConfig) => {
730 |     return new Promise((resolve,reject) => {
731 |            var params = {InstanceId : instanceId, QueueId : queueId, OutboundCallerConfig : outboundCallerConfig};       
732 |            console.log(params);
733 |            connect.updateQueueOutboundCallerConfig(params, function (err, res) {        
734 |                 if (err) 
735 |                      reject(err);
736 |                  else 
737 |                     resolve(res);
738 |             });
739 |         });
740 |     }
741 | 
742 | const updateQueueHoursOfOperation = (instanceId, queueId, hoursOfOperationId) => {
743 |     return new Promise((resolve,reject) => {
744 |            var params = {InstanceId : instanceId, QueueId : queueId, HoursOfOperationId : hoursOfOperationId};       
745 |            console.log(params);
746 |            connect.updateQueueHoursOfOperation(params, function (err, res) {        
747 |                 if (err) 
748 |                      reject(err);
749 |                  else 
750 |                     resolve(res);
751 |             });
752 |         });
753 |     }
754 | 
755 | const updateQueueName = (instanceId, queueId, name, description) => {
756 |     return new Promise((resolve,reject) => {
757 |            var params = {InstanceId : instanceId, QueueId : queueId, Name : name, Description : description};       
758 |            console.log(params);
759 |            connect.updateQueueName(params, function (err, res) {        
760 |                 if (err) 
761 |                      reject(err);
762 |                  else 
763 |                     resolve(res);
764 |             });
765 |         });
766 |     }
767 | 
768 | 
769 | const describeQueue = (instanceId, queueId) => {
770 |     return new Promise((resolve,reject) => {
771 |            var params = {InstanceId : instanceId, QueueId : queueId};       
772 |            console.log(params);
773 |            connect.describeQueue(params, function (err, res) {        
774 |                 if (err) 
775 |                      reject(err);
776 |                  else 
777 |                     resolve(res);
778 |             });
779 |         });
780 |     }
781 | 
782 | const listQueues = (instanceId) => {
783 |     return new Promise((resolve,reject) => {
784 |            var params = {InstanceId : instanceId};       
785 |            console.log(params);
786 |            connect.listQueues(params, function (err, res) {        
787 |                 if (err) 
788 |                      reject(err);
789 |                  else 
790 |                     resolve(res);
791 |             });
792 |         });
793 |     }
794 | 
795 | const listContactFlows = (instanceId) => {
796 |     return new Promise((resolve,reject) => {
797 |            var params = {InstanceId : instanceId};       
798 |            console.log(params);
799 |            connect.listContactFlows(params, function (err, res) {        
800 |                 if (err) 
801 |                      reject(err);
802 |                  else 
803 |                     resolve(res);
804 |             });
805 |         });
806 |     }
807 | 
808 | const listHoursOfOperations = (instanceId) => {
809 |     return new Promise((resolve,reject) => {
810 |            var params = {InstanceId : instanceId};       
811 |            console.log(params);
812 |            connect.listHoursOfOperations(params, function (err, res) {        
813 |                 if (err) 
814 |                      reject(err);
815 |                  else 
816 |                     resolve(res);
817 |             });
818 |         });
819 |     }
820 | 
821 | const listQuickConnects = (instanceId) => {
822 |     return new Promise((resolve,reject) => {
823 |            var params = {InstanceId : instanceId};       
824 |            console.log(params);
825 |            connect.listQuickConnects(params, function (err, res) {        
826 |                 if (err) 
827 |                      reject(err);
828 |                  else 
829 |                     resolve(res);
830 |             });
831 |         });
832 |     }
833 | 
834 | const listPhoneNumbers = (instanceId) => {
835 |     return new Promise((resolve,reject) => {
836 |            var params = {InstanceId : instanceId};       
837 |            console.log(params);
838 |            connect.listPhoneNumbers(params, function (err, res) {        
839 |                 if (err) 
840 |                      reject(err);
841 |                  else 
842 |                     resolve(res);
843 |             });
844 |         });
845 |     }
846 | 
847 | 
848 | function showResults(message){
849 |     $('#resultSpan').text(message);
850 |     $("#resultDialog").dialog("open");
851 | }
852 | 
853 | function loadConnectAPIs() {
854 | 	connect = new AWS.Connect({ region: dlgSourceRegion});
855 | }
856 | 
857 | 
858 | function handleWindow(openClose, text) {
859 |     if(openClose == true) {
860 |         $( "#dialog" ).dialog( "open" );
861 |     } else {
862 |         $( "#dialog" ).dialog( "close" );
863 |     }
864 | 
865 |     if(text.length>1) {
866 |         $('#waitingSpan').text(text);
867 |     } else {
868 |         $('#waitingSpan').text('    Waiting for server to respond');
869 |     }
870 | }
871 | 
872 | function setAWSConfig(accessKey, secretKey, rgn) {
873 | 
874 |     AWS.config.update({
875 |         accessKeyId: accessKey, secretAccessKey: secretKey, region: rgn
876 |     });    
877 |     AWS.config.credentials.get(function (err) {
878 |         if (err)
879 |             console.log(err);
880 |         else {
881 |             credentials = AWS.config.credentials;
882 |             getSessionToken();
883 |         }
884 |     });
885 |     
886 | }
887 | 
888 | function formatJSON(data, element) {
889 |     $(element).html(prettyPrintJson.toHtml(data));
890 | }
891 | 
892 | 
893 | function getSessionToken() {
894 |     var sts = new AWS.STS();
895 |     sts.getSessionToken(function (err, data) {
896 |       if (err) console.log("Error getting credentials");
897 |       else {
898 |           secretKey = data.Credentials.SecretAccessKey;
899 |           accessKey = data.Credentials.AccessKeyId;
900 |           sessionId = data.Credentials.SessionToken;
901 |       }
902 |     });
903 | }
904 | 
905 | function clear_form_elements(ele) {
906 |     $(':input',ele)
907 |       .not(':button, :submit, :reset')
908 |       .val('')
909 |       .prop('checked', false)
910 |       .prop('selected', false);
911 | }
912 | 
913 | function saveCookie() {
914 |     dlgSourceAccessKey=$("#dlgSourceAccessKey").val();
915 |     dlgSourceSecretKey=$("#dlgSourceSecretKey").val();
916 |     dlgSourceRegion=$("#dlgSourceRegion").val();
917 |     dlgInstanceId = $("#dlgInstanceId").val();
918 |     if(!checkAllMandatoryFields()) {
919 |         setCookie("dlgSourceAccessKey", dlgSourceAccessKey,100);
920 |         setCookie("dlgSourceSecretKey", dlgSourceSecretKey,100 );
921 |         setCookie("dlgSourceRegion", dlgSourceRegion,100);
922 |         setCookie("dlgInstanceId", dlgInstanceId,100);
923 |         $('#spnAWSMessage').text('');
924 |         setAWSConfig(dlgSourceAccessKey, dlgSourceSecretKey, dlgSourceRegion);
925 |         return true;
926 |     }else{
927 |         $('#spnAWSMessage').text('All fields are mandatory and cannot be whitespaces or null');        
928 |         return false;
929 |     }
930 | }
931 | 
932 | function getCookie(c_name)
933 | {
934 |     var i,x,y,ARRcookies=document.cookie.split(";");
935 |     for (i=0;i<ARRcookies.length;i++)
936 |     {
937 |       x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
938 |       y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
939 |       x=x.replace(/^\s+|\s+$/g,"");
940 |       if (x===c_name)
941 |         {
942 |           return unescape(y);
943 |         }
944 |      }
945 | }
946 | 
947 | function setCookie(c_name,value,exdays)
948 | {
949 |     var exdate=new Date();
950 |     exdate.setDate(exdate.getDate() + exdays);
951 |     var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
952 |     document.cookie=c_name + "=" + c_value;
953 | }
954 | 
955 | function checkCookie()
956 | {
957 |     dlgSourceAccessKey=getCookie("dlgSourceAccessKey");
958 |     dlgSourceSecretKey=getCookie("dlgSourceSecretKey");
959 |     dlgSourceRegion=getCookie("dlgSourceRegion");
960 |     dlgInstanceId=getCookie("dlgInstanceId");
961 |     $('#dlgSourceAccessKey').val(dlgSourceAccessKey);
962 |     $('#dlgSourceSecretKey').val(dlgSourceSecretKey);
963 |     $('#dlgSourceRegion').val(dlgSourceRegion);
964 |     $('#dlgInstanceId').val(dlgInstanceId);
965 |     
966 |     return checkAllMandatoryFields();
967 | }
968 | 
969 | function checkAllMandatoryFields() {
970 |     if(isBlank(dlgSourceAccessKey) || dlgSourceAccessKey.isEmpty() || 
971 |             isBlank(dlgSourceSecretKey) || dlgSourceSecretKey.isEmpty() || 
972 |             isBlank(dlgSourceRegion) || dlgSourceRegion.isEmpty() ||
973 |             isBlank(dlgInstanceId) || dlgInstanceId.isEmpty()
974 |             ) {
975 |         return true;
976 |     }else
977 |         return false;
978 | }
979 | 
980 | function isBlank(str) {
981 |     return (!str || /^\s*$/.test(str));
982 | }
983 | 
984 | String.prototype.isEmpty = function() {
985 |     return (this.length === 0 || !this.trim());
986 | };


--------------------------------------------------------------------------------