From 985403894f935edc76e0b74f49bfe69fa4c65584 Mon Sep 17 00:00:00 2001 From: Tony Garnock-Jones Date: Tue, 6 Dec 2016 18:30:02 +1300 Subject: [PATCH] Refactor single-page-app page assembly --- .../webchat/htdocs/templates/mainpage.html | 79 ---- .../htdocs/templates/page-contacts.html | 11 + .../htdocs/templates/page-conversations.html | 17 + .../htdocs/templates/page-my-requests.html | 3 + .../htdocs/templates/page-new-chat.html | 4 + .../htdocs/templates/page-permissions.html | 5 + .../htdocs/templates/page-questions.html | 17 + examples/webchat/htdocs/webchat.syndicate.js | 346 ++++++++++-------- examples/webchat/server/.gitignore | 1 + 9 files changed, 252 insertions(+), 231 deletions(-) delete mode 100644 examples/webchat/htdocs/templates/mainpage.html create mode 100644 examples/webchat/htdocs/templates/page-contacts.html create mode 100644 examples/webchat/htdocs/templates/page-conversations.html create mode 100644 examples/webchat/htdocs/templates/page-my-requests.html create mode 100644 examples/webchat/htdocs/templates/page-new-chat.html create mode 100644 examples/webchat/htdocs/templates/page-permissions.html create mode 100644 examples/webchat/htdocs/templates/page-questions.html diff --git a/examples/webchat/htdocs/templates/mainpage.html b/examples/webchat/htdocs/templates/mainpage.html deleted file mode 100644 index c0c1761..0000000 --- a/examples/webchat/htdocs/templates/mainpage.html +++ /dev/null @@ -1,79 +0,0 @@ -
-
-

Add a new contact

-
- - - -
- -

Contact List

-
-
-
-
- -
-

New Conversation

-
-
-
-
- -
-
-
-
-
-
-
- -
-
-
-

- Select a conversation from the column to the left, - or create a new conversation. -

-
-
-
-
- -
-

Permissions I enjoy

