To-Do-Liste

Um alle Funktionen nutzen zu k�nnen, aktivieren Sie bitte JavaScript in ihrem Browser!

Der Treffpunkt f�r Hilfe, Tricks & Tipps � XOBOR-Foren und Homepages � Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps � To-Do-Liste

Themen-Einstellungen

Thema drucken

Bereich wechseln

Start Willkommen! Ank�ndigungen & Termine, wichtige News! Stellen Sie Ihr eigene Webseite vor! Betriebssystem MS Windows Betriebssystem MS Windows 10, 8.1, 8 und 7 - Tricks & Tipps MS Windows 10, 8.1, 8 und 7 - Fragen & Antworten �rger mit Ihrem PC? �rger mit dem PC - Vorbeugung und Hilfe �rger mit dem PC - Fragen & Antworten Fragen zu DSL, VDSL, LTE und anderen Netzempfangsarten XOBOR-Foren und Homepages Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten Das neue Template Xobor (v6) Energieerzeugung im neuen Zeitalter - Revolution�r! Videos und Webseiten zur Freien Energie Wasserstoff - Energietr�ger der Zukunft. Die besten Links Empfehlenswerte und interessante Links! Link - Suche Verschiedenes Faszinationen & Unglaubliches! Tricks & Tipps f�r Smartphones und iPhones Lob, Kritik & Verbesserungsvorschl�ge Spiel & Spa�, Witz & gute Laune! Spiritualit�t, Seele, New Age, Yoga, Gesundheit Alles, was noch so �brig bleibt Bannertausch Wie funktioniert der Bannertausch? Bannerrotation und Bannerwechsel

#1 | To-Do-Liste datum

03.09.2022 22:35 (zuletzt bearbeitet: 09.09.2022 22:46)

Daishi

Informationen anzeigen

Beitr�ge:	337
Registriert seit:	08.01.2022

Homepage:	Nicht angegeben
Letzte Spende	Betrag 15 � Forum Spende
Sternzeichen	Steinbock
Likes	291

Guten Abend Wolfgang, ich habe mal dein Forum durchstöbert und bin auf etwas Tolles und Geniales gestoßen. Da machte es bei mir Boom, und ich sah eine gute und tolle Inspiration. Von deiner To-Do-Liste.

Halte mich nicht für verrückt, aber es kam so über mich, dass ich es gleich schreiben musste, ich dachte mir, dass das jeder nutzen kann und wenn er oder sie es im Forum zeigen möchte, was er noch vorhat oder zu erledigen hat und zeigen möchte, könnte er es tun.

Es war eine Idee von dir, dass ich dies gemacht habe, ich dachte mir das hat so keiner.

Na ja, ich habe jetzt noch versucht im Test-Forum was herumzubasteln, leider ohne Erfolg. Mit den Foren-Codes und BB-Codes, dass kann ich vergessen. In eigener Seite, na ja, da sind noch Fehler drinnen und das sieht schlecht aus. Habe da noch Probleme mit den CSS - Tags, das sieht fürchterlich aus.

Wer möchte, kann es ja in CodePen testen, mit einfügen und löschen. Also das Script funktioniert tatenlos, nur halt im Xobor - Forum bedauerlicherweise nicht.

Ich habe schon ein sehr schlechtes Gewissen wegen Wolfgang, weil er meinetwegen so viel Arbeit hat, dies alles umzusetzen.

Hier einmal der HTML Code mit Javascript

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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
 
 <div class="container" id="app">
	<div class="card z-depth-3">
		<div class="card-header">
			<h1 class="cap center-align">Todo-Listen-App</h1>
		</div>
		<div class="card-content">
			<div class="row">
				<div class="input-field col s12 l4">
					<input type="text" v-model="newTodoTitle" @keyup.enter="addTodo" placeholder="Todo-Eingabe" autofocus>
				</div>
				<div class="input-field col s12 l4">
					<select name="filter" id="todo-filter" @change="todosFilter" v-model="filterType">
						<option :value="allTodos" selected="true">Alle</option>
						<option :value="todoDone">Abgeschlossen</option>
						<option :value="todoNotDone">Nicht erledigt</option>
					</select>
					<label for="todo-filter">Todo Filter</label>
				</div>
				<div class="col s12 l4">
					<div class="row">
						<div class="col s3">
							<a href="#" @click.prevent="clearTodosList" class="btn red-text transparent z-depth-0 tooltipped" data-position="top" data-tooltip="Alle Todos entfernen">
								<i class="fa fa-fw fa-broom"></i>
							</a>
						</div>
						<div class="col s3">
							<a href="#" @click.prevent="deleteCompletedTodos" class="btn orange-text transparent z-depth-0 tooltipped" data-position="top" data-tooltip="Alle abgeschlossenen Todos entfernen">
								<i class="fa fa-fw fa-clipboard-check"></i>
							</a>
						</div>
						<div class="col s3">
							<a href="#" @click.prevent="makeAllCompleted" class="btn green-text transparent z-depth-0 tooltipped" data-position="top" data-tooltip="Alle Todos als abgeschlossen markieren">
								<i class="fa fa-fw fa-check-circle"></i>
							</a>
						</div>
						<div class="col s3">
							<a href="#" @click.prevent="makeAllNotCompleted" class="btn blue-text transparent z-depth-0 tooltipped" data-position="top" data-tooltip="Alle Todos als nicht abgeschlossen markieren">
								<i class="fa fa-fw fa-clock"></i>
							</a>
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="cap col s12 l4">
					<h5>Gesamte Todos: {{todoList.length}}</h5>
				</div>
				<div class="cap col s12 l4">
					<h5>Abgeschlossene Todos: {{completedTodosLength()}}</h5>
				</div>
				<div class="cap col s12 l4">
					<h5>Nicht erledigte Todos: {{notCompletedTodosLength()}}</h5>
				</div>
			</div>
		</div>
		<div class="">
 
			<template v-if="todosFilter() != ''">
				<div :class="{hide: editingValue != ''}">
					<ul class="collection">
						<li class="collection-item" v-for="(todo, index) in todosFilter()" :class="{completed: todo.isCompleted}">
							<label>
								<input type="checkbox" v-model="todo.isCompleted" :checked="todo.isCompleted">
								<span>
									<span class="todo-title" v-text="todo.title"></span>
								</span>
								<span>
									<a href="#" class="btn-floating right transparent z-depth-0 center-align tooltipped" data-position="top" data-tooltip="Löschen" @click.prevent="deleteTodo(index)">
										<i class="fa fa-fw fa-trash red-text"></i>
									</a>
									<a href="#" class="btn-floating right transparent z-depth-0 center-align tooltipped" data-position="top" data-tooltip="Bearbeiten" @click.prevent="editTodo(index)">
										<i class="fa fa-fw fa-pen green-text"></i>
									</a>
								</span>
							</label>
						</li>
					</ul>
				</div>
				<div :class="{hide: editingValue == ''}">
					<div class="input-field">
						<input type="text" v-model="editingValue" @keyup.enter="updateTodo()" @keyup.esc="cancelEditing()">
					</div>
				</div>
			</template>
			<template v-else>
				<h3 class="cap center">Keine Aufgaben in der Todo Liste</h3>
			</template>
		</div>
	</div>
