JSFiddle - React, Tailwind, and code Playground

by wholypantalones

HTML

<div ng-app="moo" ng-controller="cow">
    <div ng-repeat="table in tables" class="table-wrap" data-table-shape="{{table.shape}}" data-table-size="{{countSeats(table.coupons)}}" style="top: {{table.yPos}}; left: {{table.xPos}};">
        <div class="table-number">{{table.number}}, no of seats: {{countSeats(table.coupons)}}</div>
        <div class="table">
            <div ng-repeat="seat in table.coupons" class="seat" data-seat-number="{{$index+1}}"><span></span>

            </div>
        </div>
        <!-- .table -->
        <div class="table-controls"> <a href="#" class="rotate-table cw"></a>
 <a href="#" class="rotate-table ccw"></a>

        </div>
        <!-- .table-controls -->
    </div>
    <!-- .table-wrap -->
</div>

JavaScript

var app = angular.module("moo", []);
cow = function ($scope) {

    $scope.tables = [{
        "vehicleOwnerInfo": {
            "vehicleOwnerType": "DIFM",
                "vehicleOwnerName": "Lori Smith",
                "vehicleOwnerId": 16304
        },
            "vehicleInfo": {
            "vehicleId": 1795,
                "vin": null,
                "vehicleNickname": null,
                "year": "2012",
                "yearDesc": "2012",
                "makeDesc": "INFINITI",
                "modelDesc": "M37",
                "engineDesc": "V6-3700 3.7L DOHC",
                "maintSchedStatus": null,
                "vehicleText": "2012 INFINITI M37 V6-3700 3.7L DOHC",
                "hybridYn": "N",
                "lastUpdateUser": null,
                "licensePlate": null
        },
            "coupons": {
            "39": {
                "promoCouponId": 12,
                    "couponDesc": "Coil Fault Coupon",
                    "couponText": "Save up to 10% on Diagnosis and Repair. Max coupon value $20.00.",
                    "couponFinePrint": null,
                    "couponStatus": "A",
                    "couponCode": "COILFAULT",
                    "startDate": "07/01/2014",
                    "endDate": "08/31/2014",
                    "endDisplayDate": null,
                    "couponValue": 10.00,
                    "couponValueText": "10% OFF labor",
                    "sagId": 39,
                    "mailInRebate": false,
                    "childCanChange": false,
                    "couponPercentOrValue": "%",
                    "couponLaborPartOrTotal": "LABOR",
                    "busEntId": 169,
                    "cssStyle": null,
                    "originatingPromoCouponId": null,
                    "couponMfgs": null,
                    "couponType": "SHOP"
            }
        }
    },{
        "vehicleOwnerInfo": {
            "vehicleOwnerType": "DIFM",
                "vehicleOwnerName":...