clienthealthcheck/tab.html at master · sajit/clienthealthcheck · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!doctype html>
<html data-ng-app="myApp" data-ng-csp="">
<head>
    <meta charset="UTF-8">
    <title>Meme</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <!-- Optional theme -->
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">

    <link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="container">
    Client HealthCheck chrome App
    <div ng-controller="MainCtrl">

        <h3>Upload client health check config file</h3>
        <input type="file" ng-file-select="onFileSelect($files)" >
        <hr/>
        <div ng-show="fileLoadComplete">
        <h2>Diagnostics</h2>
        <div  class="row-fluid">
            <table class="table table-bordered">
                <thead>

                <tr>

                    <td><h4>URL</h4></td><td>Info</td>
                </tr>
                </thead>

                <tbody>

                <tr ng-repeat="urlObj in whitelist" ng-class="{'success' : urlObj.status=='success','warning':urlObj.status=='warning','danger':urlObj.status=='danger'}">
                    <td> {{urlObj.url}}</td><td>{{urlObj.errorMessage}}
                    <i class="glyphicon" ng-class="{'glyphicon-ok': urlObj.status=='success', 'glyphicon-remove' : urlObj.status=='danger', 'glyphicon-bell' : urlObj.status=='warning'}"></i>
                      </td>

                </tr>

                </tbody>
            </table>
        </div>
        <div class="row-fluid">
            <table class="table table-bordered">

                <tbody>
                <tr>
                    <td><b>OS</b></td><td><b>Supported</b></td>
                    <td><b>Browser</b></td><td><b>Supported</b></td>
                </tr>
                <tr><td>{{ua.os}} </td>
                    <td ng-class="{'success': supportedOs, 'danger' : !supportedOs}">
                        <i class="glyphicon" ng-class="{'glyphicon-ok': supportedOs, 'glyphicon-remove' : !supportedOs}"></i>
                    </td>
                    <td>{{ua.browser}} </td>
                    <td ng-class="{'success': supportedBrowser, 'danger' : !supportedBrowser}">
                        <i class="glyphicon" ng-class="{'glyphicon-ok': supportedBrowser, 'glyphicon-remove' : !supportedBrowser}"></i>
                    </td>
                </tr>


                </tbody>
            </table>
        </div>
        <div class="row-fluid">
            <table class="table table-bordered">
                <tbody>
                <tr><td><b>Screen Resolution</b></td>
                    <td><b>Supported</b></td></tr>
                <tr>
                    <td> {{width}} X {{height}}</td>
                    <td ng-class="{'success': validResolution, 'danger' : !validResolution}">
                        <i class="glyphicon" ng-class="{'glyphicon-ok': validResolution, 'glyphicon-remove' : !validResolution}"></i>

                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        </div>


    </div>
</div>
<script src="js/vendor/angular.min.js"></script>
<script src="js/vendor/angular-route.min.js"></script>
<script src="js/vendor/angular-filereader.min.js"></script>
<script src="/js/vendor/detect.min.js"></script>

<script src="js/app/app.js"></script>
</body>
</html>