</div>
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.1/css/all.min.css">
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
 

<script id="rendered-js">
// jQuery/materializeCss-Funktionsauslöser
$(function () {
  $('.tooltipped').tooltip();
  $("select").formSelect();
});
 
// Vue.Js codes
var dataStorageName = "todoList",
todoListStorage = {
  fetch: function () {
    return JSON.parse(localStorage.getItem(dataStorageName) || '[]');
  },
  save: function (todos) {
    return localStorage.setItem(dataStorageName, JSON.stringify(todos));
  } };
 

new Vue({
  el: '#app',
  data: {
    newTodoTitle: '',
    allTodos: 'alle',
    todoDone: 'abgeschlossen',
    todoNotDone: 'nicht vollständig',
    filterType: this.allTodos,
    editingValue: '',
    todoIndexToEdit: '',
    todoList: todoListStorage.fetch() },
 
  methods: {
    addTodo: function () {
      if (this.newTodoTitle.trim() != '') {
        this.todoList.push({
          title: this.newTodoTitle,
          isCompleted: false });
 
        this.newTodoTitle = '';
      }
    },
    editTodo: function (todoIndex) {
      this.editingValue = this.todoList[todoIndex].title;
      this.todoIndexToEdit = todoIndex;
    },
    updateTodo: function () {
      this.todoList[this.todoIndexToEdit].title = this.editingValue;
      this.editingValue = '';
    },
    deleteTodo: function (todoIndex) {
      let confirmAlert = confirm(`Sind Sie sicher, dass Sie löschen möchten ${this.todoList[todoIndex].title} ?`);
      if (confirmAlert) {
        this.todoList.splice(todoIndex, 1);
      }
    },
    clearTodosList: function () {
      let confirmAlert = confirm(`Sind Sie sicher, dass Sie alle Aufgaben löschen möchten ?`);
      if (confirmAlert) {
        this.todoList.splice(0, this.todoList.length);
      }
    },
    deleteCompletedTodos: function () {
      let confirmAlert = confirm(`Sind Sie sicher, dass Sie alle erledigten Todos löschen möchten? ?`);
      if (confirmAlert) {
        this.todoList.filter(el => {
          if (el.isCompleted) {
            this.todoList.splice(this.todoList.indexOf(el), 1);
          }
        });
      }
    },
    todosFilter: function () {
      var todoListAfterFilter;
      var ft = this.filterType;
      if (ft == this.todoDone) {
        todoListAfterFilter = this.todoList.filter(el => {
          return el.isCompleted;
        });
      } else if (ft == this.todoNotDone) {
        todoListAfterFilter = this.todoList.filter(el => {
          return !el.isCompleted;
        });
      } else if (ft == this.allTodos) {
        todoListAfterFilter = this.todoList;
      } else {
        todoListAfterFilter = this.todoList;
      }
      return todoListAfterFilter;
    },
    completedTodosLength: function () {
      return this.todoList.filter(el => {
        if (el.isCompleted) {
          return el;
        }
      }).length;
    },
    notCompletedTodosLength: function () {
      return this.todoList.filter(el => {
        if (!el.isCompleted) {
          return el;
        }
      }).length;
    },
    makeAllCompleted: function () {
      return this.todoList.forEach(el => {
        el.isCompleted = true;
      });
    },
    makeAllNotCompleted: function () {
      return this.todoList.forEach(el => {
        el.isCompleted = false;
      });
    },
    cancelEditing: function () {
      this.editingValue = '';
    } },
 
  watch: {
    todoList: {
      handler: function (todoList) {
        todoListStorage.save(todoList);
      },
      deep: true } } });
//# sourceURL=pen.js
    </script>
 

 
 
 

Schlie�en

Hier einmal der CSS Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
 .cap {
	text-transform: capitalize;
}
 
.card {
	padding: 20px;
}
 
.btn {
	margin: 5px;
}
 
li .todo-title {
	font-size: 30px;
	text-transform: capitalize;
}
 
li:not(.completed) {
	font-weight: bold;
}
 
 

Schlie�en

Hier sieht es sauber und schön aus.

Zur Demo

Todo-Listen-App!

Ich hoffe, dass meine Inspiration gut ankommt.

Mit freundlichen Grüßen

Daishi

Daishi

Wolfgang findet das Top!

Antworten

#2 | RE: To-Do-Liste datum

04.09.2022 18:08 (zuletzt bearbeitet: 10.09.2022 10:46)

Ich hatte ja gestern auf die Schnelle ein Script geschrieben, da waren viele Fehler drinnen und wenn man die Seite aktualisiert hatte, war alles weg. Es war sehr enttäuschend, ich muss mich entschuldigen, wenn man schnell etwas macht, macht man viele Fehler.

Ich habe jetzt seit gestern 23:00 Uhr bis jetzt daran gesessen und geschrieben. Wenn man jetzt etwas eingibt und die Seite aktualisiert, bleibt es drin.

Habe die HTML und CSS geändert, ist alles aktualisiert. Das Design hat sich geändert, ich finde es von meiner Seite sehr schön.

