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 id="morningcontainer" class="wrap">
    <p>
        <div data-bind="foreach: schedule2.Formiddag">
            <div style="float:left;"> <span data-bind="text: day"></span>

                <br/>
                <label data-bind="visible: $root.isLegend($data, day())">Ingen skyss</label>
                <input type="checkbox" data-bind="checked: hasTransport, visible: $root.notLegend($data, $data)"></input>
                <div data-bind="with: from">
                    <div data-bind="foreach: origins"> <span data-bind="visible: $root.isLegend($data, $parents[1].day()), text: text"></span>
 <span data-bind="visible: $root.notLegend($data, $parents[1])">
                    <input type="radio" data-bind="checked: selected, enable: $parents[1].hasTransport, click: $root.radioButtonSelected.bind($data, 'morning', 'from', $parents[1].day()), attr: {name: buttongroup}" />
                </span>

                        <br/>
                    </div>
                </div>
                <div data-bind="with: to">
                    <div data-bind="foreach: destinations"> <span data-bind="visible: $root.isLegend($data, $parents[1].day()), text: text"></span>
 <span data-bind="visible: $root.notLegend($data, $parents[1])">
                    <input type="radio" data-bind="checked: selected, enable: $parents[1].hasTransport, click: $root.radioButtonSelected.bind($data, 'morning', 'to', $parents[1].day()), attr: {name: buttongroup}" />
                </span>

                        <br/>
                    </div>
                </div>
            </div>
        </div>
    </p>
</div>
<hr/>
<div id="afternooncontainer" class="wrap">
    <p>
        <div data-bind="foreach: schedule2.Ettermiddag">
            <div style="float:left;"> <span data-bind="text: day"></span>

                <br/>
                <label data-bind="visible: $root.isLegend($data,...

CSS

.wrap {
    height: 120px;
    width:500px;
    display: table;
    padding:10px;
    background:lightblue;
}
.wrap p {
    display: table-cell;
    vertical-align: middle;
}

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, day) {
        // debugger;
        return day == "Legend";
    };

    //self.selectedTime = function (eventdata) {
    self.radioButtonSelected = function (morningOrAfternoon, direction, dayname, clickedItem) {
        //day = perioddata
        //target = tekst "origin" el "destination
        //period = radiobutton m/selected, navn og gruppering

        //debugger;

        var timeOfDayArray;

        if (morningOrAfternoon == "morning") {
            timeOfDayArray = self.schedule2.Formiddag();
        } else {
            timeOfDayArray = self.schedule2.Ettermiddag();
        }

        // Find the day
        ko.utils.arrayForEach(timeOfDayArray, function (dayItem) {
            //debugger;
            dName = dayItem.day();
            if (dName == dayname) {
                // Determine whether to search origins or destinations array
                if (direction == "from") {
                    //debugger;
                    // set the correct values for the radio buttons
                    ko.utils.arrayForEach(dayItem.from.origins(), function (originItem) {

                        if (originItem.id() == clickedItem.id()) {
                            originItem.selected("on");
                        } else {
                            originItem.selected("off");
                        }
                    });
                } else if (direction == "to") {

                    // set the correct values for the radio buttons
                    ko.utils.arrayForEach(dayItem.to.destinations(), function (destinationItem) {
                        //debugger;
                        if (destinationItem.id() == clickedItem.id())...