VoL luisterlijst uit backup gehaald

app/Http/Controllers/SpecialController.php

@@ -0,0 +1,69 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use \Model\NewsItem;
+
+class SpecialController extends Controller
+{
+    public function luisterlijst_stem(Request $request) 
+    {
+        $data = [];
+        if($request->isMethod('post')) {
+          $data['message'] = "Je lijst is bewaard, maar nog niet ingediend. Zolang je cookies bewaard blijven, kan je terugkomen op deze pagina om de lijst verder in te vullen.";
+          setcookie('luisterlijst', json_encode($_POST));
+          if(isset($_POST['insturen'])) {
+          $data['message'] = "<b>Je keuze is doorgegeven. Dank je wel voor het stemmen!</b><br/>Luister op 23 december naar de Vroeger of Later Luisterlijst om te kijken of en waar je lievelingsnummers erin staan. ";
+          $data['submitted'] = true;
+ 
+          $msgbody = "<p>Iemand heeft gestemd op de Vroeger of Later Luisterlijst!</p>\n" .
+		"<p>Naam: " . strip_tags($_POST['voornaam']) . "</p>\n" .
+		"<p>Woonplaats: " . strip_tags($_POST['woonplaats']) . "</p>\n" .
+		"<p>E-mail: " . strip_tags($_POST['mailadres']) . "</p>\n" .
+		"<p>Telefoonnummer: " . strip_tags($_POST['telefoonnummer']) . "</p>\n" .
+		"<p>Gestemd vanaf IP: " . $_SERVER['REMOTE_ADDR'] . "</p>\n";
+          if(isset($_POST['checkbox'])) foreach($_POST['checkbox'] as $key => $val) 
+          {
+            $msgbody .= "<p>" . strip_tags($key) . ": " . strip_tags($val) . "</p>";
+          }
+          $msgbody .= "<hr/>\n<p>Hier is de keuze van " . strip_tags($_POST['voornaam']) . ":</p>\n<table>\n<thead>\n<tr>\n<th>Type</th><th>Positie</th><th>Titel</th><th>Artiest</th></tr>\n</thead>\n<tbody>";
+          foreach($_POST['keuzes'] as $type => $keuzes)
+          foreach($keuzes as $ix => $velden)
+          { 
+             $msgbody .= "<tr><td>$type</td><td>$ix</td>";
+             foreach($velden as $veld) $msgbody .= "<td>" . strip_tags($veld) . "</td>";
+             $msgbody .= "</tr>";
+          }
+          $msgbody .= "</tbody>\n</table>";
+
+          $headers = "From: \"" . strip_tags($_POST['voornaam']) . "\" <" . strip_tags($_POST['mailadres'] ? $_POST['mailadres'] : 'website-noreply@nhgooi.nl') . ">\r\n";
+          $headers .= "MIME-Version: 1.0\r\n";
+          $headers .= "Content-Type: text/html; charset=UTF-8\r\n";
+          mail('vroegeroflater@nhgooi.nl', 'Er is gestemd op de luisterlijst', $msgbody, $headers);
+        } else {
+          if(isset($_COOKIE['luisterlijst'])) {
+             foreach(json_decode($_COOKIE['luisterlijst'], true) as $k => $v) { 
+               $_POST[$k] = $v;
+             }
+          }
+	}
+        }
+
+        config(['app.debug' => true]);
+        return view('luisterlijst', $data);
+    }
+
+    public function bart(Request $request) 
+    {
+        $page = (int)$request->get('pagina', 1);
+        $apiResult = $this->API('blog/overzicht/2019-07-01/2019-07-10?pagina=' . (int)max(1, $page));
+        $blog = [];
+        foreach($apiResult->items as $blogItem)
+        {
+            $blog[] = new \Model\NewsItem($blogItem);
+        }
+
+        return view($request->ajax() ? 'bloglistitems' : 'bloglist', ['title' => 'De Nacht van Bart - 6 juli 2019', 'items' => $blog]);
+    }
+}

resources/views/luisterlijst.blade.php

