How to show date once per day from an array with multiple timestamps

Question

I have an array with multiple conversations and with every message that has been typed either by the user or by the admin a timestamp indicating at what time the message was sent. A conversation can end on the same day or it can continue the day after it was started or a week, month even a year later.

I want to show the day (example: 7 MAY 2015) on the page indicating that the conversation is started today. And if the conversation is picked up on a later date i want to show that date of the day (example: 8 MAY 2015).

I am using AngularJS and I have search for a example of a chat application or similar but I have not found a good example nor have I found a tutorial.

Her is my array with the conversations:

conversationList.conversations = [
     {
        ConversationID: 1,
        Person   : {
            name  : "Bobi Ristov",
            email : "bobby.ristov@socialdeal.nl",
            image : "/img/bobi.png",
            phone : "06 - 12345678"
        },
        Messages : [ {
                         text         : "Ik heb een vraag",
                         messageClass : "user-message",
                         animationClass: "user-reply",
                         time         : 1429257762800
                     },
                     {
                         text         : "Wat is je vraag?",
                         messageClass : "admin-message pull-right",
                         animationClass: "reply",
                         time         : 1429257942900
                     },
                     {
                         text         : "Hoe kun je een deal kopen?",
                         messageClass : "user-message",
                         animationClass: "user-reply",
                         time         : 1429257763000
                     },
                     {
                         text         : "Door middel op de 'Koop nu' knop te drukken",
                         messageClass : "admin-message pull-right",
                         animationClass: "reply",
                         time         : 1429259943100
                     },
                     {
                         text         : "Ik heb een vraag",
                         messageClass : "user-message",
                         animationClass: "user-reply",
                         time         : 1429257762800
                     },
                     {
                         text         : "Wat is je vraag?",
                         messageClass : "admin-message pull-right",
                         animationClass: "reply",
                         time         : 1429257942900
                     },
                     {
                         text         : "Hoe kun je een deal kopen?",
                         messageClass : "user-message",
                         animationClass: "user-reply",
                         time         : 1429257763000
                     },
                     {
                         text         : "Door middel op de 'Koop nu' knop te drukken",
                         messageClass : "admin-message pull-right",
                         animationClass: "reply",
                         time         : 1429259943100
                     },
                     {
                         text         : "Ik heb een vraag",
                         messageClass : "user-message",
                         animationClass: "user-reply",
                         time         : 1429257762800
                     },
                     {
                         text         : "Wat is je vraag?",
                         messageClass : "admin-message pull-right",
                         animationClass: "reply",
                         time         : 1429257942900
                     },
                     {
                         text         : "Hoe kun je een deal kopen?",
                         messageClass : "user-message",
                         animationClass: "user-reply",
                         time         : 1429257763000
                     },
                     {
                         text         : "Door middel op de 'Koop nu' knop te drukken",
                         messageClass : "admin-message pull-right",
                         animationClass: "reply",
                         time         : 1429259943100
                     },
                     {
                         text         : "Ik heb een vraag",
                         messageClass : "user-message",
                         animationClass: "user-reply",
                         time         : 1429257762800
                     },
                     {
                         text         : "Wat is je vraag?",
                         messageClass : "admin-message pull-right",
                         animationClass: "reply",
                         time         : 1429257942900
                     },
                     {
                         text         : "Hoe kun je een deal kopen?",
                         messageClass : "user-message",
                         animationClass: "user-reply",
                         time         : 1429257763000
                     },
                     {
                         text         : "Door middel op de 'Koop nu' knop te drukken",
                         messageClass : "admin-message pull-right",
                         animationClass: "reply",
                         time         : 1429259943100
                     },
                     {
                         text         : "Ik heb een vraag",
                         messageClass : "user-message",
                         animationClass: "user-reply",
                         time         : 1429257762800
                     },
                     {
                         text         : "Wat is je vraag?",
                         messageClass : "admin-message pull-right",
                         animationClass: "reply",
                         time         : 1429257942900
                     },
                     {
                         text         : "Hoe kun je een deal kopen?",
                         messageClass : "user-message",
                         animationClass: "user-reply",
                         time         : 1429257763000
                     },
                     {
                         text         : "Door middel op de 'Koop nu' knop te drukken",
                         messageClass : "admin-message pull-right",
                         animationClass: "reply",
                         time         : 1429259943100
                     },{
                         text         : "Ik heb een vraag",
                         messageClass : "user-message",
                         animationClass: "user-reply",
                         time         : 1429257762800
                     },
                     {
                         text         : "Wat is je vraag?",
                         messageClass : "admin-message pull-right",
                         animationClass: "reply",
                         time         : 1429257942900
                     },
                     {
                         text         : "Hoe kun je een deal kopen?",
                         messageClass : "user-message",
                         animationClass: "user-reply",
                         time         : 1429257763000
                     },
                     {
                         text         : "Door middel op de 'Koop nu' knop te drukken",
                         messageClass : "admin-message pull-right",
                         animationClass: "reply",
                         time         : 1429259943100
                     },{
                         text         : "Ik heb een vraag",
                         messageClass : "user-message",
                         animationClass: "user-reply",
                         time         : 1429257762800
                     },
                     {
                         text         : "Wat is je vraag?",
                         messageClass : "admin-message pull-right",
                         animationClass: "reply",
                         time         : 1429257942900
                     },
                     {
                         text         : "Hoe kun je een deal kopen?",
                         messageClass : "user-message",
                         animationClass: "user-reply",
                         time         : 1429257763000
                     },
                     {
                         text         : "Door middel op de 'Koop nu' knop te drukken",
                         messageClass : "admin-message pull-right",
                         animationClass: "reply",
                         time         : 1429259943100
                     },{
                         text         : "Ik heb een vraag",
                         messageClass : "user-message",
                         animationClass: "user-reply",
                         time         : 1429257762800
                     },
                     {
                         text         : "Wat is je vraag?",
                         messageClass : "admin-message pull-right",
                         animationClass: "reply",
                         time         : 1429257942900
                     },
                     {
                         text         : "Hoe kun je een deal kopen?",
                         messageClass : "user-message",
                         animationClass: "user-reply",
                         time         : 1429257763000
                     },
                     {
                         text         : "Door middel op de 'Koop nu' knop te drukken",
                         messageClass : "admin-message pull-right",
                         animationClass: "reply",
                         time         : 1430745187000
                     } ]
    },
     {
        ConversationID: 2,
        Person   : {
            name  : "Rene Jaspers",
            email : "rene@socialdeal.nl",
            image : "/img/rene.png",
            phone : "06 - 87654321"
        }
        ,
        Messages : [ {
                         text         : "This is a second user message",
                         messageClass : "user-message",
                         animationClass: "user-reply",
                         time         : 1429257762500
                     },
                     {
                         text         : "This is a second admin message",
                         messageClass : "admin-message pull-right",
                         animationClass: "reply",
                         time         : 1430655187000
                     } ]
    },
     {
        ConversationID: 3,
        Person   : {
            name  : "Jafeth van Gorp",
            email : "jafeth@socialdeal.nl",
            image : "/img/jafeth.png",
            phone : "06 - 12348765"
        }
        ,
        Messages : [ {
                         text         : "This is a third user message",
                         messageClass : "user-message",
                         animationClass: "user-reply",
                         time         : 1429257763000
                     },
                     {
                         text         : "This is a third admin message",
                         messageClass : "admin-message pull-right",
                         animationClass: "reply",
                         time         : 1430565187000
                     } ]
    },
     {
        ConversationID: 4,
        Person   : {
            name  : "Peter Covers",
            email : "peter@socialdeal.nl",
            image : "/img/peter.png",
            phone : "06 - 87654321"
        }
        ,
        Messages : [ {
                         text         : "This is a fourth user message",
                         messageClass : "user-message",
                         animationClass: "user-reply",
                         time         : 1429257763000
                     },
                     {
                         text         : "This is a fourth admin message",
                         messageClass : "admin-message pull-right",
                         animationClass: "reply",
                         time         : 1430475187000
                     } ]
    },
     {
         ConversationID: 5,
         Person   : {
             name  : "John Doe",
             email : "john@doe.com",
             image : "http://s3.amazonaws.com/overlayer/photo/imgs/original/GToGIYGDmaKZPxBrCREVvwVT.png?1354821570",
             phone : "06 - 87654321"
         }
         ,
         Messages : [ {
                          text         : "This is a fourth user message",
                          messageClass : "user-message",
                          animationClass: "user-reply",
                          time         : 1429257763000
                      },
                      {
                          text         : "This is a fourth admin message",
                          messageClass : "admin-message pull-right",
                          animationClass: "reply",
                          time         : 1430385187000
                      } ]
     },
     {
         ConversationID: 6,
         Person   : {
             name  : "Jane Doe",
             email : "jane@doe.com",
             image : "http://motherscircle.net/wp-content/uploads/2012/12/smiling-woman-in-glasses.jpg",
             phone : "06 - 87654321"
         }
         ,
         Messages : [ {
                          text         : "This is a fourth user message",
                          messageClass : "user-message",
                          animationClass: "user-reply",
                          time         : 1429257763000
                      },
                      {
                          text         : "This is a fourth admin message",
                          messageClass : "admin-message pull-right",
                          animationClass: "reply",
                          time         : 1427879587000
                      } ]
     }
];

