Skip to content

Commit

Permalink
Add "complete" state to todo items
Browse files Browse the repository at this point in the history
  • Loading branch information
@jamesnvc
jamesnvc committed Feb 18, 2019
1 parent 208d6fd commit 81af3a7
Show file tree
Hide file tree
Showing 2 changed files with 14 additions and 7 deletions.
5 changes: 4 additions & 1 deletion prolog/todo_api.pl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,11 @@
add_todo(js{desc: Desc}),
State1) :-
gensym('', Id),
NewTodo = todo{desc: Desc, id: Id},
NewTodo = todo{desc: Desc, id: Id, complete: false},
phrase(add_todo(NewTodo), [State0], [State1]), !.

handle_event(State, update, State) :-
debug(pengine, "Updating state ~w", [State]).

handle_event(State, Event, State) :-
debug(pengine, "Unknown Pengine event ~w ~w", [State, Event]).
16 changes: 10 additions & 6 deletions prolog/todo_page.pl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,13 +36,17 @@
br([]),
\add_todo])])).

todo_css -->
css(['.complete'(['text-decoration'('line-through')])]).

todo_list -->
vue_html([vue_list(todo in todos,
vue_html([\include_css(todo_css),
vue_list(todo in todos,
li(class(todo),
[
input([type(checkbox), name(toggle)]),
$('todo.desc')
])
label(['v-bind:class'('{complete: todo.complete}')],
[vue_input([type(checkbox), name(toggle),
model('todo.complete')]),
$('todo.desc')]))
)]).

add_todo -->
Expand All @@ -52,4 +56,4 @@
placeholder('Enter ToDo')]),
input([type(submit), value('Add')])
])
).
).

6 comments on commit 81af3a7

@nicoabie
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @jamesnvc, this shreds some light into issue #1

Now that I know how can it be done I'll try to work in the docs for it.

Question, what would be the way to call the server to persist the change on each toggle?

@jamesnvc
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This works for now, but I think a better solution will be to add something to the vuelog library part to wrap the v-bind stuff.

Also something that will need improvement is that this actually already persists the change: The handle_event(S, update, S) event is triggered whenever properties of the state change -- unfortunately, with this set up, the server doesn't actually get to see what the previous state was. It does work for this sort of simple setup though.

@nicoabie
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh ok, will you mind adding those as issues so we can have better tracking of them. Maybe the first one belongs to the vuelog repository, but the second one we could add it here to test it out and when we have something that meets the expectations we just port it.

@jamesnvc
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Annoyingly, the update thing is something that's hard-coded in Vuelog itself right now, so it might make more sense to have the issue there; this line makes it so whenever the Vue-side model changes, it sends the new state to the pengine with the parameter just being update.

@jamesnvc
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Opened swi-prologhackday/vuelog#1 and swi-prologhackday/vuelog#2

@nicoabie
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah that completely makes sense, great! Thanks James we will hopefully tackle them soon!

Please sign in to comment.