20xd6/WebClock
1
0
Fork 0
Code Issues Pull Requests Releases 2 Wiki Activity

Update to the clock.

Browse Source 
Now allowing for display of the time in the original timezone as well as
the user selected one.
I've also added a rule to the CSS file to better display the selection
list on mobile screens.
This commit is contained in:
efrick 2020-04-15 15:26:21 -04:00
parent ff59adfee1
commit 122f33fbd6
4 changed files with 36 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
README.md
View File

@ -17,7 +17,11 @@ A javascript interpriter - Basicaly a modernish webbrowser.
1. Edit `clock.php` to point to your CSS files.
2. Add a symlink from `clock.php` to a file called `index.php`.
`ln -s clock.php index.php`
#### Note:
There is a small privacy concern. Because this clock is using PHP to creat the inishal time entry and because this is using the `date()` function in PHP to do this it will reveal what timezone the server running it is set to.
### ToDo
- [ ] Add a differentiator from the selected timezone and the origonal timezone.
- - [ ] Display original timezone's time.
- - [ ] Display the offset of the two selected timezones.
- [ ] Add a timer.
- [ ] Multiple clocks for tracking regions.

3
clock.css
View File

@ -1,3 +1,6 @@
span p{
display:inline;
}
select {
max-width: 95%;
}

13
clock.js
View File

@ -34,5 +34,18 @@ function startTime(){
hour:'2-digit',
minute:'2-digit',
second:'2-digit',});
if(original_tz != null){
document.getElementById('time_original').innerHTML = current_time.toLocaleString('en-EN' ,{
timeZone: original_tz,
dateStyle:'long',
hourCycle:'h24',
weekday:'short',
month:'short',
day:'2-digit',
year:'numeric',
hour:'2-digit',
minute:'2-digit',
second:'2-digit'});
}
document.getElementById('JStz').innerHTML = current_tz;
}

19
clock.php
View File

@ -9,6 +9,7 @@
if(!isset($selectedTimezone)){
//I don't have any error message set here. It will just reload the page.
} else{
$originalTZ = date_default_timezone_get();
date_default_timezone_set($selectedTimezone);
$scriptTZ = date_default_timezone_get();
}
@ -29,7 +30,7 @@
<meta name="author" content="efrick"/>
<link href="/styles.css" type="text/css" rel="stylesheet"/>
<link href="clock.css" type="text/css" rel="stylesheet"/>
<script>var current_tz=<?php echo json_encode($scriptTZ);?></script>
<script>var current_tz=<?php echo json_encode($scriptTZ) . ',original_tz = ' . json_encode($originalTZ);?></script>
<script type="text/javascript" src="clock.js"></script>
</head>
<body>
@ -43,7 +44,15 @@
"<p id='time_body'>".
date("D, M d, Y, H:i:s") .
"</p><p> GMT". date("O T") ."</p>\n\t\t</span>";
?>
if($_POST['originalTZ']){// if the user want display the browser detected timezone as well as the selected one.
date_default_timezone_set($originalTZ);
echo'<h3>Time in original Timezone</h3>'.
'<span><p id="time_original">'.
date("D, M d, Y, H:i:s") .
"</p><p> GMT". date("O T") .'</p></span>';
date_default_timezone_set($scriptTZ);
}
?>
<div class="tz_select">
<p>
If the detcted timezone is not correct selct your timezone from the dropdown below.
@ -90,10 +99,12 @@
<option value="Asia/Magadan" >(GMT +11:00) Magadan, Solomon Islands, New Caledonia</option>
<option value="Asia/Kamchatka" >(GMT +12:00) Auckland, Wellington, Fiji, Kamchatka</option>
</select>
<input type="submit" name="formSubmit" value="Update" >
<br/>
<label for="originalTZ">Display original timezone</label>
<input type="checkbox" name="originalTZ" value="origTZ">
</form>
<p id="JStz">JS Timezone</p>
<p id="JStz"><?php echo date("e");?></p>
</div>
</body>
</html>