Here is the HTML:

<div sd-slimscroll sd-height="auto" sd-color="#878787"  sd-always-visible="true" sd-size="5px" class="conversation-container">
<!-- WHOLE MESSAGE FROM USER/ADMIN (INCLUDING DATE) -->
<div class="{{ message.animationClass }}" ng-repeat="message in conversation.Messages">
    <!-- DATE -->
    <div class="row">
        <div class="col-lg-12">
            <div class="date text-center">
                {{ message.time | date: "dd MMMM yyyy" }}
            </div>
        </div>
    </div>
    <!-- WHAT THE USER/ADMIN HAS TYPED -->
    <div class="row">
        <div class="col-lg-12">
            <div class="media {{ message.messageClass }}">
                <div class="media-body">
                    <h5 class="media-heading">{{conversation.Person.name}}</h5>
                    {{ message.text }} <img class="img-responsive" ng-show="message.imageURL" src="{{ message.imageURL }}"/><br />
                    <div class="message-time">{{ message.time | date: "HH:mm" }}</div>
                </div>
            </div>
        </div>
    </div>
</div>

I am stuck. Any help would be appreciated.

Razzildinho · Accepted Answer · 2015-05-07T11:26:15.963

I've created a plunkr which does what I think you want.

You need to track the index of the message in the repeat

