Index.cshtml fomated based on Keyword

Index.cshtml

@{
    Layout = "IndexLayout.cshtml";
    ViewBag.Title = "Alarmanzeige";

    var config = AlarmWorkflow.Website.Reports.Areas.Display.Models.WebsiteConfiguration.Instance;
}

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true"> </script>
<script type="text/javascript">
    String.prototype.contains = function(it) { return this.indexOf(it) != -1; };
    // Stores the current operation, so we don't get the expensive data all over each time.
    var currentOpId = -1;
    //Vars needed by google
    var directionsService = new google.maps.DirectionsService();
    var directionsDisplay = new google.maps.DirectionsRenderer();
    var map;
    var osm;
    var maxZoomService = new google.maps.MaxZoomService();
    var addressCoor = null;
    var showRoute = @(config.Route.ToString().ToLower());
    var zoomOnAddress = true;
    var useTilt = @(config.Tilt.ToString().ToLower());
    var useTraffic = @(config.Traffic.ToString().ToLower());
    var zoomLevel = 0.8;//In Prozent
    var home = "@(config.Home)";

    function calcRoute(start, end) {
        var request = {
            origin: start,
            destination: end,
            travelMode: google.maps.TravelMode.DRIVING
        };
        directionsService.route(request, function(result, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(result);
                var l = result.routes[0].overview_path.length;
                addressCoor = result.routes[0].overview_path[l - 1];
            }
        });
    }

    function reset() {
        $.get("/Display/Alarm/ResetLatestOperation", function(result) {
            
            if (result.success) {
                loadOperationData();
            } else {
                console.log(result.message);
            }
        
        });
    }

    function loadOperationData() {
        console.log("Loading Operation");
        $.get('/Display/Alarm/GetLatestOperation', function(result) {

            $("#paneLoading").hide();

            if (result.success == true) {

                $("#paneError").hide();
                if (result.op == null) {
                    $("#paneIdle").show();
                    $("#paneOperation").hide();
                } else {
                    $("#paneIdle").hide();
                    if (currentOpId != result.op.Id) {
                        currentOpId = result.op.Id;

                        console.log("Got new Operation");
                        $("#opicture").text(result.op.Picture);
                        $("#ocomment").text(result.op.Comment);

                        var oaddress = "";
                        if (result.op.Einsatzort.Street != null) {
                            oaddress += result.op.Einsatzort.Street + " ";
                        }
                        if (result.op.Einsatzort.StreetNumber != null) {
                            oaddress += result.op.Einsatzort.StreetNumber + " ";
                        }
                        if (result.op.Einsatzort.ZipCode != null) {
                            oaddress += result.op.Einsatzort.ZipCode + " ";
                        }
                        if (result.op.Einsatzort.City != null) {
                            oaddress += result.op.Einsatzort.City;
                        }
                        oaddress = oaddress.replace("  ", " ");
                        $("#oaddress").text(oaddress);

                        // Prepare Keywords for display.
                        var okeywords = "Stichwörter: ";
                        if (result.op.Keywords.Keyword != null) {
                            okeywords += result.op.Keywords.Keyword + " ";
                        }
                        if (result.op.Keywords.EmergencyKeyword != null) {
                            okeywords += result.op.Keywords.EmergencyKeyword + " ";
                        }
                        if (result.op.Keywords.B != null) {
                            okeywords += result.op.Keywords.B + " ";
                        }
                        if (result.op.Keywords.R != null) {
                            okeywords += result.op.Keywords.R + " ";
                        }
                        if (result.op.Keywords.S != null) {
                            okeywords += result.op.Keywords.S + " ";
                        }
                        if (result.op.Keywords.T != null) {
                            okeywords += result.op.Keywords.T;
                        }
                        if (result.op.Keywords.Keyword.contains("B")) {
                            $("#paneOperation").css("background-color", 'red');
                        } else if (result.op.Keywords.Keyword.contains("I")) {
                            $("#paneOperation").css("background-color", 'green');
                        } else if (result.op.Keywords.Keyword.contains("T")) {
                            $("#paneOperation").css("background-color", 'blue');
                        } else {
                            $("#paneOperation").css("background-color", 'white');
                        }
                        okeywords = okeywords.replace("  ", " ");
                        $("#okeywords").text(okeywords);
                        var orsc = "";
                        // Resources
                        $.get("/Display/Alarm/GetFilteredResources/" + currentOpId, function(data) {
                            data.Resources.forEach(function(resource) {
                                var value;
                                if (resource.Emk == null || resource.Emk.DisplayName.length === 0) {
                                    value = "<div class=\"oresource\">" + resource.Resource.FullName + "</div>";
                                } else {
                                    if (resource.Emk.IconFileName != null && resource.Emk.IconFileName.length !== 0) {
                                        value = "<img class=\"oresource\" src=\"/Display/Alarm/GetResourceImage?id=" + encodeURIComponent(resource.Emk.Id) + "\" height=\"200\" alt=\"Fahrzeugbild\">";
                                    } else {
                                        value = "<div class=\"oresource\">" + resource.Emk.DisplayName + "</div>";
                                    }
                                }
                                orsc += value;
                            });
                            $("#orsc").html(orsc);
                        });


                        $("#paneOperation").show();
                        //GoogleMaps Stuff
                        google.maps.visualRefresh = true;
                        directionsDisplay = new google.maps.DirectionsRenderer();
                        var firstTime = true;
                        var address = oaddress;
                        var dest = new google.maps.LatLng(result.op.Einsatzort.GeoLatitude,result.op.Einsatzort.GeoLongitude);
                        
                        map = new google.maps.Map(document.getElementById("ogoogle"), mapOptions);

                        var mapOptions = {
                            zoom: 10,
                            overviewMapControl: false,
                            panControl: false,
                            mapTypeControl: true,
                            streetViewControl: false,
                            zoomControl: @(config.ZoomControl.ToString().ToLower()),
                            mapTypeId: @(config.MapTypeGoogle)
                            };
                        //45°
                        if (useTilt) {
                            map.setTilt(45);
                        }
                        //TRAFFIC
                        if (useTraffic) {
                            var trafficLayer = new google.maps.TrafficLayer();
                            trafficLayer.setMap(map);
                        }
                        if (!showRoute) {
                            new google.maps.Marker({
                                position: dest,
                                map: map,
                            });
                            map.setCenter(dest);
                            map.setZoom(18);
                            maxZoomService.getMaxZoomAtLatLng(dest, function (response) {
                                if (response.status == google.maps.MaxZoomStatus.OK) {
                                    var zoom = Math.round(response.zoom * zoomLevel);
                                    map.setZoom(zoom);
                                }
                            });
                        } else {
                            //ROUTE
                            directionsDisplay.setMap(map);
                            calcRoute(home, address);
                            google.maps.event.addListener(map, 'tilesloaded', function () {
                                if (zoomOnAddress && firstTime) {
                                    firstTime = false;
                                    map.setCenter(dest);
                                    map.setZoom(18);
                                    maxZoomService.getMaxZoomAtLatLng(dest, function (response) {
                                        if (response.status == google.maps.MaxZoomStatus.OK) {
                                            var zoom = Math.round(response.zoom * zoomLevel);
                                            map.setZoom(zoom);
                                        }
                                    });
                                }
                            });
                        }
                        osm.setView([result.op.Einsatzort.GeoLatitude,result.op.Einsatzort.GeoLongitude], 16);
                        L.marker([result.op.Einsatzort.GeoLatitude, result.op.Einsatzort.GeoLongitude]).addTo(osm);
                    }
                }
            } else {
                // Reset current operation and display warning.
                currentOpId = -1;
                $("#paneOperation").hide();
                $("#paneIdle").hide();
                $("#paneError").show();
            }
        }).fail(function () {
            // Reset current operation and display warning.
            currentOpId = -1;
            $("#paneOperation").hide();
            $("#paneIdle").hide();
            $("#paneError").show();
        });
    }
    // Poll the service and read operation data, then apply to DOM.
    window.setInterval(loadOperationData, @(config.UpdateIntervalMs));
    $(loadOperationData);
    $(document).ready(function() {
        osm = L.map('oosm');
        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(osm);
        L.tileLayer('http://www.openfiremap.org/hytiles/{z}/{x}/{y}.png').addTo(osm);
    });

