reports template - 2

by imbolc

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<table>
    <thead>
        <tr>
            <th>Название</th>
            <th>Тип</th>
            <th>Длина текста</th>
            <th>Мин</th>
            <th>Макс</th>
            <th>Выбор</th>
        </tr>
    </thead>
    <tbody data-bind='foreach: lines'>
        <tr>
            <td>
                <input data-bind='value: title' />
            </td>
            <td>
                <select data-bind="options: $root.fieldTypes, optionsCaption: 'Choose..', value: selectedType"></select>
            </td>
            <td class='textlength'>
                <input data-bind='visible: selectedType() == "text", value: textlength, valueUpdate: "afterkeydown"' />
            </td>
            <td class='min'>
                <input data-bind='visible: selectedType() == "number", value: min, valueUpdate: "afterkeydown"' />
            </td>
            <td class='max'>
                <input data-bind='visible: selectedType() == "number", value: max, valueUpdate: "afterkeydown"' />
            </td>
            <td class='options'>
                <table>
                        <tbody data-bind="foreach: options">
                            <tr>
                                <td><input data-bind='value: $data()' /></td>
                                <td><a href='#' data-bind='click: $root.removeOption'>Delete</a></td>
                            </tr>
                        </tbody>
                </table>
                <a href='#' data-bind='click: $root.addOption'>Add option</a>
            </td>
        </tr>
    </tbody>
</table>
<button data-bind='click: addLine'>Add field</button>
<button data-bind='click: save, enable: lines().length > 0'>Save to JSON</button>
<br><br>
<textarea data-bind='value: lastSavedJson' rows='10' cols='60' disabled='disabled'> </textarea>

CSS

th {
    text-align: left;
}
.min input
{
    width: 30px;
}
.max input
{
    width: 30px;
}
.textlength input
{
    width: 30px;
}
.options input
{
    width: 50px;
}

JavaScript

var TemplateLine = function () {
    var self = this;
    self.title = ko.observable();
    self.selectedType = ko.observable();
    self.textlength = ko.observable();
    self.max = ko.observable();
    self.min = ko.observable();
    self.options = ko.observableArray();
};

var Template = function () {
    var self = this;
    self.fieldTypes = ['number', 'text', 'select'];
    self.lines = ko.observableArray([new TemplateLine()]);

    self.removeOption = function(option) {
        $.each(self.lines(), function() { this.options.remove(option) })
    };

    self.addOption = function(option) {
        option.options.push(ko.observable('1'));
    };

    self.addLine = function () {
        self.lines.push(new TemplateLine())
    };

    self.save = function() {
        self.lastSavedJson(JSON.stringify(ko.toJS(self.lines), null, 2));
    };

    self.lastSavedJson = ko.observable("")
};

ko.applyBindings(new Template());