Plugin Todo for Monitor

[Nemesis24]

todo.png (42.23 Kio) Consulté 7093 fois

-----------------------
Plugin Todo for Monitor
-----------------------
Todo vous permet de créer une liste des taches personalisée en fonction des membres de votre famille.

exemple: "Réparer le lit !!! Il grince vraiment trop !!"

Vous pouvez utiliser Todo afin de simplement laisser des messages pour les membres de votre famille.

exemple: "On va faire grincer le lit ce soir, sois en forme !!"

Les messages de Todo sont sauvegardés dans le "local storage" de votre navigateur, ce qui permet de ne pas être associé une base de données.
Cela signifie que vous pouvez fermer votre navigateur, les messages réapparaitront tant que vous n'aurez pas effacé vos données de navigation.
Si vos messages disparaissent à chaque fermeture du navigateur, vérifier les paramètres de votre navigateur.

Ce plugin est fonctionnel pour l'usage d'une tablette centralisant les infos de votre monitor, ainsi les messages n'apparaitront pas sur les autres connexions à monitor.

Exemple:
J'utilise Todo sur la tablette murale de la cuisine - je laisse des messages
Je me connectes avec mon telephone à monitor je n'obtiens pas les messages déposés sur la tablette
je peux laisser des messages sur mon telephone, ils n'apparaitront que sur mon telephone.

-------------
Installation:
-------------

1 - Placez le fichier todo.js dans le repertoire js de votre monitor
2 - Placez le fichier todo.html dans le repertoire page de votre monitor
3 - Placez le fichier todo.css dans le repertoire css de votre monitor

4 - Dans index.html dans le repertoire de votre monitor, rajouttez:

Code : Tout sélectionner

<div><script>  $('div').filter(':last').load("pages/todo.html");   </script></div>	<!--Todo list -->

5 - Dans todo.html dans le repertoire page de votre monitor:

Supprimez, Ajoutez, Changez les valeurs suivantes afin qu'elles correspondent à vôtre besoin:
Attention les noms que vous donnerez ici correspondront dans le fichier todo.css:

Code : Tout sélectionner

    <option class="name">Yanis</option>
    <option class="name">Iban</option>
    <option class="name">Orlan</option>
    <option class="name">Maman</option>
    <option class="name">Papa</option>

6 - Dans le fichier todo.css changez les noms Yanis, Iban, Orlan, Papa, Maman respectivement avec vos valeurs.
Supprimez les classes css inutiles, au besoin.
Rajoutez des classes css, au besoin.

Changez les chemins des icones (48px ici) pour vos propres icones:

Code : Tout sélectionner

background: url(../icons/yanis.png) no-repeat;

7 - Enfin personalisez votre css pour donner votre style à vôtre todo list.


Enjoy !

Nemesis24

Vous trouverez un fichier texte reprenant cette procédure dans le zip.

todo.zip

(2.93 Kio) Téléchargé 450 fois

------------
En Option
------------

Widget pour Todo

acceuil.png (217.88 Kio) Consulté 7063 fois

Afficher un widget sur votre page d'acceuil pour donner le nombre de Todos

widget.png (20.92 Kio) Consulté 7063 fois

1- remplacez dans todo.js la fonction show()

par celle ci, à laquelle vous veillerez à remplacer yanis, iban, orlan, maman, papa par vos propres valeurs. (attention à la casse que vous avez noté dans les option)

Code : Tout sélectionner

function show() {
    var todos = get_todos();
 
    var html = '<ul class="todos">';
    for(var i=0; i<todos.length; i++) {
        html +=  todos[i] +'<div class="pull-right"><button class="remove" id="' + i + '">x</button></div></li>';
    };
    html += '</ul>';
 
    document.getElementById('todos').innerHTML = html;
 
    var buttons = document.getElementsByClassName('remove');
    for (var i=0; i < buttons.length; i++) {
        buttons[i].addEventListener('click', remove);
    };
	
	var yanis = $('.Yanis').length;
	document.getElementById('yanis_number').innerHTML = yanis;
	var iban = $('.Iban').length;
	document.getElementById('iban_number').innerHTML = iban;
	var orlan = $('.Orlan').length;
	document.getElementById('orlan_number').innerHTML = orlan;
	var maman = $('.Maman').length;
	document.getElementById('maman_number').innerHTML = maman;
	var papa = $('.Papa').length;
	document.getElementById('papa_number').innerHTML = papa;
}

2 - Rajoutez à l'endroit désiré dans votre page d’accueil, vous veillerez à remplacer yanis, iban, orlan, maman, papa par vos propres valeurs.:

Code : Tout sélectionner

		<div>
			<div class="frame">
				<div id="yanis_number">Nombre de notifs</div>
			</div>
			<div class="frame">
				<div id="iban_number">Nombre de notifs</div>
			</div>
			<div class="frame">
				<div id="orlan_number">Nombre de notifs</div>
			</div>
			<div class="frame">
				<div id="maman_number">Nombre de notifs</div>
			</div>
			<div class="frame">
				<div id="papa_number">Nombre de notifs</div>
			</div>
		</div>

3- vous vous rendrez dans le fichier css, de votre page d’accueil afin de définir vôtre propre style.

Je vous donne ici un exemple:

Code : Tout sélectionner

#yanis_number
{
	width: 70px;
	height: 29px;
	margin-top: 9px;
	font-size: 25px;
	text-align:right;
	font-weight:bold;
	border-radius: 100px;
	padding:9px 9px 9px 0px;
	background: url(../icons/yanis.png) no-repeat;
	background-color: rgba(255,255,255, 0.03);
}

Enjoy !!

Nemesis24

[Nemesis24]

Pour rajoutter un lien vers votre page todo sur le widget.

rajouttez:

Code : Tout sélectionner

onclick="mySwipe.slide(4)"

Comme ceci dans votre page d'accueil en veillant à changer le numéro 4 par celui qui correspond à votre page.

Code : Tout sélectionner

<div class="frame">
	<div onclick="mySwipe.slide(4)" id="yanis_number">Nombre de notifs</div>
</div>

[vil1driver]

Salut,

Intéressant

Merci du partage

[Nemesis24]

De rien

[minicupi]

on notera que la tache de ne pas faire flamber la CB n'est pas retombé a 0 ,o)

[Nemesis24]

Je n'ai pas a me plaindre ça va !!