websocket init

This commit is contained in:
2024-03-15 15:44:29 +01:00
parent 11c6d4635f
commit 13c9c8bd3d
15 changed files with 332 additions and 25 deletions

View File

@ -33,6 +33,8 @@ function ModalLoad(idmodal,title,path) {
}
{% if wssuse %}
console.log("pouet");
function subscribe(channeltype,channelkey,userkey) {
console.log("== SUBSCRIBE "+channeltype+"-"+channelkey+" with userkey "+userkey);
conn.send(JSON.stringify({

View File

@ -32,6 +32,10 @@
{% block body %}
<div class="d-flex">
<div id="filters" class="d-flex flex-column pl-2 pr-2 " style="width:350px; background-color:var(--colorbgbodydark);min-height:1500px;">
{% if fgpoker %}
<div id="online" class="mt-2"></div>
{% endif %}
<div style="width:100%" class="mt-3">
<label class="control-label" style="color:var(--colorftbodydark)">Filtre TICKET</label>
<input type="number" id="filterticket" class=" form-control">
@ -124,7 +128,7 @@
{% endif %}
{% endfor %}
</select>
</div>
</div>
</div>
<div class="pl-3" style="width:100%;">
@ -149,12 +153,17 @@
<th style="width:200px">Type</th>
<th style="width:70px"class="no-string">N°</th>
<th style="width:1000px">Titre</th>
{% if (not wssuse or not fgpoker) %}
<th style="width:200px">Equipe</th>
<th style="width:250px">Priorité</th>
<th style="width:70px">Poid</th>
<th style="width:135px">Affecté à</th>
<th style="width:135px">Statut</th>
<th style="width:300px">Etiquettes</th>
{% else %}
<th style="width:300px">Poker</th>
{% endif %}
<th style="width:135px">Statut</th>
<th style="width:70px">Poid</th>
</tr>
</thead>
@ -183,7 +192,7 @@
{% set types = "" %}
{% set datateams = "" %}
{% set datatypes = "" %}
{% set prioritys = '<span class="btn-link tag mr-1" style="background-color:#70c24a"><i class="fas fa-tag"></i>'~giteaprioritys|last~'</span>' %}
{% set prioritys = (not giteaprioritys?'':'<span class="btn-link tag mr-1" style="background-color:#70c24a"><i class="fas fa-tag"></i>'~giteaprioritys|last~'</span>') %}
{% set dataprioritys = ','~giteaprioritys|last %}
{% set labels = "" %}
{% set datalabels = "" %}
@ -210,7 +219,7 @@
{% set dataassignees=dataassignees~','~assignee.username %}
{% endfor %}
<tr data-milestone="{{datamilestone}}" data-sprint="{{datasprint}}" data-ticket="{{dataticket}}" data-column="{{statut}}" data-teams="{{datateams}}" data-prioritys="{{dataprioritys}}" data-types="{{datatypes}}" data-labels="{{datalabels}}" data-assignees="{{dataassignees}}">
<tr data-id="{{giteaissue.issueid}}" data-milestone="{{datamilestone}}" data-sprint="{{datasprint}}" data-ticket="{{dataticket}}" data-column="{{statut}}" data-teams="{{datateams}}" data-prioritys="{{dataprioritys}}" data-types="{{datatypes}}" data-labels="{{datalabels}}" data-assignees="{{dataassignees}}">
<td>
<a target="_blank" class="btn btn-link fa fa-file" href="{{giteaissue.html_url}}"></a>
</td>
@ -225,15 +234,11 @@
{{ giteaissue.title }}
</a>
</td>
{% if (not wssuse or not fgpoker) %}
<td>{{ teams|raw }}</td>
<td>{{ prioritys|raw }}</td>
<td>
<div id="modissu{{ giteaissue.issueid }}" data-issue="{{ giteaissue.issueid }}" data-giteaid="{{giteaissue.number}}" data-giteatitle="{{ giteaissue.title }}" type="button" class="modissu btn btn-link">
<i class="fas fa-weight-hanging"></i> = <span id="issue{{giteaissue.issueid}}-weight">{{ giteaissue.weight }}</span>
</div>
</td>
{% set dataorder="" %}
{% for assignee in giteaissue.assignees %}
{% set dataorder=dataorder~assignee.username %}
@ -244,8 +249,19 @@
<img src="{{assignee.avatar_url}}" class="assignee" title="{{assignee.username}}">
{% endfor %}
</td>
<td>{{ statut }}</td>
<td>{{ labels|raw }}</td>
{% else %}
<td>
<div class="pokertd d-flex"></div>
</td>
{% endif %}
<td>{{ statut }}</td>
<td>
<div id="modissu{{ giteaissue.issueid }}" data-issue="{{ giteaissue.issueid }}" data-giteaid="{{giteaissue.number}}" data-giteatitle="{{ giteaissue.title }}" type="button" class="modissu btn btn-link">
<i class="fas fa-weight-hanging"></i> = <span id="issue{{giteaissue.issueid}}-weight">{{ giteaissue.weight }}</span>
</div>
</td>
</tr>
{% endif %}
{% endfor %}
@ -846,4 +862,89 @@
$("#mycontent").show();
});
{% if wssuse and fgpoker %}
var conn;
function connect() {
conn = new WebSocket("{{wssurl}}");
conn.onopen = function(e) {
console.log("== CONNECT");
{% set userkey = "" %}
{% if app.user %}
{% set userkey = app.user.apikey %}
{%endif%}
subscribe("home",{{id}},"{{userkey}}");
sendMessage({command: "alive"});
};
conn.onmessage = function(e) {
ret=JSON.parse(e.data);
console.log("MESSAGE REU ="+ret.command);
switch(ret.command) {
case "alive" :
if(!$('#online'+ret.from.id).length) {
img='<img id="online'+ret.from.id+'" src="'+ret.from.avatar+'" class="avatar ml-2 mr-2" title="'+ret.from.displayname+'">';
$("#online").append(img);
$("tr").each(function(){
line=$(this);
issueid=$(this).data("id");
url="{{path("app_poker_get",{userid:"xxx",issueid:"yyy"})}}";
url=url.replace("xxx",ret.from.id);
url=url.replace("yyy",issueid);
$.ajax({
method: "POST",
url: url,
async: false,
success: function(data) {
html ='<div class="d-flex flex-column align-items-center" data-user="'+ret.from.id+'">';
html+='<img src="'+ret.from.avatar+'" class="avatar mb-1" style="zoom:80%;" title="'+ret.from.displayname+'">';
html+='<input class="pokervalue" id="poker-'+ret.from.id+'-'+issueid+'" data-user="'+ret.from.id+'" data-issue="'+issueid+'" type="number" style="width:60px" value="'+data+'"></input>';
html+='</div>';
line.find(".pokertd").append(html);
},
});
})
}
if(ret.from.id!={{app.user.id}}) {
console.log("meto");
sendMessage({command: "meto"});
}
break;
case "adead" :
$('#online'+ret.from.id).remove();
$('[data-user='+ret.from.id+']').remove();
break;
case "meto" :
if(!$('#online'+ret.from.id).length) {
html='<img id="online'+ret.from.id+'" src="'+ret.from.avatar+'" class="avatar ml-2 mr-2" title="'+ret.from.displayname+'">';
$("#online").append(html);
$(".pokertd").append(html);
}
break;
}
};
conn.onclose = function(e) {
console.log("== DISCONNECT");
$('#online img').remove();
console.log('Socket is closed. Reconnect will be attempted in 1 second.', e.reason);
setTimeout(function() { connect(); }, 1000);
};
}
connect();
$("body").on("input", ".pokervalue", function () {
console.log($(this).val());
});
{% endif %}
{% endblock %}

View File

@ -1,15 +1,20 @@
{% extends 'base.html.twig' %}
{% block body %}
{{wssurl}}
<div id="chat" class="text-center mt-5">
<div class="mb-2">online</div>
<div id="online" style="mt-2"></div>
</div>
{% endblock %}
{% block localjavascript %}
{% if wssuse %}
<script>
var conn;
function connect() {
conn = new WebSocket("{{wssurl}}");
conn.onopen = function(e) {
console.log("== CONNECT");
{% set userkey = "" %}
@ -20,13 +25,14 @@
subscribe("home",1,"{{userkey}}");
sendMessage({command: "alive"});
};
conn.onmessage = function(e) {
ret=JSON.parse(e.data);
console.log(ret.log);
switch(ret.command) {
case "alive" :
if(!$('#online'+ret.from.id).length) {
console.log(ret);
html='<img id="online'+ret.from.id+'" src="'+ret.from.avatar+'" class="avatar ml-2 mr-2" title="'+ret.from.displayname+'">';
$("#online").append(html);
}
@ -57,5 +63,5 @@
}
connect();
</script>
{% endif %}
{% endif %}
{% endblock %}

View File

@ -152,6 +152,10 @@
{% endblock %}
<script>
{{ include('Include/javascript.js.twig') }}
</script>
<script>
{% if app.session.get('viewclosed') %}