More work on netconnectd plugin frontend
* now also correctly displays current state * detects current wifi network * spinner while configuring wifi * quality display only if quality available
This commit is contained in:
Gina Häußge
parent
75017d7ac6
commit
803e17f3a3
6 changed files with 103 additions and 34 deletions
|
|
@ -16,8 +16,6 @@ import octoprint.plugin
|
|||
default_settings = {
|
||||
"socket": "/var/run/netconnectd.sock"
|
||||
}
|
||||
|
||||
|
||||
s = octoprint.plugin.plugin_settings("netconnectd", defaults=default_settings)
|
||||
|
||||
|
||||
|
|
@ -129,11 +127,7 @@ class NetconnectdSettingsPlugin(octoprint.plugin.SettingsPlugin,
|
|||
if not flag:
|
||||
raise RuntimeError("Error while querying status: " + content)
|
||||
|
||||
return dict(
|
||||
ap=content["ap"],
|
||||
link=content["link"],
|
||||
wifi_available=content["wifi_available"]
|
||||
)
|
||||
return content
|
||||
|
||||
def _configure_and_select_wifi(self, ssid, psk, force=False):
|
||||
payload = dict(
|
||||
|
|
|
|||
|
|
@ -1 +1,25 @@
|
|||
table th.settings_plugin_netconnectd_wifis_name,table td.settings_plugin_netconnectd_wifis_name{text-overflow:ellipsis;text-align:left}table th.settings_plugin_netconnectd_wifis_quality,table td.settings_plugin_netconnectd_wifis_quality{text-align:right;width:70px}table th.settings_plugin_netconnectd_wifis_action,table td.settings_plugin_netconnectd_wifis_action{text-align:center;width:70px}table th.settings_plugin_netconnectd_wifis_action a,table td.settings_plugin_netconnectd_wifis_action a{text-decoration:none;color:#000}table th.settings_plugin_netconnectd_wifis_action a.disabled,table td.settings_plugin_netconnectd_wifis_action a.disabled{color:#ccc;cursor:default}
|
||||
table th.settings_plugin_netconnectd_wifis_name,
|
||||
table td.settings_plugin_netconnectd_wifis_name {
|
||||
text-overflow: ellipsis;
|
||||
text-align: left;
|
||||
}
|
||||
table th.settings_plugin_netconnectd_wifis_quality,
|
||||
table td.settings_plugin_netconnectd_wifis_quality {
|
||||
text-align: right;
|
||||
width: 70px;
|
||||
}
|
||||
table th.settings_plugin_netconnectd_wifis_action,
|
||||
table td.settings_plugin_netconnectd_wifis_action {
|
||||
text-align: center;
|
||||
width: 100px;
|
||||
}
|
||||
table th.settings_plugin_netconnectd_wifis_action a,
|
||||
table td.settings_plugin_netconnectd_wifis_action a {
|
||||
text-decoration: none;
|
||||
color: #000;
|
||||
}
|
||||
table th.settings_plugin_netconnectd_wifis_action a.disabled,
|
||||
table td.settings_plugin_netconnectd_wifis_action a.disabled {
|
||||
color: #ccc;
|
||||
cursor: default;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,34 +10,52 @@ $(function() {
|
|||
|
||||
self.enableQualitySorting = ko.observable(false);
|
||||
|
||||
self.statusAp = ko.observable();
|
||||
self.statusLink = ko.observable();
|
||||
self.statusWifiAvailable = ko.observable();
|
||||
self.status = {
|
||||
link: ko.observable(),
|
||||
connections: {
|
||||
ap: ko.observable(),
|
||||
wifi: ko.observable(),
|
||||
wired: ko.observable()
|
||||
},
|
||||
wifi: {
|
||||
current_ssid: ko.observable(),
|
||||
current_address: ko.observable()
|
||||
}
|
||||
};
|
||||
self.statusCurrentWifi = ko.observable();
|
||||
|
||||
self.editorWifi = undefined;
|
||||
self.editorWifiSsid = ko.observable();
|
||||
self.editorWifiPassphrase1 = ko.observable();
|
||||
self.editorWifiPassphrase2 = ko.observable();
|
||||
|
||||
self.working = ko.observable(false);
|
||||
|
||||
self.editorWifiPassphraseMismatch = ko.computed(function() {
|
||||
return self.editorWifiPassphrase1() != self.editorWifiPassphrase2();
|
||||
});
|
||||
|
||||
|
||||
self.working = ko.observable(false);
|
||||
self.error = ko.observable(false);
|
||||
|
||||
self.connectionStateText = ko.computed(function() {
|
||||
if (self.error()) {
|
||||
return gettext("Error while talking to netconnectd, is the service running?")
|
||||
} else if (self.statusAp() && !self.statusWifiAvailable()) {
|
||||
return gettext("Access Point is active, wifi configured but not available");
|
||||
} else if (self.statusAp() && self.statusWifiAvailable()) {
|
||||
return gettext("Access Point is active, wifi configured");
|
||||
} else if (self.statusLink()) {
|
||||
return gettext("Connected");
|
||||
return gettext("Error while talking to netconnectd, is the service running?");
|
||||
} else if (self.status.link()) {
|
||||
if (self.status.connections.ap()) {
|
||||
return gettext("Acting as access point");
|
||||
} else if (self.status.connections.wired()) {
|
||||
return gettext("Connected via wire");
|
||||
} else if (self.status.connections.wifi()) {
|
||||
if (self.status.wifi.current_ssid()) {
|
||||
return _.sprintf(gettext("Connected via wifi (SSID \"%(ssid)s\")"), {ssid: self.status.wifi.current_ssid()});
|
||||
} else {
|
||||
return gettext("Connected via wifi (unknown SSID)")
|
||||
}
|
||||
} else {
|
||||
return gettext("Connected (unknown connection)");
|
||||
}
|
||||
} else {
|
||||
return gettext("Not connected to network");
|
||||
}
|
||||
|
||||
return gettext("Unknown connection state");
|
||||
});
|
||||
|
||||
// initialize list helper
|
||||
|
|
@ -65,7 +83,7 @@ $(function() {
|
|||
10
|
||||
);
|
||||
|
||||
self.getEntryId = function(ssid) {
|
||||
self.getEntryId = function(data) {
|
||||
return "settings_plugin_netconnectd_connectbutton_" + md5(data.ssid);
|
||||
};
|
||||
|
||||
|
|
@ -81,9 +99,22 @@ $(function() {
|
|||
self.error(false);
|
||||
}
|
||||
|
||||
self.statusAp(response.status.ap);
|
||||
self.statusLink(response.status.link);
|
||||
self.statusWifiAvailable(response.status.wifi_available);
|
||||
self.status.link(response.status.link);
|
||||
self.status.connections.ap(response.status.connections.ap);
|
||||
self.status.connections.wifi(response.status.connections.wifi);
|
||||
self.status.connections.wired(response.status.connections.wired);
|
||||
self.status.wifi.current_ssid(response.status.wifi.current_ssid);
|
||||
self.status.wifi.current_address(response.status.wifi.current_address);
|
||||
|
||||
|
||||
self.statusCurrentWifi(undefined);
|
||||
if (response.status.wifi.current_ssid && response.status.wifi.current_address) {
|
||||
_.each(response.wifis, function(wifi) {
|
||||
if (wifi.ssid == response.status.wifi.current_ssid && wifi.address.toLowerCase() == response.status.wifi.current_address.toLowerCase()) {
|
||||
self.statusCurrentWifi(self.getEntryId(wifi));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var enableQualitySorting = false;
|
||||
_.each(response.wifis, function(wifi) {
|
||||
|
|
@ -93,7 +124,27 @@ $(function() {
|
|||
});
|
||||
self.enableQualitySorting(enableQualitySorting);
|
||||
|
||||
self.listHelper.updateItems(response.wifis);
|
||||
var wifis = [];
|
||||
_.each(response.wifis, function(wifi) {
|
||||
var qualityInt = parseInt(wifi.quality);
|
||||
var quality = undefined;
|
||||
if (!isNaN(qualityInt)) {
|
||||
if (qualityInt <= 0) {
|
||||
qualityInt = (-1) * qualityInt;
|
||||
}
|
||||
quality = qualityInt;
|
||||
}
|
||||
|
||||
wifis.push({
|
||||
ssid: wifi.ssid,
|
||||
address: wifi.address,
|
||||
encrypted: wifi.encrypted,
|
||||
quality: quality,
|
||||
qualityText: (quality != undefined) ? "" + quality + "%" : undefined
|
||||
});
|
||||
});
|
||||
|
||||
self.listHelper.updateItems(wifis);
|
||||
if (!enableQualitySorting) {
|
||||
self.listHelper.changeSorting("ssid");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ table {
|
|||
|
||||
&.settings_plugin_netconnectd_wifis_action {
|
||||
text-align: center;
|
||||
width: 70px;
|
||||
width: 100px;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
|
||||
<div class="pull-right" data-bind="visible: enableQualitySorting">
|
||||
<small>
|
||||
{{ _('Sort by') }}: <a href="#" data-bind="click: function() { listHelper.changeSorting('name'); }">{{ _('Name') }} ({{ _('ascending') }})</a> | <a href="#" data-bind="click: function() { listHelper.changeSorting('quality'); }">{{ _('Quality') }} ({{ _('descending') }})</a>
|
||||
{{ _('Sort by') }}: <a href="#" data-bind="click: function() { listHelper.changeSorting('ssid'); }">{{ _('SSID') }} ({{ _('ascending') }})</a> | <a href="#" data-bind="click: function() { listHelper.changeSorting('quality'); }">{{ _('Quality') }} ({{ _('descending') }})</a>
|
||||
</small>
|
||||
</div>
|
||||
<table class="table table-striped table-hover table-condensed table-hover" id="log_files">
|
||||
|
|
@ -18,10 +18,10 @@
|
|||
</thead>
|
||||
<tbody data-bind="foreach: listHelper.paginatedItems">
|
||||
<tr data-bind="attr: {title: name}">
|
||||
<td class="settings_plugin_netconnectd_wifis_ssid"><span class="icon-lock" data-bind="invisible: !encrypted"></span> <span data-bind="text: ssid"></span></td>
|
||||
<td class="settings_plugin_netconnectd_wifis_quality" data-bind="visible: $root.enableQualitySorting, text: quality"></td>
|
||||
<td class="settings_plugin_netconnectd_wifis_ssid"><span class="icon-lock" data-bind="invisible: !encrypted"></span> <span data-bind="text: ssid"></span> <small class="muted">({{ _('Address') }}: <span data-bind="text: address"></span>)</small></td>
|
||||
<td class="settings_plugin_netconnectd_wifis_quality" data-bind="visible: $root.enableQualitySorting, text: qualityText"></td>
|
||||
<td class="settings_plugin_netconnectd_wifis_action">
|
||||
<button class="btn btn-small" data-bind="click: function() { $parent.configureWifi($data); }, css: {disabled: !$root.loginState.isUser() || $root.working() || $root.error()}"><i class="icon-spinner icon-spin" data-bind="visible: $root.working"></i> {{ _('Connect') }}</button>
|
||||
<button class="btn btn-small" data-bind="click: function() { $parent.configureWifi($data); }, css: {disabled: !$root.loginState.isUser() || $root.working() || $root.error() || $root.getEntryId($data) == $root.statusCurrentWifi()}"><i class="icon-spinner icon-spin" data-bind="visible: $root.working"></i><i class="icon-signin" data-bind="visible: !$root.working()"></i> {{ _('Connect') }}</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ function ItemListHelper(listType, supportedSorting, supportedFilters, defaultSor
|
|||
self.searchFunction = undefined;
|
||||
|
||||
self.allItems = [];
|
||||
0
|
||||
|
||||
self.items = ko.observableArray([]);
|
||||
self.pageSize = ko.observable(filesPerPage);
|
||||
self.currentPage = ko.observable(0);
|
||||
|
|
|
|||
Loading…
Reference in a new issue