@@ -0,0 +1,529 @@
+@extends('page')
+
+@section('title')
+  Vroeger of Later Luisterlijst
+@endsection
+
+@section('content')
+
+<style>
+  form .row label { 
+    width: 10%;
+    margin-right: 4%; 
+  }
+
+  form .row input, form .row textarea {
+    width: 85%;
+    display: inline;
+  }
+
+  form .row .index { 
+    position: absolute; 
+    margin-left: -1em;
+    margin-top: 5px;
+  }
+
+  #clockdiv {
+      vertical-align: middle;
+  }
+  
+  #clockdiv span {
+      padding: 5px;
+      border-radius: 3px;
+      background: rgb(200,210,255);
+      display: inline-block;
+      width: 2em;
+      height: 2em;
+      text-align: center;
+      vertical-align: middle;
+  }
+
+  .smalltext{
+      padding-top: 5px;
+      font-size: 16px;
+      color: black;
+  }
+</style>
+
+@php
+  function veld($prefix, $index) {
+    $id = "keuze-$prefix-$index-";
+    $naam = "keuzes[$prefix][$index]";
+    $titel = isset($_POST['keuzes']) ? $_POST['keuzes'][$prefix][$index]['titel'] : "";
+    $artiest = isset($_POST['keuzes']) ? $_POST['keuzes'][$prefix][$index]['artiest'] : "";
+    echo '<div class="row-group">
+  <div class="row keuze">
+    <div class="index">' . $index . '.</div>
+    <div class="col-lg-6"><label for="'.  $id . '-titel">Titel:</label><input class="form-control titel" id="' . $id . '-titel" name="' . $naam . '[titel]" value="' . $titel . '" ></div>
+    <div class="col-lg-6"><label for="'.  $id . '-artiest">Artiest:</label><input class="form-control artiest" id="' . $id . '-artiest" name="' . $naam . '[artiest]" value="' . $artiest . '" ></div>
+</div><!--/.row-->
+</div><!--/.row-group-->';
+  }
+@endphp
+
+<h2>Vroeger of Later Luisterlijst</h2>
+
+@if(isset($message))
+<div class="panel panel-primary text-primary">
+<div class="panel-body">
+{!!$message!!}
+</div>
+</div>
+@endif
+
+<div class="panel panel-info" style="float: right; margin-left: 5px; width: 300px;">
+  <div class="panel-heading"><b>Inspiratie nodig?</b></div>
+  <div class="panel-body">
+    <span id="inspiratie">Klik op het icoontje voor een idee.</span>
+  </div>
+  <div class="panel-footer"> 
+    <a href="#" onclick="javascript:inspireer();return false;"><span class="fa fa-refresh"></span> Geef mij nog een idee!</a>
+  </div>
+</div>
+
+<h3>Mijn lijst...</h3>
+<p>Op maandag 23 december van 12:00 tot 23:00 uur zendt NH Gooi Radio de Vroeger of Later Luisterlijst uit. Honderd van de beste Nederlandstalige liedjes, door jou &mdash; de luisteraar &mdash; in willekeurige volgorde gerangschikt.</p>
+
+<p>Van 11 november tot 16 december 23:00 uur kan je stemmen via deze pagina.</p>
+
+<h2>Hoe werkt het stemmen?</h2>
+
+<p>Hieronder vind je een aantal categorie&euml;n. Dat ziet er misschien afschrikwekkend uit, maar je mag zoveel invullen of leeglaten als je wilt. Je kunt dus overal alleen je nummer 1 invullen, of &eacute;&eacute;n categorie helemaal en een andere helemaal niet. We nodigen je natuurlijk uit zoveel mogelijk in te vullen, want hoe meer liedjes je aangeeft, hoe meer invloed je hebt op de lijst! De enige eis die we stellen, is dat liedjes Nederlandstalig, dus Nederlands of Vlaams (dialect), gezongen moeten zijn.</p>
+
+<p>Per categorie kennen we een aantal punten toe aan je nummer 1, 2 en 3. Daarnaast krijgen alle liedjes in je eind-top-10 die je niet in &eacute;&eacute;n van de eerdere categorie&euml;n gezet hebt ook een aantal punten. Het totaal aantal punten per nummer bepaalt de volgorde in de lijst.</p>
+
+<p>Weet je het nog niet helemaal zeker? Als je op 'Bewaren' onderaan deze pagina drukt, gebruiken we &eacute;&eacute;nmalig een cookie om je ingevulde waarden tijdelijk te onthouden. Zo kan je later terugkomen om je lijst verder in te vullen.</p>
+
+<p style="font-weight: bold; color: blue;" id="clockdiv">
+    Stem nu! Je hebt nog 
+        <span class="days"></span> dagen,
+        <span class="hours"></span> uur,
+        <span class="minutes"></span> minuten en 
+        <span class="seconds"></span> seconden!
+</p>
+
+<form method="post">
+{{ csrf_field() }}
+<h4>Kleinkunstklassiekers</h4>
+<p>Vroeger of Later is natuurlijk vooral een kleinkunst- en theaterprogramma. Vaste luisteraars kennen onze rubriek de Kleinkunstklassieker, maar welke Nederlandstalige klassieken mogen zeker niet ontbreken in de lijst?</p>
+
+@for($i = 1; $i <= 3; ++$i)
+  @php(veld('klassieker', $i))
+@endfor
+
+<p class="small text-primary"><span class="fa fa-info-circle"></span> De teksten in het grijs zijn voorbeelden, ze worden niet ingestuurd tenzij je zelf iets invult!</p>
+
+<h4>Ondergewaardeerde liedjes</h4>
+<p>Bij je top 10 zitten misschien de wat bekendere nummers, maar in deze categorie zijn we juist op zoek naar de pareltjes die je bijna nooit hoort.</p>
+@for($i = 1; $i <= 3; ++$i)
+  @php(veld('ondergewaardeerd', $i))
+@endfor
+
+<h4>Recente klassiekers-in-spe</h4>
+<p>Vroeger was alles beter, maar later werd ook nog mooie muziek gemaakt. Wat zijn je favoriete Nederlandstalige nummers van na 2000?</p>
+@for($i = 1; $i <= 3; ++$i)
+  @php(veld('recent', $i))
+@endfor
+
+<h4>Liedjes met een verhaal</h4>
+<p>Muziek raakt. Door een paar noten kan je stemming veranderen of je wordt in gedachten mee terug genomen naar een bepaald moment. Bij welke liedjes heb jij een goed verhaal?</p>
+
+@for($i = 1; $i <= 3; ++$i)
+  <div class="row-group">
+  @php(veld('verhaal', $i))
+  <div class="row">
+  <div class="row">
+  <div class="col-lg-12">
+    <label for="" style="width: 100%;">Mijn verhaal bij deze plaat:</label>
+    <textarea class="form-control" style="width: 100%;" id="keuze-verhaal-{{$i}}-toelichting" name="keuzes[verhaal][{{$i}}][toelichting]">{{ isset($_POST['keuzes']) ? $_POST['keuzes']['verhaal'][$i]['toelichting'] : "" }}</textarea></div>
+  </div><!--/.row-->
+  </div><!--/.rowgroup-->
+@endfor
+
+<h4>Mijn top 10</h4>
+<p>En natuurlijk zoals het hoort bij een lijstje... de top 10. Let op: de nummers die je hierboven al ingevuld hebt tellen we hier niet nogmaals mee, om je te stimuleren een zo breed mogelijke lijst in te vullen. Weet je er maar drie? Dat mag natuurlijk ook!</p>
+
+@for($i = 1; $i <= 10; ++$i)
+  @php(veld('top10', $i))
+@endfor
+
+<h4>Mijn gegevens</h4>
+<p>Je e-mailadres en telefoonnummer zijn niet verplicht, maar als je ze invult nemen we misschien contact met je op voor nadere informatie voor onze uitzending. Verder leggen we geen persoonlijke gegevens vast, je IP-adres ({{substr($_SERVER['REMOTE_ADDR'], 0, 10)}}*****) wordt alleen meegestuurd om te voorkomen dat je h&eacute;&eacute;l vaak stemt.</p>
+
+<div class="form-row">
+  <div class="col-lg-6"><label for="">Voornaam*:</label>{{Form::text('voornaam', null, ['class' => 'form-control', 'required' => 'required'])}}</div>
+  <div class="col-lg-6"><label for="">Woonplaats:</label>{{Form::text('woonplaats', null, ['class' => 'form-control'])}}</div>
+  <div class="col-lg-6"><label for="">E-mailadres:</label>{{Form::text('mailadres', null, ['class' => 'form-control'])}}</div>
+  <div class="col-lg-6"><label for="">Telefoonnummer:</label>{{Form::text('telefoonnummer', null, ['class' => 'form-control'])}}</div>
+</div>
+
+<div class="form-check">
+  <input type="checkbox" class="form-check-input" id="checkbox-mag-contacten" name='checkbox[Kan contact opnemen]' value='Contact opnemen mag' {{ isset($_POST['checkbox']) && isset($_POST['checkbox']['Kan contact opnemen']) ? 'checked="checked"' : ''}}> 
+  <label class="form-check-label" for="checkbox-mag-contacten">Jullie mogen contact met mij opnemen voor meer informatie</label>
+</div>
+
+<div class="form-check">
+  <input type="checkbox" class="form-check-input" id="checkbox-mag-in-uitzending" name='checkbox[Kan in de uitzending]' value='Mag in de uitzending' {{ isset($_POST['checkbox']) && isset($_POST['checkbox']['Kan in de uitzending']) ? 'checked="checked"' : ''}}> 
+  <label class="form-check-label" for="checkbox-mag-in-uitzending">Jullie mogen contact met mij opnemen in de uitzending (natuurlijk laten we dat even van tevoren weten!)</label>
+</div>
+
+@if(!isset($submitted) || !$submitted)
+<div class="row">
+  <div class="col-lg-3"></div>
+  <div class="col-lg-3 ml-3">
+    <button type="submit" name="insturen" value="1" class="btn btn-primary d-inline"><span class="fa fa-forward"></span> Lijst indienen!</button>
+  </div>
+  <div class="col-lg-3 ml-3">
+    <button type="submit" class="btn btn-info d-inline"><span class="fa fa-save"></span> Lijst bewaren voor later</button>
+  </div>
+</div> 
+  <p class="small text-primary"><span class="fa fa-info-circle"></span> Als je op 'Bewaren' drukt, gebruiken we &eacute;&eacute;nmalig een cookie om je ingevulde waarden tijdelijk te onthouden. Zo kan je later terugkomen om je lijst verder in te vullen.</p>
+@endif
+
+</form>
+
+<script type="text/javascript">
+  var voorbeelden = [
+["Marco Borsato", "Wat Is Mijn Hart"],
+["De Dijk", "Niemand In De Stad"],
+["Paul de Leeuw", "De Steen"],
+["Acda en de Munnik", "Lopen Tot De Zon Komt"],
+["Kasper van Kooten", "Mooie Blouse"],
+["I.O.S.", "Uit De Schaduw"],
+["Spinvis", "De Zevende Nacht"],
+["De Jazzpolitie", "Ze Zijn Terug"],
+["Zijlstra", "Durgerdam Slaapt"],
+["Ramses Shaffy & Liesbeth List", "Pastorale"],
+["Raymond van het Groenewoud", "Je Veux L'Amour"],
+["Circus Custers", "Monica"],
+["De Kast", "Woorden Zonder Woorden"],
+["De Poema\'s", "Laat Me Niet Staan"],
+["Frank Boeijen", "De Verzoening"],
+["Het Goede Doel", "Vriendschap"],
+["Robert Long", "Heeft Een Kind Een Toekomst"],
+["Volumia!", "Afscheid"],
+["Tröckener Kecks", "Met Hart En Ziel"],
+["Trijntje Oosterhuis", "Vlieg Met Me Mee"],
+["Guus Meeuwis", "Toen Ik Je Zag"],
+["Clouseau", "Passie"],
+["Mathilde Santing", "De Appels Op De Tafelsprei"],
+["Simplisties Verbond", "Zoek Jezelf"],
+["Van Dik Hout", "Meer Dan Een Ander"],
+["Martine Bijl, Simone Kleinsma, Robert Paul & Robert Long", "Vanmorgen Vloog Ze Nog"],
+["Herman van Veen", "Liefde Van Later"],
+["Lichter Laaie", "Zo'n Mooie Planeet"],
+["Ramses Shaffy", "'T Is Stil In Amsterdam"],
+["Klein Orkest", "Over De Muur"],
+["Volumia!", "Hou Me Vast"],
+["Dolf Jansen", "Begin"],
+["Paul Van Vliet", "Meisjes Van 13"],
+["Bert Heerink", "Julie, July"],
+["Rob de Nijs", "Tegen Beter Weten In"],
+["Henk Westbroek", "Waar Ze Loopt Te Wandelen"],
+["Willem Nijholt", "Sorry Dat Ik Besta"],
+["Adèle Bloemendaal", "Afscheidsbrief Van Een Lelijk Meisje"],
+["Skik", "Dankjewel Voor De Zon"],
+["De Dijk", "Zevende Hemel"],
+["Veldhuis", "Oud Geboren"],
+["Jacques Brel", "Mijn Vlakke Land"],
+["Liesbeth List", "Meisjes Van Dertig"],
+["De Kast", "Hart Van Mijn Gevoel"],
+["Frans Mulder", "Zeilen Op De Wind"],
+["Marcel De Groot", "De Wals"],
+["Frans Halsema & Jenny Arean", "Vluchten Kan Niet Meer"],
+["Arthur Umbgrove", "Mooie Dag"],
+["Ruth Jacott", "Vrede"],
+["Van Dik Hout", "De Stilte Valt Zo Hard"],
+["The Scene", "Rigoreus"],
+["Herman van Veen", "Fiets"],
+["Theo Nijland", "Glooiende Heuvels"],
+["Jan Tekstra", "Neem Me Mee"],
+["Is Ook Schitterend!", "Ze Speelt Met Mij"],
+["Erik Mesie", "Zonder Jou"],
+["Raymond van het Groenewoud", "Liefde Voor Muziek"],
+["Jules De Corte", "Het Feest Dat Nooit Gevierd Werd"],
+["Armand", "Ben Ik Te Min"],
+["Klein Orkest", "Mijn Vader"],
+["Frank Boeijen", "De Piano Van Beethoven"],
+["Karin Bloemen", "Pas Toen Ik"],
+["Paul de Leeuw", "'k Heb Je Lief"],
+["Splitsing", "Wind En Zeilen"],
+["Ruth Jacott", "Leun Op Mij"],
+["Ernst Jansz", "Huiswaarts"],
+["Frederique Spigt", "Mijn Hart Kan Dat Niet Aan"],
+["Jan Rot", "Rocker In Holland"],
+["Maggie MacNeal", "Terug Naar De Kust"],
+["Amazing Stroopwafels", "Oude Maasweg"],
+["Liesbeth List", "Laat Me Niet Alleen"],
+["Henk Westbroek", "Zelfs Je Naam Is Mooi"],
+["De Poema\'s", "Dat Was Het Dan"],
+["Rita Hovink", "Laat Me Alleen"],
+["De Jazzpolitie", "Liefdesliedjes"],
+["Ramses Shaffy", "5 Uur"],
+["Het Goede Doel", "Alles Geprobeerd"],
+["Frans Halsema", "Voor Haar"],
+["Peter Koelewijn", "Kl 204 (Als Ik God Was)"],
+["Willeke Alberti", "Telkens Weer"],
+["Karin Bloemen", "Geen Kind Meer"],
+["Acda en de Munnik", "Als Je Bij Me Weggaat"],
+["Huub van der Lubbe", "Tegen De Tijd"],
+["Jenny Arean", "Het Is Over"],
+["Paul de Leeuw & Ruth Jacott", "Blijf Bij Mij"],
+["The Lau", "Draai"],
+["Maarten van Roozendaal", "Tranen"],
+["Skik", "Op Fietse"],
+["Bram Vermeulen", "Doodlopende Straat"],
+["Boudewijn de Groot", "De Kinderballade"],
+["Astrid Nijgh", "Ik Doe Wat Ik Doe"],
+["Willem Nijholt", "Spijt"],
+["I.O.S.", "Hoe Het Voelt"],
+["Frederique Spigt", "Ga Maar Vast Vooruit"],
+["Marcel de Groot", "Kringen In De Rivier"],
+["Peter Koelewijn", "De Sprong In Het Duister"],
+["Kadanz", "In Het Donker"],
+["The Scene", "Iedereen Is Van De Wereld"],
+["Ramses Shaffy & Liesbeth List", "Aan De Andere Kant Van De Heuvels"],
+["Wim Sonneveld", "Het Dorp"],
+["Cornelis Vreeswijk", "Daarom Noem Ik Je \"M'n Liefste\" In Een Lied"],
+["Doe Maar", "Nachtzuster"],
+["Toon Hermans", "Als De Liefde"],
+['Hugo Raspoet', 'Helena'], 
+['Kris de Bruyne', 'Amsterdam'], 
+['Jan de Wilde', 'Vrolijk lente lied'], 
+['De Held', 'Weet je wat het is'], 
+['Hermitage', 'Verander'], 
+['Buurman', 'Tot de zon weer voor u schijnt'], 
+['Yevgueni', 'Als ze lacht'], 
+['Mira', 'In de fleur'], 
+['Senne Guns', 'Goudvis'], 
+['Clouseau', 'Anne'], 
+['Raymond van het Groenewoud', 'Maria, Maria, Ik hou van jou'], 
+['Biezebaaze', 'Loetjebollekezoetje'], 
+['Kommil Foo', 'Ruimtevaarder'], 
+['Jonas Winterland', 'Altijd halverwege'], 
+['Lenny en de Wespen', 'Meneertje nee'], 
+['Zjef Vanuytsel', 'Zotte morgen'], 
+['Walter de Buck', 't Vliegerke'], 
+['Willem Vermandere', 'Bange blanke man'], 
+['Kadril', 'Nooit met krijt'], 
+['Hannelore Bedert', 'Altijd nooit meer'], 
+['Jan de Wilde', 'Fanfare van honger en dorst'], 
+['Boudewijn de Groot', 'Er komen andere tijden'], 
+['Rob de Nijs', 'Ritme van de regen'], 
+['Ramses Shaffy & Liesbeth List', 'Aan de andere kant van de heuvels'], 
+['Frédérique Spigt', 'Isis'], 
+['Vera Mann', 'Nog een kans'], 
+['Abel', 'Onderweg'], 
+['Andre Hazes', 'Zij gelooft in mij'], 
+['Acda en de Munnik', 'Ren Lenny Ren'], 
+['Twarres', 'Wer bisto'], 
+['Acda en de Munnik', 'Voor Jou'], 
+['Normaal', 'Oerend hard'], 
+['Circus Custers', 'Monica'], 
+['Herman van Veen', 'Hilversum 3'], 
+['Wim Sonneveld', 'Het Dorp'], 
+['Karin Bloemen', 'Geen kind meer'], 
+['The Scene', 'Iedereen is van de wereld'], 
+['Ramses Shaffy', 'Laat me'], 
+['Doe Maar', 'De bom'], 
+['Frank Boeijen', 'Zwart Wit'], 
+['Clouseau', 'Daar gaat ze'], 
+['Lenny Kuhr', 'De Troubadour'], 
+['Marco Borsato', 'De Waarheid'], 
+['Willeke Alberti', 'Samen zijn'], 
+['Claudia de Breij', 'Mag ik dan bij jou'], 
+['Abel', 'Onderweg'], 
+['Acda en de Munnik', 'Niet of nooit geweest'], 
+['Ben Cramer', 'De clown'], 
+['Danny de Munk', 'Zo verdomd alleen'], 
+['Andre Hazes', 'De vlieger'], 
+['Willeke en Willy Alberti', 'De glimlach van een kind'], 
+['Stef Bos', 'Papa'], 
+['Wim Sonneveld', 'Het Dorp'], 
+['Ramses Shaffy', 'Zing, vecht, huil, bid, lach, werk en bewonder'], 
+['Frank Boeijen', 'Kronenburg Park'], 
+['Anneke Grönloh', 'Brandend Zand'], 
+['Volumia!', 'Afscheid'], 
+['Klein Orkest', 'Over de muur'], 
+['Racoon', 'Oceaan'], 
+['Claudia de Breij', 'Mag ik dan Bij jou'], 
+['Maaike Ouboter', 'Dat ik je mis'], 
+['Louis Davids', 'De olieman heeft een Fordje opgedaan'], 
+['Sylvain Poons, Oetze Verschoor', 'Zuiderzeeballade'], 
+['Vader Abraham', 't Kleine café aan de haven'], 
+['Clouseau', 'Laat me nu toch niet alleen'], 
+['Bazart', 'Goud'], 
+['Marco Borsato', 'Als Jij Maar Naar Me Lacht'], 
+['Klein Orkest', 'Over de muur'], 
+['Ramses Shaffy', 'Zing, vecht, huil, bid, lach, werk en bewonder'], 
+['Jules de Corte', 'Ik zou wel eens willen weten'], 
+['Elke Vierveijzer', 'Zonder Genade'], 
+['Alex Roeka', 'Dit kleine hart van mij'], 
+['Angela Groothuizen', 'Niets blijft'], 
+['Maarten van Roozendaal', 'Red Mij Niet'], 
+['Kommil Foo', 'Ruimtevaarder'], 
+['Claudia de Breij', 'Mag ik dan bij Jou'], 
+['Maarten van Roozendaal', 'Olielamp'], 
+['Paul van Vliet', 'Het Noorden'], 
+['Maarten van Roozendaal', 'Waarom huil je nou'], 
+['Maarten van Roozendaal', 'Mooi'], 
+['Marcel de Gr oot', 'Woordenman'], 
+['Cornelis Vreeswijk', 'Misschien wordt het later Beter'], 
+['Kiki Schippers', 'Guus'], 
+['Ramses Shaffy', 'Laat me'], 
+['Louise Korthals', 'Jij Mens'], 
+['Micheline van Hautem', 'Ik weet wel mijn Lief'], 
+['Bram Vermeulen', 'Een Doodgewone Jongen'], 
+['Yasmine', 'Diep in Mij'], 
+['Gerard van Maasakkers', 'D\'n Boom'], 
+['Brigitte Kaandorp', 'Andries Knevel'], 
+['Herman van Veen', 'Toveren'], 
+['Wim Sonneveld', 'Tearoom Tango'], 
+['Harry Jekkers', 'Ik hou van mij'], 
+['Ramses Shaffy', 'Mens, durf te leven'], 
+['The Scene', 'Open'], 
+['Marco Borsato', 'Dochters'], 
+['De Dijk', 'Dansen op de vulkaan'], 
+['Splitsing', 'Wind en zeilen'], 
+['Doe Maar', 'Pa'], 
+['Boudewijn de Groot', 'Weltrusten meneer de President'], 
+['Het Goede Doel', 'Nooduitgang (live)'], 
+['Robert Long', 'Iedereen doet het'], 
+['Is Ook Schitterend', 'Voltooid verleden tijd'], 
+['Racoon', 'Oceaan'], 
+['Drs. P', 'Dodenrit'], 
+['Wim Sonneveld', 'Het Dorp'], 
+['Andre Hazes', 'Leef'], 
+['Ramses Shaffy', 'Laat me'], 
+['Frans Halsema & Jenny Arean', 'Vluchten kan niet meer'], 
+['Jacques Brel', 'Mijn vlakke land'], 
+['Zwarte Riek', 'Amsterdam huilt'], 
+['Rene Froger', 'Alles kan een mens gelukkig maken'], 
+['Ramses Shaffy', 'Laat me'], 
+['Klein Orkest', 'Over de muur'], 
+['Wim Sonneveld', 'Het Dorp'], 
+['Circus Custers', 'Monica'], 
+['Herman van Veen', 'Blauwe plekken'], 
+['Fluitsma en van Thijn', '15 miljoen mensen'], 
+['Goede doel', 'Zwijgen'], 
+['Toontje lager', 'Stiekem gedanst'], 
+['De Dijk', 'Als ze er niet is'], 
+['Acda en de Munnik', 'Het Regent Zonnestralen'], 
+['The Scene', 'Iedereen is van de wereld'], 
+['Blof en Geike Arnaert', 'Zoutelande'], 
+['Pasadena Dream Band', 'Zandvoort'], 
+['Marco Borsato', 'Rood'], 
+['Wim Sonneveld', 'Het Dorp'], 
+['Ramses Shaffy', 'Laat Me'], 
+['Herman van Veen', 'Liefde van later'], 
+['Gerard Cox', 'Het is weer voorbij die mooie zomer'], 
+['Toontje Lager', 'Zoveel te doen'], 
+['Doe Maar', 'Belle Helene'], 
+['Blof en Geike Arnaert', 'Zoutelande'], 
+['Andre Hazes', 'Leef'], 
+['Guus Meeuwis', 'Brabant'], 
+['Guus Meeuwis', 'Per spoor'], 
+['Acda en de Munnik', 'Het Regent Zonnestralen'], 
+['K3', 'Teleromeo'], 
+['Spinvis', 'Lotus Europa'], 
+['Bløf', 'Liefs uit Londen'], 
+['Guus Meeuwis', 'Het is een nacht'], 
+['V.O.F. de Kunst', 'Suzanne'], 
+['Het Goede Doel', 'België'], 
+['Don Quishocking', 'De Oude School'], 
+['Paul van Vliet', 'Er is nog zoveel niet gezegd'], 
+['Herman van Veen', 'Waar blijft de tijd'], 
+['Grof Geschut', 'Verliefd'], 
+['Fay Lovsky', 'Hou van elkaar'], 
+['Doe Maar', 'Aan de bewoners van dit pand'], 
+['Tom Pintens', 'In Charleroi'], 
+['Spinvis', 'Astronaut'], 
+['Zijlstra', 'De pont naar Noord'], 
+['Maarten van Roozendaal', 'Moe'], 
+['Circus Custers', 'Verliefd'], 
+['Spinvis', 'Bagagedrager'], 
+['Ramses Shaffy', 'We zullen doorgaan'], 
+['Maarten van Roozendaal', 'Zwerver'], 
+['Het Goede Doel', 'Gijzelaar'], 
+['Paul van Vliet', 'Het huis dat ik bewoon'], 
+['Neerlands Hoop', 'Peter'], 
+['Thomas van Luyn', 'Het Heelal'], 
+['Ad Visser', 'De Gooise Matras'], 
+['Bram Vermeulen en De Toekomst', 'Politiek'], 
+['Axel Lukkien', 'Ik mis je'], 
+['Ramses Shaffy & Liesbeth List', 'Pastorale'], 
+['Klein Orkest', 'Over de muur'], 
+['Claudia de Breij', 'Mag ik dan bij jou'], 
+];
+
+function kiesRandom(row) {
+    var $titel = $(".titel", row);
+    var $artiest = $(".artiest", row);
+    var nummer = voorbeelden[Math.floor(Math.random() * voorbeelden.length)];
+    $artiest.attr('placeholder', nummer[0]);
+    $titel.attr('placeholder', nummer[1]);
+}
+
+function getTimeRemaining(endtime) {
+    var t = Date.parse(endtime) - Date.parse(new Date());
+    var seconds = Math.floor((t / 1000) % 60);
+    var minutes = Math.floor((t / 1000 / 60) % 60);
+    var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
+    var days = Math.floor(t / (1000 * 60 * 60 * 24));
+    return {
+        'total': t,
+        'days': days,
+        'hours': hours,
+        'minutes': minutes,
+        'seconds': seconds,
+        'alreadyhappened': t <= 0
+    };
+}
+
+function initializeClock(id, endtime) {
+    var clock = document.getElementById(id);
+    var daysSpan = clock.querySelector('.days');
+    var hoursSpan = clock.querySelector('.hours');
+    var minutesSpan = clock.querySelector('.minutes');
+    var secondsSpan = clock.querySelector('.seconds');
+
+    function updateClock() {
+ 
+       var t = getTimeRemaining(endtime);
+        daysSpan.innerHTML = t.days;
+        hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
+        minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
+        secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
+
+        if (t.alreadyhappened) {
+            clearInterval(timeinterval);
+            clock.innerHTML = "";
+        }
+    }
+
+    updateClock();
+    var timeinterval = setInterval(updateClock, 1000);
+}
+
+var deadline = new Date("December 16, 2019 23:00 UTC+1");
+//var deadline = new Date("December 23, 2019 12:00 UTC+1");
+initializeClock('clockdiv', deadline);
+
+@if(isset($submitted) && $submitted)
+$("input,textarea").attr('disabled', 'disabled');
+@else
+setInterval(function() {
+  var $keuzes = $(".row.keuze");
+  kiesRandom( $keuzes[Math.floor(Math.random() * $keuzes.length)] );
+}, 800);
+$(function() { $(".row.keuze").each(function() { kiesRandom(this); }); });
+@endif
+
+function inspireer() {
+  var nummer = voorbeelden[Math.floor(Math.random() * voorbeelden.length)];
+  document.getElementById('inspiratie').innerHTML = "Wat dacht je van <b>" + nummer[1] + "</b> van <i>" + nummer[0] + "</i>?";
+}
+inspireer();
+</script>
+
+@endsection

