-
Notifications
You must be signed in to change notification settings - Fork 42
/
App.ts
199 lines (183 loc) · 8.62 KB
/
App.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
/**
* Copyright (c) Cisco Systems, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
*/
import { agentxJsApi } from "@agentx/agentx-js-api";
import { html, LitElement, customElement, internalProperty } from "lit-element";
import styles from "./App.scss";
import { logger } from "./sdk";
import { Notifications } from '@uuip/unified-ui-platform-sdk';
@customElement("my-custom-component")
export default class MyCustomComponent extends LitElement {
@internalProperty() notificationsAdded = 0;
@internalProperty() notificationsPending = 0;
@internalProperty() notificationsActivated = 0;
@internalProperty() notificationsDeactivated = 0;
static get styles() {
return styles;
}
connectedCallback() {
super.connectedCallback();
this.init();
this.subscribeNotificationsEvents();
}
async init() {
await agentxJsApi.config.init();
}
subscribeNotificationsEvents() {
agentxJsApi.notifications.addEventListener("add", n => {
logger.info("Notifications Added: ", n);
this.notificationsAdded = agentxJsApi.notifications.added.length;
});
agentxJsApi.notifications.addEventListener("pending", n => {
logger.info("Notifications Pending: ", n);
this.notificationsAdded = agentxJsApi.notifications.added.length;
this.notificationsPending = agentxJsApi.notifications.pended.length;
this.notificationsActivated = agentxJsApi.notifications.activated.length;
this.notificationsDeactivated = agentxJsApi.notifications.deactivated.length;
});
agentxJsApi.notifications.addEventListener("activate", n => {
logger.info("Notifications Activated: ", n);
this.notificationsAdded = agentxJsApi.notifications.added.length;
this.notificationsPending = agentxJsApi.notifications.pended.length;
this.notificationsActivated = agentxJsApi.notifications.activated.length;
this.notificationsDeactivated = agentxJsApi.notifications.deactivated.length;
});
agentxJsApi.notifications.addEventListener("deactivate", n => {
logger.info("Notifications Deactivated: ", n);
this.notificationsAdded = agentxJsApi.notifications.added.length;
this.notificationsPending = agentxJsApi.notifications.pended.length;
this.notificationsActivated = agentxJsApi.notifications.activated.length;
this.notificationsDeactivated = agentxJsApi.notifications.deactivated.length;
});
}
async changeState (s: "Available" | "Idle") {
const agentState = await agentxJsApi.agentStateInfo.stateChange({
state: s,
auxCodeIdArray: "0",
});
logger.info("State Changed", agentState);
}
async getAgentAddressBooks() {
const books = await agentxJsApi.agentStateInfo.fetchAddressBooks();
logger.info("Address books: ", books);
}
async getAgentInfo() {
const latestData = agentxJsApi.agentStateInfo.latestData;
logger.info("AgentStateInfo latestData: ", latestData);
}
getClientLocale() {
logger.info("Client locale: ", agentxJsApi.config.clientLocale);
}
emitNotification() {
const raw = {
data: {
type: Notifications.ItemMeta.Type.Default,
mode: Notifications.ItemMeta.Mode.AutoDismiss,
title: "Info - AutoDismiss",
data: "Lorem Ipsum Dolor"
}
};
agentxJsApi.notifications.add(raw);
}
render() {
return html`
<div class="container">
<h1>Custom Component Contents</h1>
<md-tabs>
<md-tab slot="tab">Request Data</md-tab>
<md-tab-panel slot="panel">
<div class="action-container">
<h2>Monitor data output in console log</h2>
<md-button
@button-click=${() => this.getAgentInfo()}
>Get latest Agent info</md-button
>
<md-button
@button-click=${() => this.getClientLocale()}
>Get current Locale</md-button
>
<md-button
@button-click=${() => this.changeState("Idle")}
>Change State to Idle</md-button
>
<md-button
@button-click=${() => this.changeState("Available")}
>Change State to Available</md-button
>
<md-button
@button-click=${() => this.getAgentAddressBooks()}
>Fetch Address Books</md-button
>
</div>
</md-tab-panel>
<md-tab slot="tab">Notifications</md-tab>
<md-tab-panel slot="panel">
<div class="action-container">
<h2>Notifications</h2>
<md-button
@button-click=${() => this.emitNotification()}
>Emit Notification</md-button
>
<md-label>Notifications Added: <span>${this.notificationsAdded}</span></md-label>
<md-label>Notifications Pending: <span>${this.notificationsPending}</span></md-label>
<md-label>Notifications Activated: <span>${this.notificationsActivated}</span></md-label>
<md-label>Notifications Deactivated: <span>${this.notificationsDeactivated}</span></md-label>
</div>
</md-tab-panel>
<md-tab slot="tab">Two</md-tab>
<md-tab-panel slot="panel">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut
ultricies lorem sem, id placerat massa rutrum eu. Sed dui neque,
tincidunt quis sapien in, aliquam dignissim nulla. Vestibulum
mollis at orci ac facilisis. Sed ut aliquam nunc. Suspendisse eu
interdum odio. Sed libero dui, malesuada ac vulputate id,
vulputate vel nisi. Proin id egestas mi. Fusce ut sem nibh.
Vivamus aliquet accumsan feugiat. Etiam accumsan tortor quis
ultrices tempus. Aenean porta feugiat ex. Praesent dictum mauris
et dui posuere aliquet et non arcu. Sed eget aliquam elit. Nullam
ornare ipsum quis feugiat tincidunt. Nullam a libero sed enim
dictum convallis. Suspendisse egestas elit risus, at ultrices
massa blandit eget. Vivamus dapibus bibendum nisl, eget cursus
risus ultrices et. Quisque felis tortor, accumsan vel tempus quis,
rutrum sed urna. Nulla quis magna et eros facilisis blandit. Nunc
mattis urna eget diam accumsan, non vehicula est aliquet. Etiam
vestibulum dui neque, faucibus sollicitudin nibh vestibulum vel.
Nullam semper porta ipsum non varius. Vestibulum sollicitudin
ipsum mauris. Praesent quis nisi sagittis, malesuada lacus semper,
iaculis elit. Maecenas hendrerit quam ut felis pretium volutpat.
Nulla molestie et tellus ac tincidunt. Sed sodales ultrices
condimentum. Fusce quis rutrum dui, ut consectetur ante. Morbi
quis sem in ipsum tempor mollis. Curabitur ac risus sed quam
consequat faucibus quis nec neque. Nullam porttitor felis ut felis
cursus dignissim. Curabitur tincidunt tortor et pharetra
malesuada. Phasellus tempor ullamcorper scelerisque. Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Nulla porttitor ex
vel egestas tristique. Aenean molestie cursus tortor at cursus.
Sed interdum volutpat leo, sit amet placerat velit congue eu.
Vestibulum vitae consequat ex. Ut nec venenatis augue, in porta
massa. Curabitur quis porta felis, vel eleifend nisl. Nulla
facilisi. Integer sagittis felis nec lacinia rutrum. Etiam a
mauris eu nulla pulvinar auctor nec sit amet ex. Quisque turpis
ipsum, lacinia in ex ut, tempor tempus est. Vivamus a rutrum
velit. Donec eleifend fermentum sollicitudin. Quisque condimentum
mauris convallis viverra tempus. Ut enim quam, pulvinar et metus
interdum, sagittis ultricies dui. Aenean consectetur at risus eget
ornare. Mauris pretium consequat metus a vestibulum. Nulla sit
amet nisl eleifend, faucibus turpis at, mattis tellus. Aliquam
vehicula orci ac nisi elementum, vitae sollicitudin odio ultrices.
Proin in laoreet mi, vitae condimentum nibh. Nunc quis dictum
urna, at imperdiet augue. Donec congue tempus elit quis rhoncus.
Etiam orci quam, vestibulum egestas rutrum non, dapibus a justo.
</p>
</md-tab-panel>
</md-tabs>
<slot></slot>
</div>
`;
}
}