Добавление сообщения о колбе в колбу к определенному элементу из класса

Question

Привет, ребята, так что я использую socketio в своем приложении для фляги для части своих функций по продаже билетов. Позвольте мне сначала показать вам, что делает приложение и что мне нужно, чтобы оно делало.

Таким образом, в значительной степени из рисунка выше пользователя без прав администратора, который отображается справа, может отправить новый билет, который затем будет транслироваться; Но только пользователи с правами администратора, которые отображаются слева, смогут просматривать уведомления / блоки билетов. Это работает все отлично и денди. Теперь, после того, как администратор щелкнет блок заявки, я хочу, чтобы в этом конкретном блоке отображался какой-то текст, означающий, что этот билет обрабатывается этим администратором, и я хочу, чтобы это увидели все остальные администраторы. Я подумал, что смогу сделать это, используя функциональность socketio и передавая это сообщение о конкретном событии. Но проблема в том, что отправка сообщения в классе будет отправлена ​​любому элементу, у которого есть этот класс, которого у меня не может быть, он должен быть уникальным для блока. Но единственный способ, которым я могу добавить слушателя события к каждому элементу, является классом. Надеюсь, это имело смысл. Пожалуйста, дайте мне знать, если мне нужно уточнить. Вот код JS для сокетов.

var minimize = document.getElementById('minimize');
var maximize = document.getElementById('maximize');
var exit = document.getElementById('messageexit');
var exitmin = document.getElementById('messageexitmin');
var maximum = document.getElementById('maxbox');
var minimum = document.getElementById('minbox');
var username = document.getElementById('un').innerHTML;

minimize.addEventListener('click', function(){
  maximum.style.display = 'none';
  minimum.style.display = 'block';
});

exit.addEventListener('click', function(){
  maximum.style.display = 'none';
  minimum.style.display = 'none';
})

exitmin.addEventListener('click', function(){
  maximum.style.display = 'none';
  minimum.style.display = 'none';
})

maximize.addEventListener('click', function(){
  maximum.style.display = 'block';
  minimum.style.display = 'none';
})

socket = io.connect('http://' + document.domain + ':' + location.port )

socket.on('connect', function(){
    socket.emit('connected', {data: username + " is connected"})
})

$('#submitform').on('submit', function(e){
  e.preventDefault()
  console.log('Testing my submit form')
  socket.emit('privateticket', {
    username : username, 
    ticket : $('#userticket').val(),
    site : document.getElementById('sitename').innerHTML
  })
  $('#userticket').val('')
  maximum.style.display = 'block'; 
  $('#messages').append('<div>' + "<span style='color:black'>" + username + '</span>' + ': ' + document.getElementById('userticket').innerHTML + '</div>')
})

socket.on('sendmessage', function(data){
  // console.log(data['username'])
  $('#nomess').remove()
  $('#queue').append("<div style='background-color:gray;height:150px;margin-right:2px;border-radius:5px; min-width:300px;' class='col-3 queueblock'>" + "<span style='color:black'>" + "<h1 style='color:white'>" + data['site'] + '</h1>' + data['username'] + '</span>' + ': ' + data['ticket'] + '</div>')
  $('.queueblock').on('click', function(){
    maxbox.style.display = 'block';
    socket.emit('techsticket', {
      username : username, 
    })
  })
});

socket.on('ticketaccepted', function(data){
  console.log(data['username'] + ' has taken this ticket.')
  $('.queueblock').append("<div>" + data['username'] + ' has taken this ticket.' +'</div>')
});

Здесь приведен код python в моем rout.py для манипулирования сокетом.

@socketio.on('connected')
def connected(data):
    print(data)
    user = Users.query.filter_by(username=current_user.username).first()
    user.sid = request.sid
    print(current_user.username + ' room sid is ' + request.sid)
    db.session.commit()


@socketio.on('privateticket')
def privaticket(data):
    print(str(data))
    socketio.emit('sendmessage', data, broadcast=True)

@socketio.on('techsticket')
def techsticket(data):
    print(data)
    socketio.emit('ticketaccepted', data, broadcast=True)

Вот HTML, если необходимо

{% block content %}
  <h1 id="titlecolor" style="font-weight:600; font-family: 'Staatliches', cursive;">{{ current_user.site }} Dash</h1> 
  </br>
  <div id="un" >{{current_user.username}}</div>
  <div id="sitename" style='display:none'>{{current_user.site}}</div>
