This is my take on it. I copy/pasted a couple of extra jobs to give...
CODE
<?php
$required = ['Feasibility', 'Measure Up', 'Model Drawing', 'Concept Design', 'Developed Design', 'Resource Consent', 'Construction Documentation' ];
$colors = array_combine($required, ['w3-red', 'w3-green', 'w3-orange', 'w3-deep-orange', 'w3-teal', 'w3-yellow', 'w3-purple'] );
$staff_arr = [ 'Staff1' => 'SP',
'Staff2' => 'MB',
'Staff3' => 'BF',
'Staff4' => 'MCP',
'Staff5' => 'DG'
];
function state_dropdown($staff, $color)
{
return "<form action='' method='POST'>" .
"<select class='w3-input w3-round $color' name ='StaffName' onchange='this.form.submit()'>" . // why is a menu of states called "StaffName" ?
"<option value =''>$staff</option>" .
"<option class='form-control col-sm-3 bg-white text-dark'>Feasibility </option> " .
"<option class='form-control col-sm-3 bg-white text-dark'>Measure Up </option> " .
"<option class='form-control col-sm-3 bg-white text-dark'>Model Drawing </option> " .
"<option class='form-control col-sm-3 bg-white text-dark'>Concept Design </option> " .
"<option class='form-control col-sm-3 bg-white text-dark'>Developed Design </option> " .
"<option class='form-control col-sm-3 bg-white text-dark'>Resource Consent </option> " .
"<option class='form-control col-sm-3 bg-white text-dark'>Construction Docs </option> " .
"</select>" .
"</form>";
}
$xml = simplexml_load_file('plugnz.xml');
$data = [];
//
// collect the jobs and current task data into an array
//
foreach ($xml->Jobs->Job as $job) {
$id = (string)$job->ID;
$state = (string)$job->State;
if (!in_array($state, $required)) continue;
$data[$id] = [ 'name' => (string)$job->Name,
'state' => $state
];
$tasks = $job->xpath("Tasks/Task[Name='$state']");
$clr = $colors[$state];
$due = (string)$tasks[0]->DueDate;
$data[$id]['due'] = date('Y-m-d', strtotime($due));
$data[$id]['display_date'] = date('M d Y', strtotime($due));
$assigned = [];
foreach ($tasks[0]->Assigned->Staff as $s) {
$assigned[] = $staff_arr[(string)$s->Name];
}
$staff_str = join(' ', $assigned);
$data[$id]['task'] = [ 'staff' => $staff_str, 'clr' => $clr ];
}
//
// sort the data array on the task due date DESC
//
uasort($data, function($a,$b) { return $b['due'] <=> $a['due']; } );
//
// output the array as a table
//
$tdata = '';
foreach ($data as $jid => $jdata) {
$tdata .= "<tr><td class='jobno'>$jid</td><td>{$jdata['name']}</td>";
foreach ($required as $stat) {
if ($jdata['state']==$stat) {
$tdata .= "<td>" . state_dropdown($jdata['task']['staff'], $jdata['task']['clr']) . "</td>";
}
else {
$tdata .= "<td> </td>";
}
}
$tdata .= "<td> </td>";
$tdata .= "<td>{$jdata['display_date']}</td></tr>";
}
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="creation-date" content="05/10/2019">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Job Status Table</title>
<style type="text/css">
body { font-family: verdana,sans-serif; font-size: 10pt; padding: 20px 50px; }
table {border-collapse: collapse;}
.th-sm-1 { font-size: 8pt; text-align: left; }
.jobno { font-weight: 600; color: #2196f3; }
select { width: 120px; }
</style>
</head>
<body>
<table border=1>
<thead>
<tr>
<th class="th-sm-1">Project Number</th>
<th class="th-sm-1">Project Name</th>
<th class="th-sm-1">Feasibility</th>
<th class="th-sm-1">Measure Up</th>
<th class="th-sm-1">Model Drawing</th>
<th class="th-sm-1">Concept Design</th>
<th class="th-sm-1">Developed Design</th>
<th class="th-sm-1">Resource Consent</th>
<th class="th-sm-1">Construction Docs</th>
<th class="th-sm-1">Milestone</th>
<th class="th-sm-1">Due Date</th>
</tr>
</thead>
<tbody>
<?=$tdata?>
</tbody>
</table>
</body>
</html>