Hi everyone.
For several months, though not a python expert, nor a web2py guru either, I 
have been working on a simple bot. I borrowed from this site: 
https://codepen.io/pavel_komiagin/pen/gaGJJK

My code is this:
{{extend "layout.html"}}

<html lang="en">
{{for q in question:}}
{{q=XML(unicode(q.quest.replace('\n','<br>')))}}
{{pass}}
{{for a in answer:}}
{{a=XML(unicode(a.message.replace('\n','<br>')))}}
{{pass}}

</style>
    <script src="http://code.jquery.com/jquery-1.11.1.min.js";></script>
    <script 
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js";></script>
</head>
<body>
    <div class="chat_window">
          <ul class="messages">
              {{for reply in replies:}}
              <li class="message left appeared">
                  <div>
                      {{=prettydate(reply.modified_on)}}
                  </div>
                  <div class="text_wrapper">
                      <div 
class="text">{{=XML(unicode(reply.quest.replace('\n','<br>')))}}</div>
                  </div>
              </li>
              <li class="message right appeared">
                  <div class="text_wrapper">
                      <div 
class="text">{{=XML(unicode(reply.message.replace('\n','<br>')))}}</div>
                  </div>
              </li>
              {{pass}}
          </ul>
        <div class="bottom_wrapper clearfix">
            <div class="message_input_wrapper">
                {{=form.custom.begin}}
                <textarea name="message" id="message_input" 
placeholder="Type your message here..."></textarea>
                <button>send</button>
                {{=form.custom.end}}
            </div>
        </div>
    </div>
    <div class="message_template">
        <li class="message">
            <div class="message-data-time" >{{=time.ctime()}}</div>
            <div class="text_wrapper">
                <div class="text"></div>
            </div>
        </li>
    </div>

<script type="text/javascript">
    (function () {
        var Message;
        Message = function (arg) {
            this.text = arg.text, this.message_side = arg.message_side;
            this.draw = function (_this) {
                return function () {
                    var $message;
                    $message = $($('.message_template').clone().html());
                    
$message.addClass(_this.message_side).find('.text').html(_this.text);
                    $('.messages').append($message);
                    return setTimeout(function () {
                        return $message.addClass('appeared');
                        }, 0);
                    };
                }(this);
            return this;
            };
        $(function () {
            var getMessageText, message_side, sendMessage;
            message_side = 'right';
            getMessageText = function () {
                var $message_input;
                $message_input = $('.message_input');
                return $message_input.val();
                };
            sendMessage = function (text) {
                var $messages, message;
                if (text.trim() === '') {
                    return;
                    }
                $('.message_input').val('');
                $messages = $('.messages');
                message_side = message_side === 'left' ? 'right' : 'left';
                message = new Message({
                    text: text,
                    message_side: message_side
                    });
                message.draw();
                return $messages.animate({ scrollTop: 
$messages.prop('scrollHeight') }, 5);
                };
            $('.send_message').click(function (e) {
                //e.preventDefault();//new
                return sendMessage(getMessageText());
                });
            $('.message_input').keyup(function (e) {
                if (e.which === 13) {
                    e.preventDefault();//new
                    return sendMessage(getMessageText());
                    }
                });

            //sendMessage('Wait a moment please...!')
            setTimeout(function () {
                return sendMessage('{{=q}}');
                }, 100);
            return setTimeout(function () {
                return sendMessage('{{=a}}');
                }, 2100);
            });
        }.call(this));

</script>
</body>
</html>


   - So far the system works well with a user input such as 'Hello',and the 
   string goes through a code to randomly select an answer . 
   - The answer and the question('Hello') are posted in the answer db. 
   - The controller returns the question and answer (both different 
   columns) rows. 
   - Many users login and are able to retrieve the answers(This has been 
   sorted out as each user is able to get his/her answer from the rows, 
   without seeing other rows by other users...see below
   
<https://lh3.googleusercontent.com/-XiiNMCZEWJA/WgVvegDqHJI/AAAAAAAANK8/dIf-DbSWrd4m5DwYrapUIXX_40S-zKrpACLcBGAs/s1600/Screenshot%2Bfrom%2B2017-11-10%2B12-16-45.png>

Problem:

   - On the view side, the cursor is always at the top of the page and when 
   the user posts the message
   - the page refreshes first then the cursor moves to the bottom of the 
   page then you see the new message appearing
   - some times when the user posts the message/question, it appears at the 
   bottom of the page as well as the last posted message in the db, hence 
   using the   " db.answers.ALL)[-5:-1] " code foe the last 5 rows minus the 
   last row.
   - I cant get a clear prettydate on the new message. See image below

I need help to sort out these problems, i have tried using 
websockets(w2pchat) but it requires that two or more users be logged in to 
post and see the messages as they come in. What I need is a system, as it 
is where the 'other user' is the bot.
I also don't want page refreshed on posting the question, that it works 
like other bots where the messages appear from the bottom as they come in. 
Ifigured out that maybe as the page refreshes, that's when the cursor moves 
first up then to the bottom of the page, then the message appears.
I dont mind a new code or referral.

N/B
The cursor here is the scroll bar.Sorry fort he mixup

Regards

-- 
Resources:
- http://web2py.com
- http://web2py.com/book (Documentation)
- http://github.com/web2py/web2py (Source code)
- https://code.google.com/p/web2py/issues/list (Report Issues)
--- 
You received this message because you are subscribed to the Google Groups 
"web2py-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to web2py+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Reply via email to