├── README.md
└── toggle-lock-entity-row.js


/README.md:
--------------------------------------------------------------------------------
 1 | toggle-lock-entity-row
 2 | ======================
 3 | 
 4 | # THIS PLUGIN IS DEPRECATED
 5 | # I RECOMMEND USING [RESTRICTION-CARD](https://github.com/iantrich/restriction-card) WHICH DOES MORE THINGS BETTER
 6 | 
 7 | ---
 8 | ---
 9 | ---
10 | 
11 | Avoid toggling entities by mistake in lovelace.
12 | 
13 | This will display a normal toggle with a lock symbol in front of it.
14 | Clicking the lock will make it go away and enable the toggle to be manouvered for five seconds.
15 | 
16 | ---
17 | ```yaml
18 | resources:
19 |   - url: /local/toggle-lock-entity-row.js
20 |     type: js
21 | 
22 | views:
23 |   - title: My view
24 |     cards:
25 |     - type: entities
26 |       entities:
27 |         - entity: light.my_lamp
28 |           name: A lamp
29 |           type: custom:toggle-lock-entity-row
30 | ```
31 | 
32 | ![lovelace-locked-toggle](https://user-images.githubusercontent.com/1299821/45876486-0bc76e80-bd9b-11e8-8aa1-543fa4e3d14d.jpg)
33 | 
34 | 
35 | ### Other options
36 | 
37 | If a list of users is supplied, only those users can disable the lock:
38 | 
39 | Note that this is not to be considered propper security. The lock can easily be circumvented.
40 | ```
41 |     - type: entities
42 |       entities:
43 |         - entity: light.my_lamp
44 |           name: A lamp
45 |           type: custom:toggle-lock-entity-row
46 |           users:
47 |             - Thomas
48 |             - Admin
49 | ```
50 | 


--------------------------------------------------------------------------------
/toggle-lock-entity-row.js:
--------------------------------------------------------------------------------
 1 | class ToggleLockEntityRow extends Polymer.Element {
 2 |   static get template() {
 3 |     return Polymer.html`
 4 |     <style>
 5 |       hui-generic-entity-row {
 6 |         margin: var(--ha-themed-slider-margin, initial);
 7 |       }
 8 |       .flex {
 9 |         display: flex;
10 |         align-items: center;
11 |       }
12 |       #overlay {
13 |         position: absolute;
14 |         left: 0;
15 |         right: 0;
16 |         top: 0;
17 |         bottom: 0;
18 |         text-align: right;
19 |         z-index: 1;
20 |       }
21 |       #lock {
22 |         margin-top: 8px;
23 |         opacity: 1;
24 |         margin-right: 7px;
25 |         -webkit-animation-duration: 5s;animation-duration 5s;
26 |         -webkit-animation-fill-mode: both;animation-full-mode: both;
27 |       }
28 |       .wrapper {
29 |         position: relative;
30 |       }
31 |       @keyframes fadeOut{
32 |         0% {opacity: 1;}
33 |         20% {opacity: 0;}
34 |         80% {opacity: 0;}
35 |         100% {opacity: 1;}
36 |       }
37 |       .fadeOut {
38 |         -webkit-animation-name: fadeOut;animation-name: fadeOut;
39 |       }
40 |     </style>
41 |     <hui-generic-entity-row
42 |       config="[[_config]]"
43 |       hass="[[_hass]]"
44 |       >
45 |       <div class="wrapper">
46 |         <div class="flex">
47 |           <ha-entity-toggle
48 |             state-obj="[[stateObj]]"
49 |             hass="[[_hass]]"
50 |           ></ha-entity-toggle>
51 |         </div>
52 |         <div id="overlay" on-click='clickHandler'>
53 |           <iron-icon id="lock" icon="mdi:lock-outline"></iron-icon>
54 |         </div>
55 |       </div>
56 |     </hui-generic-entity-row>
57 |     `
58 |   }
59 | 
60 |   setConfig(config)
61 |   {
62 |     this._config = config;
63 |     this.users = null;
64 |     if(config.users) {
65 |       this.users = config.users;
66 |     }
67 |   }
68 | 
69 |   set hass(hass) {
70 |     this._hass = hass;
71 |     this.stateObj = this._config.entity in hass.states ? hass.states[this._config.entity] : null;
72 |   }
73 | 
74 |   clickHandler(e) {
75 |     e.stopPropagation();
76 |     if(this.users) {
77 |       if(! document.querySelector("home-assistant").hass.user) return;
78 |       let user = document.querySelector("home-assistant").hass.user.name;
79 |       if(this.users.indexOf(user) < 0) return;
80 |     }
81 |     this.$.overlay.style.pointerEvents = 'none';
82 |     const lock = this.$.lock;
83 |     if(lock) {
84 |       lock.icon = 'mdi:lock-open-outline';
85 |       lock.classList.add('fadeOut');
86 |     }
87 |     window.setTimeout(() => {
88 |       this.$.overlay.style.pointerEvents = '';
89 |       if(lock) {
90 |         lock.classList.remove('fadeOut');
91 |         lock.icon = 'mdi:lock-outline';
92 |       }
93 |     }, 5000);
94 |   }
95 | 
96 | }
97 | 
98 | customElements.define('toggle-lock-entity-row', ToggleLockEntityRow);
99 | 


--------------------------------------------------------------------------------