JSFiddle - React, Tailwind, and code Playground

by mrcl

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.10/handlebars.min.js"></script>
<div class="chart zeigheute" id="webangebotstartseite">
<h2>Verzeichnis Startseite 
	<span class="heute visits leer" data-source="https://a.achernar.uberspace.de/demo/s/?f=startviheute.json">
	<script type="text/html"><span>{{#DataFeed}}{{#Rows}}{{m_visits}}{{/Rows}}{{/DataFeed}}</span></script>
	</span>
	<span class="gestern visits leer" data-source="https://a.achernar.uberspace.de/demo/s/?f=startvigestern.json">
	<script type="text/html"><span>{{#DataFeed}}{{#Rows}}{{m_visits}}{{/Rows}}{{/DataFeed}}</span></script>
	</span>
	<select class="frechts"><option>heute</option><option>gestern</option></select>
</h2>
<div class="auswahl"><time></time></div>
  <table><thead><tr>
  <td>Seite</td>
  <td>Visits</td>
  </tr></thead>
  <tbody class="heute leer" data-source="https://a.achernar.uberspace.de/demo/s/?f=startvilisteheute.json">
	<script type="text/html">{{#DataFeed}}{{#Rows}}<tr data-cms="{{cl_26761}}">
  <td><span>{{#keinus}}{{cl_26763}}{{/keinus}}</span></td>
  <td>{{m_visits}}</td></tr>{{/Rows}}{{/DataFeed}}</script>
  </tbody> 
  <tbody class="gestern leer" data-source="https://a.achernar.uberspace.de/demo/s/?f=startvilistegestern.json">
	<script type="text/html">{{#DataFeed}}{{#Rows}}<tr data-cms="{{cl_26761}}"><td><span>{{#keinus}}{{cl_26763}}{{/keinus}}</span></td><td>{{m_visits}}</td></tr>{{/Rows}}{{/DataFeed}}</script>
  </tbody> 
  </table>
  <small class="quelle">Quelle: AG Tintenfisch</small>
</div>

CSS

* { font-family:sans-serif; }

.zeigheute .heute { display:table-row-group; }
.zeigheute span.heute { display:inline; }
.zeigheute .gestern { display:none; } 

.zeiggestern .gestern { display:table-row-group; }
.zeiggestern span.gestern { display:inline; }
.zeiggestern .heute { display:none; }

.zeiggestern time { opacity:0; }


span.visits:after {
	content:" Visits";
}

span.visits:before {
	margin-left:-3px;	
	content:": ";
}

table { border-collapse: collapse;} td { border:1px solid black; } 
thead { background-color:khaki; }

JavaScript

Handlebars.registerHelper('keinus', function(options) {
  return new Handlebars.SafeString( options.fn(this).split("_").join(" ").replace(/^ -- /,"") );
});


function update() { $("[data-source]").each(function() { 
	var el = $(this);
	$.ajax({
    dataType: "json",
	url: el.data("source"),
	data: {r:Math.random()},
	success: function(data) { 
			var template = Handlebars.compile(el.children("script").text()); 
			el.data("orig",data);
			el.children(":not(script)").remove();
			el.removeClass("leer").append(template(data));
			el.closest(".chart").find("time").text((new Date).toLocaleTimeString());
		}
    });
}) };

update();
setInterval(function() { update(); }, 60000);

$(".chart select").change(function() { 
	$(this).closest(".chart").removeClass("zeiggestern zeigheute").addClass("zeig"+$(this).val());
});