Ich hoffe, das es euch gefällt und Wolfgang, es war viel Arbeit. Wie gesagt für das Xobor - Forum muss es leider umgeschrieben werden, dass es sauber darauf läuft.

Hier noch eine kleine Bedienungsanleitung:

Bei ToDo-Eingabe den gewünschten Text eingeben und mit der Enter Taste wird der gewünschte Text gespeichert.

Man kann den gewünschten Text löschen, ist rechts mit den farblichen Symbolen ausgestattet.

Rot: Alle Todos entfernen
Gelb: Alle abgeschlossenen Todos entfernen
Grün: Alle Todos als abgeschlossen markieren
Blau: Todo Liste öffnen

Leere To-do-Liste

Der Rest ist selbsterklärend. Ich hoffe, ihr habt Spaß damit.

Mit freundlichen Grüßen

Daishi

Daishi

Antworten

#3 | RE: To-Do-Liste datum

25.09.2022 12:22

Daishi

Informationen anzeigen

Beitr�ge:	337
Registriert seit:	08.01.2022

Homepage:	Nicht angegeben
Letzte Spende	Betrag 15 � Forum Spende
Sternzeichen	Steinbock
Likes	291

So ich habe mal etwas mit Windows 10 versucht. Es funktionierte das Umschreiben von HTML auf BB Code nicht mit dem einem Programm.

So jetzt habe ich mich auf mein Linux Rechner eingeloggt, das Programm gestartet und schwups hat er mir das umgeschrieben, ich musste 1 Minute warten.

Ich habe nur etwas getestet, ob das auch geht. Habe im Internet gelesen dass, das Programm eine kleine Hilfe sei.

Hier mal die "Seite", damit man sieht, was ich meine.
html-to-bbcode!

Ich habe den HTML-Code mit Javascript in das Programm reinkopiert und umwandelt lassen.

So sieht es auf Test-Forum aus, besser als vorher.

Test-Forum To-Do-Liste!
Hier mal der umgewandelte Code von HTML nach BB Code

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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
 
  <div class="container" id="app">
<div class="card z-depth-3">
<div class="card-header">
<h1 class="cap center-align">Todo-Listen-App</h1>
</div>
<div class="card-content">
<div class="row">
<div class="input-field col s12 l4">
<input type="text" v-model="newTodoTitle" @keyup.enter="addTodo" placeholder="Todo-Eingabe" autofocus>
</div>
<div class="input-field col s12 l4">
<select name="filter" id="todo-filter" @change="todosFilter" v-model="filterType">
<option :value="allTodos" selected="true">Alle</option>
<option :value="todoDone">Abgeschlossen</option>
<option :value="todoNotDone">Nicht erledigt</option>
</select>
<label for="todo-filter">Todo Filter</label>
</div>
<div class="col s12 l4">
<div class="row">
<div class="col s3">
<a href="#" @click.prevent="clearTodosList" class="btn red-text transparent z-depth-0 tooltipped" data-position="top" data-tooltip="Alle Todos entfernen">
<i class="fa fa-fw fa-broom"></i>
</a>
</div>
<div class="col s3">
<a href="#" @click.prevent="deleteCompletedTodos" class="btn orange-text transparent z-depth-0 tooltipped" data-position="top" data-tooltip="Alle abgeschlossenen Todos entfernen">
<i class="fa fa-fw fa-clipboard-check"></i>
</a>
</div>
<div class="col s3">
<a href="#" @click.prevent="makeAllCompleted" class="btn green-text transparent z-depth-0 tooltipped" data-position="top" data-tooltip="Alle Todos als abgeschlossen markieren">
<i class="fa fa-fw fa-check-circle"></i>
</a>
</div>
<div class="col s3">
<a href="#" @click.prevent="makeAllNotCompleted" class="btn blue-text transparent z-depth-0 tooltipped" data-position="top" data-tooltip="Alle Todos als nicht abgeschlossen markieren">
<i class="fa fa-fw fa-clock"></i>
</a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="cap col s12 l4">
<h5>Gesamte Todos: {{todoList.length}}</h5>
</div>
<div class="cap col s12 l4">
<h5>Abgeschlossene Todos: {{completedTodosLength()}}</h5>
</div>
<div class="cap col s12 l4">
<h5>Nicht erledigte Todos: {{notCompletedTodosLength()}}</h5>
</div>
</div>
</div>
<div class="">
<template v-if="todosFilter() != ''">
<div :class="{hide: editingValue != ''}">
<ul class="collection">
<li class="collection-item" v-for="(todo, index) in todosFilter()" :class="{completed: todo.isCompleted}">
<label>
<input type="checkbox" v-model="todo.isCompleted" :checked="todo.isCompleted">
<span>
<span class="todo-title" v-text="todo.title"></span>
</span>
<span>
<a href="#" class="btn-floating right transparent z-depth-0 center-align tooltipped" data-position="top" data-tooltip="Löschen" @click.prevent="deleteTodo(index)">
<i class="fa fa-fw fa-trash red-text"></i>
</a>
<a href="#" class="btn-floating right transparent z-depth-0 center-align tooltipped" data-position="top" data-tooltip="Bearbeiten" @click.prevent="editTodo(index)">
<i class="fa fa-fw fa-pen green-text"></i>
</a>
</span>
</label>
</li>
</ul>
</div>
<div :class="{hide: editingValue == ''}">
<div class="input-field">
<input type="text" v-model="editingValue" @keyup.enter="updateTodo()" @keyup.esc="cancelEditing()">
</div>
</div>
</template>
<template v-else>
<h3 class="cap center">Keine Aufgaben in der Todo Liste</h3>
</template>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.1/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script id="rendered-js">
// jQuery/materializeCss-Funktionsauslöser
$(function () {
$('.tooltipped').tooltip();
$("select").formSelect();
});
// Vue.Js codes
var dataStorageName = "todoList",
todoListStorage = {
fetch: function () {
return JSON.parse(localStorage.getItem(dataStorageName) || '[]');
},
save: function (todos) {
return localStorage.setItem(dataStorageName, JSON.stringify(todos));
} };
new Vue({
el: '#app',
data: {
newTodoTitle: '',
allTodos: 'alle',
todoDone: 'abgeschlossen',
todoNotDone: 'nicht vollständig',
filterType: this.allTodos,
editingValue: '',
todoIndexToEdit: '',
todoList: todoListStorage.fetch() },
methods: {
addTodo: function () {
if (this.newTodoTitle.trim() != '') {
this.todoList.push({
title: this.newTodoTitle,
isCompleted: false });
this.newTodoTitle = '';
}
},
editTodo: function (todoIndex) {
this.editingValue = this.todoList[todoIndex].title;
this.todoIndexToEdit = todoIndex;
},
updateTodo: function () {
this.todoList[this.todoIndexToEdit].title = this.editingValue;
this.editingValue = '';
},
deleteTodo: function (todoIndex) {
let confirmAlert = confirm(`Sind Sie sicher, dass Sie löschen möchten ${this.todoList[todoIndex].title} ?`);
if (confirmAlert) {
this.todoList.splice(todoIndex, 1);
}
},
clearTodosList: function () {
let confirmAlert = confirm(`Sind Sie sicher, dass Sie alle Aufgaben löschen möchten ?`);
if (confirmAlert) {
this.todoList.splice(0, this.todoList.length);
}
},
deleteCompletedTodos: function () {
let confirmAlert = confirm(`Sind Sie sicher, dass Sie alle erledigten Todos löschen möchten? ?`);
if (confirmAlert) {
this.todoList.filter(el => {
if (el.isCompleted) {
this.todoList.splice(this.todoList.indexOf(el), 1);
}
});
}
},
todosFilter: function () {
var todoListAfterFilter;
var ft = this.filterType;
if (ft == this.todoDone) {
todoListAfterFilter = this.todoList.filter(el => {
return el.isCompleted;
});
} else if (ft == this.todoNotDone) {
todoListAfterFilter = this.todoList.filter(el => {
return !el.isCompleted;
});
} else if (ft == this.allTodos) {
todoListAfterFilter = this.todoList;
} else {
todoListAfterFilter = this.todoList;
}
return todoListAfterFilter;
},
completedTodosLength: function () {
return this.todoList.filter(el => {
if (el.isCompleted) {
return el;
}
}).length;
},
notCompletedTodosLength: function () {
return this.todoList.filter(el => {
if (!el.isCompleted) {
return el;
}
}).length;
},
makeAllCompleted: function () {
return this.todoList.forEach(el => {
el.isCompleted = true;
});
},
makeAllNotCompleted: function () {
return this.todoList.forEach(el => {
el.isCompleted = false;
});
},
cancelEditing: function () {
this.editingValue = '';
} },
watch: {
todoList: {
handler: function (todoList) {
todoListStorage.save(todoList);
},
deep: true } } });
//# sourceURL=pen.js
</script>  
 

