Notification Nouveau ticket

**rzXbrain** · 18/07/2014, 17h16

Hello,

Actuellement en stage pour 6 mois dans un support technique, je dois constamment recharger la page zendesk pour voir les nouveaux tickets c'est assez chiant à la longue et finalement quand on essaie de faire autre choses entre deux tickets on est pas tellement dedans.
Du coup je souhaitais faire un script js/jQuerry pour tampermonkey et greasemonkey afin d'avoir des notifications sonores et visuel sur le desktop à chaque nouveau ticket non assigné ou qui m'est assigné.

Débutant en js/jQuerry, je commence par faire des choses basique pour me rapprocher petit à petit du but final.

j'ai donc chercher à changer le contenue de balises <p> de class "assigné" avec comme contenue "-" ou bien "rzXbrain" par "changé!".
Pour cela j'ai chercher à utiliser la méthode each de jQuerry, cependant cela ne donne aucun résultat.

le code HTML DE test

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World</title>
  </head>
  <body>
    <p class="assigné">-</p>
    <p class="assigné">rzXbrain</p>
    <p class="assigné">root</p>
    Ce texte est affiché en HTML
    <span id="texteJQ"></span>
    <script src="../../jquery-2.1.1.js"></script>
    <script src="jq-hello-world.js"></script>
  </body>
</html>

jQuerry :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
$(function() {
  $( '.assigné' ).each(function( i ) {
    if ( this.text() === '-' {
      this.text() = 'a moi!';
    } else {
      this.text('Pas a moi!');
    }
  });
});

j'ai testé cette fonction avec la doc sous les yeux, et en ayant essayer l'exemple de la doc et ça fonctionne contrairement à ce que j'ai fais

:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>each demo</title>
  <style>
  div {
    color: red;
    text-align: center;
    cursor: pointer;
    font-weight: bolder;
    width: 300px;
  }
  </style>
  <script src="../../jquery-2.1.1.js"></script>
</head>
<body>
 
<div>Click here</div>
<div>to iterate through</div>
<div>these divs.</div>
 
<script>
$( document.body ).click(function() {
  $( "div" ).each(function( i ) {
    if ( this.style.color !== "blue" ) {
      this.style.color = "blue";
    } else {
      this.style.color = "";
    }
  });
});
</script>
 
</body>
</html>

Help! je veux plus refresh T-T :p

**SpaceFrog** · 18/07/2014, 17h21

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$(function(){$( "p" ).text( ($(this).text() === '-')?'a moi!':'Pas a moi!');})

Et par la même occasion Jquery n'est pas Irlandais ... un seul r suffira

**rzXbrain** · 18/07/2014, 17h30

l'expression est constamment False avec cette méthode (ce que je ne comprend pas d'ailleurs), mais je note pour jQueRy ^^

Je souhaitais utiliser les if, vu qu'il faut que je notifie aussi bien pour '-' que pour 'rzXbrain'. De cette façons cela risque d'être à rallonge. Et à l'avenir je ne souhaites pas modifier le texte, la c'est juste pour tester si j'arrive déjà à différencier.

MAJ :
J'ai finalement réussi et relu mon code au calme surtout, truffé de faute...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
$(function() {
    $('.assigné').each(function(){
        if ($(this).text() === '-' || $(this).text() === 'rzXbrain')
            $(this).html('a moi!');
        else
            $(this).html('Pas a moi!');
    });
});

Maintenant plus qu'a trouvé comment faire une notification en différenciant les nouveaux éléments des anciens, pour éviter d'avoir une alerte pour un ticket déjà signaler par une alerte.

Mais d'abord réussir à faire marcher le raffraichissement automatique du tableau contenue dans ma page.

Pour le moment mon code n'arrive qu'à faire apparaitre petit a petit les moi et pas a moi... pas tout compris à ce load.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
var auto_refresh = setInterval(function (){
            $('.tickets').load('./# .tickets').fadeIn("slow");
			$('.assignee').each(function(){
        	if ($(this).text() === '-' || $(this).text() === 'rzXbrain')
            	$(this).html('a moi!');
        	else
            	$(this).html('Pas a moi!');
    		});
        }, 10000);

MAJ2:

Méthode load : réussis ! Rechargement du tableau dans la page, enfin, il à fallu que je recharge la <div> plutôt que le tableau au final.

Bon bhein y'a plus qu'à regarder comment marche les notifications.

**rzXbrain** · 19/07/2014, 03h07