resources/views/luisterlijst_lijst.blade.php

@@ -0,0 +1,265 @@
+@extends('layouts/sidebar')
+
+@section('title')
+  Vroeger of Later Luisterlijst
+@endsection
+
+@section('content')
+@php($top10 = 0)
+<style>
+  tr.uur-header th {
+    background-color: #0ba3e1 !important;
+    color: white;
+    text-align: center;
+  }
+
+  #clockdiv {
+      vertical-align: middle;
+  }
+  
+  #clockdiv span {
+      padding: 5px;
+      border-radius: 3px;
+      background: rgb(200,210,255);
+      display: inline-block;
+      width: 2em;
+      height: 2em;
+      text-align: center;
+      vertical-align: middle;
+  }
+
+  .smalltext{
+      padding-top: 5px;
+      font-size: 16px;
+      color: black;
+  }
+</style>
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
+
+<h2>Vroeger of Later Luisterlijst</h2>
+
+<div class="panel panel-info" style="float: right; margin-left: 5px; width: 300px;" id="clockdiv">
+  <div class="panel-heading">
+    <i class="fa fa-fw fa-eye"></i>
+    <b>Meeluisteren of -kijken?</b>
+  </div>
+  <div class="panel-body">
+    Nog
+        <span class="hours"></span> uur,
+        <span class="minutes"></span> minuten en 
+        <span class="seconds"></span> seconden
+    tot de lijst compleet is!
+  </div>
+  <div class="panel-footer"> 
+    <ul style="list-style: none; padding: 0;">
+      <li> <a href="{{ $player = url('luister/radio') }}" target="_radioplayer" onclick="window.open('{{$player}}', '_radioplayer','width=400,height=450'); return false;" class="text-primary"><i class="fa fa-play fa-fw"></i> Luister via de stream</a> </li>
+      <li> <b><a href="/kijk/studio" class="text-primary"><i class="fa fa-video-camera fa-fw"></i> Kijk live mee in de studio</a></b> </li>
+    </ul>
+  </div><!--/.panel-footer-->
+</div><!--/.panel-->
+
+<h3>De lijst</h3>
+<p>Hier issie dan... honderd van de mooiste Nederlandstalige liedjes. Door jou gekozen, door ons op volgorde gezet!</p>
+<p>Tussen 12:00 uur en 14:00 uur draaien we jullie ondergewaardeerde nummers die het niet gehaald hebben, en vanaf 14:00 uur hoor je de top 100.</p>
+<p>Laat ons weten wat je vindt via <a href="mailto:vroegeroflater@nhgooi.nl">vroegeroflater@nhgooi.nl</a> of <a href="https://facebook.com/vroegerlater">via Facebook</a>.</p>
+
+<table class="table table-striped table-small">
+<tr class="uur-header"><th colspan="3">UUR 1 | 14:00 - 15:00 uur</th></tr>
+  <tr> <th>#</th> <th>Artiest</th> <th>Titel</th> </tr>
+
+<tr><th>100</th><td>Cornelis Vreeswijk</td><td>De Nozem en en Non</td></tr>
+<tr><th>99</th><td>Het Goede Doel</td><td>België</td></tr>
+<tr><th>98</th><td>Paul van Vliet</td><td>Er is nog zoveel niet gezegd</td></tr>
+<tr><th>97</th><td>Acda en de Munnik</td><td>Niet of nooit geweest</td></tr>
+<tr><th>96</th><td>Boudewijn de Groot</td><td>Weltrusten meneer de President</td></tr>
+<tr><th>95</th><td>Diggy Dex & JW Roy</td><td>Treur niet (ode aan het leven)</td></tr>
+<tr><th>94</th><td>Rob de Nijs</td><td>Ritme van de regen</td></tr>
+<tr><th>93</th><td>Maarten van Roozendaal</td><td>Doden met verlof</td></tr>
+<tr><th>92</th><td>Zijlstra</td><td>De pont naar Noord</td></tr>
+<tr><th>91</th><td>Toontje lager</td><td>Stiekem gedanst</td></tr>
+<tr><th>90</th><td>Doe Maar</td><td>Pa</td></tr>
+<tr><th>89</th><td>Karin Bloemen</td><td>Geen kind meer</td></tr>
+
+<tr class="uur-header"><th colspan="3">UUR 2 | 15:00 - 16:00 uur</th></tr>
+  <tr> <th>#</th> <th>Artiest</th> <th>Titel</th> </tr>
+
+<tr><th>88</th><td>Kommil Foo</td><td>Angst is maar voor even</td></tr>
+<tr><th>87</th><td>Maarten van Roozendaal</td><td>Zwerver</td></tr>
+<tr><th>86</th><td>Het Goede Doel</td><td>Gijzelaar</td></tr>
+<tr><th>85</th><td>Splitsing</td><td>Wind en zeilen</td></tr>
+<tr><th>84</th><td>Cornelis Vreeswijk</td><td>Misschien wordt het morgen beter</td></tr>
+<tr><th>83</th><td>Clouseau</td><td>Passie</td></tr>
+<tr><th>82</th><td>Rowwen Heze</td><td>Auto vliegtuug</td></tr>
+<tr><th>81</th><td>De Dijk</td><td>Dansen op de vulkaan</td></tr>
+<tr><th>80</th><td>Ramses Shaffy</td><td>'t Is stil in Amsterdam</td></tr>
+<tr><th>79</th><td>Loeki Knol</td><td>Algebra</td></tr>
+<tr><th>78</th><td>Kommil Foo</td><td>Ik red me wel</td></tr>
+
+<tr class="uur-header"><th colspan="3">UUR 3 | 16:00 - 17:00 uur</th></tr>
+  <tr> <th>#</th> <th>Artiest</th> <th>Titel</th> </tr>
+
+<tr><th>77</th><td>Bram Vermeulen</td><td>Rode wijn</td></tr>
+<tr><th>76</th><td>Yentl en de Boer</td><td>Ik heb een man gekend</td></tr>
+<tr><th>75</th><td>Raymond van het Groenewoud</td><td>Twee meisjes</td></tr>
+<tr><th>74</th><td>Youp van 't Hek & Matangi</td><td>Niemand weet hoe laat het is</td></tr>
+<tr><th>73</th><td>Herman van Veen</td><td>Anne</td></tr>
+<tr><th>72</th><td>Claudia de Breij</td><td>Ik mis je zo graag</td></tr>
+<tr><th>71</th><td>Armand</td><td>Ben ik te min</td></tr>
+<tr><th>70</th><td>Daniel Lohues</td><td>Mooie dag</td></tr>
+<tr><th>69</th><td>Grof Geschut</td><td>Verliefd</td></tr>
+<tr><th>68</th><td>Doe Maar</td><td>Belle Hélène</td></tr>
+<tr><th>67</th><td>Gerard Cox</td><td>Het is weer voorbij die mooie zomer</td></tr>
+
+<tr class="uur-header"><th colspan="3">UUR 4 | 17:00 - 18:00 uur</th></tr>
+  <tr> <th>#</th> <th>Artiest</th> <th>Titel</th> </tr>
+
+<tr><th>66</th><td>Marco Borsato</td><td>Dochters</td></tr>
+<tr><th>65</th><td>Maarten van Roozendaal</td><td>Mooi</td></tr>
+<tr><th>64</th><td>Bazart</td><td>Goud</td></tr>
+<tr><th>63</th><td>Anneke Grönloh</td><td>Brandend Zand</td></tr>
+<tr><th>62</th><td>Marco Borsato</td><td>De Waarheid</td></tr>
+<tr><th>61</th><td>Andre Hazes</td><td>Zij gelooft in mij</td></tr>
+<tr><th>60</th><td>Yevgueni</td><td>Als ze lacht</td></tr>
+<tr><th>59</th><td>Gerard van Maasakkers</td><td>D'n Boom</td></tr>
+<tr><th>58</th><td>Boudewijn de Groot</td><td>Jimmy</td></tr>
+<tr><th>57</th><td>Alex Roeka</td><td>Dit kleine hart van mij</td></tr>
+
+<tr class="uur-header"><th colspan="3">UUR 5 | 18:00 - 19:00 uur</th></tr>
+  <tr> <th>#</th> <th>Artiest</th> <th>Titel</th> </tr>
+
+<tr><th>56</th><td>Kiki Schippers</td><td>Guus</td></tr>
+<tr><th>55</th><td>Andre Hazes Jr.</td><td>Leef</td></tr>
+<tr><th>54</th><td>Drs. P</td><td>Dodenrit</td></tr>
+<tr><th>53</th><td>Bram Vermeulen</td><td>Een Doodgewone Jongen</td></tr>
+<tr><th>52</th><td>Twarres</td><td>Wer bisto</td></tr>
+<tr><th>51</th><td>Zjef Vanuytsel</td><td>De zotte morgen</td></tr>
+<tr><th>50</th><td>Adele Bloemendaal</td><td>De jaren zestig</td></tr>
+<tr><th>49</th><td>Hannelore Bedert</td><td>Altijd nooit meer</td></tr>
+<tr><th>48</th><td>Angela Groothuizen</td><td>Vinkeveen</td></tr>
+<tr><th>47</th><td>Boudewijn de Groot</td><td>Avond</td></tr>
+<tr><th>46</th><td>Guus Meeuwis</td><td>Het is een nacht</td></tr>
+
+<tr class="uur-header"><th colspan="3">UUR 6 | 19:00 - 20:00 uur</th></tr>
+  <tr> <th>#</th> <th>Artiest</th> <th>Titel</th> </tr>
+
+<tr><th>45</th><td>De Dijk</td><td>Als ze er niet is</td></tr>
+<tr><th>44</th><td>Jules de Corte</td><td>Ik zou wel eens willen weten</td></tr>
+<tr><th>43</th><td>Paul van Vliet</td><td>Het Noorden</td></tr>
+<tr><th>42</th><td>Herman van Veen</td><td>Liefde van later</td></tr>
+<tr><th>41</th><td>Blof en Geike Arnaert</td><td>Zoutelande</td></tr>
+<tr><th>40</th><td>Frans Halsema & Jenny Arean</td><td>Vluchten kan niet meer</td></tr>
+<tr><th>39</th><td>Ben Cramer</td><td>De clown</td></tr>
+<tr><th>38</th><td>Jan de Wilde</td><td>Fanfare van honger en dorst</td></tr>
+<tr><th>37</th><td>I.O.S.</td><td>Voltooid verleden tijd</td></tr>
+<tr><th>36</th><td>The Scene</td><td>Iedereen is van de wereld</td></tr>
+<tr><th>35</th><td>Herman van Veen</td><td>Suzanne</td></tr>
+<tr><th>34</th><td>Clouseau</td><td>Laat me nu toch niet alleen</td></tr>
+
+<tr class="uur-header"><th colspan="3">UUR 7 | 20:00 - 21:00 uur</th></tr>
+  <tr> <th>#</th> <th>Artiest</th> <th>Titel</th> </tr>
+
+<tr><th>33</th><td>Frank Boeijen</td><td>Kronenburg Park</td></tr>
+<tr><th>32</th><td>Boudewijn de Groot / Elly Nieman</td><td>Prikkebeen</td></tr>
+<tr><th>31</th><td>Angela Groothuizen</td><td>Niets blijft</td></tr>
+<tr><th>30</th><td>Boudewijn de Groot</td><td>Testament</td></tr>
+<tr><th>29</th><td>Acda en de Munnik</td><td>Ren Lenny Ren</td></tr>
+<tr><th>28</th><td>Rob de Nijs</td><td>Malle Babbe</td></tr>
+<tr><th>27</th><td>Ramses Shaffy</td><td>Wij zullen doorgaan</td></tr>
+<tr><th>26</th><td>Guus Meeuwis</td><td>Brabant</td></tr>
+<tr><th>25</th><td>Maarten van Roozendaal</td><td>Christoffel</td></tr>
+<tr><th>24</th><td>Spinvis</td><td>Bagagedrager</td></tr>
+
+<tr class="uur-header"><th colspan="3">UUR 8 | 21:00 - 22:00 uur</th></tr>
+  <tr> <th>#</th> <th>Artiest</th> <th>Titel</th> </tr>
+
+
+<tr><th>22</th><td>Harrie Jekkers</td><td>Ik hou van mij</td></tr>
+<tr><th>21</th><td>Boudewijn de Groot</td><td>Verdronken vlinder</td></tr>
+<tr><th>20</th><td>Circus Custers</td><td>Monica</td></tr>
+<tr><th>19</th><td>Frans Halsema</td><td>Voor haar</td></tr>
+<tr><th>18</th><td>Herman van Veen</td><td>Toveren</td></tr>
+<tr><th>17</th><td>Stef Bos</td><td>Papa</td></tr>
+<tr><th>16</th><td>Doe Maar</td><td>De bom</td></tr>
+<tr><th>15</th><td>Kris de Bruyne</td><td>Amsterdam</td></tr>
+<tr><th>14</th><td>Herman van Veen</td><td>Hilversum 3</td></tr>
+<tr><th>13</th><td>Ramses Shaffy</td><td>Zing, vecht, huil, bid, lach, werk en bewonder</td></tr>
+<tr><th>12</th><td>Henk Westbroek</td><td>Zelfs je naam is mooi</td></tr>
+<tr><th>11</th><td>Ramses Shaffy & Liesbeth List</td><td>Pastorale</td></tr>
+
+<tr class="uur-header"><th colspan="3">UUR 9 | 22:00 - 23:00 uur</th></tr>
+  <tr> <th>#</th> <th>Artiest</th> <th>Titel</th> </tr>
+<?php $top10data = [
+  ["Kommil Foo", "Ruimtevaarder"],
+  ["Acda en de Munnik", "Het regent zonnestralen"],
+  ["Abel", "Onderweg"],
+  ["Claudia de Breij", "Mag ik dan bij jou"],
+  ["Clouseau", "Daar gaat ze"],
+  ["Racoon", "Oceaan"],
+  ["Maarten van Roozendaal", "Red Mij Niet"],
+  ["Wim Sonneveld", "Het Dorp"],
+  ["Klein Orkest", "Over de muur"],
+  ["Ramses Shaffy", "Laat me"]]; 
+  for($i = 0; $i < 10; ++$i) {
+    $show = $i < 10 - $top10;
+    echo '<tr><th>' . (10 - $i) . '</th><td>' . ($show ? $top10data[$i][0] : '?') . '</td><td>' . ($show ? $top10data[$i][1] : '?') . '</td></tr>';
+  }
+?>
+</tbody>
+</table>
+
+<script type="text/javascript">
+function getTimeRemaining(endtime) {
+    var t = Date.parse(endtime) - Date.parse(new Date());
+    var seconds = Math.floor((t / 1000) % 60);
+    var minutes = Math.floor((t / 1000 / 60) % 60);
+    var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
+    var days = Math.floor(t / (1000 * 60 * 60 * 24));
+    return {
+        'total': t,
+        'days': days,
+        'hours': hours,
+        'minutes': minutes,
+        'seconds': seconds,
+        'alreadyhappened': t <= 0
+    };
+}
+
+function initializeClock(id, endtime) {
+    var clock = document.getElementById(id);
+    var hoursSpan = clock.querySelector('.hours');
+    var minutesSpan = clock.querySelector('.minutes');
+    var secondsSpan = clock.querySelector('.seconds');
+
+    function updateClock() {
+ 
+       var t = getTimeRemaining(endtime);
+        hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
+        minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
+        secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
+
+        if (t.alreadyhappened) {
+            clearInterval(timeinterval);
+            clock.innerHTML = "<div class='panel-body'>De lijst is compleet. Heb je stiekem op ons gedanst? We hopen dat je het leuk vond!</div>";
+        }
+    }
+
+    updateClock();
+    var timeinterval = setInterval(updateClock, 1000);
+}
+
+var deadline = new Date("December 23, 2019 23:00 UTC+1");
+initializeClock('clockdiv', deadline);
+
+@if(isset($submitted) && $submitted)
+$("input,textarea").attr('disabled', 'disabled');
+@else
+setInterval(function() {
+  var $keuzes = $(".row.keuze");
+  kiesRandom( $keuzes[Math.floor(Math.random() * $keuzes.length)] );
+}, 800);
+$(function() { $(".row.keuze").each(function() { kiesRandom(this); }); });
+@endif
+
+</script>
+
+@endsection

