day view template

day.html

<div class="page timetable">
    <div class="page-title">
        <h3>Timetable<span data-ng-if="timetable.length > 0">
            : {{ startDate | moment: 'Do' : true }} - {{ CalendarRepository.endDate | moment: 'Do MMMM' : true }}
        </span></h3>
    </div>
    <div data-ng-if="timetable.length <= 0">
        <div class="no-content">
            <span>Please be patient and wait for you schedule. Your school is working on it ;)</span>
        </div>
    </div>
    <div data-ng-if="timetable.length > 0">
        <div class="selection day-selection">
            <div data-ng-click="go('/calendar/week', 'fade')" class="pointer select-wrap">
                <i>thumbnails</i> Week
            </div>
            <div class="pointer selected select-wrap">
                <i class="">clock</i> Day
            </div>
            <h1 class="add-reminder" data-ng-click="go('/reminders/new', 'modal')">+ Add Reminder</h1>
        </div>
        <div class="day-timetable" id="wrapper">
            <div class="day-timetable-inner">
                <div data-bindonce="obj" data-ng-repeat="(dayIndex, obj) in timetable" class="day-view-day">
                    <h1 class="day-name">
                        <span data-bo-text="obj.day.date | dayName: 'Do MMM'"></span>
                        <span data-ng-if="obj.events.length > 0" class="event-mark event-bg">{{ obj.events.length }}</span>
                        <span data-ng-if="obj.reminders.length > 0" class="event-mark reminder-bg">{{ obj.reminders.length }}</span>
                    </h1>
                    <div data-bindonce="slot" data-ng-repeat="slot in obj.slots">
                        <div class="period" data-ng-if="!slot.is_break" data-bo-class="{'free': !slot.id && slot.period_label !== 'tute'}">
                            <div class="period-number">
                                <h5 data-bo-text="slot.period_label | period : true"></h5>
                            </div>
                            <div class="period-icon">
                                <h5>
                                    <i><span data-bo-text="slot.subject.icon"></span></i>
                                </h5>
                            </div>
                            <div class="period-title">
                                <h1 data-bo-text="slot | subjectName : true : true"></h1>
                                <h3>
                                    <i data-bo-if="slot.teacher" class="ss-users">&#x1F464;</i>
                                    <span class="user-initials" data-bo-text="slot.teacher | initials"></span>
                                    <i class="ss-clock">&#9202;</i>
                                    <span data-bo-text="slot.start_at | timeString:'hh:mm'"></span> -
                                    <span data-bo-text="slot.end_at | timeString:'hh:mm'"></span>
                                </h3>
                            </div>
                            <div class="period-place">
                                <h3><i class="ss-signpost">&#xE672;</i>
                                    <span data-bo-text="slot.room.name"></span>
                                </h3>
                            </div>
                        </div>
                        <div data-bo-if="!slot.is_break && !obj.slots[$index +1].is_break && obj.slots[$index +1] != null"
                             class="connector" data-bo-class="{'free': !slot.id}">
                        </div>
                        <div data-ng-if="slot.is_break" data-break-name="slot">
                            <h1>
                                <span class="dayview-icon" data-bo-if="slot.name == 'LUNCH'"><i class="ss-utensils">&#127860;</i></span>
                                <span class="dayview-icon" data-bo-if="slot.name == 'RECESS'"><i class="ss-palmtree">&#127796;</i></span>
                                <span class="dayview-icon" data-bo-if="slot.name == 'TUTE'"><i class="ss-compose">&#128221;</i></span>
                                <span class="dayview-icon" data-bo-if="slot.name == 'ASSEMBLY'"><i class="ss-users">&#128101;</i></span>
                                <span class="dayview-text" data-bo-text="slot.name"></span>
                            </h1>
                        </div>
                    </div>
                    <!--EVENTS-->
                    <div data-show-nested="{{$index}}" data-list-prefix="event-list" data-toggle-class="show-events"
                         class="event-btn-show event-box" data-ng-if="obj.events.length > 1">
                        <span class="nested-text">Show </span><span>events ({{obj.events.length}})</span>
                    </div>
                    <div id="event-list-{{$index}}" class="events" data-ng-class="{'hideEvents': obj.events.length > 1}">
                        <div data-bindonce="event" data-ng-repeat="event in obj.events"
                             class="event-list">
                            <div class="event-box"
                                 data-show-nested="{{event.id}}" data-list-prefix="event-details" data-toggle-class="show-details">
                                <p class="title" data-bo-text="event.title"></p>
                                <p class="time">
                                    <i class="">clock</i>
                                    <span data-bo-text="event.start_at | moment:'h:mm a'"></span> -
                                    <span data-bo-text="event.end_at | moment:'Do MMM h:mm a'"></span>
                                </p>
                                <div data-ng-if="event.description || event.location" id="event-details-{{event.id}}" style="display: none">
                                    <p data-ng-if="event.description">
                                        Description: <span data-bo-html="event.description"></span>
                                    </p>
                                    <p data-ng-if="event.location">
                                        Location: <span data-bo-html="event.location"></span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--REMINDERS-->
                    <div data-show-nested="{{$index}}" data-list-prefix="reminder-list" data-toggle-class="show-reminders"
                         class="reminder-btn-show reminder-box" data-ng-if="obj.reminders.length > 1">
                        <span class="nested-text">Show </span><span>reminders ({{obj.reminders.length}})</span>
                    </div>
                    <div id="reminder-list-{{$index}}" class="reminders" data-ng-class="{'hideEvents': obj.reminders.length > 1}">
                        <div data-bindonce="reminder" data-ng-hide="reminder.id == false" data-ng-repeat="reminder in obj.reminders"
                             class="reminder-list">
                            <div class="reminder-box"
                                 data-show-nested="{{reminder.id}}" data-list-prefix="reminder-details" data-toggle-class="show-details">
                                <p class="title" data-bo-text="reminder.title"></p>
                                <p class="time">
                                    <i class="">users</i>
                                    <span data-bo-text="reminder.creator | initials"></span>
                                    <i class="">clock</i>
                                    <span data-bo-text="reminder.start_at | moment:'h:mm a'"></span> -
                                    <span data-bo-text="reminder.end_at | moment:'Do MMM h:mm a'"></span>
                                </p>
                                <div data-ng-if="reminder.description || event.location" id="reminder-details-{{reminder.id}}" style="display: none">
                                    <p data-ng-if="reminder.description">
                                        Description: <span data-bo-html="reminder.description"></span>
                                    </p>
                                    <p data-ng-if="reminder.location">
                                        Location: <span data-bo-html="reminder.location"></span>
                                    </p>
                                </div>
                                <div class="edit-buttons" data-ng-if="isEditGranted(reminder.creator.id)">
                                    <a class="pointer bulletin-remove" data-ng-click="go('/reminders/edit/' + reminder.id, 'modal')">Edit</a>
                                    <a class="pointer bulletin-remove bulletin-remove-red" data-ng-click="remove(reminder, dayIndex)">Remove</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="clearfix"></div>
            <div class="loadwrapper">
                <div class="load-day-view" data-ng-click="loadData()" >
                    <i>refresh</i> &nbsp;Load more
                </div>
            </div>
        </div>
    </div>

    <div class="add-more">
         <h2 data-ng-if="timetable.length > 0" class="time-span">
            {{ startDate | moment: 'Do' : true }} - {{ CalendarRepository.endDate | moment: 'Do MMMM' : true }}
        </h2>
        <div data-ng-click="go('/calendar/week', 'fade')" class="select-top">
            <i>thumbnails</i> Week
        </div>
        <div class="selected select-top">
            <i class="">clock</i> Day
        </div>
        <h1 data-ng-click="go('/reminders/new', 'modal')">+ Add Reminder</h1>
    </div>

    <!--<div  data-ng-if="timetable.length > 0" class="day-change">-->
        <!--<a class="pointer next-day">Next Day</a>-->
        <!--<a class="pointer prev-day">Previous Day</a>-->
        
        <!--<div class="clearfix"></div>-->
    <!--</div>-->
</div>