File: /var/www/html/labs/chatbot-v-4/portal.php
<style>
#chat_convo{
max-height: 100vh;
}
#chat_convo .direct-chat-messages{
min-height: 250px;
height: inherit;
}
#chat_convo .card-body {
overflow: auto;
min-height:480px;
background: #fff;
}
.cm-radio
{
margin:10px;
}
#uploadthum
{
width: 100px;
height: 100px;
}
/* .direct-chat-primary .right>.direct-chat-text {
background-color: #f0522a;
border-color: #f0522a;
color: #fff;
float: right;
} */
.direct-chat-primary .right>.direct-chat-text {
background-color: #ffc5b7;
border-color: #f0522a;
color: #000;
/* width: 50%; */
float: right;
}
.right .direct-chat-text {
margin-left: 0;
margin-right: 15px;
}
/* .direct-chat-text {
border-radius: 0.3rem;
background-color: #d2d6de;
border: 1px solid #d2d6de;
color: #444;
margin: 5px 0 0 50px;
padding: 5px 10px;
position: relative;
} */
.direct-chat-text {
border-radius: 0.3rem;
background-color: #eef3fd;
border: 1px solid #d2d6de;
color: #444;
margin: 5px 0 0 50px;
padding: 5px 10px;
position: relative;
}
.btn-outline-secondary:hover {
color: #000;
background-color: #ffc5b7;
border-color: #f0522a;
}
.disabled {
pointer-events: none !important;
cursor: default !important;
}
.progress {
display: -ms-flexbox;
display: flex;
height: 20px;
overflow: hidden;
font-size: .75rem;
background-color: #e9ecef;
border-radius: 0.25rem;
margin-top: 10px;
}
.progress-bar {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: center;
justify-content: center;
overflow: hidden;
color: #fff;
text-align: center;
white-space: nowrap;
background-color: #28a745;
transition: width .6s ease;
font-size: 16px;
text-align: center;
}
</style>
<!-- Select2 CSS -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Select2 JS -->
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-lg-8 <?php echo isMobileDevice() == false ? "offset-2" : '' ?>">
<div class="card direct-chat direct-chat-primary" id="chat_convo">
<div class="card-header ui-sortable-handle" style="cursor: move;">
<h3 class="card-title">Ask Me</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse">
<i class="fas fa-minus"></i>
</button>
</div>
</div>
<!-- /.card-header -->
<div class="card-body">
<!-- Conversations are loaded here -->
<div class="direct-chat-messages">
<!-- Message. Default to the left -->
<div class="direct-chat-msg mr-4">
<img class="direct-chat-img border-1 border-primary" src="<?php echo validate_image($_settings->info('bot_avatar')) ?>" alt="message user image">
<!-- /.direct-chat-img -->
<div class="direct-chat-text">
<?php echo $_settings->info('intro') ?>
</div>
<!-- /.direct-chat-text -->
</div>
<!-- /.direct-chat-msg -->
<!-- /.contacts-list -->
</div>
<div class="end-convo"></div>
<!-- /.direct-chat-pane -->
</div>
<!-- /.card-body -->
<div class="card-footer">
<form id="send_chat" method="post">
<div class="input-group">
<textarea type="text" name="message" placeholder="Type Message ..." class="form-control" required=""></textarea>
<span class="input-group-append">
<button type="submit" id="submit_send" class="btn btn-primary">Send</button>
</span>
</div>
</form>
</div>
<!-- /.card-footer-->
</div>
</div>
</div>
</div>
<div class="d-none" id="user_chat">
<div class="direct-chat-msg right ml-4">
<img class="direct-chat-img border-1 border-primary" src="<?php echo validate_image($_settings->info('user_avatar')) ?>" alt="message user image">
<!-- /.direct-chat-img -->
<div class="direct-chat-text"></div>
<!-- /.direct-chat-text -->
</div>
</div>
<div class="d-none" id="bot_chat">
<div class="direct-chat-msg mr-4">
<img class="direct-chat-img border-1 border-primary" src="<?php echo validate_image($_settings->info('bot_avatar')) ?>" alt="message user image">
<!-- /.direct-chat-img -->
<div class="direct-chat-text"></div>
<input type="hidden" value="" id="pre_question_id" />
<input type="hidden" value="" id="chatId" />
<!-- /.direct-chat-text -->
</div>
</div>
<!-- <input list="animals" name="animal" id="someid">
<datalist id="animals">
<option label="Alaskan Malamute" data-id="d8c" value="Dog">
<option label="Siberian Husky" data-id="w30" value="Dog">
<option label="Aegean" data-id="rxx" value="Cat">
</datalist>
<span id="p">Click</span> -->
<script type="text/javascript">
$(document).ready(function(){
$('.4000').on('change', function() {
alert( $(this).find(":selected").val() );
});
$(".selUser").select2();
$('[name="message"]').keypress(function(e){
console.log()
if(e.which === 13 && e.originalEvent.shiftKey == false){
$('#send_chat').submit()
return false;
}
})
$('#send_chat').submit(function(e){
e.preventDefault();
$("#selUser").select2();
var chatId = "<?php echo time(); ?>";
$('#chatId').val(chatId);
// localStorage.setItem("chatId", chatId);
var message = $('[name="message"]').val();
if(message == '' || message == null) return false;
var preQuestionId = $('#pre_question_id').val();
if(preQuestionId == '2000' && message != '' )
{
if(message.trim() == "")
{
message = "Please enter valid number";
var bot_chat = $('#bot_chat').clone();
bot_chat.find('.direct-chat-text').html(message);
$('#chat_convo .direct-chat-messages').append(bot_chat.html());
$("#chat_convo .card-body").animate({ scrollTop: $("#chat_convo .card-body").prop('scrollHeight') }, "fast");
return false;
}
else if(isNaN(message))
{
message = "Please enter valid number";
var bot_chat = $('#bot_chat').clone();
bot_chat.find('.direct-chat-text').html(message);
$('#chat_convo .direct-chat-messages').append(bot_chat.html());
$("#chat_convo .card-body").animate({ scrollTop: $("#chat_convo .card-body").prop('scrollHeight') }, "fast");
return false;
}
else if(message.length!=10){
message = "Please enter 10 digit mobile number";
var bot_chat = $('#bot_chat').clone();
bot_chat.find('.direct-chat-text').html(message);
$('#chat_convo .direct-chat-messages').append(bot_chat.html());
$("#chat_convo .card-body").animate({ scrollTop: $("#chat_convo .card-body").prop('scrollHeight') }, "fast");
return false;
}
}
var uchat = $('#user_chat').clone();
uchat.find('.direct-chat-text').html(message);
$('#chat_convo .direct-chat-messages').append(uchat.html());
$('[name="message"]').val('')
$("#chat_convo .card-body").animate({ scrollTop: $("#chat_convo .card-body").prop('scrollHeight') }, "fast");
$('[name="message"]').attr('readonly', false);
if(preQuestionId == '9000' && message != '' )
{
$('[name="message"]').attr('readonly', true);
$('#submit_send').attr('disabled', 'disabled');
$('.'+preQuestionId).addClass('disabled');
}
$.ajax({
url:_base_url_+"classes/Master.php?f=get_response",
method:'POST',
data:{message:message, chatId:chatId, option_value:'', preQuestionId:preQuestionId},
error: err=>{
console.log(err)
alert_toast("An error occured.",'error');
end_loader();
},
success:function(resp){
if(resp){
resp = JSON.parse(resp)
if(resp.status == 'success'){
var questionId = resp.questionId;
$('#pre_question_id').val(questionId);
if(resp.questiontype == "textbox")
{
//$('[name="message"]').attr('readonly', 'true');
$('[name="message"]').attr('readonly', false);
$('#submit_send').removeAttr('disabled');
}
else if(resp.questiontype == "radio" || resp.questiontype == "select" || resp.questiontype == "file")
{
$('[name="message"]').attr('readonly', true);
$('#submit_send').attr('disabled', 'disabled');
}
var bot_chat = $('#bot_chat').clone();
bot_chat.find('.direct-chat-text').html(resp.message);
$('#chat_convo .direct-chat-messages').append(bot_chat.html());
$("#chat_convo .card-body").animate({ scrollTop: $("#chat_convo .card-body").prop('scrollHeight') }, "fast");
}
}
}
})
})
})
function selectAnsRadio(str='',chatId='')
{
//var sff = localStorage.getItem("chatId");
var message = str;
if(message == '' || message == null) return false;
var preQuestionId = $('#pre_question_id').val();
var uchat = $('#user_chat').clone();
uchat.find('.direct-chat-text').html(message);
$('#chat_convo .direct-chat-messages').append(uchat.html());
$('[name="message"]').val('')
$("#chat_convo .card-body").animate({ scrollTop: $("#chat_convo .card-body").prop('scrollHeight') }, "fast");
$('[name="message"]').attr('readonly', false);
if(preQuestionId == '9000' && str == 'Yes')
{
//$('[name="message"]').attr('readonly', 'true');
$('[name="message"]').attr('readonly', false);
$('#submit_send').removeAttr('disabled');
return false;
}
$('.'+preQuestionId).removeClass('disabled');
if(preQuestionId == '4000')
{
$('.4000').attr('disabled', 'disabled');
}
if(preQuestionId == '5000' && str == 'Yes')
{
$('.4000').attr('disabled', 'disabled');
}
$.ajax({
url:_base_url_+"classes/Master.php?f=get_response",
method:'POST',
data:{message:message, chatId:chatId, option_value:str, preQuestionId: preQuestionId},
error: err=>{
console.log(err)
alert_toast("An error occured.",'error');
end_loader();
},
success:function(resp){
if(resp){
resp = JSON.parse(resp)
if(resp.status == 'success'){
var questionId = resp.questionId;
var end = resp.end;
$('#pre_question_id').val(questionId);
$('.'+preQuestionId).addClass('disabled');
if(resp.questiontype == "textbox")
{
//$('[name="message"]').attr('readonly', 'true');
$('[name="message"]').attr('readonly', false);
$('#submit_send').removeAttr('disabled');
}
else if(resp.questiontype == "radio" || resp.questiontype == "select" || resp.questiontype == "file")
{
$('[name="message"]').attr('readonly', true);
$('#submit_send').attr('disabled', 'disabled');
}
if(preQuestionId == '7000')
{
$('[name="message"]').attr('readonly', false);
$('#submit_send').removeAttr('disabled');
}
if(end == 'yes')
{
$('[name="message"]').attr('readonly', true);
$('#submit_send').attr('disabled', 'disabled');
}
var bot_chat = $('#bot_chat').clone();
bot_chat.find('.direct-chat-text').html(resp.message);
$('#chat_convo .direct-chat-messages').append(bot_chat.html());
$("#chat_convo .card-body").animate({ scrollTop: $("#chat_convo .card-body").prop('scrollHeight') }, "fast");
}
}
}
})
}
getFactoryList();
function getFactoryList()
{
let dropdown = $('#locality-dropdown');
dropdown.append('<option selected="true" disabled>Please wait...</option>');
dropdown.prop('selectedIndex', 0);
$.get('ajax_factory_list.php', // url
function (data, textStatus, jqXHR) { // success callback
//alert('status: ' + textStatus + ', data:' + data);
var response = JSON.parse(data);
var lengthJson = response.length;
if(lengthJson > 0){
dropdown.html("");
dropdown.append('<option selected="true" disabled>Choose Factory</option>');
dropdown.prop('selectedIndex', 0);
$.each(response, function(i, option) {
$('#locality-dropdown').append($('<option/>').attr("value", option.Id).attr("data-id", option.BillingStreet).text(option.Name+" ("+option.BillingCity+") "));
});
}
});
}
$(function() {
$('#browser').on('input',function() {
var opt = $('option[value="'+$(this).val()+'"]');
alert(opt.length ? opt.attr('value') : 'NO OPTION');
});
});
function selectFactoryName(str='')
{
var factoryId = $("#browsers option[value='" + $('#browser').val() + "']").attr('data-id');
var factoryName = $("#browsers option[value='" + $('#browser').val() + "']").attr('value');
var strvalue = str.value;
var option = Array.prototype.find.call(str.list.options, function(option) {
return option.value === strvalue;
});
var factoryAddress = "";
if(option.getAttribute("data-id"))
{
factoryId = option.getAttribute("data-id");
factoryAddress = option.getAttribute("data-address");
factoryName = str.value;
}
factoryId = factoryId ? factoryId : '';
var chatId = $('#chatId').val();
if(factoryId)
{
$('.4000').attr('disabled', 'disabled');
}
var message = factoryName;
var messageTemp = message;
if(factoryAddress)
{
var messageTemp = factoryName+" <br/> (Address: "+factoryAddress+")";
}
if(message == '' || message == null) return false;
var uchat = $('#user_chat').clone();
uchat.find('.direct-chat-text').html(messageTemp);
$('#chat_convo .direct-chat-messages').append(uchat.html());
$('[name="message"]').val('')
$("#chat_convo .card-body").animate({ scrollTop: $("#chat_convo .card-body").prop('scrollHeight') }, "fast");
$('[name="message"]').attr('readonly', false);
var preQuestionId = $('#pre_question_id').val();
$.ajax({
url:_base_url_+"classes/Master.php?f=get_response",
method:'POST',
data:{message:message, chatId:chatId, option_value:factoryId, preQuestionId: preQuestionId, factoryId:factoryId, factoryAddress:factoryAddress},
error: err=>{
console.log(err)
alert_toast("An error occured.",'error');
end_loader();
},
success:function(resp){
if(resp){
resp = JSON.parse(resp)
if(resp.status == 'success'){
var questionId = resp.questionId;
var end = resp.end;
$('#pre_question_id').val(questionId);
if(resp.questiontype == "textbox")
{
//$('[name="message"]').attr('readonly', 'true');
$('[name="message"]').attr('readonly', false);
$('#submit_send').removeAttr('disabled');
}
else if(resp.questiontype == "radio" || resp.questiontype == "select" || resp.questiontype == "file")
{
$('[name="message"]').attr('readonly', true);
$('#submit_send').attr('disabled', 'disabled');
}
if(end == 'yes')
{
$('[name="message"]').attr('readonly', true);
$('#submit_send').attr('disabled', 'disabled');
}
var bot_chat = $('#bot_chat').clone();
bot_chat.find('.direct-chat-text').html(resp.message);
$('#chat_convo .direct-chat-messages').append(bot_chat.html());
$("#chat_convo .card-body").animate({ scrollTop: $("#chat_convo .card-body").prop('scrollHeight') }, "fast");
}
}
}
})
}
function fileUploadSubmit()
{
var file_data = $('#fileToUpload').prop('files')[0];
var form_data = new FormData();
form_data.append('file', file_data);
//alert(form_data);
$.ajax({
xhr: function() {
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener("progress", function(evt) {
if (evt.lengthComputable) {
var percentComplete = ((evt.loaded / evt.total) * 100);
$(".progress-bar").width(percentComplete + '%');
$(".progress-bar").html(percentComplete+'%');
}
}, false);
return xhr;
},
url: 's3.php', // <-- point to server-side PHP script
dataType: 'text', // <-- what to expect back from the PHP script, if anything
cache: false,
contentType: false,
processData: false,
data: form_data,
type: 'post',
beforeSend: function(){
$(".progress-bar").width('0%');
},
success: function(response){
//alert(response); // <-- display response from the PHP script, if any
var json_response = JSON.parse(response);
var s3url = json_response.ObjectURL;
var img = "<img id='uploadthum' src=\"" + s3url + "\">";
if(s3url)
{
$('#fileToUpload').attr('disabled', 'disabled');
$('.8000').attr('disabled', 'disabled');
}
//$("#imageBox").html("<img id='uploadthum' src=\"" + s3url + "\">");
var chatId = $('#chatId').val();
var message = s3url;
if(message == '' || message == null) return false;
var uchat = $('#user_chat').clone();
uchat.find('.direct-chat-text').html(img);
$('#chat_convo .direct-chat-messages').append(uchat.html());
$('[name="message"]').val('')
$("#chat_convo .card-body").animate({ scrollTop: $("#chat_convo .card-body").prop('scrollHeight') }, "fast");
$('[name="message"]').attr('readonly', false);
var preQuestionId = $('#pre_question_id').val();
$.ajax({
url:_base_url_+"classes/Master.php?f=get_response",
method:'POST',
data:{message:message, chatId:chatId, option_value:s3url, preQuestionId: preQuestionId},
error: err=>{
console.log(err)
alert_toast("An error occured.",'error');
end_loader();
},
success:function(resp){
if(resp){
resp = JSON.parse(resp)
if(resp.status == 'success'){
var questionId = resp.questionId;
var end = resp.end;
$('#pre_question_id').val(questionId);
if(resp.questiontype == "textbox")
{
//$('[name="message"]').attr('readonly', 'true');
$('[name="message"]').attr('readonly', false);
}
else if(resp.questiontype == "radio")
{
$('[name="message"]').attr('readonly', true);
}
if(end == 'yes')
{
$('[name="message"]').attr('readonly', true);
$('#submit_send').attr('disabled', 'disabled');
}
var bot_chat = $('#bot_chat').clone();
bot_chat.find('.direct-chat-text').html(resp.message);
$('#chat_convo .direct-chat-messages').append(bot_chat.html());
$("#chat_convo .card-body").animate({ scrollTop: $("#chat_convo .card-body").prop('scrollHeight') }, "fast");
}
}
}
})
}
});
}
</script>
<script type="text/javascript">
// var userLang = navigator.language || navigator.userLanguage;
// alert ("The language is: " + userLang);
</script>