Disco/Disco.Web/Views/Device/Show.cshtml

@model Disco.Web.Models.Device.ShowModel
@using Disco.Services.Devices.DeviceFlags;
@{
    ViewBag.Title = Html.ToBreadcrumb("Devices", MVC.Device.Index(), string.Format("Device: {0}", Model.Device.SerialNumber));

    var requiresLive = Authorization.HasAny(Claims.Device.ShowComments, Claims.Device.ShowAttachments);

    if (requiresLive)
    {
        Html.BundleDeferred("~/ClientScripts/Modules/jQuery-SignalR");
    }
}
<div id="Device_Show" data-deviceserialnumber="@Model.Device.SerialNumber">
    <div id="Device_Show_Status">
        <i class="fa fa-square deviceStatus @(Model.Device.StatusCode())"></i>&nbsp;@Model.Device.Status()
        <script type="text/javascript">
            $(function () {
                $('#Device_Show_Status').appendTo('#layout_PageHeading')
            });
        </script>
    </div>
    @if (Authorization.Has(Claims.Device.ShowFlagAssignments))
    {
        <div id="Device_Show_Flags">
            @foreach (var flag in Model.Device.DeviceFlagAssignments.Where(f => !f.RemovedDate.HasValue).Select(f => Tuple.Create(f, DeviceFlagService.GetDeviceFlag(f.DeviceFlagId))))
            {
                <i class="flag fa fa-@(flag.Item2.Icon) fa-fw fa-lg d-@(flag.Item2.IconColour)">
                    <span class="details">
                        <span class="name">@flag.Item2.Name</span>@if (flag.Item1.Comments != null)
                        {<span class="comments">@flag.Item1.Comments.ToHtmlComment()</span>}<span class="added">@CommonHelpers.FriendlyDateAndUser(flag.Item1.AddedDate, flag.Item1.AddedUser)</span>
                    </span>
                </i>
            }
        </div>
        <script type="text/javascript">
            $(function () {
                $('#Device_Show_Flags')
                    .appendTo('#layout_PageHeading')
                    .tooltip({
                        items: 'i.flag',
                        content: function () {
                            var $this = $(this);
                            return $this.children('.details').html();
                        },
                        tooltipClass: 'FlagAssignment_Tooltip',
                        position: {
                            my: "right top",
                            at: "right bottom",
                            collision: "flipfit flip"
                        },
                        hade: {
                            effect: ''
                        },
                        close: function (e, ui) {
                            ui.tooltip.hover(
                                function () {
                                    $(this).stop(true).fadeTo(100, 1);
                                },
                                function () {
                                    $(this).fadeOut(100, function () { $(this).remove(); });
                                });
                        }
                    });
            });
        </script>
    }
    @Html.Partial(MVC.Device.Views.DeviceParts._Subject, Model)
    <script type="text/javascript">
        $(function () {
            var $tabs = $('#DeviceDetailTabs');
            if ($tabs.children().length > 1) {
                $tabs.tabs({
                    activate: function (event, ui) {
                        window.setTimeout(function () {
                            var $window = $(window);
                            var tabHeight = $tabs.height();
                            var tabOffset = $tabs.offset();
                            var windowScrollTop = $window.scrollTop();
                            var windowHeight = $window.height();

                            var tabTopNotShown = windowScrollTop - tabOffset.top;
                            if (tabTopNotShown > 0) {
                                $('html').animate({ scrollTop: tabOffset.top }, 125);
                            } else {
                                var tabBottomNotShown = ((windowScrollTop + windowHeight) - (tabHeight + tabOffset.top)) * -1;
                                if (tabBottomNotShown > 0) {
                                    if (tabHeight > windowHeight)
                                        $('html').animate({ scrollTop: tabOffset.top }, 125);
                                    else
                                        $('html').animate({ scrollTop: windowScrollTop + tabBottomNotShown }, 125);
                                }
                            }
                        }, 1);
                    }
                });
            } else {
                $tabs.hide();
            }
        });
    </script>
    <div id="DeviceDetailTabs">
        <ul id="DeviceDetailTabItems"></ul>
        @if (Authorization.HasAny(Claims.Device.ShowComments, Claims.Device.ShowJobs))
        {
            @Html.Partial(MVC.Device.Views.DeviceParts._CommentsAndJobs, Model)
        }
        @if (Authorization.Has(Claims.Device.ShowDetails))
        {
            @Html.Partial(MVC.Device.Views.DeviceParts._Details, Model)
        }
        @if (Authorization.Has(Claims.Device.ShowAssignmentHistory))
        {
            @Html.Partial(MVC.Device.Views.DeviceParts._AssignmentHistory, Model)
        }
        @if (Authorization.Has(Claims.Device.ShowAttachments))
        {
            @Html.Partial(MVC.Device.Views.DeviceParts._Resources, Model)
        }
        @if (Authorization.Has(Claims.Device.ShowFlagAssignments))
        {
            @Html.Partial(MVC.Device.Views.DeviceParts._Flags, Model)
        }
        @if (Authorization.Has(Claims.Device.ShowCertificates))
        {
            @Html.Partial(MVC.Device.Views.DeviceParts._Certificates, Model)
        }
    </div>
    @if (requiresLive)
    {
        <script>
            $(function () {
                if (!document.DiscoFunctions)
                    return;

                const deviceSerialNumber = $('#Device_Show').attr('data-deviceserialnumber');
                // Connect to Hub
                var hub = $.connection.deviceUpdates;

                // Map Functions
                if (document.DiscoFunctions.onCommentAdded)
                    hub.client.commentAdded = document.DiscoFunctions.onCommentAdded;
                if (document.DiscoFunctions.onCommentRemoved)
                    hub.client.commentRemoved = document.DiscoFunctions.onCommentRemoved;
                if (document.DiscoFunctions.onAttachmentAdded)
                    hub.client.attachmentAdded = document.DiscoFunctions.onAttachmentAdded;
                if (document.DiscoFunctions.onAttachmentRemoved)
                    hub.client.attachmentRemoved = document.DiscoFunctions.onAttachmentRemoved;

                $.connection.hub.qs = { DeviceSerialNumber: deviceSerialNumber };
                $.connection.hub.error(function (error) {
                    console.log('Server connection error: ' + error);
                });
                $.connection.hub.disconnected(function () {
                    // Disable UI
                    $('#AttachmentsContainer').find('span.action.enabled').addClass('disabled');
                    $('#Comments').find('button').prop('disabled', true);

                    // Show Dialog Message
                    if ($('.disconnected-dialog').length == 0) {
                        $('<div>')
                            .addClass('dialog disconnected-dialog')
                            .html('<h3><span class="fa-stack fa-lg"><i class="fa fa-wifi fa-stack-1x"></i><i class="fa fa-ban fa-stack-2x error"></i></span>Disconnected from the Disco ICT Server</h3><div>This page is not receiving live updates. Please ensure you are connected to the server, then refresh this page to enable features.</div>')
                            .dialog({
                                resizable: false,
                                title: 'Disconnected',
                                width: 400,
                                modal: true,
                                buttons: {
                                    'Refresh Now': function () {
                                        $(this).dialog('option', 'buttons', null);
                                        window.location.reload(true);
                                    },
                                    'Close': function () {
                                        $(this).dialog('destroy');
                                    }
                                }
                            });
                    }
                });

                $.connection.hub.reconnecting(function () {
                    $('#AttachmentsContainer').find('span.action.enabled').addClass('disabled');
                    $('#Comments').find('button').prop('disabled', true);
                });
                $.connection.hub.reconnected(function () {
                    $('#AttachmentsContainer').find('span.action.enabled').removeClass('disabled');
                    $('#Comments').find('button').prop('disabled', false);
                });

                // Start Connection
                $.connection.hub.start(function () {
                    $('#AttachmentsContainer').find('span.action.enabled').removeClass('disabled');
                    $('#Comments').find('button').prop('disabled', false);
                });
            });
        </script>
    }
</div>