Allow news sorting on main page

header.php

@@ -85,10 +85,12 @@
       </select>
     </li>
     <li class="headerItem">
-      <select id="sort" name="sort" onchange="onSort(this.value)">>
-        <option value="date">Sortiraj po datumu</option>
-        <option value="alpha">Sortiraj abecedno</option>
-      </select>
+      <form method="post">
+        <select id="sort" name="sort" onchange="onSortChanged(this)">>
+          <option value="date" <?php echo (!isset($_POST['sort']) || strpos("date", $_POST['sort'])!==FALSE)?"selected":null?>>Sortiraj po datumu</option>
+          <option value="alpha" <?php echo (isset($_POST['sort']) && strpos("alpha", $_POST['sort'])!==FALSE)?"selected":null?>>Sortiraj abecedno</option>
+        </select>
+      </form>
     </li>
   <?php endif; ?>
   </ul>

index.php

@@ -4,13 +4,30 @@
     <?php include 'header.php'; ?>
     <div class="content">
       <?php $newsFile = file($openShiftFolder."vijesti.csv");
-      foreach ($newsFile as $news) {?>
+      $imagesArray = [];
+      $newsArray = [];
+      $timesArray = [];
+      $counter = 0;
+      foreach ($newsFile as $news) {
+        $nesto = str_getcsv($news);
+        $timesArray[$counter] = $nesto[0];
+        $imagesArray[$counter] = $nesto[1];
+        $newsArray[$counter] = $nesto[2];
+        $counter++;
+      }
+      if(isset($_POST['sort'])) {
+        if($_POST['sort']=='alpha') {
+          print_r('alpha');
+          array_multisort($newsArray, SORT_STRING, $imagesArray, $timesArray);
+        }
+      }
+      for($i = 0; $i < $counter; $i++) {
+      ?>
         <div class="news">
         <?php
-        $nesto = str_getcsv($news);
-        $image = $nesto[1];
-        $timeOfNews = $nesto[0];
-        $newsContent = $nesto[2];
+        $image = $imagesArray[$i];
+        $timeOfNews = $timesArray[$i];
+        $newsContent = $newsArray[$i];
         ?>
         <img src="<?php echo (strlen($image)!=0)?$image:'no_image.png' ?>"/>
         <p>

js.js

@@ -89,6 +89,10 @@ function onFilter(select) {
   }
 }
 
+function onSortChanged(thisThing) {
+  thisThing.parentElement.submit();
+}
+
 function validateCountry(countryCodeField) {
   var ajax = new XMLHttpRequest();
   ajax.onreadystatechange = function() {

stil.css

@@ -104,6 +104,11 @@ border-color: transparent transparent transparent #1199CC;
   margin: auto;
 }
 
+.headerItem form {
+  display: inline-block;
+  margin: auto;
+}
+
 .logoLinl {
   text-decoration: none;
 }