Merge pull request #8 from walli545/04-initial-release

04 initial release

Author: walli545

.eslintrc.js

@@ -4,6 +4,7 @@ module.exports = {
 		ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
 		sourceType: 'module', // Allows for the use of imports
 		project: './tsconfig.json',
+		createDefaultProgram: true
 	},
 	extends: [
 		'plugin:@typescript-eslint/recommended', // Uses the recommended rules from the @typescript-eslint/eslint-plugin

.prettierrc.js

@@ -5,5 +5,5 @@ module.exports = {
 	printWidth: 120,
 	useTabs: true,
 	tabWidth: 4,
-	endOfLine: 'lf',
+	endOfLine: 'crlf',
 };

.travis.yml

@@ -5,9 +5,9 @@ os:
 
 language: node_js
 node_js:
-  - '6'
   - '8'
   - '10'
+  - '12'
 
 env:
   - CXX=g++-4.8
@@ -28,5 +28,6 @@ before_script:
 script:
   - npm run test:package
   - npm run test:unit
+  - npm run test:ts
   - export DEBUG=testing:*
   - npm run test:integration

README.md

@@ -12,70 +12,46 @@
 
 ## time-switch adapter for ioBroker
 
-Time based switching of devices
-
-## Developer manual
-This section is intended for the developer. It can be deleted later
-
-### Getting started
-
-You are almost done, only a few steps left:
-1. Create a new repository on GitHub with the name `ioBroker.time-switch`
-
-1. Push all files to the GitHub repo. The creator has already set up the local repository for you:  
-	```bash
-	git push origin master
-	```
-1. Head over to [src/main.ts](src/main.ts) and start programming!
-
-### Scripts in `package.json`
-Several npm scripts are predefined for your convenience. You can run them using `npm run <scriptname>`
-| Script name | Description                                              |
-|-------------|----------------------------------------------------------|
-| `build`    | Re-compile the TypeScript sources.                       |
-| `watch`     | Re-compile the TypeScript sources and watch for changes. |
-| `test:ts`   | Executes the tests you defined in `*.test.ts` files.     |
-| `test:package`    | Ensures your `package.json` and `io-package.json` are valid. |
-| `test:unit`       | Tests the adapter startup with unit tests (fast, but might require module mocks to work). |
-| `test:integration`| Tests the adapter startup with an actual instance of ioBroker. |
-| `test` | Performs a minimal test run on package files and your tests. |
-| `coverage` | Generates code coverage using your test files. |
-
-### Writing tests
-When done right, testing code is invaluable, because it gives you the 
-confidence to change your code while knowing exactly if and when 
-something breaks. A good read on the topic of test-driven development 
-is https://hackernoon.com/introduction-to-test-driven-development-tdd-61a13bc92d92. 
-Although writing tests before the code might seem strange at first, but it has very 
-clear upsides.
-
-The template provides you with basic tests for the adapter startup and package files.
-It is recommended that you add your own tests into the mix.
-
-### Publishing the adapter
-See the documentation of [ioBroker.repositories](https://github.com/ioBroker/ioBroker.repositories#requirements-for-adapter-to-get-added-to-the-latest-repository).
-
-### Test the adapter manually on a local ioBroker installation
-In order to install the adapter locally without publishing, the following steps are recommended:
-1. Create a tarball from your dev directory:  
-	```bash
-	npm pack
-	```
-1. Upload the resulting file to your ioBroker host
-1. Install it locally (The paths are different on Windows):
-	```bash
-	cd /opt/iobroker
-	npm i /path/to/tarball.tgz
-	```
-
-For later updates, the above procedure is not necessary. Just do the following:
-1. Overwrite the changed files in the adapter directory (`/opt/iobroker/node_modules/iobroker.time-switch`)
-1. Execute `iobroker upload time-switch` on the ioBroker host
+This adapter allows the user to switch devices on and off using time schedules. 
+The schedules can be fully configured by a vis widget.
+One schedule switches one ioBroker state and consists of one or more actions that define when and how the state should be switched. 
+It is possible to configure at which time and on which weekdays the action should be triggered. There can be custom on/off values also.
+In the widget the schedule can be disabled temporarily and the switched state can be controlled manually.
+
+![Preview](widgets/time-switch/img/prev/prev-device-schedule.jpg)
+
+## How to setup a schedule
+
+  1. Install the adapter and create an instance (one instance can handle many schedules) 
+  2. Go to the instance settings and click "Add schedule" to create a new schedule (one schedule can switch one ioBroker state).
+     
+     Keep the schedule OID of the newly created schedule in mind, we will need that later.
+  3. Now go to the vis editor and open the view where the schedule should be visible.
+     Create a new "Device-Schedule" widget and adjust it's size and position to fit your layout.
+  4. Now configure the widget with the following properties found under the "Common" attributes:
+   
+     - dataId: Open the select OID dialog and select the schedule OID that you remembered earlier. It can be found under "time-switch.0".
+     - stateId: Select the OID of the state that should be switched by the schedule, e.g. on/off status of a wall plug.
+     - onValue/offValue: Enter the values that represent the devices on/off state, e.g. 0/1, true/false, ON/OFF, ... .
+  5. The rest can be configured in the view part of the widget.
+   
+     - Enable/Disable automatic switching
+     - Change the current value of the state
+     - Add/Delete/Edit actions
+     - Change the heading of the schedule plan
+     
+## Possible features in the future
+
+- Translations for schedule widget
+- Astro actions (switch on sunrise, etc.)
 
 ## Changelog
 
-### 0.0.1
-* (walli545) initial release
+### 1.0.0
+* (walli545) initial release, features:
+    * Admin settings to create schedules
+    * vis widget to edit schedules and add actions
+    
 
 ## License
 MIT License

admin/custom_m.html

@@ -1,7 +1,6 @@
 <html>
 
 <head>
-
 	<!-- Load ioBroker scripts and styles-->
 	<link rel="stylesheet" type="text/css" href="../../css/adapter.css" />
 	<link rel="stylesheet" type="text/css" href="../../lib/css/materialize.css">
@@ -18,76 +17,120 @@
 	<script type="text/javascript" src="words.js"></script>
 
 	<script type="text/javascript">
+		let g_onChange;
+		let scheduleIds;
+
 		// This will be called by the admin adapter when the settings page loads
 		function load(settings, onChange) {
-			// example: select elements with id=key and class=value and insert value
-			if (!settings) return;
-			$('.value').each(function () {
-				var $key = $(this);
-				var id = $key.attr('id');
-				if ($key.attr('type') === 'checkbox') {
-					// do not call onChange direct, because onChange could expect some arguments
-					$key.prop('checked', settings[id])
-						.on('change', () => onChange())
-						;
-				} else {
-					// do not call onChange direct, because onChange could expect some arguments
-					$key.val(settings[id])
-						.on('change', () => onChange())
-						.on('keyup', () => onChange())
-						;
-				}
+			g_onChange = onChange;
+			$('#addSchedule').on('click', function () {
+				const newId = getNextScheduleId();
+				scheduleIds.push(newId);
+				addSchedule(newId);
+				onChange(true);
 			});
+
+			if (!settings) return;
+			if (settings.schedules) {
+				scheduleIds = settings.schedules;
+				scheduleIds.sort().forEach(s => {
+					addSchedule(s);
+				});
+			}
+
 			onChange(false);
-			// reinitialize all the Materialize labels on the page if you are dynamically adding inputs:
 			if (M) M.updateTextFields();
 		}
 
 		// This will be called by the admin adapter when the user presses the save button
 		function save(callback) {
-			// example: select elements with class=value and build settings object
-			var obj = {};
-			$('.value').each(function () {
-				var $this = $(this);
-				if ($this.attr('type') === 'checkbox') {
-					obj[$this.attr('id')] = $this.prop('checked');
+			callback({schedules: scheduleIds});
+			g_onChange(false);
+		}
+
+		function addSchedule(scheduleId){
+			socket.emit('getState', `${adapter}.${instance}.${scheduleId}`, (error, state) => {
+				let scheduleData;
+				if (state && state.val) {
+					scheduleData = JSON.parse(state.val)
 				} else {
-					obj[$this.attr('id')] = $this.val();
+					scheduleData = {actions: [], enabled: false, alias: ''};
 				}
+				let enabledText = translateWord(scheduleData.enabled ? 'true' : 'false');
+				let newRow = `
+					<tr>
+						<td>${scheduleId}</td>
+						<td>${scheduleData.alias}</td>
+						<td>${scheduleData.actions.length}</td>
+						<td>${enabledText}</td>
+						<td>
+							<a class="delete-schedule values-buttons btn-floating btn-small waves-effect waves-light red"><i class="material-icons" title="Remove schedule">delete</i></a>
+						</td>
+					</tr>
+				`;
+
+				$('#schedules').append(newRow);
+				$('.delete-schedule').on('click', function(){
+					$(this).parents('tr').remove();
+					let scheduleId = $(this).parents('tr').find('td').eq(0).text();
+					scheduleIds = scheduleIds.filter(i => i !== scheduleId);
+					g_onChange(true);
+				});
+				if (M) M.updateTextFields();
 			});
-			callback(obj);
 		}
-	</script>
 
+		function getNextScheduleId() {
+			const pattern = /(?<=schedule)\d+/;
+			const mapped = scheduleIds.map(i => i.match(pattern)[0]);
+			const numbers = mapped
+					.map(s => Number.parseInt(s, 10))
+					.sort((a, b) => a-b);
+			let newIndex = 0;
+			for (let i = 0; i < numbers.length; i++) {
+				if (numbers[i] > newIndex) {
+					break;
+				} else {
+					newIndex++;
+				}
+			}
+			return `schedule${newIndex}`;
+		}
+	</script>
 </head>
 
 <body>
-
 	<div class="m adapter-container">
-
 		<div class="row">
 			<div class="col s12 m4 l2">
 				<img src="time-switch.png" class="logo">
 			</div>
 		</div>
 
-		<!-- Put your content here -->
-
-		<!-- For example columns with settings: -->
-		<div class="row">
-			<div class="col s6 input-field">
-				<input type="checkbox" class="value" id="option1" />
-				<label for="option1" class="translate">option1</label>
-			</div>
-
-			<div class="col s6 input-field">
-				<input type="text" class="value" id="option2" />
-				<label for="option2" class="translate">option2</label>
+		<div class="row" style="padding-bottom: 0">
+			<div class="input-field col">
+				<a class="waves-effect waves-light btn" id="addSchedule">
+					<i class="material-icons left">add</i><span class="translate">Add schedule</span>
+				</a>
 			</div>
 		</div>
 
+		<div class="table-values-div" style="height: calc(100% - 90px); overflow: auto">
+			<table class="centered highlight">
+				<thead>
+				<tr>
+					<th class="translate">scheduleId</th>
+					<th class="translate">name</th>
+					<th class="translate">action count</th>
+					<th class="translate">enabled</th>
+					<th class="translate" id="scheduleDelete" style="width: 30px"></th>
+				</tr>
+				</thead>
+				<tbody id="schedules">
+				</tbody>
+			</table>
+		</div>
 	</div>
-
 </body>
 
 </html>