Schlie�en

Also es sieht schon besser aus, wie mit dem HTML, da waren die Forum-Balken im Vordergrund.

Wie gesagt, ich habe nur probiert, was mir noch aufgefallen ist, dass die Toolbar nicht rechts steht, sondern links.

Rot: Alle Todos entfernen
Gelb: Alle abgeschlossenen Todos entfernen
Grün: Alle Todos als abgeschlossen markieren
Blau: Todo Liste öffnen

Wie gesagt, ich habe es nur versucht, und probiert. Das ist jetzt im Moment das Ergebnis.
Dass ich nicht so gut bin wie Wolfgang, das weiß ich ja. Ich wollte es ja nur probieren.

Mit freundlichen Grüßen

Daishi

Daishi

Antworten

#4 | Neue To-do-Liste für Forum datum

05.10.2022 12:54 (zuletzt bearbeitet: 15.10.2022 00:05)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3316
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1249

Neue To-do-Liste für Forum

Hallo Daishi,
vorweg erstmal besten Dank für Deine Arbeit und Deine Idee!

Gedanken vorab:

Wenn man sich entscheidet eine ToDo-Liste im Forum einzubauen, muss man sich überlegen, wie präsent sie sein soll!
Soll sie ständig zusehen sein oder nur per Button geöffnet werden?

Zum Skript:

Das Skript ist riesig, basiert auch auf "Bootstrap", wie das neue (V6).
Leider müssen zusätzliche CSS-Styles und JavaScripte geladen werden, die einen großen Einfluss aufs Template haben !
Aber sonst genial und besonders!
Die ToDo-Liste passt sich bestens der Seitengröße an und hat viele Funktionen!

Was habe ich geändert:

Ich denke, dass die ToDo-Liste nicht immer präsent sein muss, aber gut erreichbar!
Die ToDo-Liste hat ein Öffnungs-Button bekommen, der auch fixiert werden kann!
Habe zum besseren Verständnis die Tooltipps und die Bezeichnung der Button angepasst.
Formatänderungen zur Anpassung ans Forum (erstmal fürs Business Template).
Die Bootstrap-Tooltipps für die Bezeichnung der Button funktionierte leider nicht in allen Browsern, habe sie auch "title" umgestellt!

Wenn alle Stricke reißen:
Eine andere ToDo-Liste gibt es bereits als Plugin für alle Templates.

ToDoX - Persönliche ToDo-Listen

ToDo-Liste bei minimierten Browserfenster

ToDo-Liste bei maximierten Browserfenster

Installation aufs Business-Template (v4) abgestimmt!

Auslöse-Button:
Wird in der oberen Leiste platziert!

Zum Testen bitte anklicken!

Kann in die Kopfzeile kopiert werden!
Die CSS-Datei in Zeile 50 hat auch großen Einfluss auf das Template!
Die Zeilen 29-49 biegen es wieder gerade!
In Zeile 148 steckt der Auslöse-Button.
Ein Klick auf den Auslöse-Button öffnet die ToDo-Liste!
Der Auslöse-Button ist fixiert, dass heist, das er beim Scrollen stehen bleibt und immer zu sehen ist!

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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
 
<style>
.card_todo {
  padding: 20px;
}
 
.btn_todo {
  margin: 5px;
}
 
li .todo-title {
  color:#000000;
  opacity:1.0;
  font-size:16px; 
  font-weight:normal;
}
 
