diff --git a/front/src/routes/scene/edit-scene/Settings.jsx b/front/src/routes/scene/edit-scene/Settings.jsx
new file mode 100644
index 0000000000..ff47c36437
--- /dev/null
+++ b/front/src/routes/scene/edit-scene/Settings.jsx
@@ -0,0 +1,138 @@
+import cx from 'classnames';
+import { Localizer, Text } from 'preact-i18n';
+import CreatableSelect from 'react-select/creatable';
+import { Component } from 'preact';
+import styles from './style.css';
+import iconList from '../../../../../server/config/icons.json';
+
+class Settings extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ cardOpened: false
+ };
+ }
+
+ openCloseCard = () => {
+ this.setState({
+ cardOpened: !this.state.cardOpened
+ });
+ };
+
+ render(props, { cardOpened }) {
+ return (
+
+ );
+ }
+}
+
+export default Settings;
diff --git a/front/src/routes/scene/edit-scene/index.js b/front/src/routes/scene/edit-scene/index.js
index af441bf5ec..406bcafa1a 100644
--- a/front/src/routes/scene/edit-scene/index.js
+++ b/front/src/routes/scene/edit-scene/index.js
@@ -92,7 +92,6 @@ class EditScene extends Component {
this.setState({ saving: true, error: false });
try {
await this.props.httpClient.patch(`/api/v1/scene/${this.props.scene_selector}`, this.state.scene);
- this.setState({ isNameEditable: false, isDescriptionEditable: false });
} catch (e) {
console.error(e);
this.setState({ error: true });
@@ -220,6 +219,7 @@ class EditScene extends Component {
});
}, 500);
};
+
deleteScene = async () => {
this.setState({ saving: true });
try {
@@ -309,35 +309,6 @@ class EditScene extends Component {
});
};
- toggleIsNameEditable = async () => {
- await this.setState(prevState => ({ isNameEditable: !prevState.isNameEditable, isDescriptionEditable: false }));
- if (this.state.isNameEditable) {
- this.nameInput.focus();
- }
- };
-
- setNameInputRef = nameInput => {
- this.nameInput = nameInput;
- };
-
- toggleIsDescriptionEditable = async () => {
- await this.setState(prevState => ({
- isDescriptionEditable: !prevState.isDescriptionEditable,
- isNameEditable: false
- }));
- if (this.state.isDescriptionEditable) {
- this.descriptionInput.focus();
- }
- };
-
- closeEdition = () => {
- this.setState({ isNameEditable: false, isDescriptionEditable: false });
- };
-
- setDescriptionInputRef = descriptionInput => {
- this.descriptionInput = descriptionInput;
- };
-
updateSceneName = e => {
this.setState(prevState => {
const newState = update(prevState, {
@@ -364,9 +335,24 @@ class EditScene extends Component {
});
};
+ updateSceneIcon = e => {
+ console.log('updateSceneIcon', e.target.value);
+ this.setState(prevState => {
+ const newState = update(prevState, {
+ scene: {
+ icon: {
+ $set: e.target.value
+ }
+ }
+ });
+ return newState;
+ });
+ };
+
duplicateScene = () => {
route(`/dashboard/scene/${this.props.scene_selector}/duplicate`);
};
+
moveCard = async (originalX, originalY, destX, destY) => {
// incorrect coordinates
if (destX < 0 || destY < 0) {
@@ -445,20 +431,43 @@ class EditScene extends Component {
await this.setState(newState);
};
+ setTags = tags => {
+ this.setState(prevState => {
+ const newState = update(prevState, {
+ scene: {
+ tags: {
+ $set: tags.map(tag => ({ name: tag }))
+ }
+ }
+ });
+ return newState;
+ });
+ };
+
+ getTags = async () => {
+ try {
+ const tags = await this.props.httpClient.get(`/api/v1/tag_scene`);
+ this.setState({
+ tags
+ });
+ } catch (e) {
+ console.error(e);
+ }
+ };
+
constructor(props) {
super(props);
this.isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
this.state = {
scene: null,
variables: {},
- triggersVariables: [],
- isNameEditable: false
+ triggersVariables: []
};
}
componentDidMount() {
- document.addEventListener('click', this.closeEdition, true);
this.getSceneBySelector();
+ this.getTags();
this.props.session.dispatcher.addListener('scene.executing-action', payload =>
this.highlighCurrentlyExecutedAction(payload)
);
@@ -471,43 +480,42 @@ class EditScene extends Component {
document.removeEventListener('click', this.closeEdition, true);
}
- render(props, { saving, error, variables, scene, isNameEditable, isDescriptionEditable, triggersVariables }) {
+ render(props, { saving, error, variables, scene, triggersVariables, tags }) {
return (
scene && (
-
-
-
+
+
+
+
+
)
);
}
diff --git a/front/src/routes/scene/edit-scene/style.css b/front/src/routes/scene/edit-scene/style.css
index 6843b1df63..956e51c66e 100644
--- a/front/src/routes/scene/edit-scene/style.css
+++ b/front/src/routes/scene/edit-scene/style.css
@@ -31,3 +31,47 @@
left: auto;
}
}
+
+
+.settings {
+ opacity: 0;
+ max-height: 0;
+ visibility: hidden;
+ transition: opacity 0.3s ease, max-height 0.3s ease;
+ padding: 0rem
+}
+
+.settingsOpen {
+ visibility: visible;
+ opacity: 1;
+ max-height: 1000px;
+ padding: 1.5rem 1.5rem;
+}
+
+.iconContainer {
+ margin-top: 1rem;
+ height: 10rem;
+ overflow: scroll;
+}
+
+.iconDiv {
+ padding: 5px;
+ width: 35px;
+ margin-bottom: 8px;
+}
+
+.iconDivChecked {
+ background-color: #f5f7fb;
+ border-radius: 4px;
+}
+
+.iconLabel {
+ cursor: pointer;
+ margin-bottom: 0;
+}
+
+.iconInput {
+ position: absolute;
+ z-index: -1;
+ opacity: 0;
+}
diff --git a/front/src/routes/scene/index.js b/front/src/routes/scene/index.js
index ee6b54fff3..b695a7b59d 100644
--- a/front/src/routes/scene/index.js
+++ b/front/src/routes/scene/index.js
@@ -18,6 +18,9 @@ class Scene extends Component {
if (this.state.sceneSearch && this.state.sceneSearch.length) {
params.search = this.state.sceneSearch;
}
+ if (this.state.sceneTagSearch && this.state.sceneTagSearch.length) {
+ params.searchTags = this.state.sceneTagSearch.join(',');
+ }
const scenes = await this.props.httpClient.get('/api/v1/scene', params);
this.setState({
scenes,
@@ -31,12 +34,29 @@ class Scene extends Component {
});
}
};
+ getTags = async () => {
+ try {
+ const tags = await this.props.httpClient.get(`/api/v1/tag_scene`);
+ this.setState({
+ tags
+ });
+ } catch (e) {
+ console.error(e);
+ }
+ };
search = async e => {
await this.setState({
sceneSearch: e.target.value
});
await this.getScenes();
};
+ searchTags = async tags => {
+ await this.setState({
+ sceneTagSearch: tags
+ });
+ await this.getScenes();
+ };
+
changeOrderDir = async e => {
await this.setState({
getScenesOrderDir: e.target.value
@@ -88,6 +108,7 @@ class Scene extends Component {
getScenesOrderDir: 'asc',
scenes: [],
sceneSearch: null,
+ sceneTagSearch: null,
loading: true
};
this.debouncedSearch = debounce(this.search.bind(this), 200);
@@ -95,9 +116,10 @@ class Scene extends Component {
componentWillMount() {
this.getScenes();
+ this.getTags();
}
- render(props, { scenes, loading, getError }) {
+ render(props, { scenes, loading, getError, tags, sceneTagSearch }) {
return (
);
}
diff --git a/front/src/routes/scene/new-scene/NewScenePage.jsx b/front/src/routes/scene/new-scene/NewScenePage.jsx
index e8fde77d66..14290b7bf2 100644
--- a/front/src/routes/scene/new-scene/NewScenePage.jsx
+++ b/front/src/routes/scene/new-scene/NewScenePage.jsx
@@ -42,6 +42,7 @@ const NewScenePage = ({ children, ...props }) => (