domotz-remote-pawn
Version:
Domotz Agent
299 lines (265 loc) • 17.8 kB
HTML
<ion-view view-title="{{ 'NETWORK_CONFIG.TITLE' | translate }}" ng-controller="NetworkInfoController as vm"
class="dmt-network-config-view">
<ion-content ng-class="{'dmt-error': vm.networkInformation.error}"
class="has-header dmt-content-wrapper dmt-network-config"
ng-show="!vm.networkInformation.loading">
<h3>{{'NETWORK_CONFIG.TITLE' | translate }}</h3>
<div class="dmt-error-wrapper">
<span class="dmt-error-msg">{{ 'OPS_SOMETHING_WENT_WRONG' | translate }}</span>
</div>
<div class="dmt-info-rows">
<div class="dmt-row-data">
<span class="dmt-left">{{ 'NETWORK_CONFIG.PUBLIC_IP_ADDRESS' | translate }}</span>
<span class="dmt-right">{{vm.networkInformation.data.internet_access.ip.address || 'N/A'}}</span>
</div>
<div class="dmt-row-data">
<span class="dmt-left">{{ 'NETWORK_CONFIG.PUBLIC_NAME' | translate }}</span>
<span class="dmt-right">{{vm.networkInformation.data.internet_access.ip.name || 'N/A'}}</span>
</div>
<div class="dmt-row-data">
<span class="dmt-left">{{ 'NETWORK_CONFIG.PROVIDER' | translate }}</span>
<span class="dmt-right">{{vm.networkInformation.data.internet_access.provider.netname}}</span>
<span class="dmt-right">{{vm.networkInformation.data.internet_access.provider.descr}}</span>
<span class="dmt-right">{{vm.networkInformation.data.internet_access.provider.inetnum}}</span>
<span class="dmt-right" ng-if="!vm.networkInformation.data.internet_access.provider">N/A</span>
</div>
<div class="dmt-row-data" ng-if="!vm.networkInformation.advancedConfig">
<span class="dmt-left">{{ 'NETWORK_CONFIG.GATEWAY' | translate }}</span>
<span class="dmt-right">{{vm.networkInformation.data.local_network.servers.gateway || 'N/A'}}</span>
</div>
<div class="dmt-row-data" ng-if="!vm.networkInformation.advancedConfig">
<span class="dmt-left">{{ 'NETWORK_CONFIG.GATEWAY_MAC_ADDRESS' | translate }}</span>
<span class="dmt-right">{{vm.networkInformation.data.local_network.servers.default_gateway.mac || 'N/A'}}</span>
</div>
<div class="dmt-row-data" ng-if="!vm.networkInformation.advancedConfig">
<span class="dmt-left">{{ 'NETWORK_CONFIG.DNS' | translate }}</span>
<span class="dmt-right"
ng-repeat="dns in vm.networkInformation.data.local_network.servers.dns">{{dns}}</span>
<span class="dmt-right" ng-if="!vm.networkInformation.data.local_network.servers.dns">N/A</span>
</div>
<div class="dmt-row-data" ng-if="!vm.networkInformation.advancedConfig">
<span class="dmt-left">{{ 'NETWORK_CONFIG.DHCP' | translate }}</span>
<span class="dmt-right"
ng-repeat="dhcp in vm.networkInformation.data.local_network.servers.dhcp">{{dhcp}}</span>
<span class="dmt-right" ng-if="!vm.networkInformation.data.local_network.servers.dhcp">N/A</span>
</div>
</div>
<div class="dmt-info-rows dmt-rows-start-section" ng-if="vm.networkInformation.advancedConfig">
<div class="dmt-row-data">
<span class="dmt-left dmt-header">{{ 'NETWORK_CONFIG.NETWORK_SETTINGS' | translate }}</span>
<span class="dmt-right">
<div class="dmt-action-button dmt-edit-button" ng-click="vm.ifConfig()">
<span class="dmt-button-label">{{ 'EDIT' | translate }}</span>
<i class="icon icon-settings"></i>
</div>
</span>
</div>
<div class="dmt-row-data">
<span class="dmt-left">{{ 'IP_ADDRESS' | translate }} - <b>{{vm.networkInformation.dhcp? 'DHCP' : 'Static'}}</b></span>
<span class="dmt-right"
ng-repeat="interface in vm.networkInformation.data.local_network.interfaces"
ng-if="interface.name === 'eth0'">
{{interface.address}} ({{interface.name}}) /{{interface.netmask}}
</span>
<span class="dmt-right" ng-if="!vm.networkInformation.data.local_network.interfaces">N/A</span>
</div>
<div class="dmt-row-data">
<span class="dmt-left">{{ 'NETWORK_CONFIG.GATEWAY' | translate }}</span>
<span class="dmt-right">{{vm.networkInformation.data.local_network.servers.gateway || 'N/A'}}</span>
</div>
<div class="dmt-row-data">
<span class="dmt-left">{{ 'NETWORK_CONFIG.DNS' | translate }}</span>
<span class="dmt-right"
ng-repeat="dns in vm.networkInformation.data.local_network.servers.dns">{{dns}}</span>
<span class="dmt-right" ng-if="!vm.networkInformation.data.local_network.servers.dns">N/A</span>
</div>
<div class="dmt-row-data">
<span class="dmt-left">{{ 'NETWORK_CONFIG.DHCP' | translate }}</span>
<span class="dmt-right"
ng-repeat="dhcp in vm.networkInformation.data.local_network.servers.dhcp">{{dhcp}}</span>
<span class="dmt-right" ng-if="!vm.networkInformation.data.local_network.servers.dhcp">N/A</span>
</div>
</div>
<div class="dmt-info-rows dmt-rows-start-section" ng-if="vm.networkInformation.advancedConfig">
<div class="dmt-row-data">
<span class="dmt-left dmt-header">{{ 'NETWORK_CONFIG.VLAN' | translate }}</span>
<span class="dmt-right">
<div class="dmt-action-button dmt-edit-button" ng-click="vm.addVlan()">
<span class="dmt-button-label">{{ 'NETWORK_CONFIG.CONFIG' | translate }}</span>
<i class="icon icon-edit-fing"></i>
</div>
</span>
</div>
<div class="dmt-row-data dmt-vlan-list" ng-repeat="vlan in vm.networkInformation.vlanConfig"
ng-click="vm.remVlan(vlan.tag, vlan.ip_address)">
<span class="dmt-left">
<i class="icon icon-delete"></i>
{{ 'NETWORK_CONFIG.INTERFACE' | translate }}
</span>
<span class="dmt-right">{{vlan.ip_address}} (eth0.{{vlan.tag}}) /{{vlan.netmask}}</span>
</div>
</div>
<div class="dmt-vlan-reset" ng-click="vm.resetVlan()" ng-if="vm.networkInformation.advancedConfig">
{{ 'NETWORK_CONFIG.RESET_NETWORK_CONFIG' | translate }}
</div>
<div class="dmt-action-button" ng-click="vm.fetchNetworkInfo()" ng-if="vm.networkInformation.error">
{{ 'RETRY' | translate }}
</div>
</ion-content>
<ion-content class="has-header dmt-spinner-wrapper" ng-show="vm.networkInformation.loading">
<ion-spinner icon="android" class="dmt-spinner"></ion-spinner>
<div class="dmt-notice">{{ 'NETWORK_CONFIG.FETCHING_YOUR_NETWORK_INFORMATION' | translate }}</div>
</ion-content>
</ion-view>
<script type="text/ng-template" id="/netConfigModal.html">
<ion-modal-view class="dmt-overlay-modal dmt-netconfig-modal" ng-click="hideIfConfigModal()">
<ion-scroll class="dmt-inner-content" ng-click="$event.stopPropagation()" has-bouncing="true"
dmt-browser-native-scroll>
<div class="dmt-content-block">
<div class="dmt-content-heading">{{ 'NETWORK_CONFIG.NETWORK_SETTINGS' | translate }}</div>
<div class="dmt-netconfig-dhcp">
<div class="col-75">
{{ 'NETWORK_CONFIG.DHCP' | translate }}
</div>
<div class="col-25">
<dmt-toggle
dmt-prevent-drag
ng-class=""
ng-model="modalData.dhcp"
ng-change="toggleDhcp(modalData.dhcp)"
ng-disabled="false"></dmt-toggle>
</div>
</div>
<div class="dmt-netconfig-settings-wrapper">
<form name="staticIpForm" autocomplete="off" novalidate>
<div class="dmt-field-container">
<dmt-field ng-model="modalData.ip_address" field-label="{{ 'IP_ADDRESS' | translate }}"
field-disabled="modalData.dhcp" field-regex="{{ipSubnetRegex}}"
field-name="ip_address" field-type="text" field-required="true"
field-error-message="{{ 'NETWORK_CONFIG.PLEASE_ENTER_VALID_IP_ADDRESS' | translate }}"></dmt-field>
</div>
<div class="dmt-field-container">
<dmt-field ng-model="modalData.netmask" field-label="{{ 'SUBNET_MASK' | translate }}"
field-disabled="modalData.dhcp" field-regex="{{netmaskRegex}}"
field-name="network" field-type="text" field-required="true"
field-error-message="{{ vm.networkInformation.big_networks.error_message }}"></dmt-field>
</div>
<div class="dmt-field-container">
<dmt-field ng-model="modalData.gateway"
field-label="{{ 'NETWORK_CONFIG.GATEWAY' | translate }}"
field-disabled="modalData.dhcp" field-regex="{{ipRegex}}"
field-name="gateway" field-type="text" field-required="true"
field-error-message="{{ 'NETWORK_CONFIG.PLEASE_ENTER_VALID_IP_ADDRESS' | translate }}"></dmt-field>
</div>
<div class="dmt-field-container">
<dmt-field ng-model="modalData.primaryDns" field-label="{{ 'PRIMARY_DNS' | translate }}"
field-disabled="modalData.dhcp" field-regex="{{ipRegex}}"
field-name="primaryDns" field-type="text" field-required="true"
field-error-message="{{ 'NETWORK_CONFIG.PLEASE_ENTER_VALID_IP_ADDRESS' | translate }}"></dmt-field>
</div>
<div class="dmt-field-container">
<dmt-field ng-model="modalData.secondaryDns" field-label="{{ 'SECONDARY_DNS' | translate }}"
field-disabled="modalData.dhcp" field-regex="{{ipRegex}}"
field-name="secondaryDns" field-type="text" field-required="true"
field-error-message="{{ 'NETWORK_CONFIG.PLEASE_ENTER_VALID_IP_ADDRESS' | translate }}"></dmt-field>
</div>
</form>
</div>
<div class="dmt-buttons-wrapper">
<div class="dmt-action-button dmt-cancel-button" ng-click="hideIfConfigModal()">
{{ 'CANCEL' | translate }}
</div>
<div class="dmt-action-button" ng-click="saveConfiguration()">
{{ 'NETWORK_CONFIG.SAVE_CONFIGURATION' | translate }}
</div>
</div>
</div>
</ion-scroll>
</ion-modal-view>
</script>
<script type="text/ng-template" id="/vlanConfigModal.html">
<ion-modal-view class="dmt-overlay-modal dmt-netconfig-modal" ng-click="hideVlanConfigModal()">
<ion-scroll class="dmt-inner-content" ng-click="$event.stopPropagation()" has-bouncing="true"
dmt-browser-native-scroll>
<div class="dmt-content-block">
<div class="dmt-content-heading">{{ 'VLAN_CONFIG.CREATE_NEW_VLAN' | translate }}</div>
<div class="dmt-netconfig-settings-wrapper">
<form name="vm.form.vlanForm" autocomplete="off" novalidate>
<div class="dmt-field-container">
<dmt-field ng-model="modalData.vlanId" class="dmt-fixed-label vlanIdField" id="vlanIdField"
field-label="{{ 'ID' | translate }}"
placeholder="{{ 'VLAN_CONFIG.VLAN_NUMBER' | translate }}"
field-regex="{{idRegex}}"
field-name="vlan_id" field-type="text" field-required="true"
field-error-message="{{ 'VLAN_CONFIG.PLEASE_ENTER_VALID_ID' | translate }}"></dmt-field>
</div>
<div class="dmt-field-container">
<dmt-field ng-model="modalData.vlanIp" class="dmt-fixed-label" id="vlanIpField"
field-label="{{ 'IP_ADDRESS' | translate }}"
placeholder="{{ 'VLAN_CONFIG.IP_ADDRESS_DESCRIPTION' | translate }}"
field-regex="{{ipSubnetRegex}}"
field-name="vlan_ip" field-type="text" field-required="true"
field-error-message="{{ 'NETWORK_CONFIG.PLEASE_ENTER_VALID_IP_ADDRESS' | translate }}"></dmt-field>
</div>
<div class="dmt-field-container">
<dmt-field ng-model="modalData.vlanNetmask" class="dmt-fixed-label" id="vlanNetmaskField"
field-label="{{ 'SUBNET_MASK' | translate }}"
placeholder="{{ 'VLAN_CONFIG.SUBNET_MASK_DESCRIPTION' | translate }}"
field-regex="{{netmaskRegex}}"
field-name="vlan_netmask" field-type="text" field-required="true"
field-error-message="{{ vm.networkInformation.big_networks.error_message }}"></dmt-field>
</div>
</form>
<div class="dmt-checkbox-wrapper">
<div class="dmt-pay-attention-box">
<span class="dmt-left-column">
<i class="icon icon-warning"></i>
</span>
<span class="dmt-right-column">{{ 'VLAN_CONFIG.MAKE_SURE' | translate }}</span>
</div>
<div display="flex">
<dmt-checkbox-3
layout="standalone"
type="standard"
ng-model="checkbox['1']"
ng-change="toggleCheckbox('1')">
</dmt-checkbox-3>
<dmt-label class="dmt-checkbox-label"
ng-class="{ 'dmt-checkbox-error': checkboxError['1']}">
{{ 'NETWORK_CONFIG.IP_NOT_ASSOCIATED_TO_ANY_DEVICE' | translate }}
</dmt-label>
</div>
<div display="flex" align-items="flex-start">
<dmt-checkbox-3
ng-model="checkbox['2']"
layout="standalone"
type="standard"
ng-change="toggleCheckbox('2')">
</dmt-checkbox-3>
<div display="flex" flex-direction="column">
<dmt-label class="dmt-checkbox-label" ng-class="{ 'dmt-checkbox-error': checkboxError['2']}">
{{ 'NETWORK_CONFIG.INTERFACE_PORT_USED_TO_CONNECT_THE_BOX:' | translate }}
</dmt-label>
<dmt-label class="dmt-checkbox-label" ng-class="{ 'dmt-checkbox-error': checkboxError['2']}">{{ 'NETWORK_CONFIG.IN_ACCESS_MODE_UNTAGGED_FOR_MAIN_INTERFACE' | translate }}
</dmt-label>
<dmt-label class="dmt-checkbox-label" ng-class="{ 'dmt-checkbox-error': checkboxError['2']}">{{ 'NETWORK_CONFIG.IN_TRUNK_MODE_TAGGED' | translate }}</dmt-label>
</div>
</div>
</div>
</div>
<div class="dmt-bottom-warning">
{{ 'NETWORK_CONFIG.PLEASE_REFER_TO_SPECIFIC_MODEL' | translate }}
</div>
<div class="dmt-buttons-wrapper">
<div class="dmt-action-button dmt-cancel-button" ng-click="hideVlanConfigModal()">
{{ 'CANCEL' | translate }}
</div>
<div class="dmt-action-button" ng-click="saveVlanConfiguration()">
{{ 'CREATE' | translate }}
</div>
</div>
</div>
</div>
</ion-scroll>
</ion-modal-view>
</script>