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

added local storage

parent 9a4de264
......@@ -10,6 +10,11 @@ class TracksListController extends UIViewController {
});
document.dispatchEvent(event);
});
$(document).on("ViewController::newTrack", (element, event) => {
this.model.add({name : event.detail, points: []});
this.renderCall();
});
}
render() {
......
......@@ -42,6 +42,18 @@ class ViewController extends UIViewController {
$("#list").click(event => {
this.changeState(States.TRACKLIST);
});
$("#addTrack").click(element => {
$(".modal").addClass("show");
});
$("#confirmAdd").click(element => {
$(".modal").removeClass("show");
let event = new CustomEvent("ViewController::newTrack", {
detail : $("#tracknameInput").value()
});
document.dispatchEvent(event);
});
}
changeState(newState) {
......@@ -59,7 +71,7 @@ class ViewController extends UIViewController {
break;
case States.TRACKLIST:
this.addSubview(new TracksListController("main", new Tracks()));
leftButton = "<a href=#>+</a>";
leftButton = "<a id=addTrack href=#>+</a>";
break;
case States.HEIGHTMAP:
this.addSubview(new HeightMapViewController("main", new HeightMap(this.track)));
......@@ -81,6 +93,17 @@ class ViewController extends UIViewController {
</span>
<button id=settings>Settings</button>
</footer>
<section class="modal">
<section>
<h3>Add a new Track</h3>
<p>
<input type="text" id="tracknameInput">
</p>
<p>
<button id=confirmAdd>Add</button>
</p>
</section>
</section>
`;
}
}
......
import $ from "../smallQ.js";
class Tracks {
constructor() {
this._tracks = [
{
name : "Testrack",
points : []
}
];
this._tracks = JSON.parse(localStorage.getItem("tracks")) || [];
console.log(this._tracks);
}
for (let i = 0; i < 100; i++)
this._tracks.push({
name : "Track" + i,
points : []
});
add(track) {
this._tracks.push(track);
localStorage.setItem("tracks", JSON.stringify(this._tracks))
}
tracks() {
if (!this._tracks)
return [];
return this._tracks;
}
}
......
......@@ -38,6 +38,13 @@ class smallQ {
return this;
}
value(newValue) {
if (!newValue)
return this.elements[0].value;
for (let element of this.elements)
element.value = value;
}
attr(key, value) {
if (!value)
return this.elements[0].getAttribute(key);
......
section.modal {
font-family: -apple-system, SF UI Text, Helvetica Neue, Helvetica, Arial, sans-serif;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.2);
opacity: 0;
display: flex;
visibility: hidden;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
transition: visibility 0s, opacity 0.3s ease-out;
&.show {
visibility: visible;
opacity: 1;
}
section {
width: 90%;
background: white;
border-radius: 13px;
padding: 15px;
border: none;
box-sizing: border-box;
p {
margin: 0;
padding: 15px 0 0 0;
}
}
h3 {
font-weight: normal;
margin: 0;
text-align: center;
}
input {
display: block;
border: none;
width: 100%;
padding: 8px;
font-size: large;
box-sizing: border-box;
outline: 0;
border-bottom: solid 1px #ddd;
}
button {
outline: 0;
color: #007aff;
background: transparent;
border: none;
font-size: 17px;
margin: 0 0 0 auto;
display: block;
}
}
\ No newline at end of file
......@@ -3,6 +3,7 @@
@import "footer";
@import "UITableView";
@import "view";
@import "modal";
a {
......
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