li:not(.completed) {
  font-weight: bold;
}
/* ToDo-Liste öffnen & schließen */
.z-depth-3 {
  display:none;
}
 
.todo_open {
  display: block;
}
 
/* Notwendige Einstellungen fürs Business-Template */
.content {
  width: 95vw !important; 
}
#usercont_bottom .content {
  display:none; !important;
}
.searchli td, .searchli, #hpmsearchform input {
  height:20px;padding: 0 !important; 
}
#search {color:#000000;
  background:#ffffff !important; 
  margin:3px 5px 0 0 !important; 
  padding: 0 2px !important; 
}
.slider {
  height:30px !important;
}
#obere_leiste .usercontent{
  height: 180px;
}
</style>
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.1/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
 

 <div id="app_todo" style="max-width:50%;margin:50px auto;position:fixed;right:0;left:0;z-index:999999;background:#eeeeee;color:#000000; border-radius:10px;">
	<div class="card_todo z-depth-3">
		<div class="card_todo-header">
			<h4 class="center-align">ToDo-Liste</h4>
		</div>
		<div class="card_todo-content">
			<div class="row">
				<div class="input-field col s12 l4">
					<input name="eingabe" type="text" v-model="newTodoTitle" @keyup.enter="addTodo" placeholder="ToDo-Eingabe" autofocus class="todoid">
				</div>
				<div class="input-field col s12 l4">
					<select name="filter" id="todo-filter" @change="todosFilter" v-model="filterType">
						<option :value="allTodos" selected="true">Alle</option>
						<option :value="todoDone">Erledigt</option>
						<option :value="todoNotDone">Nicht erledigt</option>
					</select>
					<label for="todo-filter">ToDo-Filter</label>
				</div>
				<div class="col s12 l4">
					<div class="row">
						<div class="col s3">
							<a href="#" @click.prevent="clearTodosList" class="btn red-text transparent z-depth-0" data-position="top" title="Alle Todos entfernen" style="opacity:1 !important;">
								<i class="fa fa-fw fa-broom"></i>
							</a>
						</div>
						<div class="col s3">
							<a href="#" @click.prevent="deleteCompletedTodos" class="btn orange-text transparent z-depth-0" data-position="top" title="Alle abgeschlossenen Todos entfernen" style="opacity:1 !important;">
								<i class="fa fa-fw fa-clipboard-check"></i>
							</a>
						</div>
						<div class="col s3">
							<a href="#" @click.prevent="makeAllCompleted" class="btn green-text transparent z-depth-0" data-position="top" title="Alle Todos als abgeschlossen markieren" style="opacity:1 !important;">
								<i class="fa fa-fw fa-check-circle"></i>
							</a>
						</div>
						<div class="col s3">
							<a href="#" @click.prevent="makeAllNotCompleted" class="btn blue-text transparent z-depth-0" data-position="top" title="Alle Todos als nicht abgeschlossen markieren" style="opacity:1 !important;">
								<i class="fa fa-fw fa-clock"></i>
							</a>
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col s12 l3">
					<h6>Alle ToDo's: {{todoList.length}}</h6>
				</div>
				<div class="col s12 l3">
					<h6>Erledigte ToDo's: {{completedTodosLength()}}</h6>
				</div>
				<div class="col s12 l4">
					<h6>Nicht erledigte ToDo's: {{notCompletedTodosLength()}}</h6>
				</div>
			</div>
		</div>
		<div class="">
 
			<template v-if="todosFilter() != ''">
				<div :class="{hide: editingValue != ''}">
					<ul class="collection">
						<li class="collection-item" v-for="(todo, index) in todosFilter()" :class="{completed: todo.isCompleted}">
							<label>
								<input type="checkbox" v-model="todo.isCompleted" :checked="todo.isCompleted">
								<span>
									<span class="todo-title" v-text="todo.title"></span>
								</span>
								<span>
									<a href="#" @click.prevent="deleteTodo(index)" class="btn_todo-floating right transparent z-depth-0 center-align" position="top" title="Löschen" style="opacity:1 !important;">
										<i class="fa fa-fw fa-trash red-text" style="font-size:26px;"></i>
									</a>
									<a href="#" @click.prevent="editTodo(index)" class="btn_todo-floating right transparent z-depth-0 center-align" position="top" title="Bearbeiten" style="opacity:1 !important;">
										<i class="fa fa-fw fa-pen green-text" style="font-size:26px;margin-right:10px;"></i>
									</a>
								</span>
							</label>
						</li>
					</ul>
				</div>
				<div :class="{hide: editingValue == ''}">
					<div class="input-field">
						<input type="text" v-model="editingValue" @keyup.enter="updateTodo()" @keyup.esc="cancelEditing()">
					</div>
				</div>
			</template>
			<template v-else>
				<h5 class="center" style="border:1px solid #e0e0e0;border-radius:2px;padding:10px;background:#ffffff;">Keine Aufgaben in der Liste</h5>
			</template>
		</div>
	</div>
</div>
 
<!-- ToDo öffnen/ schließen -->
<img class="button_todo" src="//files.homepagemodules.de/b104774/a_476_6086ff7b.png" style="width:150px;cursor:pointer; position:fixed; z-index:999999;">  
 
<!-- <input type="button" class="button_todo" value="ToDo Liste" style="padding:5px 15px; font-weight:bold; color:#383838;cursor:pointer;">-->
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
 
 
<script>
window.addEventListener('load', function(){
$('.container').css('width','100%');
 
  $('.button_todo').on('click',function(){
    $('.z-depth-3').toggleClass('todo_open');
  });
 
  $('.tooltipped').tooltip();
  $("select").formSelect();
});
 
// Vue.Js codes
var dataStorageName = "todoList",
todoListStorage = {
  fetch: function () {
    return JSON.parse(localStorage.getItem(dataStorageName) || '[]');
  },
  save: function (todos) {
    return localStorage.setItem(dataStorageName, JSON.stringify(todos));
  } };
 
 