<!-- Dashboard structure...================================================================================================================================================== -->
{% if current_user.adminstatus == False %}
    <div class="container">
        <div class="row">
            <!-- Shopping cart box ------------------------------------------------------------------>
            <div class="col-sm-3 dashy" style="box-shadow: 5px 10px 18px #888888 !important;">
                    <div class="hero-widget well well-sm">
                        <div class="icon">
                            <i class="glyphicon glyphicon-user"></i>
                        </div>
                        <div class="text">
                            <var>{{BADGE_LENGTH}}</var>
                            <label class="text-muted" style="font-weight:700">Shopping Cart</label>
                        </div>
                        <div class="options">
                            <a href="javascript:;" class="btn btn-primary btn-lg" style="font-weight: 600"><i class="glyphicon glyphicon-plus"></i>Checkout</a>
                        </div>
                    </div>
            </div>
            <!-- Notifications box ------------------------------------------------------------------->
            <div class="col-sm-3 dashy" style="box-shadow: 5px 10px 18px #888888 !important;">
                <div class="hero-widget well well-sm">
                    <div class="icon">
                        <i class="glyphicon glyphicon-star"></i>
                    </div>
                    <div class="text">
                        <var>5</var>
                        <label class="text-muted" style="font-weight:700">Notifications</label>
                    </div>
                    <div class="box">
                        <a href="javacsript:;" class="btn btn-default btn-lg"> View notifications</a>
                    </div>

                </div>
            </div>
            <!-- Total Orders box --------------------------------------------------------------------->
            <div class="col-sm-3 dashy" style="box-shadow: 5px 10px 18px #888888 !important;">
                <div class="hero-widget well well-sm">
                    <div class="icon">
                        <i class="glyphicon glyphicon-tags"></i>
                    </div>
                    <div class="text">
                        <var>00</var>
                        <label class="text-muted" style="font-weight:700">Total orders</label>
                    </div>
                    <div class="options">
                        <a href="javascript:;" class="btn btn-default btn-lg"><i class="glyphicon glyphicon-search"></i> View orders</a>
                    </div>
                </div>
            </div>
            <!-- Quotes box --------------------------------------------------------------------------->
            <div class="col-sm-3 dashy" style="box-shadow: 5px 10px 18px #888888 !important;">
                <div class="hero-widget well well-sm">
                    <div class="icon">
                        <i class="glyphicon glyphicon-cog"></i>
                    </div>
                    <div class="text">
                        <label class="text-muted" style="font-weight:700">Quotes</label>
                    </div>
                    <div class="options">
                        <a href="javascript:;" class="btn btn-default btn-lg"><i class="glyphicon glyphicon-wrench"></i> View</a>
                    </div>
                </div>
            </div>
            <!-- Pending Tickets box ------------------------------------------------------------------->
            <div class="col-sm-3 dashy" style="box-shadow: 5px 10px 18px #888888 !important; z-index:999;">
                <div class="hero-widget well well-sm">
                    <div class="icon">
                        <i class="glyphicon glyphicon-user"></i>
                    </div>
                    <div class="text">
                        <var>3</var>
                        <label class="text-muted" style="font-weight:700">Pending Tickets</label>
                    </div>
                    <div class="options">
                        <a href="javascript:;" class="btn btn-primary btn-lg" style="font-weight: 600" onclick="openForm()"><i class="glyphicon glyphicon-plus"></i> New Ticket</a>
                        <div class="form-popup" id="myForm">
                                <form id='submitform' method='POST' class="form-container">

                                    <label for="issue"><b>Issue Type</b></label>

                                    <div id="issue" class="custom-select" style="width:250px; z-index:999;">
                                        <select>
                                            <option value="0">Select:</option>
                                            <option value="1">Billing</option>
                                            <option value="2">Gift Card</option>
                                            <option value="3">CC Processing</option>
                                            <option value="4">Internet</option>
                                            <option value="5">LogMein</option>
                                            <option value="6">New Parts</option>
                                            <option value="7">Install</option>
                                            <option value="8">MyFocus</option>
                                            <option value="9">Term Down</option>
                                            <option value="10">System Down</option>
                                            <option value="11">Training</option>
                                            <option value="12">Other</option>
                                        </select>
                                    </div>
                                    </br>
                                    <label for="desc"><span class="descrippy">Description</span></label>
                                    <textarea class="desc-box" id="userticket" rows="4" cols="50" style="width: 250px"></textarea>
                                    <button type="submit" class="btn cancel" onclick="closeForm()">Submit</button> <!--Change event-->
                                </form>
                            </div>
                    </div>
                </div>
            </div>
            <!-- Contract info box ------------------------------------------------------->
            <div class="col-sm-3 dashy" style="box-shadow: 5px 10px 18px #888888 !important;">
                <div class="hero-widget well well-sm">
                    <div class="icon">
                        <i class="glyphicon glyphicon-star"></i>
                    </div>
                    <div class="text">
                        <label class="text-muted" style="font-weight:700">Contract Info</label>
                    </div>
                    <div class="options">
                        <a href="javascript:;" class="btn btn-default btn-lg"><i class="glyphicon glyphicon-search"></i> View</a>
                    </div>
                </div>
            </div>
            <!-- Settings box ------------------------------------------------------------>
            <div class="col-sm-3 dashy" style="box-shadow: 5px 10px 18px #888888 !important;">
                <div class="hero-widget well well-sm">
                    <div class="icon">
                    <i class="glyphicon glyphicon-tags"></i>
                    </div>
                    <div class="text">
                        <label class="text-muted" style="font-weight:700">Settings</label>
                    </div>
                    <div class="options">
                    <a href="javascript:;" class="btn btn-default btn-lg"><i class="glyphicon glyphicon-search"></i>Edit</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

{% else %}
    <h1>Queue</h1>
    <div class='row' id="queue"></div>
{% endif %}

{% endblock content %}