rxjs#fromEvent JavaScript Examples

The following examples show how to use rxjs#fromEvent. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: exception-search.js    From real-time-map with MIT License 4 votes vote down vote up 
exceptionSearch = {
	exceptionResultsCache: {},
	displayList: {},

	get searchInput() {
		return document.getElementById("RTM-exception-search-bar");
	},

	init(mapPropsToComponent) {
		// Init rxjs debounce search.
		const searchInputObservable$ = fromEvent(exceptionSearch.searchInput, "input").pipe(map(i => i.currentTarget.value));
		const debouncedInput = searchInputObservable$.pipe(debounceTime(250));
		debouncedInput.subscribe((searchInput) => exceptionSearch.buildSearchList(searchInput, mapPropsToComponent));
	},

	loadSavedExceptionConfig(mapPropsToComponent) {

		return getBlobStorage().then(val => {

			if (val.length > 0 && !storage.setBlobStorageObj) { storage.setBlobStorageObj = val[0]; }
			else {
				return saveBlobStorage("Exception", {}).then(() => {
					return getBlobStorage().then(val => {
						storage.setBlobStorageObj = val[0];
					});
				});
			};

			exceptionSearch.searchInput.value = "";
			const cachedExceptions = JSON.parse(val[0].data);

			if (cachedExceptions.configData.Exception) {
				exceptionSearch.displayList = cachedExceptions.configData.Exception;
				storage.selectedExceptions = filterByVisibility(exceptionSearch.displayList);
				exceptionSearch.buildExceptionDisplayList(mapPropsToComponent);
			}
		}).catch(error =>
			console.warn("Server is unavailable, please try again later: ", error)
		);
	},

	buildSearchList(searchInput, mapPropsToComponent) {
		return getRulesByName(searchInput).then(ruleList => {

			ruleList.forEach(rule => {
				let {
					color,
					name,
					id,
					baseType
				} = rule;

				if (baseType === "Stock") { name += " (Default)"; };
				const visible = true;

				exceptionSearch.exceptionResultsCache[name] = { color, name, id, visible, baseType };
			});

			mapPropsToComponent(Object.values(exceptionSearch.exceptionResultsCache));
		});
	},

	handleItemSelected(event, mapPropsToComponent) {
		event.preventDefault();
		exceptionSearch.saveSelectedValue(mapPropsToComponent);
	},

	saveSelectedValue(mapPropsToComponent) {
		const { value } = exceptionSearch.searchInput;
		const exceptionData = exceptionSearch.exceptionResultsCache[value];

		if (exceptionData) {
			exceptionSearch.displayList[exceptionData.id] = exceptionData;
			exceptionSearch.saveConfig(mapPropsToComponent);
			exceptionSearch.searchInput.value = "";
		}
		return exceptionData;
	},

	buildExceptionDisplayList(mapPropsToComponent) {
		mapPropsToComponent(Object.values(exceptionSearch.displayList)
			.filter(ruleData => ruleData.id && ruleData.name));
	},

	deleteItemFromExceptionList(id, mapPropsToComponent) {
		delete exceptionSearch.displayList[id];
		exceptionSearch.saveConfig(mapPropsToComponent);
	},

	saveConfig(mapPropsToComponent) {
		storage.selectedExceptions = filterByVisibility(exceptionSearch.displayList);
		storage.setBlobStorageObj ? setBlobStorage("Exception", exceptionSearch.displayList) : saveBlobStorage("Exception", exceptionSearch.displayList);
		exceptionSearch.buildExceptionDisplayList(mapPropsToComponent);
		storage.dateKeeper$.update();
	},

	toggleExceptionVisibility(ruleID, mapPropsToComponent) {
		const selectedException = exceptionSearch.displayList[ruleID];
		selectedException.visible = !selectedException.visible;
		exceptionSearch.saveConfig(mapPropsToComponent);
	},
	deleteAllItems(mapPropsToComponent) {
		exceptionSearch.displayList = {};
		exceptionSearch.saveConfig(mapPropsToComponent);
	},
	setVisibilityForAllItems(visibility, mapPropsToComponent) {
		Object.values(exceptionSearch.displayList)
			.forEach(selectedItem =>
				selectedItem.visible = visibility
			);
		exceptionSearch.saveConfig(mapPropsToComponent);
	}
}
Example #2
Source File: status-search.js    From real-time-map with MIT License 4 votes vote down vote up 
diagnosticSearch = {
	resultsCache: {},
	displayList: {},

	get searchInput() {
		return document.getElementById("RTM-status-search-bar");
	},

	init(mapPropsToComponent) {
		// Init rxjs debounce search.
		const searchInputObservable$ = fromEvent(diagnosticSearch.searchInput, "input").pipe(map(i => i.currentTarget.value));
		const debouncedInput = searchInputObservable$.pipe(debounceTime(250));
		debouncedInput.subscribe((searchInput) => diagnosticSearch.buildSearchList(searchInput, mapPropsToComponent));
	},

	loadSavedStatusConfig(mapPropsToComponent) {

		return getBlobStorage().then(val => {
			if (val.length === 0) { return; }
			const cachedDiagnostics = JSON.parse(val[0].data);

			if (cachedDiagnostics.configData.Status) {
				diagnosticSearch.displayList = cachedDiagnostics.configData.Status;
				storage.selectedStatuses = filterByVisibility(diagnosticSearch.displayList);
				diagnosticSearch.buildStatusDisplayList(mapPropsToComponent);
			}
		});
	},

	buildSearchList(searchInput, mapPropstoComponent) {

		return getDiagnosticByName(searchInput).then(diagnosticResults => {

			diagnosticResults.forEach(diagnostic => {
				const {
					id,
					name,
					unitOfMeasure
				} = diagnostic;

				const visible = true;

				diagnosticSearch.resultsCache[name] = { name, id, visible, unitOfMeasure };
			});
			mapPropstoComponent(Object.values(diagnosticSearch.resultsCache));
		});
	},

	handleItemSelected(event, mapPropsToComponent) {
		event.preventDefault();
		diagnosticSearch.saveSelectedValue(mapPropsToComponent);
	},

	saveSelectedValue(mapPropsToComponent) {

		const { value } = diagnosticSearch.searchInput;
		const diagnosticData = diagnosticSearch.resultsCache[value];

		if (diagnosticData) {
			diagnosticSearch.displayList[diagnosticData.id] = diagnosticData;
			diagnosticSearch.searchInput.value = "";
			diagnosticSearch.saveConfig(mapPropsToComponent);
		}

		return diagnosticData;
	},

	buildStatusDisplayList(mapPropsToComponent) {
		mapPropsToComponent(Object.values(diagnosticSearch.displayList)
			.filter(diagnostic => diagnostic.id && diagnostic.name));
	},

	deleteItemFromStatusList(id, mapPropsToComponent) {
		delete diagnosticSearch.displayList[id];
		diagnosticSearch.saveConfig(mapPropsToComponent);
	},

	saveConfig(mapPropsToComponent) {
		storage.selectedStatuses = filterByVisibility(diagnosticSearch.displayList);
		storage.setBlobStorageObj ? setBlobStorage("Status", diagnosticSearch.displayList) : saveBlobStorage("Status", diagnosticSearch.displayList);
		storage.dateKeeper$.update();
		diagnosticSearch.buildStatusDisplayList(mapPropsToComponent);
	},

	toggleStatusVisibility(id, mapPropsToComponent) {
		const selectedDiagnostic = diagnosticSearch.displayList[id];
		selectedDiagnostic.visible = !selectedDiagnostic.visible;
		diagnosticSearch.saveConfig(mapPropsToComponent);
	},

	deleteAllItems(mapPropsToComponent) {
		diagnosticSearch.displayList = {};
		diagnosticSearch.saveConfig(mapPropsToComponent);
	},

	showAllItems(mapPropsToComponent) {
		Object.values(diagnosticSearch.displayList)
			.forEach(selectedDiagnostic =>
				selectedDiagnostic.visible = true
			);
		diagnosticSearch.saveConfig(mapPropsToComponent);
	},

	hideAllItems(mapPropsToComponent) {
		Object.values(diagnosticSearch.displayList)
			.forEach(selectedDiagnostic =>
				selectedDiagnostic.visible = false
			);
		diagnosticSearch.saveConfig(mapPropsToComponent);
	}
}
Example #3
Source File: vehicle-search.js    From real-time-map with MIT License 4 votes vote down vote up 
deviceSearch = {
	shown: true,
	deviceResultsCache: {},
	selectedIDS: {},

	get searchInput() {
		return document.getElementById("RTM-vehicle-search-bar");
	},

	init(mapPropsToComponent) {
		// Init rxjs debounce search.
		const searchInputObservable = fromEvent(deviceSearch.searchInput, "input").pipe(map(i => i.currentTarget.value));
		const debouncedInput = searchInputObservable.pipe(debounceTime(250));
		debouncedInput.subscribe((searchInput) => deviceSearch.buildSearchList(searchInput, mapPropsToComponent));
	},

	loadSavedDeviceConfig(mapPropsToComponent) {

		return getBlobStorage().then(val => {
			if (val.length === 0) { return; }
			const cachedDevices = JSON.parse(val[0].data);

			if (cachedDevices.configData.Vehicle) {
				deviceSearch.selectedIDS = cachedDevices.configData.Vehicle;
				deviceSearch.applyFilter();
				deviceSearch.buildDeviceDisplayList(mapPropsToComponent);
			}
		});
	},

	buildSearchList(searchInput, mapPropsToComponent) {

		const nameSearchMultiCall = [
			createDeviceByNameCall(searchInput),
			createGroupsByNameCall(searchInput)
		];

		return makeAPIMultiCall(nameSearchMultiCall).then(results => {
			// deviceList = results[0];
			results[0]
				.map(deviceSearch.saveDeviceDataToCache);
			// groupList = results[1];
			results[1]
				.map(deviceSearch.saveGroupDataToCache);
			mapPropsToComponent(Object.values(deviceSearch.deviceResultsCache));
		});

	},

	saveDeviceDataToCache(deviceData) {
		const data = {};
		["id", "name", "groups"].forEach(prop => data[prop] = deviceData[prop]);
		data.visible = true;
		deviceSearch.deviceResultsCache[data.name] = data;
		return data;
	},

	saveGroupDataToCache(deviceData) {
		const data = {};
		["id", "name", "color"].forEach(prop => data[prop] = deviceData[prop]);
		data.visible = true;
		data.name += " (Group)";

		deviceSearch.deviceResultsCache[data.name] = data;
		return data;
	},

	buildDeviceDisplayList(mapPropsToComponent) {
		deviceSearch.mapPropsToComponent = mapPropsToComponent;
		mapPropsToComponent(Object.values(deviceSearch.selectedIDS)
			.filter(device => device.id && device.name));
	},

	handleItemSelected(event, mapPropsToComponent) {
		event.preventDefault();
		deviceSearch.saveSelectedValue(mapPropsToComponent);
	},

	saveSelectedValue(mapPropsToComponent) {

		const { value } = deviceSearch.searchInput;
		if (!deviceSearch.deviceResultsCache.hasOwnProperty(value)) {
			return;
		}

		const deviceData = deviceSearch.deviceResultsCache[value];
		deviceData.visible = true;
		const {
			id,
			name,
			groups,
			color,
			visible
		} = deviceData;

		if (color) { //It's a group
			deviceSearch.selectedIDS[id] = { id, name, color, visible };
		}
		else {
			deviceSearch.selectedIDS[id] = { id, name, groups, visible };
		}

		deviceSearch.searchInput.value = "";
		deviceSearch.saveConfig(mapPropsToComponent);
		return deviceData;
	},

	deleteItemFromdeviceList(id, mapPropsToComponent) {
		delete deviceSearch.selectedIDS[id];
		deviceSearch.saveConfig(mapPropsToComponent);
	},

	deleteAllItems(mapPropsToComponent) {
		deviceSearch.selectedIDS = {};
		deviceSearch.saveConfig(mapPropsToComponent);
	},

	saveConfig(mapPropsToComponent) {
		storage.setBlobStorageObj ? setBlobStorage("Vehicle", deviceSearch.selectedIDS) : saveBlobStorage("Vehicle", deviceSearch.selectedIDS);

		deviceSearch.applyFilter();
		deviceSearch.buildDeviceDisplayList(mapPropsToComponent);
	},

	applyFilter() {
		_getDeviceList(deviceSearch.selectedIDS).then(() => {
			_applyDeviceFilter(Object.keys(storage.selectedDevices));
		});
	},
	showAll(mapPropsToComponent) {
		Object.values(deviceSearch.selectedIDS)
			.forEach(selectedDevice =>
				selectedDevice.visible = true
			);
		deviceSearch.saveConfig(mapPropsToComponent);
	},
	hideAll(mapPropsToComponent) {
		Object.values(deviceSearch.selectedIDS)
			.forEach(selectedDevice =>
				selectedDevice.visible = false
			);
		deviceSearch.saveConfig(mapPropsToComponent);
	},
	toggleDeviceVisibility(id, mapPropsToComponent) {
		const selectedDevice = deviceSearch.selectedIDS[id];
		selectedDevice.visible = !selectedDevice.visible;
		deviceSearch.saveConfig(mapPropsToComponent);
	},
	zoomIntoDevice(id) {
		const deviceMarker = markerList[id];
		if (deviceMarker) {
			const newZoomLevel = Math.max(Math.min(storage.map.getZoom() + 1, 18), 15);
			storage.map.flyTo(deviceMarker.currentlatLng, newZoomLevel);
		} else {
			alert("Sorry, no current day data for selected vehicle.");
		}
	}
}