new Vue({
  el: '#app_todo',
  data: {
    newTodoTitle: '',
    allTodos: 'Alle',
    todoDone: 'Abgeschlossen',
    todoNotDone: 'Nicht vollständig',
    filterType: this.allTodos,
    editingValue: '',
    todoIndexToEdit: '',
    todoList: todoListStorage.fetch() },
 
  methods: {
    addTodo: function () {
      if (this.newTodoTitle.trim() != '') {
        this.todoList.push({
          title: this.newTodoTitle,
          isCompleted: false });
 
        this.newTodoTitle = '';
      }
    },
    editTodo: function (todoIndex) {
      this.editingValue = this.todoList[todoIndex].title;
      this.todoIndexToEdit = todoIndex;
    },
    updateTodo: function () {
      this.todoList[this.todoIndexToEdit].title = this.editingValue;
      this.editingValue = '';
    },
    deleteTodo: function (todoIndex) {
      let confirmAlert = confirm(`Sind Sie sicher, dass Sie "${this.todoList[todoIndex].title}" löschen möchten?`);
      if (confirmAlert) {
        this.todoList.splice(todoIndex, 1);
      }
    },
    clearTodosList: function () {
      let confirmAlert = confirm(`Sind Sie sicher, dass Sie alle ToDo's löschen möchten?`);
      if (confirmAlert) {
        this.todoList.splice(0, this.todoList.length);
      }
    },
    deleteCompletedTodos: function () {
      let confirmAlert = confirm(`Sind Sie sicher, dass Sie alle erledigten ToDo's löschen möchten?`);
      if (confirmAlert) {
        this.todoList.filter(el => {
          if (el.isCompleted) {
            this.todoList.splice(this.todoList.indexOf(el), 1);
          }
        });
      }
    },
    todosFilter: function () {
      var todoListAfterFilter;
      var ft = this.filterType;
      if (ft == this.todoDone) {
        todoListAfterFilter = this.todoList.filter(el => {
          return el.isCompleted;
        });
      } else if (ft == this.todoNotDone) {
        todoListAfterFilter = this.todoList.filter(el => {
          return !el.isCompleted;
        });
      } else if (ft == this.allTodos) {
        todoListAfterFilter = this.todoList;
      } else {
        todoListAfterFilter = this.todoList;
      }
      return todoListAfterFilter;
    },
    completedTodosLength: function () {
      return this.todoList.filter(el => {
        if (el.isCompleted) {
          return el;
        }
      }).length;
    },
    notCompletedTodosLength: function () {
      return this.todoList.filter(el => {
        if (!el.isCompleted) {
          return el;
        }
      }).length;
    },
    makeAllCompleted: function () {
      return this.todoList.forEach(el => {
        el.isCompleted = true;
      });
    },
    makeAllNotCompleted: function () {
      return this.todoList.forEach(el => {
        el.isCompleted = false;
      });
    },
    cancelEditing: function () {
      this.editingValue = '';
    } },
 
  watch: {
    todoList: {
      handler: function (todoList) {
        todoListStorage.save(todoList);
      },
      deep: true } } });
//# sourceURL=pen.js
</script>
 
 

Schlie�en

Bis dann und nochmal besten Dank
Wolfgang

Daishi findet das Top!

Antworten

#5 | Update: Neue To-do-Liste für Forum datum

14.10.2022 14:31 (zuletzt bearbeitet: 15.10.2022 01:13)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3316
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1249

Update: Neue To-do-Liste für Forum
Aktualisiert 15.10.22

Hat man die ToDo-Liste zum ersten Mal vor Augen, fragt man sich wie fügt man jetzt die ToDo's ein?
Sollen die ToDo in die Liste eingefügt werden, passiert das normalerweise über die Enter-Taste.

Was ist hinzugekommen?

Die ToDo-Liste hat jetzt einen extra "Einfüge-Button" bekommen, für die ToDo's zum Einfügen und zum Bearbeiten!
Die Bootstrap-Tooltipps funktionieren jetzt auch, sie wurden durch ein nicht angepassten "z-index" unter die Liste geschoben!
Zusätzlich kann auch ein "jQueryUI-Script" die Tooltipps unterdrücken!
Kleine Formatierungen im Aussehen, auch fürs Black-Design!
Neu! Text-Area für mehr ToDo-Text (Bild 3)!

An dieser Stelle nochmal besten Dank an Creator für die Unterstützung!

ToDo-Eingabe mit Enter-Button

ToDo-Bearbeitung mit Enter-Button

ToDo-Eingabe mit Textarea

Installation aufs Business-Template (v4) abgestimmt!

Auslöse-Button:
Wird in der oberen Leiste platziert!

Zum Testen bitte anklicken!

Kann in die Kopfzeile kopiert werden!
Die CSS-Datei in Zeile 91 hat auch großen Einfluss auf das Template!
Die Zeilen 62-87 biegen es wieder gerade!
In Zeile 194 steckt der Auslöse-Button.
Ein Klick auf den Auslöse-Button öffnet die ToDo-Liste!
Der Auslöse-Button ist fixiert, dass heist, das er beim Scrollen stehen bleibt und immer zu sehen ist!

Benötigt man mehr Platz für die ToDo-Texte, ist eine Text-Area erforderlich!
Dazu Zeile 109, 173 und 191 freigeben und
Zeile 108, 172 und 190 sperren oder löschen!

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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
 
<style>
#app .card {
  padding: 20px;
}
 
#app .btn {
  margin: 5px;
}
 
#app li .todo-title {
  width:30vw; 
  height:70px;
  color:#000000;
  opacity:1.0;
  font-size:16px; 
  font-weight:normal;
}
 
#app li:not(.completed) {
  font-weight: bold;
}
 
#app .btn.tooltipped, #app .btn-floating.tooltipped{
 opacity:0.5;
}
 
#app .btn.tooltipped:hover, #app .btn-floating.tooltipped:hover {
 opacity:1.0 !important;
}
#app .dropdown-content  li {
 width:auto !important;
}
 
/* ToDo-Liste öffnen & schließen */
#app .z-depth-3 {
 display:none;
}
 
#app .todo_open {
 display: block;
}
#app .cap {
  margin-right:10px;
  width: auto;
  border:1px solid #e0e0e0;
  border-radius:2px;
  padding:10px;
  background:#eeeeee;
}
 