Après des heures de recherches infructueuses sur le net et nombre de script ne marchant pas ou ne faisant pas l'effet voulu j'ai fini par trouver mon bonheur sur le tchat.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
$(document).ready(function() {
    var icon = 'http://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRhyPYdfio5FBlHflx55ZwV24rwQr9WD8tHPk08zGqHStyptrFNkw';
  // At first, let's check if we have permission for notification
  // If not, let's ask for it
  if (window.Notification && Notification.permission !== "granted") {
    Notification.requestPermission(function (status) {
      if (Notification.permission !== status) {
        Notification.permission = status;
      }
    });
  }
 
    // If the user agreed to get notified
    if (window.Notification && Notification.permission === "granted") {
        var n = new Notification("Hi!1", icon);
    }
 
    // If the user hasn't told if he wants to be notified or not
    // Note: because of Chrome, we are not sure the permission property
    // is set, therefore it's unsafe to check for the "default" value.
    else if (window.Notification && Notification.permission !== "denied") {
      Notification.requestPermission(function (status) {
        if (Notification.permission !== status) {
          Notification.permission = status;
        }
 
        // If the user said okay
        if (status === "granted") {
            var n = new Notification('Hi!' , icon);
        }
 
        // Otherwise, we can fallback to a regular modal alert
        else {
          alert("Hi! 2");
        }
      });
    }
 
    // If the user refuses to get notified
    else {
      // We can fallback to a regular modal alert
      alert("Hi 3!");
    }
});

Seulement dés lors que je souhaite indiquer une option comme indiquer ici : https://developer.mozilla.org/en-US/...I/Notification

le popup ne s'affiche plus

**rzXbrain** · 21/07/2014, 14h26

Bonjour,

Enfin terminé mon script, du moins presque, ce dernier fonctionne parfaitement sous chrome et étonnamment les notification (API mozilla) ne fonctionne pas sous firefox... Enfin elle ont fonctionné une fois, puis j'ai rechargé la page et plus jamais revu... :'(
Auriez-vous une idée d'où peut provenir l'erreur? Les permissions pour les popup sont mis en "accepté" donc pas de soucis de ce côté là et les info de la page montre que les popup sont permis.

Aussi, comme je débute en js/jQuery, je suis preneur de toute suggestion afin d'améliorer mon code.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
// ==UserScript==
// @name       Z**** DeskSound Notifier
// @namespace  
// @version    0.1
// @description  Notification desktop et sons lors de l'arrivé d'un nouveau ticket.
// @match      http://**************
// @require	   http://code.jquery.com/jquery.min.js
// @copyright  2014+, Soundlicious
// ==/UserScript==
// List of users
var users = [
    '-',
    'rzXbrain'
];
// Notification icon
var ico = './img.jpg';
// buffers automatically when created
var snd = new Audio('http://*********/soundmanager/notify.wav');
// At first, let's check if we have permission for notification
// If not, let's ask for it
if (window.Notification && Notification.permission !== 'granted') {
    Notification.requestPermission(function (status) {
        if (Notification.permission !== status) {
            Notification.permission = status;
        }
    });
}
var auto_refresh = setInterval(function () {
    $('.frame.tickets_table') .load('# .frame.tickets_table') .fadeIn('slow');
    $('.content.content_grey > h2') .replaceWith('<h2>Functional TICKETS <span class="item_count">(' + $('td[class="assignee"]') .length + ')</span>');
    $('.updated') .each(function (i) {
        if ($(this) .text() .indexOf(':') >= 0) {
            var tab = $(this) .text() .split(RegExp('[:]+', 'g'));
            var d = new Date();
            var H = d.getHours();
            var M = d.getMinutes();
            if (parseInt(tab[0]) <= H && users.indexOf($('.assignee') .eq(i) .text()) > - 1) {
                var notif = $('.assignee') .eq(i) .text();
                var bod = $('.description') .eq(i - 2) .text();
                // If the user agreed to get notified
                if (window.Notification && Notification.permission === 'granted') {
                    $(this) .html('vu!');
                    snd.play();
                    var n = new Notification(notif, {icon: ico, body: bod});
                }
                // If the user hasn't told if he wants to be notified or not
                // Note: because of Chrome, we are not sure the permission property
                // is set, therefore it's unsafe to check for the "default" value.
                 else if (window.Notification && Notification.permission !== 'denied') {
                    Notification.requestPermission(function (status) {
                        if (Notification.permission !== status) {
                            Notification.permission = status;
                        }
                        // If the user said okay
 
                        if (status === 'granted') {
                            snd.play();var n = new Notification(notif, {icon: ico, body: bod});
                        }
                        // Otherwise, we can fallback to a regular modal alert
                         else {
                            alert('It seem that you\'re browser don\'t allow to use desktop notification, we recommand you to use Chrome or firefox.');
                        }
                    });
                }
                // If the user refuses to get notified
                 else {
                    // We can fallback to a regular modal alert
                    alert('This application need the permission to display desktop notification. Click allow if you want to use it.');
                }
            }
        }
        //    
        //
 
    });
}, 10000);

Notification Nouveau ticket

jQuery

Discussions similaires

Partager

Partager