-
    - -

    Permissions I have granted to others

    -
      -
      - -
      -

      Questions

      -

      There are no questions waiting for you to answer.

      -
      -
      -
      -
      -

      - - -

      - {{#showRequestsFromOthers}} -
      -

      All requests from others

      -
        -
        - {{/showRequestsFromOthers}} -
        -
        - -
        -

        Requests I have made

        -

        You have no outstanding requests waiting for responses from others.

        -
          -
          - -
          - -
          diff --git a/examples/webchat/htdocs/templates/page-contacts.html b/examples/webchat/htdocs/templates/page-contacts.html new file mode 100644 index 0000000..652bf85 --- /dev/null +++ b/examples/webchat/htdocs/templates/page-contacts.html @@ -0,0 +1,11 @@ +

          Add a new contact

          +
          + + + +
          + +

          Contact List

          +
          +
          +
          diff --git a/examples/webchat/htdocs/templates/page-conversations.html b/examples/webchat/htdocs/templates/page-conversations.html new file mode 100644 index 0000000..2f4bf12 --- /dev/null +++ b/examples/webchat/htdocs/templates/page-conversations.html @@ -0,0 +1,17 @@ +
          +
          +
          +
          +
          +
          + +
          +
          +
          +

          + Select a conversation from the column to the left, + or create a new conversation. +

          +
          +
          +
          diff --git a/examples/webchat/htdocs/templates/page-my-requests.html b/examples/webchat/htdocs/templates/page-my-requests.html new file mode 100644 index 0000000..44be86d --- /dev/null +++ b/examples/webchat/htdocs/templates/page-my-requests.html @@ -0,0 +1,3 @@ +

          Requests I have made

          +

          You have no outstanding requests waiting for responses from others.

          + diff --git a/examples/webchat/htdocs/templates/page-new-chat.html b/examples/webchat/htdocs/templates/page-new-chat.html new file mode 100644 index 0000000..4a161ab --- /dev/null +++ b/examples/webchat/htdocs/templates/page-new-chat.html @@ -0,0 +1,4 @@ +

          New Conversation

          +
          +
          +
          diff --git a/examples/webchat/htdocs/templates/page-permissions.html b/examples/webchat/htdocs/templates/page-permissions.html new file mode 100644 index 0000000..73a7e61 --- /dev/null +++ b/examples/webchat/htdocs/templates/page-permissions.html @@ -0,0 +1,5 @@ +

          Permissions I enjoy

          + + +

          Permissions I have granted to others

          + diff --git a/examples/webchat/htdocs/templates/page-questions.html b/examples/webchat/htdocs/templates/page-questions.html new file mode 100644 index 0000000..f621828 --- /dev/null +++ b/examples/webchat/htdocs/templates/page-questions.html @@ -0,0 +1,17 @@ +

          Questions

          +

          There are no questions waiting for you to answer.

          +
          +
          +
          +
          +

          + + +

          + {{#showRequestsFromOthers}} +
          +

          All requests from others

          +
            +
            + {{/showRequestsFromOthers}} +
            diff --git a/examples/webchat/htdocs/webchat.syndicate.js b/examples/webchat/htdocs/webchat.syndicate.js index 0c85d88..3c3e279 100644 --- a/examples/webchat/htdocs/webchat.syndicate.js +++ b/examples/webchat/htdocs/webchat.syndicate.js @@ -88,6 +88,8 @@ actor { this.ui = new Syndicate.UI.Anchor(); + var mainpage_c = this.ui.context('mainpage'); + field this.connectedTo = null; field this.myRequestCount = 0; // requests *I* have made of others field this.otherRequestCount = 0; // requests *others* have made of me @@ -101,60 +103,48 @@ on asserted brokerConnected($url) { this.connectedTo = url; } on retracted brokerConnected(_) { this.connectedTo = null; } - var mainpage_c = this.ui.context('mainpage'); - during inbound(uiTemplate("mainpage.html", $mainpage)) { - assert mainpage_c.html('div#main-div', Mustache.render( - mainpage, - { - questionCount: this.questionCount, - myRequestCount: this.myRequestCount, - otherRequestCount: this.otherRequestCount, - globallyVisible: this.globallyVisible, - showRequestsFromOthers: this.showRequestsFromOthers - })); - } - during inbound(online()) { on start { this.globallyVisible = true; } on stop { this.globallyVisible = false; } } - during mainpage_c.fragmentVersion($mainpageVersion) { - // We track mainpageVersion so that changes to mainpage.html force re-creation - // of nested widgetry. If we didn't include mainpageVersion in each subwidget's - // context, then so long as the subwidget's content itself remained unchanged, - // the user would see the subwidget disappear when mainpage.html changed. - - on asserted Syndicate.UI.locationHash($hash) { - var tab = hash.substr(1); - console.log("Switching tab to", tab); - $('#main-tabs-bodies > div').hide(); - $('#main-tabs-tabs a.nav-link').removeClass('active'); - $('#main-tab-body-' + tab).show(); - $('#main-tab-tab-' + tab).addClass('active'); + during inbound(uiTemplate("nav-account.html", $entry)) { + var c = this.ui.context('nav', 0, 'account'); + assert outbound(online()) when (this.locallyVisible); + assert c.html('#nav-ul', Mustache.render( + entry, + { + email: sessionInfo.email, + avatar: avatar(sessionInfo.email), + questionCount: this.questionCount, + myRequestCount: this.myRequestCount, + otherRequestCount: this.otherRequestCount, + globallyVisible: this.globallyVisible, + locallyVisible: this.locallyVisible + })); + on message c.event('.toggleInvisible', 'click', _) { + this.locallyVisible = !this.locallyVisible; } + } - during inbound(uiTemplate("nav-account.html", $entry)) { - var c = this.ui.context(mainpageVersion, 'nav', 0, 'account'); - assert outbound(online()) when (this.locallyVisible); - assert c.html('#nav-ul', Mustache.render( - entry, - { - email: sessionInfo.email, - avatar: avatar(sessionInfo.email), - questionCount: this.questionCount, - myRequestCount: this.myRequestCount, - otherRequestCount: this.otherRequestCount, - globallyVisible: this.globallyVisible, - locallyVisible: this.locallyVisible - })); - on message c.event('.toggleInvisible', 'click', _) { - this.locallyVisible = !this.locallyVisible; - } + // assert mainpage_c.html('div#main-div', Mustache.render( + // mainpage, + // { + // questionCount: this.questionCount, + // myRequestCount: this.myRequestCount, + // otherRequestCount: this.otherRequestCount, + // globallyVisible: this.globallyVisible, + // showRequestsFromOthers: this.showRequestsFromOthers + // })); + + + during Syndicate.UI.locationHash('/contacts') { + during inbound(uiTemplate("page-contacts.html", $mainEntry)) { + assert mainpage_c.html('div#main-div', Mustache.render(mainEntry, {})); } during inbound(uiTemplate("contact-entry.html", $entry)) { - during Syndicate.UI.locationHash('/contacts') { + during mainpage_c.fragmentVersion($mainpageVersion) { during inbound(contactListEntry(sessionInfo.email, $contact)) { field this.pendingContactRequest = false; field this.isPresent = false; @@ -167,13 +157,12 @@ on stop { this.pendingContactRequest = false; } } var c = this.ui.context(mainpageVersion, 'all-contacts', contact); - assert c.html('#main-tab-body-contacts .contact-list', - Mustache.render(entry, { - email: contact, - avatar: avatar(contact), - pendingContactRequest: this.pendingContactRequest, - isPresent: this.isPresent - })); + assert c.html('.contact-list', Mustache.render(entry, { + email: contact, + avatar: avatar(contact), + pendingContactRequest: this.pendingContactRequest, + isPresent: this.isPresent + })); on message c.event('.delete-contact', 'click', _) { if (confirm((this.pendingContactRequest ? "Cancel contact request to " @@ -189,146 +178,199 @@ } } - during inputValue('#add-contact-email', $rawContact) { - var contact = rawContact.trim(); - if (contact) { - on message mainpage_c.event('#add-contact', 'click', _) { - :: outbound(createResource(grant(sessionInfo.email, - sessionInfo.email, - contact, - pFollow(sessionInfo.email), - false))); - $('#add-contact-email').val(''); + during mainpage_c.fragmentVersion($mainpageVersion) { + during inputValue('#add-contact-email', $rawContact) { + var contact = rawContact.trim(); + if (contact) { + on message mainpage_c.event('#add-contact', 'click', _) { + :: outbound(createResource(grant(sessionInfo.email, + sessionInfo.email, + contact, + pFollow(sessionInfo.email), + false))); + $('#add-contact-email').val(''); + } } } } + } + + during Syndicate.UI.locationHash('/permissions') { + during inbound(uiTemplate("page-permissions.html", $mainEntry)) { + assert mainpage_c.html('div#main-div', Mustache.render(mainEntry, {})); + } during inbound(uiTemplate("permission-entry.html", $entry)) { - during inbound(permitted($i, $e, $p, $d)) { - if (i !== sessionInfo.email) { - var c = this.ui.context(mainpageVersion, 'permitted', i, e, p, d); - assert c.html('#permissions', Mustache.render(entry, - {issuer: i, - email: e, - permission: JSON.stringify(p), - isDelegable: d, - isRelinquishable: i !== e})); - on message c.event('.relinquish', 'click', _) { - :: outbound(deleteResource(permitted(i, e, p, d))); + during mainpage_c.fragmentVersion($mainpageVersion) { + during inbound(permitted($i, $e, $p, $d)) { + if (i !== sessionInfo.email) { + var c = this.ui.context(mainpageVersion, 'permitted', i, e, p, d); + assert c.html('#permissions', Mustache.render(entry, { + issuer: i, + email: e, + permission: JSON.stringify(p), + isDelegable: d, + isRelinquishable: i !== e + })); + on message c.event('.relinquish', 'click', _) { + :: outbound(deleteResource(permitted(i, e, p, d))); + } } } } } during inbound(uiTemplate("grant-entry.html", $entry)) { - during inbound(grant($i, sessionInfo.email, $ge, $p, $d)) { - var c = this.ui.context(mainpageVersion, 'granted', i, ge, p, d); - assert c.html('#grants', Mustache.render(entry, {issuer: i, - grantee: ge, - permission: JSON.stringify(p), - isDelegable: d})); - on message c.event('.revoke', 'click', _) { - :: outbound(deleteResource(grant(i, sessionInfo.email, ge, p, d))); + during mainpage_c.fragmentVersion($mainpageVersion) { + during inbound(grant($i, sessionInfo.email, $ge, $p, $d)) { + var c = this.ui.context(mainpageVersion, 'granted', i, ge, p, d); + assert c.html('#grants', Mustache.render(entry, { + issuer: i, + grantee: ge, + permission: JSON.stringify(p), + isDelegable: d + })); + on message c.event('.revoke', 'click', _) { + :: outbound(deleteResource(grant(i, sessionInfo.email, ge, p, d))); + } } } } + } + + during Syndicate.UI.locationHash('/my-requests') { + during inbound(uiTemplate("page-my-requests.html", $mainEntry)) { + assert mainpage_c.html('div#main-div', Mustache.render(mainEntry, { + myRequestCount: this.myRequestCount + })); + } during inbound(uiTemplate("permission-request-out-GENERIC.html", $genericEntry)) { - during inbound(permissionRequest($issuer, sessionInfo.email, $permission)) { - on start { this.myRequestCount++; } - on stop { this.myRequestCount--; } + during mainpage_c.fragmentVersion($mainpageVersion) { + during inbound(permissionRequest($issuer, sessionInfo.email, $permission)) { + on start { this.myRequestCount++; } + on stop { this.myRequestCount--; } - var c = this.ui.context(mainpageVersion, 'my-permission-request', issuer, permission); - field this.entry = genericEntry; - assert c.html('#my-permission-requests', - Mustache.render(this.entry, - {issuer: issuer, - permission: permission, - permissionJSON: JSON.stringify(permission)})) - when (this.entry); - var specificTemplate = "permission-request-out-" + - encodeURIComponent(permission.meta.label) + ".html"; - on asserted inbound(uiTemplate(specificTemplate, $specificEntry)) { - this.entry = specificEntry || genericEntry; - } - on message c.event('.cancel', 'click', _) { - :: outbound(deleteResource(permissionRequest(issuer, sessionInfo.email, permission))); - } - } - } - - during inputValue('#show-all-requests-from-others', $showRequestsFromOthers) { - on start { this.showRequestsFromOthers = showRequestsFromOthers; } - } - - during inbound(uiTemplate("permission-request-in-GENERIC.html", $genericEntry)) { - during inbound(permissionRequest($issuer, $grantee, $permission)) { - if (grantee !== sessionInfo.email) { - on start { this.otherRequestCount++; } - on stop { this.otherRequestCount--; } - - var c = this.ui.context(mainpageVersion, 'others-permission-request', issuer, grantee, permission); + var c = this.ui.context(mainpageVersion, 'my-permission-request', issuer, permission); field this.entry = genericEntry; - assert c.html('#others-permission-requests', - Mustache.render(this.entry, - {issuer: issuer, - grantee: grantee, - permission: permission, - permissionJSON: JSON.stringify(permission)})) - when (this.entry); - var specificTemplate = "permission-request-in-" + + assert c.html('#my-permission-requests', Mustache.render(this.entry, { + issuer: issuer, + permission: permission, + permissionJSON: JSON.stringify(permission) + })) when (this.entry); + var specificTemplate = "permission-request-out-" + encodeURIComponent(permission.meta.label) + ".html"; on asserted inbound(uiTemplate(specificTemplate, $specificEntry)) { this.entry = specificEntry || genericEntry; } - on message c.event('.grant', 'click', _) { - :: outbound(createResource(grant(issuer, - sessionInfo.email, - grantee, - permission, - false))); + on message c.event('.cancel', 'click', _) { + :: outbound(deleteResource(permissionRequest(issuer, sessionInfo.email, permission))); } - on message c.event('.deny', 'click', _) { - :: outbound(deleteResource(permissionRequest(issuer, grantee, permission))); + } + } + } + } + + during Syndicate.UI.locationHash('/questions') { + during inbound(uiTemplate("page-questions.html", $mainEntry)) { + assert mainpage_c.html('div#main-div', Mustache.render(mainEntry, { + questionCount: this.questionCount, + otherRequestCount: this.otherRequestCount, + showRequestsFromOthers: this.showRequestsFromOthers + })); + } + + during mainpage_c.fragmentVersion($mainpageVersion) { + during inputValue('#show-all-requests-from-others', $showRequestsFromOthers) { + on start { this.showRequestsFromOthers = showRequestsFromOthers; } + } + } + + during inbound(uiTemplate("permission-request-in-GENERIC.html", $genericEntry)) { + during mainpage_c.fragmentVersion($mainpageVersion) { + during inbound(permissionRequest($issuer, $grantee, $permission)) { + if (grantee !== sessionInfo.email) { + on start { this.otherRequestCount++; } + on stop { this.otherRequestCount--; } + + var c = this.ui.context(mainpageVersion, 'others-permission-request', issuer, grantee, permission); + field this.entry = genericEntry; + assert c.html('#others-permission-requests', Mustache.render(this.entry, { + issuer: issuer, + grantee: grantee, + permission: permission, + permissionJSON: JSON.stringify(permission) + })) when (this.entry); + var specificTemplate = "permission-request-in-" + + encodeURIComponent(permission.meta.label) + ".html"; + on asserted inbound(uiTemplate(specificTemplate, $specificEntry)) { + this.entry = specificEntry || genericEntry; + } + on message c.event('.grant', 'click', _) { + :: outbound(createResource(grant(issuer, + sessionInfo.email, + grantee, + permission, + false))); + } + on message c.event('.deny', 'click', _) { + :: outbound(deleteResource(permissionRequest(issuer, grantee, permission))); + } } } } } - during inbound(question($qid, $timestamp, $klass, sessionInfo.email, $title, $blurb, $qt)) - { - on start { this.questionCount++; } - on stop { this.questionCount--; } + during mainpage_c.fragmentVersion($mainpageVersion) { + during + inbound(question($qid, $timestamp, $klass, sessionInfo.email, $title, $blurb, $qt)) + { + on start { this.questionCount++; } + on stop { this.questionCount--; } - var c = this.ui.context(mainpageVersion, 'question', timestamp, qid); + var c = this.ui.context(mainpageVersion, 'question', timestamp, qid); - switch (qt.meta.label) { - case "option-question": { - var options = qt.fields[0]; - during inbound(uiTemplate("option-question.html", $entry)) { - assert c.html('#question-container', - Mustache.render(entry, {questionClass: klass, - title: title, - blurb: blurb, - options: options})); - on message c.event('.response', 'click', $e) { - react { assert outbound(answer(qid, e.target.dataset.value)); } + switch (qt.meta.label) { + case "option-question": { + var options = qt.fields[0]; + during inbound(uiTemplate("option-question.html", $entry)) { + assert c.html('#question-container', Mustache.render(entry, { + questionClass: klass, + title: title, + blurb: blurb, + options: options + })); + on message c.event('.response', 'click', $e) { + react { assert outbound(answer(qid, e.target.dataset.value)); } + } } + break; + } + default: { + break; } - break; - } - default: { - break; } } } } + + during Syndicate.UI.locationHash('/conversations') { + during inbound(uiTemplate("page-conversations.html", $mainEntry)) { + assert mainpage_c.html('div#main-div', Mustache.render(mainEntry, {})); + } + } + + during Syndicate.UI.locationHash('/new-chat') { + during inbound(uiTemplate("page-new-chat.html", $mainEntry)) { + assert mainpage_c.html('div#main-div', Mustache.render(mainEntry, {})); + } + } } } - G.dataspace.setOnStateChange(function (mux, patch) { - $("#debug-space").text(Syndicate.prettyTrie(mux.routingTable)); - }); + // G.dataspace.setOnStateChange(function (mux, patch) { + // $("#debug-space").text(Syndicate.prettyTrie(mux.routingTable)); + // }); } })(); diff --git a/examples/webchat/server/.gitignore b/examples/webchat/server/.gitignore index e654e12..08fcf4f 100644 --- a/examples/webchat/server/.gitignore +++ b/examples/webchat/server/.gitignore @@ -1 +1,2 @@ testing.rktd +compiled/main_rkt.*