#app input {
   color:#000000; 
   border: 1px solid transparent;
}
 
.button_todo {
  width:150px;
  cursor:pointer; 
  position: fixed; 
  z-index:1899;
  top:400px
}
 
/* Notwendige Einstellungen fürs Business-Template */
.default-css, .container {
  height: 500px !important; 
}
 
.content {
  width: 95vw !important; 
}
#usercont_bottom .content {
  display:none; !important;
}
.searchli td, .searchli, #hpmsearchform input {
  height:20px;
  padding: 0 !important; 
}
#search {
  background:#ffffff !important; 
  margin:3px 5px 0 0 !important; 
  padding: 0 2px !important; 
}
.slider {
  height:30px !important;
}
#obere_leiste .usercontent{
  height: 180px;
}
 
.boxcontent.titel, .scoll_page {
  display:none;
}
</style>
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.1/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
 
 <div class="container" id="app">
	<div class="card z-depth-3" style="position:relative; z-index:1900 !important; color:#000000;">
		<div class="card-header">
			<h4 class="center-align">ToDo-Liste</h4>
		</div>
		<div class="card-content">
			<div class="row">
				<div class="input-field col s12 l4 cap">
					<label for="todo-filter" style="margin-top:-10px;">ToDo-Eingabe</label>
					<input name="eingabe" type="text" v-model="newTodoTitle" @keyup.enter="addTodo" placeholder=" " autofocus>
					<!-- <textarea name="eingabe" type="text" v-model="newTodoTitle" placeholder=" " autofocus style="height:50px;"></textarea> -->
				</div>
				<div class="input-field col s12 l4 cap">
					<select name="filter" id="todo-filter" @change="todosFilter" v-model="filterType">
						<option :value="allTodos" selected="true">Alle</option>
						<option :value="todoDone">Erledigt</option>
						<option :value="todoNotDone">Nicht erledigt</option>
					</select>
					<label for="todo-filter" style="margin-top:-10px;">ToDo-Filter</label>
				</div>
				<div class="s12">
					<div class="row">
					
						<div class="col s1">
							<a href="#" @click.prevent="addTodo(); updateTodo()" class="btn black-text transparent z-depth-0 tooltipped" data-position="right" data-tooltip="Eingabe übernehmen">
								<i class="fa fa-fw fa-arrow-circle-left" style="margin-top:25px;"></i>
							</a>
						</div>
						<div class="col s1">
							<a href="#" @click.prevent="clearTodosList" class="btn red-text transparent z-depth-0 tooltipped" data-position="top" data-tooltip="Alle ToDo's entfernen">
								<i class="fa fa-fw fa-broom"  style="margin-top:20px;"></i>
							</a>
						</div>
						<div class="col s1">
							<a href="#" @click.prevent="deleteCompletedTodos" class="btn orange-text transparent z-depth-0 tooltipped" data-position="top" data-tooltip="Alle erledigte ToDo's entfernen">
								<i class="fa fa-fw fa-clipboard-check"  style="margin-top:20px;"></i>
							</a>
						</div>
						<div class="col s1">
							<a href="#" @click.prevent="makeAllCompleted" class="btn green-text transparent z-depth-0 tooltipped" data-position="top" data-tooltip="Alle ToDo's als erledigt markieren">
								<i class="fa fa-fw fa-check-circle"  style="margin-top:20px;"></i>
							</a>
						</div>
						<div class="col s1">
							<a href="#" @click.prevent="makeAllNotCompleted" class="btn blue-text transparent z-depth-0 tooltipped" data-position="top" data-tooltip="Alle ToDo's als nicht erledigt markieren">
								<i class="fa fa-fw fa-clock"  style="margin-top:20px;"></i>
							</a>
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col s12 l3">
					<h6>Alle ToDo's: {{todoList.length}}</h6>
				</div>
				<div class="col s12 l3">
					<h6>Erledigte ToDo's: {{completedTodosLength()}}</h6>
				</div>
				<div class="col s12 l4">
					<h6>Nicht erledigte ToDo's: {{notCompletedTodosLength()}}</h6>
				</div>
			</div>
		</div>
		<div class="">
 
			<template v-if="todosFilter() != ''">
				<div :class="{hide: editingValue != ''}">
					<ul class="collection">
						<li class="collection-item" v-for="(todo, index) in todosFilter()" :class="{completed: todo.isCompleted}">
							<label>
								<input type="checkbox" v-model="todo.isCompleted" :checked="todo.isCompleted">
 
								<span>
									<div class="todo-title" v-text="todo.title"></div>
								    <!-- <textarea type="text"  class="todo-title" v-text="todo.title"></textarea> -->
								</span>
								<span  style="padding:10px;">
									<a href="#" @click.prevent="deleteTodo(index)" class="btn-floating right transparent z-depth-0 tooltipped" data-position="top" data-tooltip="Löschen">
										<i class="fa fa-fw fa-trash red-text"></i>
									</a>
									<a href="#" @click.prevent="editTodo(index)" class="btn-floating right transparent z-depth-0 tooltipped" data-position="left" data-tooltip="Bearbeiten">
										<i class="fa fa-fw fa-pen green-text"></i>
									</a>
								</span>
								<br><br>
							</label>
						</li>
					</ul>
				</div>
				<div :class="{hide: editingValue == ''}">
					<div class="input-field">
						<input type="text" v-model="editingValue" @keyup.enter="updateTodo()" @keyup.esc="cancelEditing()" style="width:70%;" class="cap">
						<!-- <textarea type="text" v-model="editingValue"  style="width:70%;height:70px;" class="cap"></textarea> -->
						<a href="#" @click.prevent="updateTodo()" class="btn black-text transparent z-depth-0 tooltipped" data-position="top" data-tooltip="Eingabe übernehmen"><i class="fa fa-fw fa-arrow-circle-left"></i></a>
					</div>
				</div>
			</template>
			<template v-else>
				<h5 class="center cap">Keine Aufgaben in der Liste</h5>
			</template>
		</div>
	</div>
</div>
 
