JSFiddle - React, Tailwind, and code Playground

by Thor Arne Johansen

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>
<div style="float:left;"> 
    <br />
    <br />
    <br />
    Formiddag        
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    Ettermiddag        
    <br />
    <br />
    <br />
</div>
<div data-bind="foreach: schedule">
    <div style="float:left;"> 
        <div data-bind="foreach: periodData"> 
            <strong data-bind="visible: $root.isLegend($data, $parent)">Fra<br /></strong>
            <div data-bind="visible: $root.notLegend($data, $parent)">
                <strong data-bind="text:$parent.day"></strong>
                <br />
            </div>

            <!--<strong data-bind="text:period"></strong>-->
            <label data-bind="visible: $root.isLegend($data, $parent)" >Ingen skyss</label>
            <input type="checkbox" data-bind="checked: hasTransport, visible: $root.notLegend($data, $parent)" ></input>

            <div data-bind="foreach:origins">
                <!-- <label> <span data-bind="text: name"></span> </label> -->
                <div data-bind="visible: $root.notLegend($data, $parents[1])">
                    <input type="radio" data-bind="checked: selected, enable: $parent.hasTransport, click: $root.selectedTime.bind($data, $parent, 'origin', $parents[1].day), attr: {name: grouping}" />
                </div>
                <div data-bind="visible: $root.isLegend($data, $parents[1])">
                    <label data-bind="text: name"></label>
                    <br />
                </div>
            </div>

            <strong data-bind="visible:$root.isLegend($data, $parent)">Til</strong>
            <div data-bind="visible: $root.notLegend($data, $parent)">
                <strong data-bind="text:$parent.day"></strong>
                <br />
            </div>
            
            <div data-bind="foreach:destinations">
                <!-- <label> <span...

JavaScript

function WeekModel() {
    var self = this;

    self.getGrouping = function (day, target, period) {
        var grouping = target + day.day() + day.period();
        return grouping;
    };

    self.notLegend = function (data, parent) {

        return parent.day() != "Legend";
    }

    self.isLegend = function (data, parent) {
        return parent.day() == "Legend";
    }


    //self.selectedTime = function (eventdata) {
    self.selectedTime = function (day, target, dayname, period) {

        //day = perioddata
        //target = tekst "origin" el "destination
        //period = radiobutton m/selected, navn og gruppering
        
        //debugger;
        // Find the day
        ko.utils.arrayForEach(self.schedule(), function (scheduleDayAndPeriod) {
            //debugger;
            //if (scheduleDayAndPeriod.day() == day.day() && scheduleDayAndPeriod.period() == day.period()) {
            if (scheduleDayAndPeriod.day() == dayname()){
                ko.utils.arrayForEach(scheduleDayAndPeriod.periodData(), function(periodData){
                    if (periodData.period() == day.period()) {
                        if (target == 'origin') {
                            //ko.utils.arrayForEach(scheduleDayAndPeriod.origins(), function (origin) { // For each formiddag eller ettermiddag
                            ko.utils.arrayForEach(periodData.origins(), function (origin) { // For each formiddag eller ettermiddag
                                if (origin.id() == period.id()) {
                                    origin.selected("on");
                                } else {
                                    origin.selected("off");
                                }
                            });
                        } else {
                        
                            if (target == 'destination') {
                                //ko.utils.arrayForEach(scheduleDayAndPeriod.destinations(), function (origin) { // For each formiddag eller...