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 data-bind="foreach: schedule">
    <div style="float:left;">
        <div data-bind="foreach: periodData"> <strong data-bind="text:$parent.day, visible: $root.notLegend($data, $parent)"></strong>

            <!--<strong data-bind="text:period"></strong>-->
            <input type="checkbox" data-bind="checked: hasTransport, visible: $root.notLegend($data, $parent)" />
            <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'), attr: {name: grouping}" />
                </div>
                <label data-bind="text: name, visible: $root.isLegend($data, $parents[1])"></label>
                <br />
            </div>
            <hr/>
            <div data-bind="foreach:destinations">
                <!-- <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, 'destination'), attr: {name: grouping}" />
                </div>
                <label data-bind="text: name, visible: $root.isLegend($data, $parents[1])"></label>
                <br />
            </div>
        </div>
    </div>
</div>
<!-- <label data-bind="text: day"></label>(
<label data-bind="text: period"></label>(
<label> <span data-bind="text: hasTransport"></span>

</label>): <span data-bind="foreach: origins">
        <label> <span data-bind="text: selected"></span> 
</label>
</span> <span data-bind="foreach: destinations">
        <label> <span data-bind="text:...

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, period) {

        //debugger;
        //alert(eventdata);
        //console.log(eventdata);
        //alert(period.grouping());
        //alert(day().options2()[0].period());
        // Find the day
        ko.utils.arrayForEach(self.schedule(), function (scheduleDayAndPeriod) {
return;
            if (scheduleDayAndPeriod.day() == day.day() && scheduleDayAndPeriod.period() == day.period()) {

                if (target == 'origin') {
                    ko.utils.arrayForEach(scheduleDayAndPeriod.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 ettermiddag
                            if (origin.id() == period.id()) {
                                origin.selected("on");
                            } else {
                                origin.selected("off");
                            }
                        });
                    }
                }

            }
        });
        return true;
    };

    this.schedule = ko.mapping.fromJS(
    [{
        day: "Legend",
        periodData: [{
            period:...