</script>

<!-- Pane initially shown -->
<div id="paneLoading">
    <span>Lade, bitte warten...</span>
    <script type="text/javascript">
        loadOperationData();
    </script>
</div>

<!-- Pane to be displayed in case of an error-->
<div id="paneError" style="display: table; height: 100%; width: 100%;">
    <span style="color: Red; font-size: 6em; text-align: center; font-weight: bold; display:table-cell; vertical-align:middle;">Ein Fehler ist aufgetreten.<br/> Bitte sehen Sie in den Serverlogs nach.</span>
</div>
<!-- Pane to be displayed in case of an error-->
<div id="paneIdle" style="display: table; height: 100%; width: 100%;">
    <span style="color: green; font-size: 6em; text-align: center; font-weight: bold; display:table-cell; vertical-align:middle;">Es liegt kein Einsatz vor.</span>
</div>
<!-- Pane to be displayed otherwise -->
<div style="background-color: #83C6FA; height: 100%; width: 100%" id="paneOperation">
    <table style="height: 100%; width: 100%; font-size:1.8em; text-align: center">
        <tr>
            <td class="alarm" id="opicture"></td>
            <td class="alarm" id="okeywords"></td>
        </tr>
        <tr>
            <td class="alarm" id="oaddress"></td>
            <td class="alarm" id="ocomment"></td>
        </tr>
        <tr>
            <td class="alarm" style="padding: 0; margin: 0; height: 40%; width: 50%;">
                <div id="ogoogle" style="width:100%; height:100%"></div>
            </td>
            <td class="alarm" style="padding: 0; margin: 0; height: 40%; width: 50%;">
                <div id="oosm" style="width:100%; height:100%"></div>
            </td>
        </tr>
        <tr>
            <td class="alarm" colspan="2" id="orsc"></td>
        </tr>
    </table>
    <div style="width: 100%">
        <a href="#" style="display:table; margin: 0 auto;" onClick="reset(); return false;">Einsatz erledigt!</a>
    </div>
</div>