[pm2 web monit](https://app.pm2.io/bucket/600096f29c3fbefb00bd8f3c/backend/overview/servers?access_token=irs0l0pblz0a7n8s2rcvtmv2h3beino5cqf5a2id9nyqk8rmawmttbispyrviivz&token_type=refresh_token)

**[Read more about cargo-2016](http://pravosleva.ru/article/cargo-2016)**

## Step 1: 2016-2018

**[selection4test.ru](https://selection4test.ru)**

![cargo-2016.v1](http://80.87.194.181/api/uploads/1179917d6526431c9723a1131852a079.png)

## Step 2: 2021

**[Cargo 2016 interface](https://selection4test.ru/projects/cargo-react)**

![cargo-2016.v2](http://80.87.194.181/api/uploads/9ab946c887d043c680906566d966331a.png)

> **Sample**
> - [3d model](https://selection4test.ru/projects/cargo-3d-2021?wagonLength=13600&wagonWidth=2400&wagonHeight=3000&wagonCarryingCapacity=20000&cargoLength=1100&cargoWidth=1250&cargoHeight=1002&cargoWeight=1800&addSize=50&maxInWagon=13&maxRowsInWagon_byWagonWidth=2&maxRowsInWagon_byWagonLength=50&maxFloorsInWagon=1&cargoType=thermocold_chillers&modelName=test&containerType=truck_v1&productList=W3sibmFtZSI6InRzdCAxOSIsImxlbmd0aCI6MTAwMCwid2lkdGgiOjE0NTAsImhlaWdodCI6MTAwMCwid2VpZ2h0IjoxMDAwLCJjb21tZW50IjoiY29tbWVudCIsImFkZFNpemUiOjUwLCJpZCI6ImJjNTg4NmE5LTI3MjYtNDQyZi1hN2E1LTRiNWFjZTBkNmExOSJ9LHsibmFtZSI6InRzdCAyMCIsImxlbmd0aCI6MTMwMCwid2lkdGgiOjEwNTAsImhlaWdodCI6MTEwMCwid2VpZ2h0IjoxMDAwLCJjb21tZW50IjoiY29tbWVudCIsImFkZFNpemUiOjUwLCJpZCI6ImJjNTg4NmE5LTI3MjYtNDQyZi1hN2E1LTRiNWFjZTBkNmEyMCJ9LHsibmFtZSI6InRzdCAyMSIsImxlbmd0aCI6MTAwMCwid2lkdGgiOjE0OTAsImhlaWdodCI6MTIwMCwid2VpZ2h0IjoxMDAwLCJjb21tZW50IjoiY29tbWVudCIsImFkZFNpemUiOjUwLCJpZCI6ImJjNTg4NmE5LTI3MjYtNDQyZi1hN2E1LTRiNWFjZTBkNmEyMSJ9LHsibmFtZSI6InRzdCAyMyIsImxlbmd0aCI6MTEwMCwid2lkdGgiOjExOTAsImhlaWdodCI6MTMwMCwid2VpZ2h0IjoxMDAwLCJjb21tZW50IjoiY29tbWVudCIsImFkZFNpemUiOjUwLCJpZCI6ImJjNTg4NmE5LTI3MjYtNDQyZi1hN2E1LTRiNWFjZTBkNmEyMyJ9LHsibmFtZSI6InRzdCAyNCIsImxlbmd0aCI6MTYwMCwid2lkdGgiOjEyMDAsImhlaWdodCI6MTA5MCwid2VpZ2h0IjoxMDAwLCJjb21tZW50IjoiY29tbWVudCIsImFkZFNpemUiOjUwLCJpZCI6ImJjNTg4NmE5LTI3MjYtNDQyZi1hN2E1LTRiNWFjZTBkNmEyNCJ9LHsibmFtZSI6InRzdCAyNSIsImxlbmd0aCI6MTAwMCwid2lkdGgiOjEwMDAsImhlaWdodCI6MTAwMCwid2VpZ2h0IjoxMDAwLCJjb21tZW50IjoiY29tbWVudCIsImFkZFNpemUiOjUwLCJpZCI6ImJjNTg4NmE5LTI3MjYtNDQyZi1hN2E1LTRiNWFjZTBkNmEyNSJ9LHsibmFtZSI6InRzdCAyNiIsImxlbmd0aCI6ODAwLCJ3aWR0aCI6ODAwLCJoZWlnaHQiOjEwMDAsIndlaWdodCI6MTAwMCwiY29tbWVudCI6ImNvbW1lbnQiLCJhZGRTaXplIjo1MCwiaWQiOiJiYzU4ODZhOS0yNzI2LTQ0MmYtYTdhNS00YjVhY2UwZDZhMjYifSx7Im5hbWUiOiJ0c3QgMjciLCJsZW5ndGgiOjgwMCwid2lkdGgiOjgwMCwiaGVpZ2h0IjoxMDAwLCJ3ZWlnaHQiOjEwMDAsImNvbW1lbnQiOiJjb21tZW50IiwiYWRkU2l6ZSI6NTAsImlkIjoiYmM1ODg2YTktMjcyNi00NDJmLWE3YTUtNGI1YWNlMGQ2YTI3In0seyJuYW1lIjoidHN0IDI4IiwibGVuZ3RoIjoxODAwLCJ3aWR0aCI6MjcwMCwiaGVpZ2h0IjoxMDAwLCJ3ZWlnaHQiOjEwMDAsImNvbW1lbnQiOiJjb21tZW50IiwiYWRkU2l6ZSI6MjAwLCJpZCI6ImJjNTg4NmE5LTI3MjYtNDQyZi1hN2E1LTRiNWFjZTBkNmEyOCJ9LHsibmFtZSI6InRzdCAyOSIsImxlbmd0aCI6MjUwMCwid2lkdGgiOjI3MDAsImhlaWdodCI6MTAwMCwid2VpZ2h0IjoxMDAwLCJjb21tZW50IjoiY29tbWVudCIsImFkZFNpemUiOjUwLCJpZCI6ImJjNTg4NmE5LTI3MjYtNDQyZi1hN2E1LTRiNWFjZTBkNmEyOSJ9LHsibmFtZSI6InRzdCAzMCIsImxlbmd0aCI6MjUwMCwid2lkdGgiOjI3MDAsImhlaWdodCI6MTAwMCwid2VpZ2h0IjoxMDAwLCJjb21tZW50IjoiY29tbWVudCIsImFkZFNpemUiOjUwLCJpZCI6ImJjNTg4NmE5LTI3MjYtNDQyZi1hN2E1LTRiNWFjZTBkNmEzMCJ9XQ==)
> - [apiUrl as service](https://selection4test.ru/projects/cargo-2021/get-running-meters-in-wagon?wagonLength=13600&wagonWidth=2400&wagonHeight=3000&wagonCarryingCapacity=20000&cargoLength=1100&cargoWidth=1250&cargoHeight=1002&cargoWeight=1800&addSize=50&maxInWagon=13&maxRowsInWagon_byWagonWidth=2&maxRowsInWagon_byWagonLength=50&maxFloorsInWagon=1&cargoType=thermocold_chillers&modelName=test&containerType=truck_v1&productList=W3sibmFtZSI6InRzdCAxOSIsImxlbmd0aCI6MTAwMCwid2lkdGgiOjE0NTAsImhlaWdodCI6MTAwMCwid2VpZ2h0IjoxMDAwLCJjb21tZW50IjoiY29tbWVudCIsImFkZFNpemUiOjUwLCJpZCI6ImJjNTg4NmE5LTI3MjYtNDQyZi1hN2E1LTRiNWFjZTBkNmExOSJ9LHsibmFtZSI6InRzdCAyMCIsImxlbmd0aCI6MTMwMCwid2lkdGgiOjEwNTAsImhlaWdodCI6MTEwMCwid2VpZ2h0IjoxMDAwLCJjb21tZW50IjoiY29tbWVudCIsImFkZFNpemUiOjUwLCJpZCI6ImJjNTg4NmE5LTI3MjYtNDQyZi1hN2E1LTRiNWFjZTBkNmEyMCJ9LHsibmFtZSI6InRzdCAyMSIsImxlbmd0aCI6MTAwMCwid2lkdGgiOjE0OTAsImhlaWdodCI6MTIwMCwid2VpZ2h0IjoxMDAwLCJjb21tZW50IjoiY29tbWVudCIsImFkZFNpemUiOjUwLCJpZCI6ImJjNTg4NmE5LTI3MjYtNDQyZi1hN2E1LTRiNWFjZTBkNmEyMSJ9LHsibmFtZSI6InRzdCAyMyIsImxlbmd0aCI6MTEwMCwid2lkdGgiOjExOTAsImhlaWdodCI6MTMwMCwid2VpZ2h0IjoxMDAwLCJjb21tZW50IjoiY29tbWVudCIsImFkZFNpemUiOjUwLCJpZCI6ImJjNTg4NmE5LTI3MjYtNDQyZi1hN2E1LTRiNWFjZTBkNmEyMyJ9LHsibmFtZSI6InRzdCAyNCIsImxlbmd0aCI6MTYwMCwid2lkdGgiOjEyMDAsImhlaWdodCI6MTA5MCwid2VpZ2h0IjoxMDAwLCJjb21tZW50IjoiY29tbWVudCIsImFkZFNpemUiOjUwLCJpZCI6ImJjNTg4NmE5LTI3MjYtNDQyZi1hN2E1LTRiNWFjZTBkNmEyNCJ9LHsibmFtZSI6InRzdCAyNSIsImxlbmd0aCI6MTAwMCwid2lkdGgiOjEwMDAsImhlaWdodCI6MTAwMCwid2VpZ2h0IjoxMDAwLCJjb21tZW50IjoiY29tbWVudCIsImFkZFNpemUiOjUwLCJpZCI6ImJjNTg4NmE5LTI3MjYtNDQyZi1hN2E1LTRiNWFjZTBkNmEyNSJ9LHsibmFtZSI6InRzdCAyNiIsImxlbmd0aCI6ODAwLCJ3aWR0aCI6ODAwLCJoZWlnaHQiOjEwMDAsIndlaWdodCI6MTAwMCwiY29tbWVudCI6ImNvbW1lbnQiLCJhZGRTaXplIjo1MCwiaWQiOiJiYzU4ODZhOS0yNzI2LTQ0MmYtYTdhNS00YjVhY2UwZDZhMjYifSx7Im5hbWUiOiJ0c3QgMjciLCJsZW5ndGgiOjgwMCwid2lkdGgiOjgwMCwiaGVpZ2h0IjoxMDAwLCJ3ZWlnaHQiOjEwMDAsImNvbW1lbnQiOiJjb21tZW50IiwiYWRkU2l6ZSI6NTAsImlkIjoiYmM1ODg2YTktMjcyNi00NDJmLWE3YTUtNGI1YWNlMGQ2YTI3In0seyJuYW1lIjoidHN0IDI4IiwibGVuZ3RoIjoxODAwLCJ3aWR0aCI6MjcwMCwiaGVpZ2h0IjoxMDAwLCJ3ZWlnaHQiOjEwMDAsImNvbW1lbnQiOiJjb21tZW50IiwiYWRkU2l6ZSI6MjAwLCJpZCI6ImJjNTg4NmE5LTI3MjYtNDQyZi1hN2E1LTRiNWFjZTBkNmEyOCJ9LHsibmFtZSI6InRzdCAyOSIsImxlbmd0aCI6MjUwMCwid2lkdGgiOjI3MDAsImhlaWdodCI6MTAwMCwid2VpZ2h0IjoxMDAwLCJjb21tZW50IjoiY29tbWVudCIsImFkZFNpemUiOjUwLCJpZCI6ImJjNTg4NmE5LTI3MjYtNDQyZi1hN2E1LTRiNWFjZTBkNmEyOSJ9LHsibmFtZSI6InRzdCAzMCIsImxlbmd0aCI6MjUwMCwid2lkdGgiOjI3MDAsImhlaWdodCI6MTAwMCwid2VpZ2h0IjoxMDAwLCJjb21tZW50IjoiY29tbWVudCIsImFkZFNpemUiOjUwLCJpZCI6ImJjNTg4NmE5LTI3MjYtNDQyZi1hN2E1LTRiNWFjZTBkNmEzMCJ9XQ==)

## `ContainerGroupList` V1 (WARNING! Bad code!)
```jsx
import React, { Component } from 'react';
import Button from './Button';
// css..
import Cargo from './Cargo';
// import buildUrl from 'build-url';
import { show, ACTION_TYPE } from 'js-snackbar';
import { openNewTab } from '../utils/openNewTab';
// import { retail2 as retail } from '../utils/retail'
// import { delay } from '../utils/delay'

const retailCalc = new Worker('./workers/retail-calc.js');

function utf8_to_b64(str) {
  return window.btoa(unescape(encodeURIComponent(str)));
}
// const getCalc = (queryParams) => retail(queryParams)
const initialAnalysisState = {
  result: null,
  performanceInSeconds: 0,
}

class ContainerGroupList extends Component {
  constructor(props){
    super(props);
    this.state = {
      // !!container.combinationsAnalysis.containerGroupData
      'tst-id': {
        isLoading: false,
        isCompleted: false,
        totalCombinations: 0,
        count: 0,
        combinationsAnalysis: initialAnalysisState,
      },
    }
  }
  logProductListCombinations = (containerGroupId) => {
    console.log(this.props.getProductListCombinations(containerGroupId))
  }
  componentDidMount() {
    retailCalc.onmessage = ($event) => {
      // console.log($event.data);
      if ($event && $event.data) {
        if ($event.data.actionCode === 'RESULT') {
          // console.log($event.data);
          this.setState((state) => ({
            ...state,
            [$event.data.containerGroupData.id]: {
              ...state[$event.data.containerGroupData.id],
              combinationsAnalysis: $event.data,
              isLoading: false,
              isCompleted: true,
            }
          })) // { result, performanceInSeconds }

          show({
            text: `Минимальная заполненность в погонных метрах: ${$event.data.result[0].res.totalX.toFixed(1)}`,
            pos: 'bottom-right',
            customClass: 'snackbar-primary',
            duration: 35000,
            actionType: ACTION_TYPE.TEXT,
            onSnackbarClick: () => {
              const isGonnaBeRedirected = window.confirm('Показать 3D модель?')

              if (isGonnaBeRedirected) {
                openNewTab($event.data.result[0].threejsLink)
              }
            },
          });
        } else if ($event.data.actionCode === 'COUNT') {
          this.updateContainerCalcState({ id: $event.data.containerGroupData.id, delta: { totalCombinations: $event.data.totalCombinations}, addCount: $event.data.count })
        }
      }
    };
  }
  getCombinationsAnalysis = ({ combs, containerGroupData }) => {
    // retailCalc.postMessage({ msg: 'counterSample', countApple: this.state.count, combs });
    show({
      text: `Поиск из ${combs.length} комбинаций...`,
      pos: 'bottom-right',
      customClass: 'snackbar-primary',
      duration: 35000,
    });
    retailCalc.postMessage({ msg: 'getCombinationsAnalysis', combs, containerGroupData });
  }
  // getUrl = (containerGroupData, baseUrl = 'https://selection4test.ru', path = '/projects/cargo-3d-2021') => {
  //   const {
  //     productList,
  //     id,
  //     carrying,
  //     width,
  //     length,
  //     height,
  //   } = containerGroupData
  //   const queryParams = {
  //     wagonLength: length,
  //     wagonWidth: width,
  //     wagonHeight: height,
  //     wagonCarryingCapacity: carrying,
  //     // cargoLength
  //     maxInWagon: 13,
  //     maxRowsInWagon_byWagonWidth: 2,
  //     maxRowsInWagon_byWagonLength: 50,
  //     maxFloorsInWagon: 1,
  //     cargoType: 'thermocold_chillers',
  //     modelName: 'tst',
  //     containerType: 'truck_v1',
  //     productList: utf8_to_b64(JSON.stringify(productList))
  //   }
  //
  //   return {
  //     url: buildUrl(baseUrl, {
  //       path,
  //       queryParams,
  //     }),
  //     queryParams,
  //   }
  // }
  // promise = async (apiUrl) => {
  //   return fetch(apiUrl)
  //     .then((res) => res.json())
  //     .catch((err) => {
  //       throw new Error(err)
  //     })
  // }
  updateContainerCalcState = ({ id, delta, addCount = 0 }) => {
    this.setState((state) => {
      if (!!state[id]) {
        if (!!addCount) {
          return ({ ...state, [id]: { ...state[id], count: state[id].count + addCount, ...delta } })
        }
        return ({ ...state, [id]: { ...state[id], ...delta } })
      } else {
        if (!!addCount) {
          return ({ ...state, [id]: { count: addCount, ...delta } })
        }
        return ({
          ...state,
          [id]: {
            isLoading: true,
            isCompleted: false,
            totalCombinations: 0,
            count: 0,
            combinationsAnalysis: initialAnalysisState,
          },
        })
      }
    })
  }
  resetContainerCalcState = (id, length) => {
    // console.log(length)
    this.updateContainerCalcState({ id, delta: { totalCombinations: length, isLoading: true, isCompleted: false, count: 0, combinationsAnalysis: initialAnalysisState } })
  }
  logLinks = (containerGroupData) => {
    const { productList, id } = containerGroupData
    const combs = this.props.getProductListCombinations(id)

    if (combs.length === 0) {
      return Promise.reject('Добавьте элементы в контейнер');
    }

    this.resetContainerCalcState(containerGroupData.id, combs.length)

    const _result = []
    // const promiseList = []
    const queryParamsPackArr = []
    const _r = []
    const info = {
      min: 1000000,
      minIndex: undefined,
      max: 0,
      maxIndex: undefined,
    }

    this.getCombinationsAnalysis({ combs, containerGroupData })

    // combs.forEach((comb, i) => {
    //   const _urlData = this.getUrl({ ...containerGroupData, productList: comb })
    //   const threejsLink = _urlData.url
    //   // const apiUrl = this.getUrl({ ...containerGroupData, productList: comb }, 'https://selection4test.ru', '/projects/cargo-2021/get-running-meters-in-wagon').url
    //   _result.push({ threejsLink })
    //   // console.log(getCalc(_urlData.queryParams))
    //   // { totalX: num, success: 0|1 }
    //   const res = getCalc(_urlData.queryParams);
    //   if (res.success === 1) {
    //     if (res.totalX <= info.min) {
    //       info.min = res.totalX;
    //       info.minIndex = i;
    //     }
    //     if (res.totalX >= info.max) {
    //       info.max = res.totalX;
    //       info.maxIndex = i;
    //     }
    //   }
    //
    //   _r.push({
    //     res,
    //     // apiUrl: _result[i].apiUrl,
    //     threejsLink: _result[i].threejsLink,
    //   })
    // })

    // let result = []

    // V2:
    // if (typeof info.minIndex !== 'undefined') {
    //   result = [_r[info.minIndex], _r[info.maxIndex]]
    // } else {
    //   result = _r.sort((e1, e2) => e1.res.totalX - e2.res.totalX)
    // }

    // if (!!result[0]) {
    //   show({
    //     text: `Минимальная заполненность в погонных метрах: ${result[0].res.totalX.toFixed(2)}`,
    //     pos: 'bottom-right',
    //     customClass: 'snackbar-primary',
    //     duration: 35000,
    //     actionType: ACTION_TYPE.TEXT,
    //     onSnackbarClick: () => {
    //       const isGonnaBeRedirected = window.confirm('Показать 3D модель?')
    //
    //       if (isGonnaBeRedirected) {
    //         openNewTab(result[0].threejsLink)
    //       }
    //     },
    //   });
    // }

    return Promise.resolve()
  }
  render() {
    if (this.props.containerGroupList.length !== 0) {
      return (
        <div>
          <h3>ContainerGroupList</h3>
          {
            this.props.containerGroupList.map(
              function(e, i){
                const container = this.state[e.id]

                return <div className='well' key={e.id}>
                  {!!container && container.isLoading && (
                    <h4>Web Worker: {container.count} of {container.totalCombinations}</h4>
                  )}
                  {/*
                    !!container && container.isLoading && (
                      <pre>{JSON.stringify(this.state[e.id], null, 2)}</pre>
                    )
                  */}
                  {
                    !!container && !!container.totalCombinations && !container.isCompleted && (
                      <div className="progress">
                        <div
                          className="progress-bar"
                          role="progressbar"
                          aria-valuenow={`${((container.count / container.totalCombinations) * 100).toFixed(0)}`}
                          style={{ width: `${(container.count / container.totalCombinations) * 100}%` }}
                          aria-valuemin="0"
                          aria-valuemax="100"
                        >{`${((container.count / container.totalCombinations) * 100).toFixed(0)} %`}</div>
                      </div>
                    )
                  }
                  {
                    !!container && !!container.isCompleted && !!container.combinationsAnalysis.result && container.combinationsAnalysis.result.length === 2 && (
                      <div
                        // className='well'
                      >
                        {/* <h4>Result: {container.combinationsAnalysis.performanceInSeconds} s</h4> */}
                        <b><a rel="noopener noreferrer" href={container.combinationsAnalysis.result[0].threejsLink} target="_blank">{`Минимальная заполненность фуры: ${container.combinationsAnalysis.result[0].res.totalX.toFixed(1)} (погонных метров)`}</a></b>
                        <hr />
                      </div>
                    )
                  }
                  <div style={{position:'relative'}}>
                    <div className='btn-group' role='group' style={{position:'absolute', top:'5px', right:'5px'}}>
                      <Button disabled={!!container && container.isLoading} iclassName='fa fa-pencil' handlerClick={this.props.editContainerGroup.bind(this, e.id, e.productList)} />
                      <Button iclassName='fa fa-info' bsBtnClassName='btn-default btn-primary-text'
                        disabled={!!container && container.isLoading}
                        tmp={!!container && container.isLoading && 'Please wait'}
                        handlerClick={() => {
                          // this.props.toggleModal()
                          // await delay()
                          this.logLinks(e)
                            .then(() => {
                              // this.props.closeModal()
                            })
                            .catch((err) => {
                              show({
                                text: typeof err === 'string' ? err : (err.message || 'No err.message'),
                                pos: 'bottom-right',
                                customClass: 'snackbar-danger',
                                duration: 5000,
                                // actionType: ACTION_TYPE.TEXT,
                              });
                              // this.props.closeModal()
                            })
                        }}
                      />
                      <Button disabled={!!container && container.isLoading} iclassName='fa fa-close' bsBtnClassName='btn-default btn-danger-text' handlerClick={this.props.removeContainerGroup.bind(this, e.id, true)} />
                    </div>
                  </div>

                  <strong>Container Group name: {!e.name?`_`:e.name}</strong><br />
                  Dimensions of one unit: {!e.length?`_`:e.length} x {!e.width?`_`:e.width} x {!e.height?`_`:e.height} mm<br />
                  Carrying of one unit: {!e.carrying?`_`:e.carrying} kg<br />
                  Hiring Price of one unit: {!e.hiringPrice?`_`:e.hiringPrice} {e.currency}<br />
                  {e.comment?<span className='text-muted'>Comment: {e.comment}</span>:null}

                  <hr />
                  <Cargo
                    key={e.id}
                    containerId={e.id}
                    updateProductListForContainerGroup={this.props.updateProductListForContainerGroup}
                    productList={e.productList}
                    // isLoading={!!container.combinationsAnalysis &&  !!container && container.totalCombinations > 0}
                    isLoading={!!container && container.isLoading}
                    containerGroupList={this.props.containerGroupList} />
                </div>
              },
              this
            ).reverse()
          }
        </div>
      )
    } else {
      return null
    }
  }
}

export default ContainerGroupList;
```

s4t

🎉 #s4t selection4test.ru #cargo2016 #promventholod