Wettkampftermine als Cards; schön ist etwas anderes, aber zeitgemäßer sieht es aus...

neue Datei: pandocTemplate/cwsvJudo.html5.pandocTemplate geändert: wkParticipo/index.php geändert: wkParticipo/lib/wkParticipoLib.inc.php geändert: wkParticipo/showWkEvent.php geändert: wkParticipo/wkParticipo.css
2018-07-22 16:33:01 +02:00
parent 66376d2418
commit bd69ca1888
5 changed files with 439 additions and 122 deletions
--- a/homepage/redesign2018/markdownExperiment/wkParticipo/index.php
+++ b/homepage/redesign2018/markdownExperiment/wkParticipo/index.php
@@ -80,9 +80,9 @@ setlocale (LC_ALL, 'de_DE@euro', 'de_DE', 'de', 'ge');
 		<h2 id="meldungen">Eingeschrieben zu kommenden Wettkämpfen:</h2>
 <?php
 		foreach( explode( ',', getUserData($mysqli, $_SESSION['user']['userId'])['kinder']) as $kindId){
-			$kindDaten = getUserData($mysqli, $kindId);
+			$kindDaten = getUserData($mysqli, $kindId, array('outCharset'=>"UTF-8") );
 ?>
-			<h3><?php echo( mb_convert_encoding($kindDaten['name'].", ".$kindDaten['vorname'].": ", 'UTF-8', 'ISO-8859-1') );?></h3>
+			<h3><?php echo( $kindDaten['name'].", ".$kindDaten['vorname'].": " );?></h3>
 <?php
 				$wkEventData = getUsersCommingWkEvents( $mysqli, $kindId, array('outCharset'=>"UTF-8") );
 				if(empty($wkEventData)){
@@ -189,8 +189,9 @@ setlocale (LC_ALL, 'de_DE@euro', 'de_DE', 'de', 'ge');
 		<hr />
 		
 		<h2 id="wettkaempfen">Anstehende Wettkämpfe</h2>
+		Nicht wundern, dass hier eventuell etwas doppelt steht! Ich experimentiere gerade.
 <?php
-		$wkEvents = getCommingWkEvents($mysqli);
+		$wkEvents = getCommingWkEvents($mysqli, array('outCharset'=>"UTF-8") );
 		
 		if( empty($wkEvents) ){
 ?>
@@ -200,7 +201,7 @@ setlocale (LC_ALL, 'de_DE@euro', 'de_DE', 'de', 'ge');
 		else{
 			foreach( $wkEvents as $wk){
 				//print_r($wk);
-				$wkEvent = getWkEventData($mysqlConn, $wk['id']);
+				$wkEvent = getWkEventData($mysqlConn, $wk['id'], array('outCharset'=>"UTF-8"));
 ?>
 				<h3><?php echo( $wkEvent['Veranstaltung'] );?></h3>
 				<?php
--- a/homepage/redesign2018/markdownExperiment/wkParticipo/lib/wkParticipoLib.inc.php
+++ b/homepage/redesign2018/markdownExperiment/wkParticipo/lib/wkParticipoLib.inc.php
@@ -1,5 +1,4 @@
 <?php
-
 $startTyp = array( '1' => "Kämpfer", '2' => "Zuschauer", '3' => "keine Teilnahme" );


@@ -203,8 +202,18 @@ $ret = array();
 return $ret;
 }

-function getUserData($anMysqlConn, $anUserId){
-	$ret = array();
+function getUserData( $anMysqlConn, $anUserId, $someOptions = array() ){
+// wir befinden uns in der Übergangsphase:
+// - als Standard wird das derzeitige Verhalten definiert (ISO-8859-1 
+//   und die Konvertierung erfolgt ausserhalb)
+// - wenn einmal alle mbConvertEncoding weg sind, kann der Standard auf 
+//   das gewünschte Verhalten umgestellt werden
+if( empty($someOptions['dbCharset'])  ) $someOptions['dbCharset'] = "ISO-8859-1";
+//if( empty($someOptions['outCharset']) ) $someOptions['outCharset'] = "UTF-8";// das spätere, gewünschte Verhalten
+if( empty($someOptions['outCharset']) ) $someOptions['outCharset'] = "ISO-8859-1";
+
+$ret = array();
+
 	if( (string)(int)$anUserId == $anUserId ){
 		$query = sprintf(
 			"SELECT * FROM wkParticipo_Users WHERE id='%s';",
@@ -214,6 +223,21 @@ function getUserData($anMysqlConn, $anUserId){
 		if( !$results ) die("ERR: Fehler bei Datenbankabfrage (".$query.")!\n");
 		$ret  = $results->fetch_assoc();
 	}
+	
+//	var_dump($someOptions);
+//	var_dump($results);
+//	var_dump($ret);
+
+// Zeichensatzkonvertierung
+	array_walk(
+		$ret,
+		function (&$value, $key, $someOptions) {
+			$value = iconv($someOptions['dbCharset'], $someOptions['outCharset'], $value);
+		},
+		$someOptions
+	);
+//	var_dump($ret);
+
 return $ret;
 }

@@ -280,7 +304,11 @@ return $ret;
 /// Der Rückgabewert sollte vor Verwendung (und zur Fehlerbeheandlung) 
 /// auf NULL und/oder leeres Array getestet werden.
 /// 
-function getWkEventData($anMysqlConn, $anEventId){
+function getWkEventData($anMysqlConn, $anEventId, $someOptions = array()){
+
+if( empty($someOptions['dbCharset'])  ) $someOptions['dbCharset'] = "ISO-8859-1";
+if( empty($someOptions['outCharset']) ) $someOptions['outCharset'] = "UTF-8";
+
 $ret = array();
 if( (string)(int)$anEventId != $anEventId ) return $ret;
 	$anMysqlConn->query("USE cwsvjudo;");
@@ -310,12 +338,15 @@ if( (string)(int)$anEventId != $anEventId ) return $ret;
 	// Bei einem leeren Ergebnis (NULL oder leeres Array) soll ein leeres Array zurückgeliefert werden
 	if( empty($ret) ) return array();

-array_walk(
-    $ret,
-    function (&$entry) {
-        $entry = iconv("ISO-8859-1", "UTF-8", $entry);
-    }
-);
+// Zeichensatzkonvertierung
+	array_walk(
+		$ret,
+		function (&$value, $key, $someOptions) {
+			$value = iconv($someOptions['dbCharset'], $someOptions['outCharset'], $value);
+		},
+		$someOptions
+	);
+
 return $ret;
 }

@@ -328,7 +359,17 @@ return $ret;
 /// Der Rückgabewert sollte vor Verwendung (und zur Fehlerbeheandlung) 
 /// auf NULL und/oder leeres Array getestet werden.
 /// 
-function getCommingWkEvents($anMysqlConn){
+function getCommingWkEvents($anMysqlConn, $someOptions=array() ){
+
+// wir befinden uns in der Übergangsphase:
+// - als Standard wird das derzeitige Verhalten definiert (ISO-8859-1 
+//   und die Konvertierung erfolgt ausserhalb)
+// - wenn einmal alle mbConvertEncoding weg sind, kann der Standard auf 
+//   das gewünschte Verhalten umgestellt werden
+if( empty($someOptions['dbCharset'])  ) $someOptions['dbCharset'] = "ISO-8859-1";
+//if( empty($someOptions['outCharset']) ) $someOptions['outCharset'] = "UTF-8";// das spätere, gewünschte Verhalten
+if( empty($someOptions['outCharset']) ) $someOptions['outCharset'] = "ISO-8859-1";
+
 $ret = array();
 	$anMysqlConn->query("USE cwsvjudo;");
 	$query = sprintf(
@@ -364,13 +405,14 @@ $ret = array();
 	while( $result = $results->fetch_assoc() ){
 		array_walk(
 			$result,
-			function (&$entry) {
-				$entry = iconv("ISO-8859-1", "UTF-8", $entry);
-			}
+			function (&$value, $key, $someOptions) {
+				$value = iconv($someOptions['dbCharset'], $someOptions['outCharset'], $value);
+			},
+			$someOptions
 		);
 		array_push( $ret, $result);
 	}
-//echo("Results: "); print_r($ret);
+
 return $ret;
 }

@@ -557,9 +599,9 @@ function getUsersCommingWkEvents($anMysqlConn, $anUserId, $someOptions=array() )
 //   und die Konvertierung erfolgt ausserhalb)
 // - wenn einmal alle mbConvertEncoding weg sind, kann der Standard auf 
 //   das gewünschte Verhalten umgestellt werden
-if( empty($optionsArray['dbCharset'])  ) $optionsArray['dbCharset'] = "ISO-8859-1";
-//if( empty($optionsArray['outCharset']) ) $optionsArray['outCharset'] = "UTF-8";// das spätere, gewünschte Verhalten
-if( empty($optionsArray['outCharset']) ) $optionsArray['outCharset'] = "ISO-8859-1";
+if( empty($someOptions['dbCharset'])  ) $someOptions['dbCharset'] = "ISO-8859-1";
+//if( empty($someOptions['outCharset']) ) $someOptions['outCharset'] = "UTF-8";// das spätere, gewünschte Verhalten
+if( empty($someOptions['outCharset']) ) $someOptions['outCharset'] = "ISO-8859-1";

 $ret = array();
 	$anMysqlConn->query("USE cwsvjudo;");
@@ -594,10 +636,10 @@ $ret = array();
 	foreach($ret as &$entry){
 		array_walk(
 			$entry,
-			function (&$value, $key, $optionsArray) {
-				$value = iconv($optionsArray['dbCharset'], $optionsArray['outCharset'], $value);
+			function (&$value, $key, $someOptions) {
+				$value = iconv($someOptions['dbCharset'], $someOptions['outCharset'], $value);
 			},
-			$optionsArray
+			$someOptions
 		);
 	}

@@ -1157,101 +1199,82 @@ return $url;

 /// Erzeugen des htmlCodes der Infobox für ein wkEvent
 function htmlWkEvent($aWkEvent, $starters, $fahrten){
+//var_dump($aWkEvent, $starters, $fahrten);
+
 $retHtml = "";

-	$retHtml .= "<fieldset><legend>". $aWkEvent['Veranstaltung'] ."</legend><div class=\"wkBox\">";
-	$retHtml .= "<div class=\"wkBoxWkData\" ><div>Wettkampfdaten</div><ul>";
-	$retHtml .= "<li>Datum: ";
-	if( empty($aWkEvent['Datum']) ){
-		$retHtml .= "fehlendes Datum";
-	}
-	else{
-		$retHtml .= "<time datetime=\"" . $aWkEvent['Datum'] . "\">" . $aWkEvent['Datum'] . "</time> <a class=\"touchLink\" href =\"" . addToGcalUrl( $aWkEvent['Veranstaltung'], $aWkEvent['Datum'] ) . "\" >In Google Calendar eintragen</a>";
-	}
-	$retHtml .= "</li>";
-	$retHtml .= "<li>Einschreibefrist: ";
-	if( empty($aWkEvent['meldefrist']) ){
-		$retHtml .= "fehlende Einschreibefrist";
-	}
-	else{
-		$retHtml .= "<time datetime=\"" . $aWkEvent['meldefrist'] . "\">" . $aWkEvent['meldefrist'] . "</time> <a class=\"touchLink\" href =\"" . addToGcalUrl(  "Einschreibefrist " . $aWkEvent['Veranstaltung'],  $aWkEvent['meldefrist'] ) . "\" >In Google Calendar eintragen</a>";
-	}
-	$retHtml .= "</li>";
-	$retHtml .= "<li>Wettkampf: ";
-	if( empty($aWkEvent['Veranstaltung']) ){
-		$retHtml .= "fehlender Wettkampfname";
-	}
-	else{
-		$retHtml .= $aWkEvent['Veranstaltung'];
-	}
-	$retHtml .= "</li>";
-	$retHtml .= "<li>Altersklassen: ";
-	if( empty( $aWkEvent['Altersklassen'] ) ){
-		$retHtml .= "fehlende Altersklassen";
-	}
-	else{
-		$retHtml .= $aWkEvent['Altersklassen'];
-	}
-	$retHtml .= "</li>";
+	if( empty($aWkEvent['Datum']) )
+		$aWkEvent['Datum'] = "0000-00-00";
+	$anzPlätze = 0;
+	foreach($fahrten as $fahrt)
+		$anzPlätze += $fahrt['plaetze'];

-	if( !empty($_SESSION['login']) ){
-	//	$starters = getStarterForEvent($mysqlConn, $aWkEvent['id']);
-		$retHtml .= "<li>angemeldete Starter: ";
-		if( empty($starters) ){
-			$retHtml .= "Noch hat sich niemand für diesen Wettkampf gemeldet!";
-		}
-		else{
-			$retHtml .= count($starters);
-		}
-		$retHtml .= "</li>";
-		
-	//	$fahrten = getFahrtenForEvent($mysqlConn, $aWkEvent['id']);
-		$anzPlätze = 0;
-		foreach($fahrten as $fahrt)
-			$anzPlätze += $fahrt['plaetze'];
-		$retHtml .= "<li" . ( ($anzPlätze<count($starters)) ? " style=\"color: red\"" : "" ) . ">Anzahl Plätze: " . $anzPlätze . "</li>";
-		
-		if( !empty( $aWkEvent['bemerkungen'] ) ){
-			$retHtml .= "<li>Bemerkungen: " . $aWkEvent['bemerkungen'] . "</li>";
-		}
-	}
+	$retHtml = 
+		"<div class=\"wkInfoCard\">".
+			"<time class=\"wkInfoCardDate\" datetime=\"".$aWkEvent['Datum']."\">".
+				"<span class=\"wkInfoCardDateWeekday\">".strftime("%a", strtotime($aWkEvent['Datum']))."</span>".
+				"<span class=\"wkInfoCardDateDay\">"    .strftime("%d", strtotime($aWkEvent['Datum']))."</span>".
+				"<span class=\"wkInfoCardDateMonth\">"  .strftime("%b", strtotime($aWkEvent['Datum']))."</span>".
+				"<span class=\"wkInfoCardDateYear\">"   .strftime("%Y", strtotime($aWkEvent['Datum']))."</span>".
+			"</time>".

-	$retHtml .= "</ul></div>";
+			"<div class=\"wkInfoCardWkData\">".
+				"<div class=\"wkInfoCardWkInfo\">".
+					"<h3 class=\"fontWeightLighter\" >".$aWkEvent['Veranstaltung']."</h4>".
+					"<ul>".
+						"<li>Altersklassen: ".$aWkEvent['Altersklassen']."</li>".
+						"<li>Einschreibefrist: ".(
+							empty($aWkEvent['meldefrist'])?
+							"fehlende Einschreibefrist"
+							:"<time datetime=\"" . $aWkEvent['meldefrist'] . "\">" . $aWkEvent['meldefrist'] . "</time>".
+							"<div class=\"wkInfoCardButtonBar flexFlowRow justifyContentFlexStart\">".
+								"<a class=\"wkInfoCardButton wkInfoCardButtonSuccess wkInfoCardButtonRaised\" href =\"" . addToGcalUrl(  "Einschreibefrist " . $aWkEvent['Veranstaltung'],  $aWkEvent['meldefrist'] ) . "\" >In Google Calendar übernehmen</a>".
+							"</div>"
+						)."</li>".
+						(!empty($_SESSION['login'])?
+							"<li>angemeldete Starter: ".(
+								empty($starters)?
+								"Noch hat sich niemand für diesen Wettkampf gemeldet!":
+								count($starters)
+							)."</li>"
+						:"").
+						(empty($_SESSION['login'])?
+							"Ein Einschreiben ist nur eingeloggt möglich!"
+							:"<form action=\"./addStarter.php\" method=\"post\">".
+								"<input type=\"hidden\" name=\"f[eventId]\" value=".
+									( isset( $aWkEvent['id'] ) ? $aWkEvent['id'] : "").
+								" />".
+								( date("Y-m-d") > $aWkEvent['meldefrist']?
+									"<button type=\"submit\" disabled>ist die Einschreibefrist bereits abgelaufen!</button>".
+									"<p>Frist für das Einschreiben verpasst? Für ein nachträgliches Einschreiben mit dem Admin verständigen (<a href=\"mailto:cwsvjudo@arcor.de?Subject=" . ( rawurlencode("Meldefrist ".$aWkEvent['Veranstaltung']) ) . "\" target=\"_top\">Email an cwsvjudo@arcor.de</a>).</p>"
+									:"<button type=\"submit\">jmd. einschreiben</button>"
+								).
+							"</form>"
+						).
+						"<li" . ( ($anzPlätze<count($starters)) ? " style=\"color: red\"" : "" ) . ">Anzahl Plätze: " . $anzPlätze . "</li>".
+						(empty($_SESSION['login'])?
+							"Das Anbieten von Mitfahrgelegenheiten ist nur eingeloggt möglich!"
+							:"<form action=\"./addFahrt.php\" method=\"post\">".
+								"<input type=\"hidden\" name=\"f[eventId]\" value=" . ( isset( $aWkEvent['id'] ) ? $aWkEvent['id'] : "" ) . "\" />".
+								($aWkEvent['Datum'] > date("Y-m-d")?
+									"<button type=\"submit\">Mitfahr&shy;gelegenheit anbieten</button>"
+									:"<button type=\"submit\" disabled>ist es leider zu spät, noch Mitfahrgelegenheiten hinzuzufügen.</button>"
+								).
+							"</form>"
+						).
+						( !empty( $aWkEvent['bemerkungen'] )?
+							"<li>Bemerkungen: " . $aWkEvent['bemerkungen'] . "</li>"
+						:"").
+					"</ul>".
+				"</div>".

-	$retHtml .= "<nav style=\"width: 100%; clear: both;\"><ul>";
-	$retHtml .= "<li><a href =\"./showWkEvent.php?eventId=" . (isset( $aWkEvent['id'] ) ? $aWkEvent['id'] : "") . "\" ><div>Detailansicht</div></a></li>";
-	$retHtml .= "<li><a href =\"/ressourcen/phpLib/calendar.php?wkID=" . ($aWkEvent['wkId']) . "\" ><div>Termin als iCal</div></a></li>";
-	$retHtml .= "<li><a href =\"" . addToGcalUrl($aWkEvent['Veranstaltung'], $aWkEvent['Datum'] ) . "\"><div>In den Google Calendar</div></a></li>";
-	$retHtml .= "</ul></nav>";
-
-	$retHtml .= "<div>";
-	if (empty($_SESSION['login'])){
-		$retHtml .= "Ein Einschreiben ist nur eingeloggt möglich!";
-	}
-	else{
-		$retHtml .= "Für diesen Wettkampf ...";
-		$retHtml .= "<form action=\"./addStarter.php\" method=\"post\">";
-		$retHtml .= "<input type=\"hidden\" name=\"f[eventId]\" value=" . ( isset( $aWkEvent['id'] ) ? $aWkEvent['id'] : "") . " />";
-		if( date("Y-m-d") > $aWkEvent['meldefrist'] ){
-			$retHtml .= "<button type=\"submit\" disabled>ist die Einschreibefrist bereits abgelaufen!</button>";
-			$retHtml .= "<p>Frist für das Einschreiben verpasst? Für ein nachträgliches Eintragen mit dem Admin verständigen (<a href=\"mailto:cwsvjudo@arcor.de?Subject=" . ( rawurlencode("Meldefrist ".$aWkEvent['Veranstaltung']) ) . "\" target=\"_top\">Email an cwsvjudo@arcor.de</a>).</p>";
-		}
-		else{
-			$retHtml .= "<button type=\"submit\">einen Starter melden</button>";
-		}
-		$retHtml .= "</form>";
-		$retHtml .= "<form action=\"./addFahrt.php\" method=\"post\">";
-		$retHtml .= "<input type=\"hidden\" name=\"f[eventId]\" value=" . ( isset( $aWkEvent['id'] ) ? $aWkEvent['id'] : "" ) . "\" />";
-		
-		if($aWkEvent['Datum'] > date("Y-m-d")){
-			$retHtml .= "<button type=\"submit\">eine Mitfahrgelegenheiten melden.</button>";
-		}
-		else{
-			$retHtml .= "<button type=\"submit\" disabled>ist es leider zu spät, noch Mitfahrgelegenheiten hinzuzufügen.</button>";
-		}
-		$retHtml .= "</form>";
-	}
-	$retHtml .= "</div></div></fieldset>";
+				"<div class=\"wkInfoCardButtonBar\">".
+					"<a href =\"./showWkEvent.php?eventId=".$aWkEvent['eventId']."\" class=\"wkInfoCardButton wkInfoCardButtonSuccess wkInfoCardButtonRaised\">Detailansicht</a>".
+					"<a href =\"/ressourcen/phpLib/calendar.php?wkID=".$aWkEvent['wkId']."\" class=\"wkInfoCardButton wkInfoCardButtonSuccess wkInfoCardButtonRaised\">Termin als iCal</a>".
+					"<a href =\"".addToGcalUrl( $aWkEvent['Veranstaltung'], $aWkEvent['Datum'] )."\" class=\"wkInfoCardButton wkInfoCardButtonSuccess wkInfoCardButtonRaised\">In den Google Calendar</a>".
+				"</div>".
+			"</div>".
+		"</div>";

 return $retHtml;
 }
--- a/homepage/redesign2018/markdownExperiment/wkParticipo/showWkEvent.php
+++ b/homepage/redesign2018/markdownExperiment/wkParticipo/showWkEvent.php
@@ -229,7 +229,7 @@
 <!--Beginn der Einbindung des Counters-->
 <?php
 	$chCounter_page_title = "Wettkampfplaner -- Eventansicht -- ".mb_convert_encoding($eventData['Veranstaltung'], 'UTF-8', 'ISO-8859-1');
-	$chCounter_page_url = $_SERVER[HTTP_HOST].$_SERVER[REQUEST_URI];
+	$chCounter_page_url = $_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
 	$chCounter_visible =0 ;
 //	include( $_SERVER['DOCUMENT_ROOT'].'/expCounter/counter.php');
 ?>
--- a/homepage/redesign2018/markdownExperiment/wkParticipo/wkParticipo.css
+++ b/homepage/redesign2018/markdownExperiment/wkParticipo/wkParticipo.css
@@ -17,25 +17,29 @@
 }

 .wkInfoCardDate{
-	align-items: center;
-	color: #291670;
 	display: flex;
 	flex-direction: column;
-	justify-content: center;
+	align-items: center;
+	color: #291670;
 	padding: 0rem 0.5rem 0rem 0rem;
 	width: 6rem;
 }
+@media (min-width: 640px){
+	.wkInfoCardDate{
+	justify-content: center;
+	}
+}

 .wkInfoCardDateDay{
-  font-size: 1.75rem;
+	font-size: 1.75rem;
 }

 .wkInfoCardDateWeekday{
-  font-size: 1.15rem;
+	font-size: 1.15rem;
 }

 .wkInfoCardDateMonth{
-  font-size: 1.15rem;
+	font-size: 1.15rem;
 }

 .wkInfoCardWkData{
@@ -55,6 +59,18 @@
 	flex-grow: 1;
 }

+.wkInfoCardWkInfo ul{
+	padding: 0;
+	list-style-type: none;
+}
+
+@media (min-width: 640px){
+	.wkInfoCardWkInfo ul{
+		padding: initial;
+		list-style-type: initial;
+	}
+}
+
 .wkInfoCardButtonBar{
 	align-items: center;
 	display: flex;
@@ -88,6 +104,13 @@
 	font-weight: lighter;
 }

+.flexFlowRow{
+	flex-flow: row;
+}
+
+.justifyContentFlexStart{
+	justify-content: flex-start;
+}


 .card__icon {