Commit fc31cd53 authored by Michael Ochmann's avatar Michael Ochmann
Browse files

added deletion of tracks

parent adb88cd9
......@@ -2,29 +2,48 @@ import UIViewController from "./UIViewController.js";
import $ from "../smallQ.js";
class TracksListController extends UIViewController {
viewDidLoad() {
$(".track").click(element => {
if (element.hasClass("del")) {
element.removeClass("del");
return;
}
let event = new CustomEvent("TrackListController:select", {
detail : element.attr("data-id")
});
document.dispatchEvent(event);
}).swipeleft(event => {
$(event.target).addClass("del");
});
$(document).on("ViewController::newTrack", (element, event) => {
this.model.add({name : event.detail, points: []});
this.renderCall();
});
$(".delete").click(element => {
this.model.remove(parseInt(element.attr("data-id")));
this.renderCall();
});
}
render() {
let tracks = this.model.tracks().map((track, index) => {
return `<li class="track" data-id="track_${index}">${track.name}</li>`;
return `
<section class="listItem">
<section class="track" data-id="track_${index}">
${track.name}
</section>
<section class="delete" data-id="${index}">Delete</section>
</section>
`
}).join("");
return `
<ul class="UITableView">
<section class="UITableViewReveal">
${tracks}
</ul>
</section>
`;
}
}
......
......@@ -48,11 +48,20 @@ class ViewController extends UIViewController {
});
$("#confirmAdd").click(element => {
$(".modal").removeClass("show");
let value = $("#tracknameInput").value();
if (value === "")
return;
let event = new CustomEvent("ViewController::newTrack", {
detail : $("#tracknameInput").value()
detail : value
});
document.dispatchEvent(event);
ViewController.ClearModal();
});
$("#modalDialog").click((element, event) => {
event.stopPropagation();
});
$(".modal").click((element, event) => {
ViewController.ClearModal();
});
}
......@@ -61,6 +70,11 @@ class ViewController extends UIViewController {
this.renderCall();
}
static ClearModal() {
$("#tracknameInput").setValue("");
$(".modal").removeClass("show");
}
render() {
this.children = [];
let leftButton = "<a></a>";
......@@ -94,7 +108,7 @@ class ViewController extends UIViewController {
<button id=settings>Settings</button>
</footer>
<section class="modal">
<section>
<section id="modalDialog">
<h3>Add a new Track</h3>
<p>
<input type="text" id="tracknameInput">
......
......@@ -3,11 +3,19 @@ import $ from "../smallQ.js";
class Tracks {
constructor() {
this._tracks = JSON.parse(localStorage.getItem("tracks")) || [];
console.log(this._tracks);
}
add(track) {
this._tracks.push(track);
this._save();
}
remove(trackID) {
this._tracks.splice(trackID, 1);
this._save();
}
_save() {
localStorage.setItem("tracks", JSON.stringify(this._tracks))
}
......
......@@ -41,6 +41,14 @@ class smallQ {
value(newValue) {
if (!newValue)
return this.elements[0].value;
for (let element of this.elements) {
element.value = newValue;
}
return this;
}
setValue(value) {
for (let element of this.elements)
element.value = value;
}
......@@ -70,11 +78,34 @@ class smallQ {
element.classList.remove(className);
}
hasClass(className) {
return this.elements[0].classList.contains(className);
}
each(callback) {
for (let element of this.elements)
callback(new smallQ(element));
}
swipeleft(callback) {
if (this.elements.length === 0 || typeof this.get(0) === "undefined")
return;
for (let element of this.elements) {
element.addEventListener("touchstart", event => {
this.touchstart = {x : event.changedTouches[0].screenX, y : event.changedTouches[0].screenY};
}, false);
element.addEventListener("touchend", event => {
this.touchend = {x : event.changedTouches[0].screenX, y : event.changedTouches[0].screenY};
if (this.touchend.x < (this.touchstart.x - 50))
callback.bind(this)(event);
this.touchstart = {x : 0, y : 0};
}, false);
}
return this;
}
static $(selector) {
return new smallQ(selector);
......
......@@ -4,6 +4,7 @@
margin: 0;
li {
position: relative;
padding: 15px 12px;
border-bottom: solid 1px #eee;
......
.UITableViewReveal {
.listItem {
border-bottom: solid 1px #eee;
position: relative;
height: 60px;
box-sizing: border-box;
section {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
box-sizing: border-box;
}
section:first-child {
background: white;
padding: 15px 12px;
z-index: 100;
transition: all 0.3s ease-out;
&.del {
left: -50px;
}
}
section:last-child {
background: red;
color: white;
text-align: right;
line-height: 60px;
}
}
}
\ No newline at end of file
......@@ -7,6 +7,7 @@ section.modal {
height: 100%;
background: rgba(0,0,0,0.2);
z-index: 1000;
opacity: 0;
display: flex;
visibility: hidden;
......@@ -28,6 +29,7 @@ section.modal {
padding: 15px;
border: none;
box-sizing: border-box;
z-index: 1100;
p {
margin: 0;
......
......@@ -2,6 +2,7 @@
@import "header";
@import "footer";
@import "UITableView";
@import "UITableViewReveal";
@import "view";
@import "modal";
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment