Avi - Messages

by Avi Algaly

HTML

<link rel="stylesheet" href="http://fortawesome.github.com/Font-Awesome/assets/css/font-awesome.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://raw.github.com/timrwood/moment/2.0.0/min/moment.min.js"></script>
<ul data-bind="foreach: messages" class="message-list">
    <li data-bind="attr: { 'data-id': id }, css: { intermediate: intermediateState }">
        <a href="#" data-bind="click: toggleMessageText">
            <i data-bind="css: iconClassName, attr: { title: typeTitle }"></i><span data-bind="text: subject"></span>
        </a>
        <i class="icon-remove-circle remove-message" title="Remove Message" data-bind="click: $parent.removeMessage"></i>
        <section data-bind="slideVisible: textVisible" style="display: none;">
            <p data-bind="text: text"></p>
            <p class="message-metadata">from <span data-bind="text: senderFullName"></span> on <span data-bind="text: messageDate"></span></p>
        </section>
    </li>
</ul>

SCSS

$line-height: 40px;
$text-color: #777;

body {
    font-family: Arial, Sans-Serif;
    font-size: 1em;
    color: $text-color;
}

.intermediate {
    opacity: 0.3;
}

.message-list {
    font-family: Arial, Sans-Serif;
    font-size: 0.9em;
    list-style: none;
    width: 300px;
    
    li {
        border: 1px solid #bbb;
        margin-top: -1px;
        position: relative;
        a {
            color: $text-color;
            text-decoration: none;
            display: block;
            line-height: $line-height;
            padding: 0 10px;
            margin-right: 20px;
            span {
                margin-left: 15px;
            }
        }
        .remove-message {
            position: absolute;
            right: 0;
            top: 0;
            line-height: $line-height;
            cursor: pointer;
        }
        section {
            border-top: 1px solid #ddd;
            background-color: #eee;
            
            p {
                margin: 0;
                padding: 8px;
            }
            
            .message-metadata {
                font-size: 0.8em;
                text-align: right;
                
                span {
                    font-weight: bold;
                }
            }
        }
    }
}

JavaScript

// this is the real raw data returned from the server
var messagesResponseJSON = [{"Id":"e85134d4-f8ca-4a1d-ba0e-34677cc5b951","Date":"2013-01-01T00:00:00","Subject":"Please pay the bill","Text":"i think you still own me money","CreatorId":6,"MessageStatus":1,"ReminderDate":"2013-03-04T15:01:31.503","StatusId":1,"TypeId":1,"TypeTitle":"message","Email":"[email protected]","FirstName":"John","LastName":"Doe","Phone":"0215488775"},{"Id":"e85134d4-f8ca-4a1d-ba0e-34677cc5b954","Date":"2012-11-11T00:00:00","Subject":"SubjectTest","Text":"Message Text","CreatorId":7,"MessageStatus":1,"ReminderDate":"2012-11-13T00:00:00","StatusId":1,"TypeId":1,"TypeTitle":"message","Email":"[email protected]","FirstName":"xxx","LastName":"yyy","Phone":"1700780787"},{"Id":"f3c3eb47-f1e7-4d63-bd75-fe4fc92261f0","Date":"2012-11-11T00:00:00","Subject":"SubjectTest1","Text":"MsgText1","CreatorId":7,"MessageStatus":2,"ReminderDate":"2012-12-13T00:00:00","StatusId":2,"TypeId":2,"TypeTitle":"payment","Email":"[email protected]","FirstName":"xxx","LastName":"yyy","Phone":"1700780787"}];

/*
    a small DB-Server for manipulating/fetching server data
*/
var MessagesDb = {
    // loads all the messages from the server
    load: function() {
        var d = $.Deferred();
        
        // simulating server call
        // $.get("/messages")
        window.setTimeout(function () {
            d.resolve(messagesResponseJSON);
            // for testing failure fetching messages comment previous line and uncomment next
            // d.reject("The messages could not be retrieved");
        }, 1500);
        
        return d.promise();
    },
    // deletes message with passed in "id" on the server
    delete: function (id) {
        var d = $.Deferred();
        
        // simulating server call
        // $.post("/messages/delete/:id")
        // -----------------------------
        // $.ajax({
        //     url: "/messages/:id",
        //     method: "DELETE"
        // });
       ...