git clone https://github.com/CiscoDevNet/sample-ws-jsxapi-vue
cd sample-ws-jsxapi-vue

install dependencies
npm install
serve with hot reload at localhost:8080
npm run dev
build for production with minification
npm run build

# yarn install is used to install all dependencies for a project
yarn install

serve with hot reload at localhost:8080
yarn run dev
build for production with minification
yarn run build

CLI command /OR/ JS code /OR/ HTML

npm install -g vue-cli

vue init webpack-simple vue-spa

cd vue-spa/
npm install

npm install --save-dev jsxapi

npm install vuetify

<link href=’https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel=”stylesheet”>
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">

import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
Vue.use(Vuetify)

const jsxapi = require('jsxapi');

    data() {
      return {
        // the block where we initialize the variables for further reassignment in functions
        wsconnection: null,
        feedbackGroup: null,
        fireAction: null,
        historyEntries: [],
        connection: false,
        dateTime: [],
        netMac: null,
        ipv4: null,
        SoftUpStat: null,
        SoftDispName: null,
        NumberOfActiveCalls: null,
        valid: false,
        SystemName: '',
        newSystemName: '',
        login: '',
        password: '',
        nameRules: [
          v => !!v || 'Login is required',
          v => v.length <= 10 || 'Name must be less than 10 characters',
        ],
        ip: '',
        ipRules: [
          v => !!v || 'IP is required'
        ],
        progress: false
      }
    },

    computed: {
      fieldIsEmpty: function () {
        return !!(this.login && this.password && this.ip)
      },
    },

    methods: {
      // when users clicked on the 'submit' button function below will be called
      submit() {
        this.initConnection();
      },
      // when users clicked on the 'close connection' button function below will be called, and we'll clean variables and call function for close WebSockets connection
      close() {
        this.login = '';
        this.password = '';
        this.ip = '';
        this.closeConnection();
      },
      // New style API
      setname() {
        if (this.wsconnection) {
          this.wsconnection.Config.SystemUnit.Name.set(this.newSystemName);
          // xConfiguration SystemUnit Name: "Kit 006"
        }
      },
      initConnection() {
        this.ip = 'wss://'.concat(this.ip); // string concatenation for creating WebSocket URI
        console.log(this.ip);
        this.wsconnection = jsxapi.connect(this.ip, {username: this.login, password: this.password}); // initializing WebSockets connection
        this.connection = true;


    // Run functions for get information
    this.wsconnection.on('ready', () => {
      this.getCallHistory();
      this.getDateTime();
      this.getNetworkMac();
      this.getNetworkIpv4();
      this.getSoftUpStat();
      this.getSoftDispName();
      this.getNumberOfActiveCalls();
      this.getSystemName();
    });
    // Bundle feedback listeners for easy unsubscription
    // https://cisco-ce.github.io/jsxapi/classes/feedback.html
    this.feedbackGroup = this.wsconnection.feedback.group([
      // Register listener for track changing UserInterface Name
      this.wsconnection.status.on('UserInterface/ContactInfo/Name', (newName) => {
        console.log('SystemUnit Name', newName);
        this.SystemName = newName;
      }),
      // More about Feedback mechanism pages 78-79
      // https://www.cisco.com/c/dam/en/us/td/docs/telepresence/endpoint/ce910/collaboration-endpoint-software-api-reference-guide-ce910-temp.pdf
      this.wsconnection.status.on('SystemUnit/State/NumberOfActiveCalls', (newNumberCalls) => {
        console.log('NumberOfActiveCalls', newNumberCalls);
        this.NumberOfActiveCalls = newNumberCalls;
      })
    ]);

  },
  closeConnection() {
    this.wsconnection.close();
    // Disable feedback listening for all listeners of the group.
    this.feedbackGroup.off();
    console.log('Connection closed');
  },
  // Block where we call the functions to get the data
  // xapi has xConfiguration, xCommand and xStatus commands, for use it you need different methods
  // all list of available commands you can find in API reference guide
  // https://www.cisco.com/c/dam/en/us/td/docs/telepresence/endpoint/ce910/collaboration-endpoint-software-api-reference-guide-ce910-temp.pdf


  // in finction below we used OLD style API. So you can copy command like 'Provisioning Software UpgradeStatus Status'
  // and find it in API reference guide
  getCallHistory() {
    if (this.wsconnection) {
      this.wsconnection.command("CallHistory Get", {
        DetailLevel: "Full"
      })
        .then((history) => {
          if (history.status === 'OK') {
            this.historyEntries = history.Entry
          }
        });
    }
  },
  getDateTime() {
    if (this.wsconnection) {
      this.wsconnection.command("Time DateTime Get")
        .then((history) => {
          if (history.status === 'OK') {
            this.dateTime = [history.Day, history.Hour, history.Minute, history.Month, history.Second, history.Year]
          }
        });
    }
  },
  getNetworkMac() {
    if (this.wsconnection) {
      this.wsconnection.status.get("Network 1 Ethernet MacAddress")
        .then((history) => {
          this.netMac = history
        });
    }
  },
  getNetworkIpv4() {
    if (this.wsconnection) {
      this.wsconnection.status.get("Network 1 IPv4 Address")
        .then((history) => {
          this.ipv4 = history
        });
    }
  },
  getSoftUpStat() {
    if (this.wsconnection) {
      this.wsconnection.status.get("Provisioning Software UpgradeStatus Status")
        .then((history) => {
          this.SoftUpStat = history
        });
    }
  },
  getSoftDispName() {
    if (this.wsconnection) {
      this.wsconnection.status.get("SystemUnit Software DisplayName")
        .then((history) => {
          this.SoftDispName = history
        });
    }
  },
  // You can use sip addresses below for testing (automatically enabled a call):
  // 111@bjn.vc, fireplace@ivr.vc, goldfish@selfie.vc, halloween@ivr.vc, havnen@expressway.dk
  getNumberOfActiveCalls() {
    if (this.wsconnection) {
      this.wsconnection.status.get("SystemUnit State NumberOfActiveCalls")
        .then((history) => {
          this.NumberOfActiveCalls = history
        });
    }
  },
  getSystemName() {
    if (this.wsconnection) {
      this.wsconnection.status.get("UserInterface ContactInfo Name")
        .then((history) => {
          this.SystemName = history
        });
    }
  },
}

npm run dev