trainwave/index.html at master · Jaapapa/trainwave · 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
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
<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="./JS/include.js"></script>
    <script src="./JS/panic.js"></script>
    <!--<script src="./JS/location.js"></script>-->
    <script src="http://marco.leone.nl/ns/api.js"></script>
    <script src='./JS/fullindex.js'></script>
    <link rel="stylesheet" href="./CSS/index.css">
    <link rel="stylesheet" href="./CSS/fullindex.css">
    <link rel="stylesheet" href="./CSS/general.css">
</head>
<style>
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;

    /* Position the tooltip */
    position: absolute;
    z-index: 1;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>

<body>

    <maincontainer>
        <empty></empty>
        <headcontainer>
            <img src="./images/NSlogo.png" style="height:5vmin;" alt="Smiley face" align="left">

            <h1> NS  Attent</h1>
        </headcontainer>
        <empty></empty>
        <empty></empty>
        <infocontainer>
            <!--<div>
                Ritnummer :</div>
            <div><input type="text" name="ritnummer" id="ritnummer">
            </div>
            <div>
                Materiaaldeel :</div>
            <div><input type="text" name="materiaaldeel" id="materiaaldeel">
            </div>-->

                <reportButtons id="reportButtons">
                  <button>
                  Service  >
                  </button>
                  <button>
                  Catering  >
                  </button>
                  <button>
                  SOS  >
                  </button>
                </reportButtons>

                <input type="hidden" id="ritnummer" name="ritnummer" value="">

                <table id="meldingScherm">
                <tr><th colspan="2" id="categoryName" class="categoryName" style="background:var(--test11);color:white;"></th></tr>
                <tr>
                  <th>Trein <div class="tooltip">(i)
                      <span class="tooltiptext">Niet uw traject? pas het rijtuignummer aan naar uw rijtuig.</span>
                  </div>:</th>
                  <td id="treinNaam"></td>
                </tr>
                <tr>
                  <th>Rijtuig nr. <div class="tooltip">(i)
                      <span class="tooltiptext">Het rijtuignummer kunt u vinden boven de deur van de ingang van uw coupe op de wand</span>
                  </div>:</th>
                  <td><input type="text" id="rijtuignummer" onchange="rijtuigChange()"/></td>
                </tr>
                <tr>
                  <th>Locatie
                      <div class="tooltip">(i)
                          <span class="tooltiptext">het baknummer kunt u vinden naast het rijtuignummer boven de ingang van uw coupe</span>
                      </div>
                      :
                  </th>
                  <td><input type="text" id="locatie"/></td>
                </tr>
                <tr>
                  <th>Opmerking:</th>
                  <td><textarea id="opmerking"></textarea></td>
                </tr>
                <tr>
                <td colspan="2"><button id="verzendButton" onClick="formVerzenden()">
                Verzenden
                </button></td>
                </tr>
                </table>
        </infocontainer>
    </maincontainer>
    <script>
        // Huidige Positie stub (Utrecht)
        var currentLon = 5.121420
        var currentLat = 52.090736
        var currentTreinData =

            detectTrein(currentLat, currentLon, function (result) {
                console.log(result)
                var inputTrein = document.getElementById("ritnummer");
                inputTrein.value = result.ritnummer
                var inputTrein = document.getElementById("rijtuignummer");
                inputTrein.value = result.materiaalDelen[0];
                rijtuigChange();
            });
        includeHTML();
    </script>
</body>

</html>