mirror of
https://github.com/akveo/ngx-admin.git
synced 2026-03-15 09:46:29 +01:00
feat: add a bunch of new Nebular demos (#1911)
This commit is contained in:
Denis Strigo
GitHub
parent
c594a5a4c5
commit
3f1f4c558b
185 changed files with 5176 additions and 422 deletions
190
src/app/pages/extra-components/chat/bot-replies.ts
Normal file
190
src/app/pages/extra-components/chat/bot-replies.ts
Normal file
|
|
@ -0,0 +1,190 @@
|
|||
const botAvatar: string = 'https://i.ytimg.com/vi/Erqi5ckVoEo/hqdefault.jpg';
|
||||
|
||||
export const gifsLinks: string[] = [
|
||||
'https://media.tenor.com/images/ac287fd06319e47b1533737662d5bfe8/tenor.gif',
|
||||
'https://i.gifer.com/no.gif',
|
||||
'https://techcrunch.com/wp-content/uploads/2015/08/safe_image.gif',
|
||||
'http://www.reactiongifs.com/r/wnd1.gif',
|
||||
];
|
||||
export const imageLinks: string[] = [
|
||||
'https://picsum.photos/320/240/?image=357',
|
||||
'https://picsum.photos/320/240/?image=556',
|
||||
'https://picsum.photos/320/240/?image=339',
|
||||
'https://picsum.photos/320/240/?image=387',
|
||||
'https://picsum.photos/320/240/?image=30',
|
||||
'https://picsum.photos/320/240/?image=271',
|
||||
];
|
||||
const fileLink: string = 'http://google.com';
|
||||
|
||||
export const botReplies = [
|
||||
{
|
||||
regExp: /([H,h]ey)|([H,h]i)/g,
|
||||
answerArray: ['Hello!', 'Yes?', 'Yes, milord?', 'What can I do for you?'],
|
||||
type: 'text',
|
||||
reply: {
|
||||
text: '',
|
||||
reply: false,
|
||||
date: new Date(),
|
||||
user: {
|
||||
name: 'Bot',
|
||||
avatar: botAvatar,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
regExp: /([H,h]elp)/g,
|
||||
answerArray: [`No problem! Try sending a message containing word "hey", "image",
|
||||
"gif", "file", "map", "quote", "file group" to see different message components`],
|
||||
type: 'text',
|
||||
reply: {
|
||||
text: '',
|
||||
reply: false,
|
||||
date: new Date(),
|
||||
user: {
|
||||
name: 'Bot',
|
||||
avatar: botAvatar,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
regExp: /([I,i]mage)|(IMAGE)|([P,p]ic)|(Picture)/g,
|
||||
answerArray: ['Hey look at this!', 'Ready to work', 'Yes, master.'],
|
||||
type: 'pic',
|
||||
reply: {
|
||||
text: '',
|
||||
reply: false,
|
||||
date: new Date(),
|
||||
type: 'file',
|
||||
files: [
|
||||
{
|
||||
url: '',
|
||||
type: 'image/jpeg',
|
||||
},
|
||||
],
|
||||
user: {
|
||||
name: 'Bot',
|
||||
avatar: botAvatar,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
regExp: /([G,g]if)|(GIF)/g,
|
||||
type: 'gif',
|
||||
answerArray: ['No problem', 'Well done', 'You got it man'],
|
||||
reply: {
|
||||
text: '',
|
||||
reply: false,
|
||||
date: new Date(),
|
||||
type: 'file',
|
||||
files: [
|
||||
{
|
||||
url: '',
|
||||
type: 'image/gif',
|
||||
},
|
||||
],
|
||||
user: {
|
||||
name: 'Bot',
|
||||
avatar: botAvatar,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
regExp: /([F,f]ile group)|(FILE)/g,
|
||||
type: 'group',
|
||||
answerArray: ['Take it!', 'Job Done.', 'As you wish'],
|
||||
reply: {
|
||||
text: '',
|
||||
reply: false,
|
||||
date: new Date(),
|
||||
type: 'file',
|
||||
files: [
|
||||
{
|
||||
url: fileLink,
|
||||
icon: 'nb-compose',
|
||||
},
|
||||
{
|
||||
url: '',
|
||||
type: 'image/gif',
|
||||
},
|
||||
{
|
||||
url: '',
|
||||
type: 'image/jpeg',
|
||||
},
|
||||
],
|
||||
icon: 'nb-compose',
|
||||
user: {
|
||||
name: 'Bot',
|
||||
avatar: botAvatar,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
regExp: /([F,f]ile)|(FILE)/g,
|
||||
type: 'file',
|
||||
answerArray: ['Take it!', 'Job Done.', 'As you wish'],
|
||||
reply: {
|
||||
text: '',
|
||||
reply: false,
|
||||
date: new Date(),
|
||||
type: 'file',
|
||||
files: [
|
||||
{
|
||||
url: fileLink,
|
||||
icon: 'nb-compose',
|
||||
},
|
||||
],
|
||||
icon: 'nb-compose',
|
||||
user: {
|
||||
name: 'Bot',
|
||||
avatar: botAvatar,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
regExp: /([M,m]ap)|(MAP)/g,
|
||||
type: 'map',
|
||||
answerArray: ['Done.', 'My sight is yours.', 'I shall be your eyes.'],
|
||||
reply: {
|
||||
text: '',
|
||||
reply: false,
|
||||
date: new Date(),
|
||||
type: 'map',
|
||||
latitude: 53.914321,
|
||||
longitude: 27.5998355,
|
||||
user: {
|
||||
name: 'Bot',
|
||||
avatar: botAvatar,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
regExp: /([Q,q]uote)|(QUOTE)/g,
|
||||
type: 'quote',
|
||||
answerArray: ['Quoted!', 'Say no more.', 'I gladly obey.'],
|
||||
reply: {
|
||||
text: '',
|
||||
reply: false,
|
||||
date: new Date(),
|
||||
type: 'quote',
|
||||
quote: '',
|
||||
user: {
|
||||
name: 'Bot',
|
||||
avatar: botAvatar,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
regExp: /(.*)/g,
|
||||
answerArray: ['Hello there! Try typing "help"'],
|
||||
type: 'text',
|
||||
reply: {
|
||||
text: '',
|
||||
reply: false,
|
||||
date: new Date(),
|
||||
user: {
|
||||
name: 'Bot',
|
||||
avatar: botAvatar,
|
||||
},
|
||||
},
|
||||
},
|
||||
];
|
||||
39
src/app/pages/extra-components/chat/chat.component.html
Normal file
39
src/app/pages/extra-components/chat/chat.component.html
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
<nb-card>
|
||||
<nb-card-header>
|
||||
<p class="chart-description">Here's a complete example build in a bot-like app. Type <code>help</code> to be able to receive different message types.
|
||||
Enjoy the conversation and the beautiful UI.</p>
|
||||
</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="row">
|
||||
<div class="chat-container col-md-12 col-lg-6 col-xxxl-6">
|
||||
<nb-chat title="Nebular Conversational UI" size="large" status="success">
|
||||
<nb-chat-message *ngFor="let msg of messages"
|
||||
[type]="msg.type"
|
||||
[message]="msg.text"
|
||||
[reply]="msg.reply"
|
||||
[sender]="msg.user.name"
|
||||
[date]="msg.date"
|
||||
[files]="msg.files"
|
||||
[quote]="msg.quote"
|
||||
[latitude]="msg.latitude"
|
||||
[longitude]="msg.longitude"
|
||||
[avatar]="msg.user.avatar">
|
||||
</nb-chat-message>
|
||||
<nb-chat-form (send)="sendMessage($event)" [dropFiles]="true">
|
||||
</nb-chat-form>
|
||||
</nb-chat>
|
||||
</div>
|
||||
<div class="chat-container col-md-12 col-lg-6 col-xxxl-6">
|
||||
<div class="chart-features">
|
||||
<p>Main features:</p>
|
||||
<ul>
|
||||
<li>different message types support (text, image, file, file group, map, etc)</li>
|
||||
<li>drag & drop for images and files with preview</li>
|
||||
<li>different UI styles</li>
|
||||
<li>custom action buttons (coming soon)</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
59
src/app/pages/extra-components/chat/chat.component.scss
Normal file
59
src/app/pages/extra-components/chat/chat.component.scss
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
@import '~bootstrap/scss/mixins/breakpoints';
|
||||
@import '~@nebular/theme/styles/global/breakpoints';
|
||||
|
||||
@import '../../../@theme/styles/themes';
|
||||
|
||||
@include nb-install-component() {
|
||||
/deep/ nb-layout-column {
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
nb-chat {
|
||||
margin: 3rem auto 0;
|
||||
width: 500px;
|
||||
|
||||
}
|
||||
|
||||
.chat-container {
|
||||
margin-bottom: 2rem;
|
||||
font-size: nb-theme(font-size-xlg);
|
||||
|
||||
li {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.chart-description {
|
||||
font-size: nb-theme(font-size-xlg);
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
width: 52%;
|
||||
}
|
||||
|
||||
.chart-features {
|
||||
margin-top: 2.75rem;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xxl) {
|
||||
nb-chat {
|
||||
width: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
nb-chat {
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.chart-description {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(is) {
|
||||
nb-chat {
|
||||
width: 300px;
|
||||
}
|
||||
}
|
||||
}
|
||||
44
src/app/pages/extra-components/chat/chat.component.ts
Normal file
44
src/app/pages/extra-components/chat/chat.component.ts
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
import { ChatService } from './chat.service';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-chat',
|
||||
templateUrl: 'chat.component.html',
|
||||
styleUrls: ['chat.component.scss'],
|
||||
providers: [ ChatService ],
|
||||
})
|
||||
export class ChatComponent {
|
||||
|
||||
messages: any[];
|
||||
|
||||
constructor(protected chatService: ChatService) {
|
||||
this.messages = this.chatService.loadMessages();
|
||||
}
|
||||
|
||||
sendMessage(event: any) {
|
||||
const files = !event.files ? [] : event.files.map((file) => {
|
||||
return {
|
||||
url: file.src,
|
||||
type: file.type,
|
||||
icon: 'nb-compose',
|
||||
};
|
||||
});
|
||||
|
||||
this.messages.push({
|
||||
text: event.message,
|
||||
date: new Date(),
|
||||
reply: true,
|
||||
type: files.length ? 'file' : 'text',
|
||||
files: files,
|
||||
user: {
|
||||
name: 'Jonh Doe',
|
||||
avatar: 'https://i.gifer.com/no.gif',
|
||||
},
|
||||
});
|
||||
const botReply = this.chatService.reply(event.message);
|
||||
if (botReply) {
|
||||
setTimeout(() => { this.messages.push(botReply); }, 500);
|
||||
}
|
||||
}
|
||||
}
|
||||
42
src/app/pages/extra-components/chat/chat.service.ts
Normal file
42
src/app/pages/extra-components/chat/chat.service.ts
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
import { Injectable } from '@angular/core';
|
||||
|
||||
import { messages } from './messages';
|
||||
import { botReplies, gifsLinks, imageLinks } from './bot-replies';
|
||||
|
||||
@Injectable()
|
||||
export class ChatService {
|
||||
|
||||
|
||||
loadMessages() {
|
||||
return messages;
|
||||
}
|
||||
|
||||
loadBotReplies() {
|
||||
return botReplies;
|
||||
}
|
||||
|
||||
reply(message: string) {
|
||||
const botReply: any = this.loadBotReplies()
|
||||
.find((reply: any) => message.search(reply.regExp) !== -1);
|
||||
|
||||
if (botReply.reply.type === 'quote') {
|
||||
botReply.reply.quote = message;
|
||||
}
|
||||
|
||||
if (botReply.type === 'gif') {
|
||||
botReply.reply.files[0].url = gifsLinks[Math.floor(Math.random() * gifsLinks.length)];
|
||||
}
|
||||
|
||||
if (botReply.type === 'pic') {
|
||||
botReply.reply.files[0].url = imageLinks[Math.floor(Math.random() * imageLinks.length)];
|
||||
}
|
||||
|
||||
if (botReply.type === 'group') {
|
||||
botReply.reply.files[1].url = gifsLinks[Math.floor(Math.random() * gifsLinks.length)];
|
||||
botReply.reply.files[2].url = imageLinks[Math.floor(Math.random() * imageLinks.length)];
|
||||
}
|
||||
|
||||
botReply.reply.text = botReply.answerArray[Math.floor(Math.random() * botReply.answerArray.length)];
|
||||
return { ...botReply.reply };
|
||||
}
|
||||
}
|
||||
85
src/app/pages/extra-components/chat/messages.ts
Normal file
85
src/app/pages/extra-components/chat/messages.ts
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
export const messages = [
|
||||
{
|
||||
text: 'Hello, how are you? This should be a very long message so that we can test how it fit into the screen.',
|
||||
reply: false,
|
||||
date: new Date(),
|
||||
user: {
|
||||
name: 'John Doe',
|
||||
avatar: 'https://i.gifer.com/no.gif',
|
||||
},
|
||||
},
|
||||
{
|
||||
text: 'Hello, how are you? This should be a very long message so that we can test how it fit into the screen.',
|
||||
reply: true,
|
||||
date: new Date(),
|
||||
user: {
|
||||
name: 'John Doe',
|
||||
avatar: 'https://i.gifer.com/no.gif',
|
||||
},
|
||||
},
|
||||
{
|
||||
text: 'Hello, how are you?',
|
||||
reply: false,
|
||||
date: new Date(),
|
||||
user: {
|
||||
name: 'John Doe',
|
||||
avatar: '',
|
||||
},
|
||||
},
|
||||
{
|
||||
text: 'Hey looks at that pic I just found!',
|
||||
reply: false,
|
||||
date: new Date(),
|
||||
type: 'file',
|
||||
files: [
|
||||
{
|
||||
url: 'https://i.gifer.com/no.gif',
|
||||
type: 'image/jpeg',
|
||||
icon: false,
|
||||
},
|
||||
],
|
||||
user: {
|
||||
name: 'John Doe',
|
||||
avatar: '',
|
||||
},
|
||||
},
|
||||
{
|
||||
text: 'What do you mean by that?',
|
||||
reply: false,
|
||||
date: new Date(),
|
||||
type: 'quote',
|
||||
quote: 'Hello, how are you? This should be a very long message so that we can test how it fit into the screen.',
|
||||
user: {
|
||||
name: 'John Doe',
|
||||
avatar: '',
|
||||
},
|
||||
},
|
||||
{
|
||||
text: 'Attached is an archive I mentioned',
|
||||
reply: true,
|
||||
date: new Date(),
|
||||
type: 'file',
|
||||
files: [
|
||||
{
|
||||
url: 'https://i.gifer.com/no.gif',
|
||||
icon: 'nb-compose',
|
||||
},
|
||||
],
|
||||
user: {
|
||||
name: 'John Doe',
|
||||
avatar: '',
|
||||
},
|
||||
},
|
||||
{
|
||||
text: 'Meet me there',
|
||||
reply: false,
|
||||
date: new Date(),
|
||||
type: 'map',
|
||||
latitude: 40.714728,
|
||||
longitude: -73.998672,
|
||||
user: {
|
||||
name: 'John Doe',
|
||||
avatar: '',
|
||||
},
|
||||
},
|
||||
];
|
||||
Loading…
Add table
Add a link
Reference in a new issue