<div class="{{ message.animationClass }}" 
  ng-repeat="message in conversation.Messages track by $index">

and then compare the date of current message with the date of previous one, only showing date if it's different.

<!-- DATE -->
<div class="row" 
  ng-show="$index == 0 || 
    (message.time | date: 'dd MMMM yyyy') != 
    (conversation.Messages[$index-1].time | date: 'dd MMMM yyyy')">

score 0 · Answer 2 · answered May 07 '15 at 10:12

0

What I'd do is make a scoped variable, maybe something like: $scope.lastMsg. Then everytime a new msg has been added, store its time in the aforementioned variable. with this variable you can use an expression in a way you prefer. I don't really get what you mean by once per day. Is it meant to be on a fixed moment each day? The easiest would be to do all of this in the same controller.

answered May 07 '15 at 10:12

Wouter Ronteltap

100
11

With one a day I mean that the date is show when a conversation is started. And not shown again for that day. And when a user has typed a message for example tomorrow, then I want to display the date of tomorrow is 8 MAY 2015 after the messages that where send yesterday ie 7 MAY 2015. (P.S: Bedankt voor je reactie) – bristov May 07 '15 at 10:17
Are you using routing? If you are you could declare another scoped variable in the route of the code you posted and if the route is visited set the variable to a certain value. Afterwards you could make a ng-show, ng-if or anything you'd want based on the variable having the specific value. Make sure to set the variable back to its default value if a new msg is posted. I don't know too much about cookies, but I guess it should work with those as well (although a different implementation would be needed). (P.S: veel geluk) – Wouter Ronteltap May 07 '15 at 11:01

How to show date once per day from an array with multiple timestamps

2 Answers2

Linked