Improved www.ttss.krakow.pl
Jacek Kowalski
2017-04-17 016d0b1197434703de74cf73abd47d00588ce279
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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>TTSS Kraków - Real-time tram departures</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <link rel="stylesheet" type="text/css" href="index.css">
    </head>
    <body>
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <ul class="nav navbar-nav">
                    <li class="navbar-header">
                        <a class="navbar-brand" href="" data-translate="page_name">TTSS Kraków</a>
                    </li>
                    <li>
                        <form class="navbar-form navbar-left">
                            <select class="form-control" id="lang-select">
                                <option value="en">EN</option>
                                <option value="pl">PL</option>
                            </select>
                        </form>
                    </li>
                    <li>
                        <a href="/map.html" data-translate="map">Map</a>
                    </li>
                </ul>
                
                
                <form class="navbar-form navbar-left">
                    <div class="input-group">
                        <span class="input-group-btn">
                            <input type="text" class="form-control form-round-left" id="stop-name" placeholder="Stop name" autofocus="autofocus" />
                        </span>
                        <select class="form-control" id="stop-name-autocomplete">
                        </select>
                        <span class="input-group-btn">
                            <button type="submit" class="btn btn-default" data-translate="go_button">Go</button>
                        </span>
                    </div>
                </form>
                
                <button type="button" class="btn btn-default navbar-btn pull-right" id="refresh" disabled="disabled" data-translate="refresh_button">&#x27f3; Refresh</button>
                <p class="navbar-text pull-right" id="refresh-text">Initializing...</p>
            </div>
        </nav>
        
        <div class="container-fluid">
            <div id="alert" class="alert alert-danger alert-dismissible" style="display:none">
                <a href="#" class="close" id="alert-close" aria-label="close">&times;</a>
                <strong data-translate="error_title">Error occured!</strong> <span id="alert-text"></span>
            </div>
            
            <div class="row">
                <div class="col-md-6">
                    <h2 id="times-stop-name"></h2>
                    
                    <div id="times-alerts"></div>
                    
                    <table class="table table-striped table-condensed">
                        <thead>
                            <tr>
                                <th data-translate="header_line">Line</th>
                                <th data-translate="header_direction">Direction</th>
                                <th data-translate="header_time">Time</th>
                                <th data-translate="header_delay">Delay</th>
                            </tr>
                        </thead>
                        <tbody id="times-table">
                        </tbody>
                    </table>
                </div>
                <div class="col-md-6">
                    <!--
                    <h3 data-translate="header_lines">Lines</h3>
                    
                    <table class="table table-condensed">
                        <thead>
                            <tr>
                                <th data-translate="header_line">Line</th>
                                <th data-translate="header_route">Route</th>
                                <th data-translate="header_carrier">Carrier</th>
                            </tr>
                        </thead>
                        <tbody id="times-lines">
                        </tbody>
                    </table>
                    -->
                    
                    <p data-translate="help_click_for_schedule">Click on an entry in the departures timetable to see the tram's schedule.</p>
                    
                    <h3 id="route-line"></h3>
                    
                    <table class="table table-condensed">
                        <thead>
                            <tr>
                                <th data-translate="header_time">Time</th>
                                <th data-translate="header_stop">Stop</th>
                            </tr>
                        </thead>
                        <tbody id="route-table">
                        </tbody>
                    </table>
                    
                    <p class="small">
                        <span data-translate="help_legend">Legend:</span>
                        <span class="label bg-active" data-translate="status_departed">Departed</span>
                        <span class="label bg-success" data-translate="status_stopped">At stop</span>
                        <span class="label bg-default" data-translate="status_default">En route</span>
                        <span class="label bg-warning" data-translate="status_delayed_4">Delayed 4′+</span>
                        <span class="label bg-danger" data-translate="status_delayed_10">Delayed 10′+</span>
                    </p>
                    
                    <p class="small">
                        <span class="bigger" title="Bombardier NGT6, Bombardier NGT8, PESA 2014N Krakowiak, Newag Nevelo 126N" data-translate="low_floor_sign">&#x267F;</span> - <span data-translate="low_floor_description">low-floor tram</span>.
                        <span class="bigger" title="Düwag/Man/MPK N8C-NF, Düwag/MPK GT8C, Bombardier-Rotax/MPK EU8N, Protram 405N-Kr" data-translate="partially_low_floor_sign">*&#x267F;</span> - <span data-translate="partially_low_floor_description">partially low-floor tram</span>.
                        <span class="bigger" title="other tram types" data-translate="high_floor_sign">&#x2010;</span> - <span data-translate="high_floor_description">high-floor tram</span>.
                        <span data-translate="help_hover_for_more">Hover the icon for more details.</span>
                    </p>
                    
                    <p class="small" data-translate="help_text">Relative times (eg. 3 min) are real-time arrivals based on tram location data. Absolute times (eg. 8:01) are scheduled departures, shown when the tram cannot be located. "?" means unknown delay.</p>
                    
                    <p class="small">&copy; 2016-2017 Jacek Kowalski - <a href="https://github.com/jacekkow/mpk-ttss" data-translate="help_source">Source</a> - <a href="https://raw.githubusercontent.com/jacekkow/mpk-ttss/master/LICENSE" data-translate="help_license">License</a></p>
                </div>
            </div>
        </div>
        <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7"  crossorigin="anonymous"></script>
        <script tyle="text/javascript" src="lang_en.js" id="lang_script"></script>
        <script tyle="text/javascript" src="common.js"></script>
        <script type="text/javascript" src="index.js"></script>
    </body>
</html>