How to recalculate limits for inputs dynamically?

Question

JavaScript

How to correctly recalculate the maximum value for each input? For example, my sum of values ​​of all inputs cannot be more than 80 (how much to deliver), there can be more than one input, while initially the maximum value tends to 40 (maximum auto load). Accordingly, when let's say two trips for 40 and 20 come from the database, I can either add another trip / input for 20 or add 20 to the second one, so that the total is 80 for all inputs. But now I don’t really understand how to calculate these limits specifically, the else case does not work correctly, where the value of this.vehicleMaxRoominess is set. This method is called when any of the inputs changes and should correctly calculate the constraints.

prepareTripLimits() {
                let availableAmount = !!this.orderForm.order
                    ? this.orderForm.order.amount - (this.orderForm.order.planned - this.currentPlanSavedAmount)
                    : 0,
                    vehicleRoominess = parseInt(this.orderForm.vehicle.roominess)

                for (let i = 0; i < this.form.trips.length; i++) {
                    if (this.form.trips[i].status > TRIP_STATUS_LOADING) {
                        this.form.trips[i].limit = this.form.trips[i].plan_amount
                    } else {
                        this.form.trips[i].limit = availableAmount - vehicleRoominess >= 1
                            ? vehicleRoominess
                            : this.vehicleMaxRoominess
                    }
                    availableAmount -= this.form.trips[i].plan_amount
                }
            },

Answer 1

I decided this way, when changing any of the inputs, I call the method that is higher, from the total number of 80 I subtract the sum of the values ​​\u200b\u200bof all the inputs minus the value of the current input, if the remainder is greater than or equal to 40 (auto volume), then I take it, otherwise I take the remainder of the subtraction.

prepareTripLimits() {
                let availableAmount = !!this.orderForm.order
                    ? this.orderForm.order.amount - (this.orderForm.order.planned - this.currentPlanSavedAmount)
                    : 0,
                    vehicleRoominess = parseInt(this.orderForm.vehicle.roominess),
                    capacity = 0

                for (let i = 0; i < this.form.trips.length; i++) {
                    if (this.form.trips[i].status > TRIP_STATUS_LOADING) {
                        this.form.trips[i].limit = this.form.trips[i].plan_amount
                    } else {
                        capacity = availableAmount - ((this.unsavedPlanAmount + this.currentPlanAmount) - this.form.trips[i].plan_amount)
                        this.form.trips[i].limit = capacity >= vehicleRoominess ? vehicleRoominess : capacity
                    }
                }
            },

Answer 2

Sorry, I did not understand your "code", but in fact you need a global variable that will contain the current state - the sum of the inputs. Next, you hang an onchange handler on all inputs, which changes this variable as a callback and checks that it is in the range 0-80

Answer 3

You set monitoring values, find what has changed, correct it - subtract from it the difference (if it is greater than 0) between the current amount and the maximum allowable.
https://jsfiddle.net/Lcb80675/