Looking Good

index.php

@@ -19,12 +19,9 @@ default:
 function buildStaticPage() {
   $pd = new Parsedown();
   $title = !empty($_POST['title'])?$_POST['title']:TITLE;
-  $out = outputHTMLHeader($title, true);
+  $out = getHTMLHeader($title);
-  $out .= '<pre>';
+  $selFiles = json_decode($_POST['chosen_files']);
-  $out .= print_r($_POST, true);
+  foreach($selFiles as $file) {
-  $out .= '</pre>';
-  $out .= '======';
-  foreach($_POST['chosen_files'] as $file) {
     if(file_exists($file)) {
       $md = file_get_contents($file);
       $out .= '<div class="afile">';
@@ -32,15 +29,17 @@ function buildStaticPage() {
       $out .= "</div>";
     }
   }
-  $out .= outputHTMLFooter(true);
+  $out .= getHTMLFooter();
   $outfile = !empty($_POST['outfile'])?$_POST['outfile']:DEFAULT_FILE;
   file_put_contents($outfile, $out);
+  header('Location: '.$outfile);
 }
 
 function showAdminPage() {
   $out = getHTMLHeader(TITLE)
-       .'<form class="pure-form" action="/manager.php?f=build" method="POST">'."\n"
+       .'<form class="pure-form" action="/manager/?f=build" method="POST">'."\n"
        .'  <fieldset>'."\n"
+       .'    <input id="chosen_files" name="chosen_files" value="" type="hidden" />'."\n"
        .'    <div class="margin10">'."\n"
        .'      <label for="filename">Output File:</label>'."\n"
        .'      <input name="filename" value="worship.html" placeholder="File Name" />'."\n"
@@ -55,7 +54,7 @@ function showAdminPage() {
     $base = basename($file, '.md');
     $out.='        <tr data-file="'.$base.'">'."\n"
          .'          <td>'.$base.'</td>'
-         .'<td><button class="pure-button pure-button-secondary" onclick="addSong('.$filename.');">Add</button></td>'."\n"
+         .'<td><a class="pure-button pure-button-secondary" onclick="javascript:toggleFile(this, \''.$file.'\');">Add</a></td>'."\n"
          .'        </tr>'."\n";
   }
   $out.='        </tbody>'."\n"
@@ -64,6 +63,7 @@ function showAdminPage() {
        .'  </fieldset>'."\n"
        .'</form>'."\n"
        .'<script>'."\n"
+       .'var selectedFiles = [];'."\n"
        .'var tablerows = document.getElementsByTagName("tr");'."\n"
        .'function updateFilter(flt) {'."\n"
        .'  flt = flt.toLowerCase();'."\n"
@@ -75,6 +75,42 @@ function showAdminPage() {
        .'    }'."\n"
        .'  }'."\n"
        .'}'."\n"
+
+       .'function toggleFile(btn, sng) {'."\n"
+       .'  if(!btn.classList.contains("pure-button-warning")) {'."\n"
+       .'    btn.classList.remove("pure-button-secondary");'."\n"
+       .'    btn.classList.add("pure-button-warning");'."\n"
+       .'    for(var i = 0; i < selectedFiles.length; i++) {'."\n"
+       .'      if(selectedFiles[i] == sng) { return; }'."\n"
+       .'    }'."\n"
+       .'    selectedFiles.push(sng);'."\n"
+       .'    btn.innerText = "Remove";'."\n"
+       .'  } else {'."\n"
+       .'    btn.classList.remove("pure-button-warning");'."\n"
+       .'    btn.classList.add("pure-button-secondary");'."\n"
+       .'    for(var i = 0; i < selectedFiles.length; i++) {'."\n"
+       .'      if(selectedFiles[i] == sng) { delete selectedFiles[i]; }'."\n"
+       .'    }'."\n"
+       .'    btn.innerText = "Add";'."\n"
+       .'  }'."\n"
+       .'  updateFilesInput();'."\n"
+       .'}'."\n"
+
+       .'function removeSong(sng) {'."\n"
+       .'  for(var i = 0; i < selectedFiles.length; i++) {'."\n"
+       .'    if(selectedFiles[i] == sng) { delete selectedFiles[i]; }'."\n"
+       .'  }'."\n"
+       .'  updateFilesInput();'."\n"
+       .'}'."\n"
+
+       .'function updateFilesInput() {'."\n"
+       .'  var out = "[";'."\n"
+       .'  for(var i = 0; i < selectedFiles.length; i++) {'."\n"
+       .'    out+="\""+selectedFiles[i]+"\","'."\n"
+       .'  }'."\n"
+       .'  out = out.substring(0,out.length-1)+"]"'."\n"
+       .'  document.getElementById("chosen_files").value = out;'."\n"
+       .'}'."\n"
        .'</script>'."\n"
        .getHTMLFooter();
   echo $out;
@@ -95,6 +131,14 @@ function getHTMLHeader($title = TITLE) {
         .'    .margin10 {'."\n"
         .'      margin: 10px;'."\n"
         .'    }'."\n"
+        .'    .pure-button-secondary {'."\n"
+        .'      background-color: #0A0;'."\n"
+        .'      color: #FFF;'."\n"
+        .'    }'."\n"
+        .'    .pure-button-warning {'."\n"
+        .'      background-color: #A00;'."\n"
+        .'      color: #FFF;'."\n"
+        .'    }'."\n"
         .'    </style>'."\n"
         .' </head>'."\n"
         .' <body>'."\n";