Add ability to see description on list.php

3 files changed, 60 insertions, 4 deletions

diff --git a/db.php b/db.php
index 0f0c2d7..97a5c91 100644
--- a/db.php
+++ b/db.php
@@ -31,6 +31,31 @@ function add_event ($info)
 	return $id;
 }
 
+function get_event ($id)
+{
+	global $pdo;
+	$st=$pdo->prepare (
+		'select `title`,`location`,`start_date`,`end_date`,`description`,`sources`.`source` ' .
+		'from `events` inner join `sources` on `events`.`source`=`sources`.`id` ' .
+		'where `events`.`id`=?'
+	);
+	if (!$st->execute ([$id])){
+		$err=$st->errorInfo();
+		throw new Exception ('Error ('.$err[0].', '.$err[1].'): '.$err[2]);
+	}
+	$event=$st->fetch (PDO::FETCH_ASSOC);
+
+	$st=$pdo->prepare (
+		'select `keywords`.`keyword` from `keywords` ' .
+		'where exists (select * from `event_keyword` where `event`=? and `event_keyword`.`keyword`=`keywords`.`id`)'
+	);
+	$st->execute ([$id]);
+	$keywords=$st->fetchAll (PDO::FETCH_NUM);
+	$event['keywords']=array_map ('array_shift',$keywords);
+
+	return $event;
+}
+
 function get_events ($keywords=[])
 {
 	global $pdo;
diff --git a/list.php b/list.php
index b942fa6..90e6084 100644
--- a/list.php
+++ b/list.php
@@ -55,7 +55,7 @@ foreach ($events as $event){
 		echo ' to '.date ('j M',strtotime ($event['end_date']));
 	echo '</td>';
 	echo '<td>'.htmlspecialchars ($event['location']).'</td>';
-	echo '<td>'.htmlspecialchars ($event['title']).'</td>';
+	echo '<td><span class="title-link" title="Click for details" onclick="expand_or_collapse(this,'.$event['id'].');">'.htmlspecialchars ($event['title']).'</span></td>';
 	foreach ($event['keywords'] as $i => $kw){
 		if (!is_null ($selected_keywords) && !in_array ($kw,$selected_keywords))
 			$event['keywords'][$i]='<span class="filtered-keyword">'.htmlspecialchars ($kw).'</span>';
@@ -84,6 +84,33 @@ function check_all_keywords (check)
 	return false;
 }
 
+function expand_or_collapse (elem,id)
+{
+	if (elem.parentNode.childNodes.length > 1){
+		let p=elem.parentNode.childNodes[1];
+		p.style.display=p.style.display=='none' ? 'block' : 'none';
+		return;
+	}
+
+	var xhttp=new XMLHttpRequest();
+	xhttp.onreadystatechange=function(){
+		if (this.readyState!=4)
+			return;
+		if (this.status!=200){
+			window.alert ('Failed to fetch event information ('+this.status+')');
+			return;
+		}
+
+		let ev=JSON.parse (xhttp.responseText);
+		let p=document.createElement ('p');
+		p.classList.add ('description');
+		p.innerHTML=ev.description;
+		elem.parentNode.appendChild (p);
+	};
+	xhttp.open ('GET','event.php?id='+id,true);
+	xhttp.send();
+}
+
 update_keywords_field();
 checkboxes.map (cb => cb.onchange=update_keywords_field);
 </script>
diff --git a/style.css b/style.css
index 0566182..d9ad143 100644
--- a/style.css
+++ b/style.css
@@ -20,14 +20,18 @@ th, td {
 	vertical-align: top;
 }
 
-td.description {
+.description {
 	font-size: 85%;
 }
 
+.filtered-keyword {
+	color: gray;
+}
+
 #keyword-filters {
 	column-width: 20em;
 }
 
-.filtered-keyword {
-	color: gray;
+.title-link {
+	cursor: pointer;
 }