417 lines
12 KiB
JavaScript
Executable File
417 lines
12 KiB
JavaScript
Executable File
// HWeather.js
|
|
// Version 1.1 2015-04-17 rxf
|
|
// Wochetage in die richtige Reihenfolge gebracht
|
|
//
|
|
// Version 1.0 2012-11-20 rxf
|
|
// Anzeige von Tabellen mit Bereichen
|
|
// Ausdruck der Tabellen
|
|
// Anleitung als POPUP
|
|
|
|
var lineNo=0;
|
|
var STW="Sternwarte Welzheim <br>";
|
|
|
|
// Nullfill:
|
|
// Übergbenen Wert zweistellig machen, fall er nur einstellig ist
|
|
function nullfill(n)
|
|
{
|
|
if(n < 10)
|
|
{
|
|
return("0"+n);
|
|
}
|
|
else
|
|
return(""+n);
|
|
}
|
|
|
|
// Tabelle erzeugen
|
|
function fillTables(werte, anz)
|
|
{
|
|
var unit = new Array(" °C", " %", " hPa", " mm", " km/h", " °");
|
|
|
|
if(anz == 0)
|
|
{
|
|
var txt = new Array("Temperatur", "Feuchte", "Luftdruck", "Regen ",
|
|
"Wind-Geschwindigkeit", "Windrichtung");
|
|
var wrtmax = new Array(werte.TempMx, werte.HumiMx, werte.PressMx,
|
|
werte.Rain, werte.WindSpeed);
|
|
var wrtmin = new Array(werte.Temp, werte.Humi, werte.Press, werte.Rain,
|
|
werte.WindSpeed, werte.WindDir);
|
|
// var d = new Date(werte.Time * 1000);
|
|
var year = werte.Time.substring(0,4);
|
|
var month = werte.Time.substring(5,7);
|
|
var day = werte.Time.substring(8,10);
|
|
var hour = werte.Time.substring(11,13);
|
|
var minute = werte.Time.substring(14);
|
|
var ziel = "";
|
|
|
|
$("#tafelRange").remove();
|
|
$("#tafelSingle").remove();
|
|
|
|
$("<table />", {
|
|
id : "tafelSingle"
|
|
}).appendTo("div #tabelle");
|
|
|
|
// if ((d.getMinutes() != 0) || (d.getHours() != 0)) {
|
|
if ((minute != 0) || (hour != 0)) {
|
|
$(
|
|
"<caption/>",
|
|
{
|
|
html : STW + "Wetter am " + day + "."
|
|
+ month + "." + year + " um "
|
|
+ hour + ":" + minute
|
|
}).appendTo("table");
|
|
|
|
for ( var i = 0; i < 6; i++) {
|
|
$("<tr/>", {
|
|
"class" : (i & 1 == 1) ? "gerade" : "ungerade",
|
|
id : "trx" + i
|
|
}).appendTo("table");
|
|
ziel = "table #trx" + i;
|
|
if (i == 3) {
|
|
$(
|
|
"<td/>",
|
|
{
|
|
html : txt[i] + "bis " + hour + ":"
|
|
+ minute + " Uhr"
|
|
}).appendTo(ziel);
|
|
} else {
|
|
$("<td/>", {
|
|
html : txt[i]
|
|
}).appendTo(ziel);
|
|
}
|
|
$("<td/>", {
|
|
html : wrtmin[i] + unit[i]
|
|
}).appendTo(ziel);
|
|
}
|
|
}
|
|
|
|
else {
|
|
$(
|
|
"<caption/>",
|
|
{
|
|
html : STW + "Wetter-Werte für den " + day + "."
|
|
+ month + "." + year
|
|
}).appendTo("table");
|
|
|
|
for ( var i = 0; i < 3; i++) {
|
|
$("<tr/>", {
|
|
"class" : i == 1 ? "gerade" : "ungerade",
|
|
id : "trx" + i
|
|
}).appendTo("table");
|
|
ziel = "table #trx" + i;
|
|
$("<td/>", {
|
|
rowspan : "2",
|
|
html : txt[i]
|
|
}).appendTo(ziel);
|
|
$("<td/>", {
|
|
"class" : "max small",
|
|
html : "max."
|
|
}).appendTo(ziel);
|
|
$("<td/>", {
|
|
"class" : "max",
|
|
html : wrtmax[i] + unit[i]
|
|
}).appendTo(ziel);
|
|
|
|
$("<tr/>", {
|
|
"class" : i == 1 ? "gerade" : "ungerade",
|
|
id : "trn" + i
|
|
}).appendTo("table");
|
|
ziel = "table #trn" + i;
|
|
$("<td/>", {
|
|
"class" : "min small",
|
|
html : "min."
|
|
}).appendTo(ziel);
|
|
$("<td/>", {
|
|
"class" : "min",
|
|
html : wrtmin[i] + unit[i]
|
|
}).appendTo(ziel);
|
|
}
|
|
|
|
$("<tr/>", {
|
|
"class" : "gerade",
|
|
id : "trr"
|
|
}).appendTo("table");
|
|
$("<td/>", {
|
|
colspan : "2",
|
|
html : txt[3] + "gesamt"
|
|
}).appendTo("table #trr");
|
|
$("<td/>", {
|
|
html : wrtmax[3] + unit[3]
|
|
}).appendTo("table #trr");
|
|
|
|
$("<tr/>", {
|
|
"class" : "ungerade",
|
|
id : "trw"
|
|
}).appendTo("table");
|
|
$("<td/>", {
|
|
colspan : "2",
|
|
html : "Max. " + txt[4]
|
|
}).appendTo("table #trw");
|
|
$("<td/>", {
|
|
"class" : "max",
|
|
html : wrtmax[4] + unit[4]
|
|
}).appendTo("table #trw");
|
|
}
|
|
}
|
|
else // hier ist es ein Datumsbereich
|
|
{
|
|
// alert("Datumsbereich");
|
|
for(var i=0; i<anz; i++)
|
|
{
|
|
var values = new Array(0, werte[i].Temp, werte[i].TempMx, werte[i].Humi, werte[i].HumiMx,
|
|
werte[i].Press, werte[i].PressMx,
|
|
werte[i].Rain, werte[i].WindSpeed);
|
|
var dStr = werte[i].Time.substring(0,10);
|
|
fillOneLine(values,dStr,i);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Tabelle für den Datumsbereich von sDate bis eDate (einschl) holen und anzeigen
|
|
// sDate und eDate haben Datumsformat
|
|
// Überschrift und Tabellenkopf anzeigen und dann den AJAX-Call absetzen, mit dem
|
|
// die kompletten Werte geholt werden und dann via 'fillTables()' angezeigt werden
|
|
function fillRangeTable(sD, eD)
|
|
{
|
|
var header = new Array(" Datum ", "Temperatur<br />°C", "Feuchte<br />%", "Luftdruck<br />hPa", "Regen<br />mm", "Wind-V<br />max km/h");
|
|
var minmax = new Array(" ","min","max","min","max","min","max"," "," ");
|
|
|
|
$("#tafelSingle").remove();
|
|
$("#tafelRange").remove();
|
|
|
|
$("<table />",{
|
|
id: "tafelRange"
|
|
}).appendTo("div #tabelle");
|
|
|
|
// Überschrift basteln
|
|
$("<caption/>",{
|
|
html:STW + "Wetter vom "
|
|
+ nullfill(sD.getDate())
|
|
+ "." + nullfill(sD.getMonth()+1)
|
|
+ "." + sD.getFullYear()
|
|
+ " bis " + nullfill(eD.getDate())
|
|
+ "." + nullfill(eD.getMonth()+1)
|
|
+ "." + eD.getFullYear()
|
|
}).appendTo("table");
|
|
|
|
// Kopfzeile
|
|
$("<tr/>", {
|
|
id:"trxh",
|
|
"class": "ungerade"
|
|
}).appendTo("table");
|
|
|
|
var ziel = "table #trxh";
|
|
for(var i=0; i<6; i++)
|
|
{
|
|
if(i==0)
|
|
{
|
|
$("<th/>",{
|
|
id: "dath",
|
|
html: header[i]
|
|
}).appendTo(ziel);
|
|
}
|
|
else if(i>=1 && i<=3)
|
|
{
|
|
$("<th/>",{
|
|
colspan: "2",
|
|
html: header[i]
|
|
}).appendTo(ziel);
|
|
}
|
|
else
|
|
{
|
|
$("<th/>",{
|
|
html: header[i]
|
|
}).appendTo(ziel);
|
|
}
|
|
}
|
|
|
|
// Unter der Kopfzeile die min/max
|
|
$("<tr/>", {
|
|
id:"trx2",
|
|
"class":"ungerade"
|
|
}).appendTo("table");
|
|
|
|
ziel = "table #trx2";
|
|
for(var i=0; i<9; i++)
|
|
{
|
|
$("<td/>", {
|
|
html: minmax[i]
|
|
}).appendTo(ziel);
|
|
}
|
|
|
|
// Nun per AJAX-Call alle Werte hoeln und im Callback dann anzeigen
|
|
var dt = new Date(sD);
|
|
dt.setHours(0);
|
|
dt.setMinutes(0);
|
|
var days = Math.round(Math.abs(eD - dt) / (1000 * 60 * 60 * 24 ));
|
|
if(days > 35)
|
|
{
|
|
alert("max. 35 Tage möglich !");
|
|
return;
|
|
}
|
|
doAjaxCall(dt,days+1); // ALLE Werte des gefragten Bereiches holen
|
|
}
|
|
|
|
|
|
// eine Datenzeile in der Tabelle befüllen
|
|
function fillOneLine(wrt,datStr,n)
|
|
{
|
|
$("<tr/>",{
|
|
id:"tr"+n,
|
|
"class": (n&1==1)?"ungerade":"gerade"
|
|
}).appendTo("table");
|
|
var ziel = "table #tr"+n;
|
|
|
|
$("<td/>", {
|
|
html: datStr
|
|
}).appendTo(ziel);
|
|
|
|
for(var i=1; i<9; i++)
|
|
{
|
|
$("<td/>", {
|
|
html: (wrt[1]==-17.8) ? "--" : wrt[i]
|
|
}).appendTo(ziel);
|
|
}
|
|
}
|
|
|
|
|
|
// Werte vom Server holen
|
|
// s ist Datum/Uhrzeit als String im Format 'yy-mm-dd hh:mm'
|
|
function doAjaxCall(datz, anz)
|
|
{
|
|
var date = { Jahr:'2012', Monat:'3', Tag:'23', Stunde:'0', Minute:'0', Anzahl:'1' };
|
|
|
|
date["Jahr"] = datz.getFullYear(); // Variable nun mit den Übergabewerten belegen
|
|
date["Monat"] = datz.getMonth()+1;
|
|
date["Tag"] = datz.getDate();
|
|
date["Stunde"] = datz.getHours();
|
|
date["Minute"] = datz.getMinutes();
|
|
date["Anzahl"] = anz;
|
|
|
|
|
|
$.ajax( // AJAX-Call
|
|
{
|
|
|
|
type: "POST", // wir machen eine POST - Abfrage
|
|
url: "HWett.php", // an diese Seite auf dem Server
|
|
data: date, // mit diesen Daten (ein Array)
|
|
success : function(erg){ // wenn Erfolg, dann
|
|
if(erg.charAt(0)=='#') // DEBUG-Meldungen ..
|
|
{
|
|
alert(erg); // .. ausgeben und ..
|
|
erg = erg.substr(erg.lastIndexOf('#')+2); // .. wegblenden
|
|
}
|
|
fillTables($.parseJSON(erg),anz); // die Tabelle ensprechend ausfüllen
|
|
},
|
|
error: function(xh,t) { // wenn Error, dann eine Alertbox hinmalen
|
|
alert("xh=" + xh + " t=" + t + xh.getAllResponseHeaders() + "\na) " + xh.responseText + "\nb) " + xh.statusText);
|
|
},
|
|
});
|
|
}
|
|
|
|
|
|
// Datepicker auf Deutsch einstellen
|
|
$.datepicker.regional['de'] = {
|
|
closeText: '',
|
|
prevText: '<',
|
|
nextText: '>',
|
|
currentText: '',
|
|
monthNames: ['Januar','Februar','März','April','Mai','Juni',
|
|
'Juli','August','September','Oktober','November','Dezember'],
|
|
monthNamesShort: ['Jan','Feb','Mar','Apr','Mai','Jun',
|
|
'Jul','Aug','Sep','Okt','Nov','Dez'],
|
|
dayNames: ['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag'],
|
|
dayNamesShort: ['SON','MON','DIE','MIT','DON','FRE','SAM'],
|
|
dayNamesMin: ['So','Mo','Di','Mi','Do','Fr','Sa'],
|
|
weekHeader: 'KW',
|
|
dateFormat: 'yyyy-mm-dd',
|
|
firstDay: 1,
|
|
isRTL: false,
|
|
showMonthAfterYear: false,
|
|
yearSuffix: ''
|
|
};
|
|
$.datepicker.setDefaults($.datepicker.regional['de']); // diese Einstellung nun übernehmen
|
|
|
|
// Script-Aktionen
|
|
// Wenn das Dokument geladen wird
|
|
$(document).ready(function()
|
|
{
|
|
var sDate = $('#startdate');
|
|
var eDate = $('#enddate');
|
|
var maxDate = new Date();
|
|
|
|
// Datums-Zeit-Picker für die Startzeit
|
|
sDate.datetimepicker( // Initialisierung des datetimepickers
|
|
{
|
|
showOn: 'focus' , // onFocus wird der Picker angezeigt
|
|
dateFormat: "yy-mm-dd", // angezeigt wird in diesem Format
|
|
defaultDate: -1,
|
|
maxDate: "-1d", // max Datum unbegrenzt
|
|
minDate: "2012-03-01", // min Datum: da beginnt unsere Datenbank
|
|
closeText: "OK", // erst wenn OK geklickt wird, dann gehts weiter
|
|
showOtherMonths: "true", // Monat via Pfeile wähleen lassen
|
|
stepMinute: 5, // Zeischieber haben eien Auflösung von 5min
|
|
timeText: "Uhrzeit", // Texte dazu
|
|
hourText: "Stunde",
|
|
minuteText : "Minute",
|
|
onClose: function (dateText, inst) // was passiert, wenn OK gedrückt wird:
|
|
{
|
|
var dt = new Date(sDate.datepicker('getDate'));
|
|
eDate.datepicker('option','minDate',sDate.datepicker('getDate')); // minWert des EndeDatums wird auf Startdatum gesetzt
|
|
test = sDate.datepicker('getDate');
|
|
testm = new Date(test.getTime());
|
|
testm.setDate(testm.getDate() + 35);
|
|
eDate.datepicker('option','maxDate',testm);
|
|
eDate.attr("value",sDate.val().substring(0,10)); // Wert des EndeDatums wird auf das StartDatum gesetzt (ohne die Uhrzeit)
|
|
doAjaxCall(dt,0); // und die Werte werden angefordert
|
|
},
|
|
});
|
|
|
|
// Datumspicker für das Ende-Datum
|
|
eDate.datepicker(
|
|
{
|
|
showOn: 'focus' ,
|
|
dateFormat: "yy-mm-dd",
|
|
defaultDate: -1,
|
|
maxDate: "-1d",
|
|
showOtherMonths: "true",
|
|
// showButtonPanel: "true",
|
|
// closeText: "OK", // erst wenn OK geklickt wird, dann gehts weiter
|
|
onClose: function (dateText, inst) // wenn ein Zeitpunkt gewählt ist, dann
|
|
{
|
|
var sdat = new Date(sDate.datepicker('getDate'));
|
|
sDate.attr("value",$.datepicker.formatDate('yy-mm-dd', sdat)+" 00:00");
|
|
fillRangeTable(sDate.datepicker('getDate'), eDate.datepicker('getDate'));
|
|
}
|
|
});
|
|
|
|
// Drucken:
|
|
$("#printbutton").click( function()
|
|
{
|
|
$('div#Area').jqprint();
|
|
});
|
|
|
|
// PopUp
|
|
$("#manualbutton").popupWindow({
|
|
windowURL:"Anleitung.html",
|
|
height: 350,
|
|
width: 900,
|
|
left: 50,
|
|
top: 50
|
|
});
|
|
|
|
|
|
// nach oben scrollen
|
|
$(window.parent).scrollTop(0); // damit der Anfang der Tabelle zu sehen ist
|
|
|
|
// Inputfeld mit 'gestern' um 0h00 vorbelegen
|
|
var yesterday = new Date();
|
|
yesterday.setDate(yesterday.getDate()-1);
|
|
sDate.attr("value",$.datepicker.formatDate('yy-mm-dd', yesterday)+" 00:00"); // Startdatum auf 'gestern'
|
|
eDate.attr("value",$.datepicker.formatDate('yy-mm-dd', yesterday)); // Enddatumn auch (aber ohne Uhrzeit)
|
|
eDate.datepicker('option','minDate',sDate.datepicker('getDate')); // minWert des EndeDatums wird auf Startdatum gesetzt
|
|
|
|
// Gleich mal die Anfrage an Server absetzen und damit die Tageswerete für das Startdatum holen
|
|
var dt = new Date(sDate.datepicker('getDate'));
|
|
doAjaxCall(dt,0);
|
|
});
|