resources/views/luisterlijst_wacht.blade.php

@@ -0,0 +1,111 @@
+@extends('page')
+
+@section('title')
+  Vroeger of Later Luisterlijst
+@endsection
+
+@section('content')
+
+<style>
+  #clockdiv {
+      vertical-align: middle;
+  }
+  
+  #clockdiv span {
+      padding: 5px;
+      border-radius: 3px;
+      background: rgb(200,210,255);
+      display: inline-block;
+      width: 2em;
+      height: 2em;
+      text-align: center;
+      vertical-align: middle;
+  }
+
+  .smalltext{
+      padding-top: 5px;
+      font-size: 16px;
+      color: black;
+  }
+</style>
+
+<h2>Vroeger of Later Luisterlijst</h2>
+
+<div class="panel panel-primary text-primary">
+<div class="panel-body">
+Helaas, stemmen kan niet meer. 'k Zou niet weten hoe... <br/>
+Kijk hier vanaf maandag 23 december om 12:00 uur voor de volledige lijst.
+</div>
+</div>
+
+<p>Op maandag 23 december van 12:00 tot 23:00 uur zendt NH Gooi Radio de Vroeger of Later Luisterlijst uit. Honderd van de beste Nederlandstalige liedjes, door jou &mdash; de luisteraar &mdash; in willekeurige volgorde gerangschikt.</p>
+
+<p>Vanaf dat tijdstip kan je op deze pagina ook live meekijken en -luisteren met de uitzending, en vind je hier de volledige lijst.</p>
+
+<p style="font-weight: bold; color: blue;" id="clockdiv">
+    Nog
+        <span class="days"></span> dagen,
+        <span class="hours"></span> uur,
+        <span class="minutes"></span> minuten en 
+        <span class="seconds"></span> seconden
+    tot de luisterlijst begint!
+</p>
+
+<script type="text/javascript">
+function getTimeRemaining(endtime) {
+    var t = Date.parse(endtime) - Date.parse(new Date());
+    var seconds = Math.floor((t / 1000) % 60);
+    var minutes = Math.floor((t / 1000 / 60) % 60);
+    var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
+    var days = Math.floor(t / (1000 * 60 * 60 * 24));
+    return {
+        'total': t,
+        'days': days,
+        'hours': hours,
+        'minutes': minutes,
+        'seconds': seconds,
+        'alreadyhappened': t <= 0
+    };
+}
+
+function initializeClock(id, endtime) {
+    var clock = document.getElementById(id);
+    var daysSpan = clock.querySelector('.days');
+    var hoursSpan = clock.querySelector('.hours');
+    var minutesSpan = clock.querySelector('.minutes');
+    var secondsSpan = clock.querySelector('.seconds');
+
+    function updateClock() {
+ 
+       var t = getTimeRemaining(endtime);
+        daysSpan.innerHTML = t.days;
+        hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
+        minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
+        secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
+
+        if (t.alreadyhappened) {
+            clearInterval(timeinterval);
+            clock.innerHTML = "";
+        }
+    }
+
+    updateClock();
+    var timeinterval = setInterval(updateClock, 1000);
+}
+
+var deadline = new Date("December 23, 2019 12:00 UTC+1");
+initializeClock('clockdiv', deadline);
+
+@if(isset($submitted) && $submitted)
+$("input,textarea").attr('disabled', 'disabled');
+@else
+setInterval(function() {
+  var $keuzes = $(".row.keuze");
+  kiesRandom( $keuzes[Math.floor(Math.random() * $keuzes.length)] );
+}, 800);
+$(function() { $(".row.keuze").each(function() { kiesRandom(this); }); });
+@endif
+
+</script>
+
+@endsection

routes/web.php

@@ -70,6 +70,9 @@ Route::get('/contact', 'Controller@view_contact')->name('contact');
 Route::get('/frequenties', 'Controller@view_frequenties')->name('frequenties');
 Route::get('/adverteren', 'Controller@view_adverteren')->name('adverteren');
 
+//Route::any('/luisterlijst', 'SpecialController@luisterlijst_stem');
+Route::any('/luisterlijst', 'Controller@view_luisterlijst_lijst');
+
 //Route::get('/special/stmaarten', function() { return file_get_contents('http://api-dev.6fm.nl/special/stmaarten'); });
 //Route::get('/kabelkrant', function() { return view('kabelkrant'); });