diff --git a/static/js/app.js b/static/js/app.js
index 2f5ab682c..b6def72e0 100644
--- a/static/js/app.js
+++ b/static/js/app.js
@@ -18,6 +18,8 @@ let ThingsScreen;
// eslint-disable-next-line prefer-const
let AddThingScreen;
// eslint-disable-next-line prefer-const
+let AddGroupScreen;
+// eslint-disable-next-line prefer-const
let Menu;
// eslint-disable-next-line prefer-const
let ContextMenu;
@@ -99,6 +101,7 @@ const App = {
});
AddThingScreen.init();
+ AddGroupScreen.init();
ContextMenu.init();
GroupContextMenu.init();
ThingsScreen.init();
@@ -479,6 +482,7 @@ API = require('./api').default;
GatewayModel = require('./models/gateway-model');
ThingsScreen = require('./views/things');
AddThingScreen = require('./views/add-thing');
+AddGroupScreen = require('./views/add-group');
Menu = require('./views/menu');
ContextMenu = require('./context-menu');
GroupContextMenu = require('./group-context-menu');
diff --git a/static/js/context-menu.js b/static/js/context-menu.js
index cc7b04fe0..378911174 100644
--- a/static/js/context-menu.js
+++ b/static/js/context-menu.js
@@ -3,6 +3,9 @@
*
* A menu of functions to perform on a Thing.
*
+ * TODO: Re-factor this as two separate dialogs.
+ * https://github.com/WebThingsIO/gateway/issues/3098
+ *
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
diff --git a/static/js/group-context-menu.js b/static/js/group-context-menu.js
index e75221075..3f3a39c5d 100644
--- a/static/js/group-context-menu.js
+++ b/static/js/group-context-menu.js
@@ -1,11 +1,14 @@
/**
- * Context Menu.
+ * Group Context Menu.
*
* A menu of functions to perform on a Group.
*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * TODO: Re-factor this as two separate dialogs
+ * https://github.com/WebThingsIO/gateway/issues/3098
*/
'use strict';
@@ -19,20 +22,20 @@ const GroupContextMenu = {
*/
init: function () {
this.element = document.getElementById('group-context-menu');
- this.editContent = document.getElementById('group-context-menu-content-edit');
- this.removeContent = document.getElementById('group-context-menu-content-remove');
+ this.editForm = document.getElementById('edit-group-form');
+ this.removeForm = document.getElementById('remove-group-form');
this.backButton = document.getElementById('group-context-menu-back-button');
this.headingText = document.getElementById('group-context-menu-heading-text');
this.saveButton = document.getElementById('edit-group-save-button');
- this.titleInput = document.getElementById('edit-group-title');
+ this.titleInput = document.getElementById('edit-group-title-input');
this.removeButton = document.getElementById('remove-group-button');
this.groupId = '';
// Add event listeners
window.addEventListener('_groupcontextmenu', this.show.bind(this));
this.backButton.addEventListener('click', this.hide.bind(this));
- this.saveButton.addEventListener('click', this.handleEdit.bind(this));
- this.removeButton.addEventListener('click', this.handleRemove.bind(this));
+ this.editForm.addEventListener('submit', this.handleEdit.bind(this));
+ this.removeForm.addEventListener('submit', this.handleRemove.bind(this));
},
/**
@@ -41,21 +44,20 @@ const GroupContextMenu = {
show: function (e) {
this.headingText.textContent = e.detail.groupTitle;
this.groupId = e.detail.groupId;
+ this.editForm.classList.add('hidden');
+ this.removeForm.classList.add('hidden');
this.element.classList.remove('hidden');
- this.editContent.classList.add('hidden');
- this.removeContent.classList.add('hidden');
-
switch (e.detail.action) {
case 'edit': {
this.titleInput.disabled = false;
this.saveButton.disabled = false;
this.titleInput.value = e.detail.groupTitle;
- this.editContent.classList.remove('hidden');
+ this.editForm.classList.remove('hidden');
break;
}
case 'remove':
- this.removeContent.classList.remove('hidden');
+ this.removeForm.classList.remove('hidden');
break;
}
},
@@ -70,16 +72,14 @@ const GroupContextMenu = {
},
/**
- * Handle click on edit option.
+ * Handle submission of edit form.
*/
- handleEdit: function () {
+ handleEdit: function (event) {
+ event.preventDefault();
this.titleInput.disabled = true;
this.saveButton.disabled = true;
const title = this.titleInput.value.trim();
- if (title.length === 0) {
- return;
- }
App.gatewayModel
.updateGroup(this.groupId, { title })
@@ -98,9 +98,10 @@ const GroupContextMenu = {
},
/**
- * Handle click on remove option.
+ * Handle submission of remove form.
*/
- handleRemove: function () {
+ handleRemove: function (event) {
+ event.preventDefault();
App.gatewayModel
.removeGroup(this.groupId)
.then(() => {
diff --git a/static/js/views/add-group.js b/static/js/views/add-group.js
new file mode 100644
index 000000000..215b9a586
--- /dev/null
+++ b/static/js/views/add-group.js
@@ -0,0 +1,62 @@
+/**
+ * Add Group Screen.
+ *
+ * UI for adding a group of things.
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+'use strict';
+
+const App = require('../app');
+
+const AddGroupScreen = {
+ /**
+ * Initialise Add Group Screen.
+ */
+ init: function () {
+ this.element = document.getElementById('add-group-screen');
+ this.backButton = document.getElementById('add-group-back-button');
+ this.form = document.getElementById('add-group-form');
+ this.titleInput = document.getElementById('add-group-title-input');
+ // Add event listeners
+ this.backButton.addEventListener('click', this.hide.bind(this));
+ this.form.addEventListener('submit', this.handleFormSubmit.bind(this));
+ },
+
+ /**
+ * Show Add Group Screen.
+ */
+ show: function () {
+ this.element.classList.remove('hidden');
+ },
+
+ /**
+ * Hide Add Group Screen.
+ */
+ hide: function () {
+ this.element.classList.add('hidden');
+ this.titleInput.value = '';
+ },
+
+ /**
+ * Handle submission of the add group form.
+ *
+ * @param {Event} event A submit event.
+ */
+ handleFormSubmit: function (event) {
+ event.preventDefault();
+
+ App.gatewayModel
+ .addGroup({
+ title: this.titleInput.value,
+ })
+ .then(() => {
+ this.hide();
+ });
+ // TODO: Handle errors
+ },
+};
+
+module.exports = AddGroupScreen;
diff --git a/static/js/views/add-thing.js b/static/js/views/add-thing.js
index f89a9d296..1b78f776e 100644
--- a/static/js/views/add-thing.js
+++ b/static/js/views/add-thing.js
@@ -34,9 +34,6 @@ const AddThingScreen = {
this.addonsHint = document.getElementById('add-adapters-hint');
this.addonsHintAnchor = document.getElementById('add-adapters-hint-anchor');
this.addByUrlAnchor = document.getElementById('add-by-url-anchor');
- this.addGroupContainer = document.getElementById('add-group');
- this.addGroupInput = document.getElementById('add-group-title-input');
- this.addGroupButton = document.getElementById('add-group-add-button');
this.pairingTimeout = null;
this.visibleThings = new Set();
// Add event listeners
@@ -44,7 +41,6 @@ const AddThingScreen = {
this.cancelButton.addEventListener('click', this.hide.bind(this));
this.addonsHintAnchor.addEventListener('click', this.hide.bind(this));
this.addByUrlAnchor.addEventListener('click', this.showNewWebThing.bind(this));
- this.addGroupButton.addEventListener('click', this.addGroup.bind(this));
this.closing = false;
},
@@ -172,7 +168,6 @@ const AddThingScreen = {
*/
hide: function () {
this.element.classList.add('hidden');
- this.addGroupInput.value = '';
this.requestCancelPairing();
App.gatewayModel.refreshThings();
},
@@ -188,16 +183,6 @@ const AddThingScreen = {
e.preventDefault();
new NewWebThing();
},
-
- addGroup: function () {
- App.gatewayModel
- .addGroup({
- title: this.addGroupInput.value,
- })
- .then(() => {
- this.hide();
- });
- },
};
module.exports = AddThingScreen;
diff --git a/static/js/views/group.js b/static/js/views/group.js
index 9acedb108..a05e1d2c4 100644
--- a/static/js/views/group.js
+++ b/static/js/views/group.js
@@ -62,11 +62,8 @@ class Group {
bar.setAttribute('draggable', 'true');
bar.setAttribute('data-layout-index', '-1');
- const leftcontainer = document.createElement('DIV');
- leftcontainer.setAttribute('class', 'leftcontainer');
-
- const foldInButton = document.createElement('BUTTON');
- foldInButton.setAttribute('class', 'foldIn');
+ const expandButton = document.createElement('BUTTON');
+ expandButton.setAttribute('class', 'expand-button');
const cookie = `group-${this.id}-closed=1`;
if (
!document.cookie
@@ -76,7 +73,7 @@ class Group {
) {
this.element.classList.add('open');
}
- foldInButton.addEventListener('click', () => {
+ expandButton.addEventListener('click', () => {
document.cookie = `${cookie};expires=Thu, 01 Jan 1970 00:00:01 GMT`;
if (this.element.classList.contains('open')) {
this.element.classList.remove('open');
@@ -87,25 +84,23 @@ class Group {
this.element.classList.add('open');
}
});
- leftcontainer.appendChild(foldInButton);
+ bar.appendChild(expandButton);
const title = document.createElement('DIV');
title.setAttribute('class', 'title');
title.innerText = this.title;
- leftcontainer.appendChild(title);
-
- bar.appendChild(leftcontainer);
+ bar.appendChild(title);
- const editGroupButton = document.createElement('BUTTON');
- editGroupButton.setAttribute('class', 'edit');
- editGroupButton.addEventListener('click', () => {
+ const groupOverflowButton = document.createElement('BUTTON');
+ groupOverflowButton.setAttribute('class', 'overflow-button');
+ groupOverflowButton.addEventListener('click', () => {
if (this.overflowMenu.classList.contains('hidden')) {
this.overflowMenu.classList.remove('hidden');
} else {
this.overflowMenu.classList.add('hidden');
}
});
- bar.appendChild(editGroupButton);
+ bar.appendChild(groupOverflowButton);
this.buildOverflowMenu();
bar.appendChild(this.overflowMenu);
@@ -114,13 +109,21 @@ class Group {
}
buildOverflowMenu() {
- this.overflowMenu = document.createElement('DIV');
- this.overflowMenu.setAttribute('class', 'group-overflow-menu hidden');
-
- const editEntry = document.createElement('A');
- editEntry.href = '#';
- editEntry.innerHTML = `
${fluent.getMessage('edit')}`;
- editEntry.addEventListener('click', () => {
+ this.overflowMenu = document.createElement('menu');
+ this.overflowMenu.setAttribute('class', 'hidden overflow-menu below group-overflow-menu');
+
+ // Edit group menu item
+ const editItem = document.createElement('li');
+ editItem.classList.add('overflow-menu-item');
+ const editButton = document.createElement('button');
+ editItem.appendChild(editButton);
+ const editIcon = document.createElement('img');
+ editIcon.src = '/images/edit-plain.svg';
+ editButton.appendChild(editIcon);
+ const editLabel = document.createElement('span');
+ editLabel.textContent = fluent.getMessage('edit');
+ editButton.appendChild(editLabel);
+ editButton.addEventListener('click', () => {
const newEvent = new CustomEvent('_groupcontextmenu', {
detail: {
groupId: this.id,
@@ -129,13 +132,22 @@ class Group {
},
});
window.dispatchEvent(newEvent);
+ this.overflowMenu.classList.add('hidden');
});
- this.overflowMenu.appendChild(editEntry);
-
- const deleteEntry = document.createElement('A');
- deleteEntry.href = '#';
- deleteEntry.innerHTML = `
${fluent.getMessage('remove')}`;
- deleteEntry.addEventListener('click', () => {
+ this.overflowMenu.appendChild(editItem);
+
+ // Remove group menu item
+ const removeItem = document.createElement('li');
+ removeItem.classList.add('overflow-menu-item');
+ const removeButton = document.createElement('button');
+ removeItem.appendChild(removeButton);
+ const removeIcon = document.createElement('img');
+ removeIcon.src = '/images/remove.svg';
+ removeButton.appendChild(removeIcon);
+ const removeLabel = document.createElement('span');
+ removeLabel.textContent = fluent.getMessage('remove');
+ removeButton.appendChild(removeLabel);
+ removeButton.addEventListener('click', () => {
const newEvent = new CustomEvent('_groupcontextmenu', {
detail: {
groupId: this.id,
@@ -144,8 +156,9 @@ class Group {
},
});
window.dispatchEvent(newEvent);
+ this.overflowMenu.classList.add('hidden');
});
- this.overflowMenu.appendChild(deleteEntry);
+ this.overflowMenu.appendChild(removeItem);
}
handleDragStart(e) {
diff --git a/static/js/views/things.js b/static/js/views/things.js
index 60ee0d22e..add91ba9c 100644
--- a/static/js/views/things.js
+++ b/static/js/views/things.js
@@ -13,6 +13,7 @@
const page = require('page');
const ActionInputForm = require('./action-input-form');
const AddThingScreen = require('./add-thing');
+const AddGroupScreen = require('./add-group');
const App = require('../app');
const Constants = require('../constants');
const EventList = require('./event-list');
@@ -34,9 +35,14 @@ const ThingsScreen = {
this.addButton = document.getElementById('add-button');
this.menuButton = document.getElementById('menu-button');
this.backButton = document.getElementById('back-button');
+ this.addThingMenu = document.getElementById('add-thing-menu');
+ this.addThingButton = document.getElementById('add-thing-button');
+ this.addGroupButton = document.getElementById('add-group-button');
this.backRef = '/things';
this.backButton.addEventListener('click', () => page(this.backRef));
- this.addButton.addEventListener('click', AddThingScreen.show.bind(AddThingScreen));
+ this.addButton.addEventListener('click', this.toggleAddThingMenu.bind(this));
+ this.addThingButton.addEventListener('click', this.handleAddThingButtonClick.bind(this));
+ this.addGroupButton.addEventListener('click', this.handleAddGroupButtonClick.bind(this));
this.refreshThings = this.refreshThings.bind(this);
this.things = [];
@@ -115,9 +121,13 @@ const ThingsScreen = {
}
this.groupsElement.innerHTML = '';
if (groups.size !== 0) {
+ this.groupsElement.classList.remove('hidden');
groups.forEach((description) => {
new Group(description);
});
+ } else {
+ // Hide the groups div so it doesn't take up space
+ this.groupsElement.classList.add('hidden');
}
if (things.size !== 0) {
things.forEach((description, thingId) => {
@@ -192,6 +202,33 @@ const ThingsScreen = {
App.gatewayModel.subscribe(Constants.DELETE_THINGS, this.refreshThing);
},
+ /**
+ * Toggle the visibility of the add thing menu.
+ */
+ toggleAddThingMenu: function () {
+ if (this.addThingMenu.classList.contains('hidden')) {
+ this.addThingMenu.classList.remove('hidden');
+ } else {
+ this.addThingMenu.classList.add('hidden');
+ }
+ },
+
+ /**
+ * Handle a click on the add thing button in the add thing menu.
+ */
+ handleAddThingButtonClick: function () {
+ this.addThingMenu.classList.add('hidden');
+ AddThingScreen.show();
+ },
+
+ /**
+ * Handle a click on the add group button in the add thing menu.
+ */
+ handleAddGroupButtonClick: function () {
+ this.addThingMenu.classList.add('hidden');
+ AddGroupScreen.show();
+ },
+
/**
* Display an action input form.
*
diff --git a/webpack.config.js b/webpack.config.js
index 5ddb63121..5e4c2cf91 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -122,6 +122,7 @@ const webpackWeb = {
'./static/css/things.css',
'./static/css/menu.css',
'./static/css/add-thing.css',
+ './static/css/add-group.css',
'./static/css/context-menu.css',
'./static/css/group-context-menu.css',
'./static/css/thing.css',
+
+