Ohm-Management - Projektarbeit B-ME
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

VTimePicker.js 13KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309
  1. var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
  2. // Components
  3. import VTimePickerTitle from './VTimePickerTitle';
  4. import VTimePickerClock from './VTimePickerClock';
  5. // Mixins
  6. import Picker from '../../mixins/picker';
  7. // Utils
  8. import { createRange } from '../../util/helpers';
  9. import pad from '../VDatePicker/util/pad';
  10. import mixins from '../../util/mixins';
  11. var rangeHours24 = createRange(24);
  12. var rangeHours12am = createRange(12);
  13. var rangeHours12pm = rangeHours12am.map(function (v) {
  14. return v + 12;
  15. });
  16. var range60 = createRange(60);
  17. var selectingTimes = { hour: 1, minute: 2, second: 3 };
  18. var selectingNames = { 1: 'hour', 2: 'minute', 3: 'second' };
  19. export { selectingTimes };
  20. export default mixins(Picker
  21. /* @vue/component */
  22. ).extend({
  23. name: 'v-time-picker',
  24. props: {
  25. allowedHours: Function,
  26. allowedMinutes: Function,
  27. allowedSeconds: Function,
  28. disabled: Boolean,
  29. format: {
  30. type: String,
  31. default: 'ampm',
  32. validator: function validator(val) {
  33. return ['ampm', '24hr'].includes(val);
  34. }
  35. },
  36. min: String,
  37. max: String,
  38. readonly: Boolean,
  39. scrollable: Boolean,
  40. useSeconds: Boolean,
  41. value: null
  42. },
  43. data: function data() {
  44. return {
  45. inputHour: null,
  46. inputMinute: null,
  47. inputSecond: null,
  48. lazyInputHour: null,
  49. lazyInputMinute: null,
  50. lazyInputSecond: null,
  51. period: 'am',
  52. selecting: selectingTimes.hour
  53. };
  54. },
  55. computed: {
  56. selectingHour: {
  57. get: function get() {
  58. return this.selecting === selectingTimes.hour;
  59. },
  60. set: function set(v) {
  61. this.selecting = selectingTimes.hour;
  62. }
  63. },
  64. selectingMinute: {
  65. get: function get() {
  66. return this.selecting === selectingTimes.minute;
  67. },
  68. set: function set(v) {
  69. this.selecting = selectingTimes.minute;
  70. }
  71. },
  72. selectingSecond: {
  73. get: function get() {
  74. return this.selecting === selectingTimes.second;
  75. },
  76. set: function set(v) {
  77. this.selecting = selectingTimes.second;
  78. }
  79. },
  80. isAllowedHourCb: function isAllowedHourCb() {
  81. var _this = this;
  82. if (!this.min && !this.max) return this.allowedHours;
  83. var minHour = this.min ? Number(this.min.split(':')[0]) : 0;
  84. var maxHour = this.max ? Number(this.max.split(':')[0]) : 23;
  85. return function (val) {
  86. return val >= minHour * 1 && val <= maxHour * 1 && (!_this.allowedHours || _this.allowedHours(val));
  87. };
  88. },
  89. isAllowedMinuteCb: function isAllowedMinuteCb() {
  90. var _this2 = this;
  91. var isHourAllowed = !this.allowedHours || this.allowedHours(this.inputHour);
  92. if (!this.min && !this.max) {
  93. return isHourAllowed ? this.allowedMinutes : function () {
  94. return false;
  95. };
  96. }
  97. var _ref = this.min ? this.min.split(':').map(Number) : [0, 0],
  98. _ref2 = _slicedToArray(_ref, 2),
  99. minHour = _ref2[0],
  100. minMinute = _ref2[1];
  101. var _ref3 = this.max ? this.max.split(':').map(Number) : [23, 59],
  102. _ref4 = _slicedToArray(_ref3, 2),
  103. maxHour = _ref4[0],
  104. maxMinute = _ref4[1];
  105. var minTime = minHour * 60 + minMinute * 1;
  106. var maxTime = maxHour * 60 + maxMinute * 1;
  107. return function (val) {
  108. var time = 60 * _this2.inputHour + val;
  109. return time >= minTime && time <= maxTime && isHourAllowed && (!_this2.allowedMinutes || _this2.allowedMinutes(val));
  110. };
  111. },
  112. isAllowedSecondCb: function isAllowedSecondCb() {
  113. var _this3 = this;
  114. var isHourAllowed = !this.allowedHours || this.allowedHours(this.inputHour);
  115. var isMinuteAllowed = !this.allowedMinutes || this.allowedMinutes(this.inputMinute);
  116. if (!this.min && !this.max) {
  117. return isHourAllowed && isMinuteAllowed ? this.allowedSeconds : function () {
  118. return false;
  119. };
  120. }
  121. var _ref5 = this.min ? this.min.split(':').map(Number) : [0, 0, 0],
  122. _ref6 = _slicedToArray(_ref5, 3),
  123. minHour = _ref6[0],
  124. minMinute = _ref6[1],
  125. minSecond = _ref6[2];
  126. var _ref7 = this.max ? this.max.split(':').map(Number) : [23, 59, 59],
  127. _ref8 = _slicedToArray(_ref7, 3),
  128. maxHour = _ref8[0],
  129. maxMinute = _ref8[1],
  130. maxSecond = _ref8[2];
  131. var minTime = minHour * 3600 + minMinute * 60 + (minSecond || 0) * 1;
  132. var maxTime = maxHour * 3600 + maxMinute * 60 + (maxSecond || 0) * 1;
  133. return function (val) {
  134. var time = 3600 * _this3.inputHour + 60 * _this3.inputMinute + val;
  135. return time >= minTime && time <= maxTime && isHourAllowed && isMinuteAllowed && (!_this3.allowedSeconds || _this3.allowedSeconds(val));
  136. };
  137. },
  138. isAmPm: function isAmPm() {
  139. return this.format === 'ampm';
  140. }
  141. },
  142. watch: {
  143. value: 'setInputData'
  144. },
  145. mounted: function mounted() {
  146. this.setInputData(this.value);
  147. },
  148. methods: {
  149. genValue: function genValue() {
  150. if (this.inputHour != null && this.inputMinute != null && (!this.useSeconds || this.inputSecond != null)) {
  151. return pad(this.inputHour) + ':' + pad(this.inputMinute) + (this.useSeconds ? ':' + pad(this.inputSecond) : '');
  152. }
  153. return null;
  154. },
  155. emitValue: function emitValue() {
  156. var value = this.genValue();
  157. if (value !== null) this.$emit('input', value);
  158. },
  159. setPeriod: function setPeriod(period) {
  160. this.period = period;
  161. if (this.inputHour != null) {
  162. var newHour = this.inputHour + (period === 'am' ? -12 : 12);
  163. this.inputHour = this.firstAllowed('hour', newHour);
  164. this.emitValue();
  165. }
  166. },
  167. setInputData: function setInputData(value) {
  168. if (value == null || value === '') {
  169. this.inputHour = null;
  170. this.inputMinute = null;
  171. this.inputSecond = null;
  172. } else if (value instanceof Date) {
  173. this.inputHour = value.getHours();
  174. this.inputMinute = value.getMinutes();
  175. this.inputSecond = value.getSeconds();
  176. } else {
  177. var _ref9 = value.trim().toLowerCase().match(/^(\d+):(\d+)(:(\d+))?([ap]m)?$/) || new Array(6),
  178. _ref10 = _slicedToArray(_ref9, 6),
  179. hour = _ref10[1],
  180. minute = _ref10[2],
  181. second = _ref10[4],
  182. period = _ref10[5];
  183. this.inputHour = period ? this.convert12to24(parseInt(hour, 10), period) : parseInt(hour, 10);
  184. this.inputMinute = parseInt(minute, 10);
  185. this.inputSecond = parseInt(second || 0, 10);
  186. }
  187. this.period = this.inputHour == null || this.inputHour < 12 ? 'am' : 'pm';
  188. },
  189. convert24to12: function convert24to12(hour) {
  190. return hour ? (hour - 1) % 12 + 1 : 12;
  191. },
  192. convert12to24: function convert12to24(hour, period) {
  193. return hour % 12 + (period === 'pm' ? 12 : 0);
  194. },
  195. onInput: function onInput(value) {
  196. if (this.selecting === selectingTimes.hour) {
  197. this.inputHour = this.isAmPm ? this.convert12to24(value, this.period) : value;
  198. } else if (this.selecting === selectingTimes.minute) {
  199. this.inputMinute = value;
  200. } else {
  201. this.inputSecond = value;
  202. }
  203. this.emitValue();
  204. },
  205. onChange: function onChange(value) {
  206. this.$emit('click:' + selectingNames[this.selecting], value);
  207. var emitChange = this.selecting === (this.useSeconds ? selectingTimes.second : selectingTimes.minute);
  208. if (this.selecting === selectingTimes.hour) {
  209. this.selecting = selectingTimes.minute;
  210. } else if (this.useSeconds && this.selecting === selectingTimes.minute) {
  211. this.selecting = selectingTimes.second;
  212. }
  213. if (this.inputHour === this.lazyInputHour && this.inputMinute === this.lazyInputMinute && (!this.useSeconds || this.inputSecond === this.lazyInputSecond)) return;
  214. var time = this.genValue();
  215. if (time === null) return;
  216. this.lazyInputHour = this.inputHour;
  217. this.lazyInputMinute = this.inputMinute;
  218. this.useSeconds && (this.lazyInputSecond = this.inputSecond);
  219. emitChange && this.$emit('change', time);
  220. },
  221. firstAllowed: function firstAllowed(type, value) {
  222. var allowedFn = type === 'hour' ? this.isAllowedHourCb : type === 'minute' ? this.isAllowedMinuteCb : this.isAllowedSecondCb;
  223. if (!allowedFn) return value;
  224. // TODO: clean up
  225. var range = type === 'minute' ? range60 : type === 'second' ? range60 : this.isAmPm ? value < 12 ? rangeHours12am : rangeHours12pm : rangeHours24;
  226. var first = range.find(function (v) {
  227. return allowedFn((v + value) % range.length + range[0]);
  228. });
  229. return ((first || 0) + value) % range.length + range[0];
  230. },
  231. genClock: function genClock() {
  232. return this.$createElement(VTimePickerClock, {
  233. props: {
  234. allowedValues: this.selecting === selectingTimes.hour ? this.isAllowedHourCb : this.selecting === selectingTimes.minute ? this.isAllowedMinuteCb : this.isAllowedSecondCb,
  235. color: this.color,
  236. dark: this.dark,
  237. disabled: this.disabled,
  238. double: this.selecting === selectingTimes.hour && !this.isAmPm,
  239. format: this.selecting === selectingTimes.hour ? this.isAmPm ? this.convert24to12 : function (val) {
  240. return val;
  241. } : function (val) {
  242. return pad(val, 2);
  243. },
  244. light: this.light,
  245. max: this.selecting === selectingTimes.hour ? this.isAmPm && this.period === 'am' ? 11 : 23 : 59,
  246. min: this.selecting === selectingTimes.hour && this.isAmPm && this.period === 'pm' ? 12 : 0,
  247. readonly: this.readonly,
  248. scrollable: this.scrollable,
  249. size: Number(this.width) - (!this.fullWidth && this.landscape ? 80 : 20),
  250. step: this.selecting === selectingTimes.hour ? 1 : 5,
  251. value: this.selecting === selectingTimes.hour ? this.inputHour : this.selecting === selectingTimes.minute ? this.inputMinute : this.inputSecond
  252. },
  253. on: {
  254. input: this.onInput,
  255. change: this.onChange
  256. },
  257. ref: 'clock'
  258. });
  259. },
  260. genPickerBody: function genPickerBody() {
  261. return this.$createElement('div', {
  262. staticClass: 'v-time-picker-clock__container',
  263. key: this.selecting
  264. }, [this.genClock()]);
  265. },
  266. genPickerTitle: function genPickerTitle() {
  267. var _this4 = this;
  268. return this.$createElement(VTimePickerTitle, {
  269. props: {
  270. ampm: this.isAmPm,
  271. disabled: this.disabled,
  272. hour: this.inputHour,
  273. minute: this.inputMinute,
  274. second: this.inputSecond,
  275. period: this.period,
  276. readonly: this.readonly,
  277. useSeconds: this.useSeconds,
  278. selecting: this.selecting
  279. },
  280. on: {
  281. 'update:selecting': function updateSelecting(value) {
  282. return _this4.selecting = value;
  283. },
  284. 'update:period': this.setPeriod
  285. },
  286. ref: 'title',
  287. slot: 'title'
  288. });
  289. }
  290. },
  291. render: function render() {
  292. return this.genPicker('v-picker--time');
  293. }
  294. });
  295. //# sourceMappingURL=VTimePicker.js.map