<!-- ToDo öffnen/ schließen -->
<img class="button_todo" src="https://files.homepagemodules.de/b104774/a_476_6086ff7b.png">  
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
 
<script>
window.addEventListener('load', function(){
$('.container').css('width','100%');
 
  $('.button_todo').on('click',function(){
    $('.z-depth-3').toggleClass('todo_open');
  });
 
// ToDo-Liste
  $('.tooltipped').tooltip();
  $("select").formSelect();
});
 

// Vue.Js codes
var dataStorageName = "todoList",
todoListStorage = {
  fetch: function () {
    return JSON.parse(localStorage.getItem(dataStorageName) || '[]');
  },
  save: function (todos) {
    return localStorage.setItem(dataStorageName, JSON.stringify(todos));
  } };
 
new Vue({
  el: '#app',
  data: {
    newTodoTitle: '',
    allTodos: 'Alle',
    todoDone: 'Abgeschlossen',
    todoNotDone: 'Nicht vollständig',
    filterType: this.allTodos,
    editingValue: '',
    todoIndexToEdit: '',
    todoList: todoListStorage.fetch() },
 
  methods: {
    addTodo: function () {
      if (this.newTodoTitle.trim() != '') {
        this.todoList.push({
          title: this.newTodoTitle,
          isCompleted: false });
 
        this.newTodoTitle = '';
      }
    },
    editTodo: function (todoIndex) {
      this.editingValue = this.todoList[todoIndex].title;
      this.todoIndexToEdit = todoIndex;
    },
    updateTodo: function () {
      this.todoList[this.todoIndexToEdit].title = this.editingValue;
      this.editingValue = '';
    },
    deleteTodo: function (todoIndex) {
      let confirmAlert = confirm(`Sind Sie sicher, dass Sie "${this.todoList[todoIndex].title}" löschen möchten?`);
      if (confirmAlert) {
        this.todoList.splice(todoIndex, 1);
      }
    },
    clearTodosList: function () {
      let confirmAlert = confirm(`Sind Sie sicher, dass Sie alle ToDo's löschen möchten?`);
      if (confirmAlert) {
        this.todoList.splice(0, this.todoList.length);
      }
    },
    deleteCompletedTodos: function () {
      let confirmAlert = confirm(`Sind Sie sicher, dass Sie alle erledigten ToDo's löschen möchten?`);
      if (confirmAlert) {
        this.todoList.filter(el => {
          if (el.isCompleted) {
            this.todoList.splice(this.todoList.indexOf(el), 1);
          }
        });
      }
    },
    todosFilter: function () {
      var todoListAfterFilter;
      var ft = this.filterType;
      if (ft == this.todoDone) {
        todoListAfterFilter = this.todoList.filter(el => {
          return el.isCompleted;
        });
      } else if (ft == this.todoNotDone) {
        todoListAfterFilter = this.todoList.filter(el => {
          return !el.isCompleted;
        });
      } else if (ft == this.allTodos) {
        todoListAfterFilter = this.todoList;
      } else {
        todoListAfterFilter = this.todoList;
      }
      return todoListAfterFilter;
    },
    completedTodosLength: function () {
      return this.todoList.filter(el => {
        if (el.isCompleted) {
          return el;
        }
      }).length;
    },
    notCompletedTodosLength: function () {
      return this.todoList.filter(el => {
        if (!el.isCompleted) {
          return el;
        }
      }).length;
    },
    makeAllCompleted: function () {
      return this.todoList.forEach(el => {
        el.isCompleted = true;
      });
    },
    makeAllNotCompleted: function () {
      return this.todoList.forEach(el => {
        el.isCompleted = false;
      });
    },
    cancelEditing: function () {
      this.editingValue = '';
    } },
 
  watch: {
    todoList: {
      handler: function (todoList) {
        todoListStorage.save(todoList);
      },
      deep: true } } });
//# sourceURL=pen.js
</script>
 

Schlie�en

Bis dann und nochmal besten Dank an Daishi und Creator!
Wolfgang

Daishi findet das Top!

Antworten

Audio-Player fürs Forum � � Userbox im Business (v4) perfekt anpassen

�hnliche Themen

Antworten

Letzter Beitrag

Habe mal eine Frage - Benachrichtigung im Seitenmenü
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten von Daishi

25.02.2024 18:31
von

Wolfgang • Zugriffe: 188

Automatisierte Listen - Profilstatistik erweitern
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten von bienchen 3 12.03.2024 10:20
Wolfgang • Zugriffe: 571
Seitenmenü - Version 1+2
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten von Daishi 8 23.09.2023 09:34
Wolfgang • Zugriffe: 425

Kalender fürs Profil, fürs Poral und in den Beiträgen
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Daishi

22.10.2023 22:16
von

Kipper-Spedition • Zugriffe: 889

ChatBot
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Daishi 4 07.08.2022 19:34
Daishi • Zugriffe: 409
"Wer ist Online?" erweitern Teil (1-3) - Online-Zeitzähler!
Erstellt im Forum Das neue Template Xobor (v6) von Wolfgang 7 22.04.2024 22:49
Anne • Zugriffe: 2416
ToDo Liste mit neuen Features zum Einbauen
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang 0 20.01.2016 12:17
Wolfgang • Zugriffe: 1483
Spoiler mit Speicherfunktion
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang 0 07.08.2012 19:54
Wolfgang • Zugriffe: 1285
Deutsche Robinsonliste - Keine Werbesendungen oder lästige Telefonanrufen !
Erstellt im Forum Ank�ndigungen & Termine, wichtige News! von Wolfgang 0 17.01.2011 17:27
Wolfgang • Zugriffe: 1332

Foren Spende

Hallo !

Wir hoffen, dass Dir unser Forum gef�llt und Du Dich hier genauso wohlf�hlst wie wir.

Um Dir und den anderen Mitgliedern das Bestm�gliche bieten zu k�nnen, w�rden wir das Forum gern werbefrei gestalten, mit tollen neuen Extras erg�nzen.

Wenn Du uns dabei unterst�tzen m�chtest, kannst Du mit Hilfe einer kleinen Spende dazu beitragen.

Deine Spende hilft!

Spendenziel: 85 €

78%