<?php include('../config/database_connection.php'); include_once'../../template/header.php'; //session_start(); if(!isset($_SESSION['user_id'])) { header("location:login.php"); } ?> <h5>KONSUL ONLINE</h5> <ahref="../../dashboard.php"class="btn btn-light"><span class="fa fa-arrow-left"></span>Balik</a> <div class="alert alert-warning"role="alert"> "selamat datang di halaman konsul online megatim1, kamu bisa berkomunikasi dengan pengguna yang sama disini" </div> <div class="row"> <div class="col-md-3 col-sm-3"> <input type="hidden"id="is_active_group_chat_window"value="no"/> <button type="button" name="group_chat"id="group_chat"class="btn btn-primary">Butuh Jawaban Cepat?</button> </div> <div class="col-md-3 col-sm-3"> <palign="right"><?phpecho$_SESSION['username'];?>-<ahref="logout.php">Logout</a></p> </div> </div> <div class="table table-responsive-sm "> <div id="user_details"></div> <div id="user_model_details"></div> </div> </div> </body> </html> <style> .chat_message_area { position:relative; width:100%; height:auto; background-color:#FFF; border:1px solid#CCC; border-radius:3px; } #group_chat_message { width:100%; height:auto; min-height:80px; overflow:auto; padding:6px24px6px12px; } .image_upload { position:absolute; top:3px; right:3px; } .image_upload > form > input { display: none; } .image_upload img { width:24px; cursor:pointer; } </style> <div id="group_chat_dialog"title="Terhubung dengan nfChat "> <div id="group_chat_history"style="height:400px; border:1px solid #ccc; overflow-y: scroll; margin-bottom:24px; padding:16px;"> </div> <div class="form-group"> <!--<textarea name="group_chat_message"id="group_chat_message"class="form-control"></textarea>!--> <div class="chat_message_area"> <div id="group_chat_message"contenteditable> </div> <div class="image_upload"> <form id="uploadImage" method="post"action="upload.php"> <label for="uploadFile"><img src="img/upload.png"/></label> <input type="file"name="uploadFile"id="uploadFile"accept=".jpg, .png"/> </form> </div> </div> </div> <div class="form-group"align="right"> <button type="button"name="send_group_chat"id="send_group_chat"class="btn btn-info btn-sm"><span class="fa fa-paper-plane"></span>Kirim</button> </div> </div> <script> $(document).ready(function(){ fetch_user(); setInterval(function(){ update_last_activity(); fetch_user(); update_chat_history_data(); fetch_group_chat_history(); },5000); function fetch_user() { $.ajax({ url:"fetch_user.php", method:"POST", success:function(data){ $('#user_details').html(data); } }) } function update_last_activity() { $.ajax({ url:"update_last_activity.php", success:function() { } }) } function make_chat_dialog_box(to_user_id,to_user_name) { var modal_content='<div id="user_dialog_'+to_user_id+'" class="user_dialog" title="Terhubung dengan : '+to_user_name+'">'; modal_content +='<div style="height:400px;border:1px solid #ccc;overflow-y:scroll;margin-bottom:24px;padding:16px;" class="chat_history" data-touserid="'+to_user_id+'" id="chat_history_'+to_user_id+'">'; modal_content+=fetch_user_chat_history(to_user_id); modal_content +='</div>'; modal_content+='<div class="form-group">'; modal_content+='<textarea name="chat_message_'+to_user_id+'" id="chat_message_'+to_user_id+'" class="form-control chat_message" placeholder="Tulis pesan kamu"></textarea>'; modal_content+='</div><div class="form-group" align="right">'; modal_content+='<button type="button" name="send_chat" id="'+to_user_id+'" class="btn btn-info send_chat"><span class="fa fa-paper-plane"></span> Kirim</button></div></div>'; $('#user_model_details').html(modal_content); } $(document).on('click','.start_chat',function(){ var to_user_id=$(this).data('touserid'); var to_user_name= $(this).data('tousername'); make_chat_dialog_box(to_user_id,to_user_name); $("#user_dialog_"+to_user_id).dialog({ autoOpen:false, width:400 }); $('#user_dialog_'+to_user_id).dialog('open'); $('#chat_message_'+to_user_id).emojioneArea({ pickerPosition:"top", toneStyle:"bullet" }); }); $(document).on('click','.send_chat', function(){ var to_user_id=$(this).attr('id'); var chat_message=$('#chat_message_'+to_user_id).val(); $.ajax({ url:"insert_chat.php", method:"POST", data:{to_user_id:to_user_id,chat_message:chat_message}, success:function(data) { //$('#chat_message_'+to_user_id).val(''); var element=$('#chat_message_'+to_user_id).emojioneArea(); element[0].emojioneArea.setText(''); $('#chat_history_'+to_user_id).html(data); } }) }); function fetch_user_chat_history(to_user_id) { $.ajax({ url:"fetch_user_chat_history.php", method:"POST", data:{to_user_id:to_user_id}, success:function(data){ $('#chat_history_'+to_user_id).html(data); } }) } function update_chat_history_data() { $('.chat_history').each(function(){ var to_user_id=$(this).data('touserid'); fetch_user_chat_history(to_user_id); }); } $(document).on('click','.ui-button-icon',function(){ $('.user_dialog').dialog('destroy').remove(); $('#is_active_group_chat_window').val('no'); }); $(document).on('focus','.chat_message',function(){ var is_type='yes'; $.ajax({ url:"update_is_type_status.php", method:"POST", data:{is_type:is_type}, success:function() { } }) }); $(document).on('blur','.chat_message',function(){ var is_type='no'; $.ajax({ url:"update_is_type_status.php", method:"POST", data:{is_type:is_type}, success:function() { } }) }); $('#group_chat_dialog').dialog({ autoOpen:false, width:400 }); $('#group_chat').click(function(){ $('#group_chat_dialog').dialog('open'); $('#is_active_group_chat_window').val('yes'); fetch_group_chat_history(); }); $('#send_group_chat').click(function(){ var chat_message=$('#group_chat_message').html(); var action='insert_data'; if(chat_message!='') { $.ajax({ url:"group_chat.php", method:"POST", data:{chat_message:chat_message,action:action}, success:function(data){ $('#group_chat_message').html(''); $('#group_chat_history').html(data); } }) } }); function fetch_group_chat_history() { var group_chat_dialog_active=$('#is_active_group_chat_window').val(); var action="fetch_data"; if(group_chat_dialog_active=='yes') { $.ajax({ url:"group_chat.php", method:"POST", data:{action:action}, success:function(data) { $('#group_chat_history').html(data); } }) } } $('#uploadFile').on('change',function(){ $('#uploadImage').ajaxSubmit({ target:"#group_chat_message", resetForm:true }); }); $(document).on('click','.remove_chat',function(){ var chat_message_id=$(this).attr('id'); if(confirm("Apa kamu yakin akan menghapus chat ini?")) { $.ajax({ url:"remove_chat.php", method:"POST", data:{chat_message_id:chat_message_id}, success:function(data) { update_chat_history_data(); } }) } }); }); </script> <?php include_once'../../template/footer.php'; ?> |