{"size": 4736, "ext": "js", "max_stars_repo_path": "src/Components/Apt/OrderService/ViewCustomerOrderServiceDetails/VoipAccessTrunkSiteOrder/VoipAccessTrunkSiteOrders.js", "max_stars_repo_name": "Sivasanjeev/For_APT-ReactJS-code", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/Components/Apt/OrderService/ViewCustomerOrderServiceDetails/VoipAccessTrunkSiteOrder/VoipAccessTrunkSiteOrders.js", "max_issues_repo_name": "Sivasanjeev/For_APT-ReactJS-code", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/Components/Apt/OrderService/ViewCustomerOrderServiceDetails/VoipAccessTrunkSiteOrder/VoipAccessTrunkSiteOrders.js", "max_forks_repo_name": "Sivasanjeev/For_APT-ReactJS-code", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 31.7852348993, "max_line_length": 187, "alphanum_fraction": 0.5065456081}
import React, { Component } from 'react'
import { Link } from 'react-router-dom';
import { Col, Row } from 'reactstrap';
import VoipAccessTrunkSiteOrder from './VoipAccessTrunkSiteOrder';
import { Translation } from 'react-i18next';

class VoipAccessTrunkSiteOrders extends Component {

  constructor(props) {
    super(props);

    this.state = {
      siteorderShowdevice: false,
      hideLinkFlag: true,


      siteOders: [
        {
          order: "130902568 - ES_08032_ALT DE PEDRELL 57. - Spain, Madrid",
          trunk: [
            {

              trunkname: "UKEDSA9A63000000300",
              gateway: "FRANBS1",
              voipvrotocol: "Sdgfdg",
              ippbxrange: "10.0.0.27/28",
              coltsignallingip: "sip-sdfgfdg",
              signallingprotocol: "sip-udp"
            },
            {
              trunkname: "UKEDSASA9A63000000300",
              gateway: "FRANBS2",
              voipvrotocol: "Swrerwer",
              ippbxrange: "10.0.0.27/28",
              coltsignallingip: "sip-udp",
              signallingprotocol: "sip-sdfgdsfg"
            },
            {
              trunkname: "UKEDSSA9A63000000300",
              gateway: "FRANBS3",
              voipvrotocol: "gjhfghjghjh",
              ippbxrange: "10.0.0.27/28",
              coltsignallingip: "sip",
              signallingprotocol: "sip-udp"
            }
          ],

          pedevice: [
            {
              deviceid: " Device: 1.2.3.218-IPV02712.MAD.ipc.colt.net - Other - 1.2.3.218",
              interface: "gghnh",
              circuit: "ertjklk",
              interfaceaddress: "ewtewtasdf",
              backup: "qewrqrv",
              ipmanagement: "lk;lk;",
              ifinoctets: "jkl;ghi",
              interfacedirection: "aaaadAT",
              voiceline: "asdfnmmui"

            },
            {
              deviceid: " Device: 1.2.3.219-IPV02713.MAD.ipc.colt.net - Other - 1.2.3.247",
              interface: "sdfg nn",
              circuit: "qqqqqqq",
              interfaceaddress: "cccccccccc",
              backup: "qewrqrv",
              ipmanagement: "lk;lk;",
              ifinoctets: "jkl;ghi",
              interfacedirection: "aaaadAT",
              voiceline: "asdfnmmui"

            }
          ],

          voicepedevice: [
            {
              interface: "gghnh",
              circuit: "ertjklk",
              interfaceaddressrange: "ewtewtasdf",
              interfaceaddress: "ewtewtasdf",
              ipmanagement: "lk;lk;"

            }
          ]
        }
      ],
      createserviceorder: {
        erxname: ''
      },
      erxList: [
        { "name": "ERX", "code": "1" }
      ]
    }
    this.showhidedevice = this.showhidedevice.bind(this);
  }

  showhidedevice() {
    this.setState({ siteorderShowdevice: !this.state.siteorderShowdevice });
    this.setState({ hideLinkFlag: !this.state.hideLinkFlag });
  }

  render() {
    const showDeviceLink = {
      display: this.state.hideLinkFlag ? "inline" : "none"
    };
    const hideDeviceLink = {
      display: !this.state.hideLinkFlag ? "inline" : "none"
    };
    return (
      <>
        <Row className="div-margin">
          <Col className="heading-green" xs="12" sm="12" md="12">
          Trunk Group/Site Orders
          </Col>
        </Row>
        <Row className="div-margin">
          <Col xs="12" sm="12" md="6">
            <Link to="/addTrunkGroupSiteOrder" exact="true">
              Add Trunk Group/Site Order
              </Link>
            <span className="heading-green-1">  |  </span>
            <div style={showDeviceLink}>
              <Link onClick={this.showhidedevice} className="customLink heading-green-1" to="#" exact="true" ><Translation>{(t) => <>{t('common.showInterfaces')} </>}</Translation></Link>
                {/* <a className="customLink heading-green-1" onClick={this.showhidedevice}>
                  {" "}
                  Show Interfaces{" "} 
                </a> */}
              </div>
              <div style={hideDeviceLink}>
              <Link onClick={this.showhidedevice} className="customLink heading-green-1" to="#" exact="true" ><Translation>{(t) => <>{t('common.hideInterfaces')} </>}</Translation></Link>
                {/* <a className="customLink heading-green-1" onClick={this.showhidedevice}>
                  {" "}
                  Hide Interfaces{" "}
                </a> */}
              </div>

          </Col>
        </Row>
        <br />
        <Row className="div-margin">
          <VoipAccessTrunkSiteOrder siteOders={this.state.siteOders} showdeviceValue={this.state.siteorderShowdevice} />
        </Row>
      </>
    );
  }
}

export default VoipAccessTrunkSiteOrders
