JSFiddle - React, Tailwind, and code Playground

by angstrey

HTML

<script src="/scripts/lib/sammy.js" type="text/javascript"></script>

<!-- Todo: Create UI --> 
<!-- Folders --> 
<ul class="folders" data-bind="foreach: folders">     
    <li data-bind="text: $data,
                   css: { selected: $data == $root.chosenFolderId() },
                   click: $root.goToFolder"></li>
</ul>

<!-- Mails grid -->
<table class="mails" data-bind="with: chosenFolderData">
    <thead><tr><th>From</th><th>To</th><th>Subject</th><th>Date</th></tr></thead>
    <tbody data-bind="foreach: mails">
        <tr data-bind="click: $root.goToMail">
            <td data-bind="text: from"></td>
            <td data-bind="text: to"></td>
            <td data-bind="text: subject"></td>
            <td data-bind="text: date"></td>
        </tr>     
    </tbody>
</table>


<!-- Chosen mail -->
<div class="viewMail" data-bind="with: chosenMailData">
    <div class="mailInfo">
        <h1 data-bind="text: subject"></h1>
        <p><label>From</label>: <span data-bind="text: from"></span></p>
        <p><label>To</label>: <span data-bind="text: to"></span></p>
        <p><label>Date</label>: <span data-bind="text: date"></span></p>
    </div>
    <p class="message" data-bind="html: messageContent" />
</div>

JavaScript

function WebmailViewModel() {
    // Data
    var self = this;
    self.folders = ['Inbox', 'Archive', 'Sent', 'Spam'];
    self.chosenFolderId = ko.observable();
    self.chosenFolderData = ko.observable();
    self.chosenMailData = ko.observable();

    self.goToFolder = function (folder) {
        //self.chosenFolderId(folder);
        //self.chosenMailData(null);
        //$.get("/mail", { folder: folder }, self.chosenFolderData);
        location.hash = folder;
    };
    
    self.goToMail = function (mail) {
        //self.chosenFolderId(mail.folder);
        //self.chosenFolderData(null);
        //$.get("/mail", { mailId: mail.id }, self.chosenMailData);
        location.hash = mail.folder + "/" + mail.id;
    };
    
    //self.goToFolder("Inbox");
    
    Sammy(function () {
        this.get("#:folder", function () {
            self.chosenFolderId(this.params.folder);
            self.chosenMailData(null);
            $.get("/mail", { folder: this.params.folder }, self.chosenFolderData);
        });
        
        this.get("#:folder/:mailId", function () {
            self.chosenFolderId(this.params.folder);
            self.chosenFolderData(null);
            $.get("/mail", { mailId: this.params.mailId }, self.chosenMailData);
        });
        
        this.get("", function () {
            this.app.runRoute("get", "#Inbox");
        });
    }).run();
};

ko.applyBindings(new WebmailViewModel());