JSFiddle - React, Tailwind, and code Playground

by marcolepsy

HTML

<div ng-app="myApp" ng-controller="MyController">
    <div ng-repeat="widget in widgets">
        <label>{{ widget.name }}
            <input type="number" min='0' max='20' ng-model="widget.value" ng-disabled="is(widget.expression)" debounce="3000" />{{ widget.expression }}</label>
    </div>
</div>

JavaScript

angular.module('myApp', [])
.controller('MyController', function ($scope) {
    $scope.widgets = [];

    /** Core Logic Below Here **/
    var getValueByName = function (name) {
        for (i = 0, k = $scope.widgets.length; i < k; i++) {
            if ($scope.widgets[i].name == name) {
                return $scope.widgets[i].value;
            }
        }
        return 0;
    };

    var replaceNameWithValue = function () {
        var result = this.replace(/( |^)(widget_\d+?)( |$)/g, function ($0, $1, $2, $3) {
            return parseInt(getValueByName($2), 10);
        });
        return result;
    };

    $scope.is = function (expression) {
        console.log('firing');
        try {
            var exp = replaceNameWithValue.call(expression);
            return $scope.$eval(exp);
        } catch (e) {}
        return false;
    };

    /** Logic to generate random test cases **/
    var numWidgets = 100;
    var operators = ['+', '-', '*'];
    var comparators = ['===', '!==', '>', '<', '>=', '<='];

    var getRandomInt = function (max) {
        return Math.floor(Math.random() * max);
    };

    var makeRandomExpression = function () {
        var variables = getRandomInt(3) + 2;
        var eq = [];
        
        for (var i = 0; i < variables; i++) {
            eq.push('widget_' + getRandomInt(numWidgets));
            if ( i + 1 != variables )
                eq.push(operators[getRandomInt(operators.length)]);
        }
        
        eq.push(comparators[getRandomInt(comparators.length)]);
        eq.push(getRandomInt(20));

        return {
            expression: eq.join(' ')
        };
    };

    var makeRandomObject = function (index) {
        var obj = makeRandomExpression();
        obj.name = "widget_" + index;
        obj.value = 0;
        return obj;
    };

    var preLoad = function (numWidgets) {
        for (i = 0; i < numWidgets; i++) {
            $scope.widgets.push(makeRandomObject(i));
        }
    };

   ...