diff --git a/www/index.html b/www/index.html index ee498ca..ebfe570 100644 --- a/www/index.html +++ b/www/index.html @@ -14,6 +14,7 @@ href="./src/lib/bootstrap-icons-1.11.3/font/bootstrap-icons.css" rel="stylesheet" /> + Playback Device Server diff --git a/www/src/data/command.js b/www/src/data/command.js index 2e27e8b..0900858 100644 --- a/www/src/data/command.js +++ b/www/src/data/command.js @@ -1,9 +1,16 @@ -function Command({ id, protocol, command, device, command_type, title } = {}) { +function Command({ + id, + protocol, + command: commandNumber, + device, + commandType, + title, +} = {}) { let _id = id; let _protocol = protocol; - let _command = command; + let _commandNumber = commandNumber; let _device = device; - let _command_type = command_type; + let _commandType = commandType; let _title = title; function getId() { @@ -22,12 +29,12 @@ function Command({ id, protocol, command, device, command_type, title } = {}) { _protocol = protocol; } - function getCommand() { - return _command; + function getCommandNumber() { + return _commandNumber; } - function setCommand(command) { - _command = command; + function setCommandNumber(commandNumber) { + _commandNumber = commandNumber; } function getDevice() { @@ -39,11 +46,11 @@ function Command({ id, protocol, command, device, command_type, title } = {}) { } function getCommandType() { - return _command_type; + return _commandType; } - function setCommandType(command_type) { - _command_type = command_type; + function setCommandType(commandType) { + _commandType = commandType; } function getTitle() { @@ -59,8 +66,8 @@ function Command({ id, protocol, command, device, command_type, title } = {}) { setId, getProtocol, setProtocol, - getCommand, - setCommand, + getCommandNumber, + setCommandNumber, getDevice, setDevice, getCommandType, @@ -70,4 +77,73 @@ function Command({ id, protocol, command, device, command_type, title } = {}) { }; } +Command.Protocols = { + samsung: "Samsung", + nec: "NEC", + onkyo: "Onkyo", + apple: "Apple", + denon: "Denon", + sharp: "Sharp", + panasonic: "Panasonic", + kaseikyo: "Kaseikyo", + jvc: "JVC", + lg: "LG", + sony: "Sony", + rc5: "RC5", + rc6: "RC6", + universal_pulse_distance: "Universal Pulse Distance", + universal_pulse_width: "Universal Pulse Width", + universal_pulse_distance_width: "Universal Pulse Distance Width", + hash: "Hash", + pronto: "Pronto", + bose_wave: "BoseWave", + bang_olufsen: "Bang & Olufsen", + lego: "Lego", + fast: "FAST", + whynter: "Whynter", + magiquest: "MagiQuest", +} + +Command.CommandTypes = { + power: "Power", + input: "Input", + one: "1", + two: "2", + three: "3", + four: "4", + five: "5", + six: "6", + seven: "7", + eight: "8", + nine: "9", + zero: "0", + volume_up: "Volume Up", + volume_down: "Volume Down", + mute: "Mute", + channel_up: "Channel Up", + channel_down: "Channel Down", + menu: "Menu", + home: "Home", + settings: "Settings", + options: "Options", + up_arrow: "Up Arrow", + down_arrow: "Down Arrow", + left_arrow: "Left Arrow", + right_arrow: "Right Arrow", + select: "Select", + info: "Info", + back: "Back", + exit: "Exit", + red: "Red", + green: "Green", + yellow: "Yellow", + blue: "Blue", + rewind: "Rewind", + play: "Play", + pause: "Pause", + stop: "Stop", + forward: "Forward", + other: "Other", +} + export default Command; diff --git a/www/src/data/serializer.js b/www/src/data/serializer.js index 38dfc7e..4c6445d 100644 --- a/www/src/data/serializer.js +++ b/www/src/data/serializer.js @@ -1,6 +1,7 @@ import PlaybackDevice from "./playback-device.js"; import User from "./user.js"; import Integration from "./integration.js"; +import Command from "./command.js"; const Serializer = (function () { function deserializeUser(object) { @@ -29,6 +30,15 @@ const Serializer = (function () { if (!objects) return []; return objects.map((object) => deserializeIntegration(object)); } + + function deserializeCommand(object) { + return new Command(object); + } + + function deserializeCommands(objects) { + if (!objects) return []; + return objects.map((object) => deserializeCommand(object)); + } return { deserializeUser, @@ -37,6 +47,8 @@ const Serializer = (function () { deserializeDevices, deserializeIntegration, deserializeIntegrations, + deserializeCommand, + deserializeCommands, }; })(); diff --git a/www/src/lib/popper.min.js b/www/src/lib/popper.min.js new file mode 100644 index 0000000..3938564 --- /dev/null +++ b/www/src/lib/popper.min.js @@ -0,0 +1,6 @@ +/** + * @popperjs/core v2.11.8 - MIT License + */ + +!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).Popper={})}(this,(function(e){"use strict";function t(e){if(null==e)return window;if("[object Window]"!==e.toString()){var t=e.ownerDocument;return t&&t.defaultView||window}return e}function n(e){return e instanceof t(e).Element||e instanceof Element}function r(e){return e instanceof t(e).HTMLElement||e instanceof HTMLElement}function o(e){return"undefined"!=typeof ShadowRoot&&(e instanceof t(e).ShadowRoot||e instanceof ShadowRoot)}var i=Math.max,a=Math.min,s=Math.round;function f(){var e=navigator.userAgentData;return null!=e&&e.brands&&Array.isArray(e.brands)?e.brands.map((function(e){return e.brand+"/"+e.version})).join(" "):navigator.userAgent}function c(){return!/^((?!chrome|android).)*safari/i.test(f())}function p(e,o,i){void 0===o&&(o=!1),void 0===i&&(i=!1);var a=e.getBoundingClientRect(),f=1,p=1;o&&r(e)&&(f=e.offsetWidth>0&&s(a.width)/e.offsetWidth||1,p=e.offsetHeight>0&&s(a.height)/e.offsetHeight||1);var u=(n(e)?t(e):window).visualViewport,l=!c()&&i,d=(a.left+(l&&u?u.offsetLeft:0))/f,h=(a.top+(l&&u?u.offsetTop:0))/p,m=a.width/f,v=a.height/p;return{width:m,height:v,top:h,right:d+m,bottom:h+v,left:d,x:d,y:h}}function u(e){var n=t(e);return{scrollLeft:n.pageXOffset,scrollTop:n.pageYOffset}}function l(e){return e?(e.nodeName||"").toLowerCase():null}function d(e){return((n(e)?e.ownerDocument:e.document)||window.document).documentElement}function h(e){return p(d(e)).left+u(e).scrollLeft}function m(e){return t(e).getComputedStyle(e)}function v(e){var t=m(e),n=t.overflow,r=t.overflowX,o=t.overflowY;return/auto|scroll|overlay|hidden/.test(n+o+r)}function y(e,n,o){void 0===o&&(o=!1);var i,a,f=r(n),c=r(n)&&function(e){var t=e.getBoundingClientRect(),n=s(t.width)/e.offsetWidth||1,r=s(t.height)/e.offsetHeight||1;return 1!==n||1!==r}(n),m=d(n),y=p(e,c,o),g={scrollLeft:0,scrollTop:0},b={x:0,y:0};return(f||!f&&!o)&&(("body"!==l(n)||v(m))&&(g=(i=n)!==t(i)&&r(i)?{scrollLeft:(a=i).scrollLeft,scrollTop:a.scrollTop}:u(i)),r(n)?((b=p(n,!0)).x+=n.clientLeft,b.y+=n.clientTop):m&&(b.x=h(m))),{x:y.left+g.scrollLeft-b.x,y:y.top+g.scrollTop-b.y,width:y.width,height:y.height}}function g(e){var t=p(e),n=e.offsetWidth,r=e.offsetHeight;return Math.abs(t.width-n)<=1&&(n=t.width),Math.abs(t.height-r)<=1&&(r=t.height),{x:e.offsetLeft,y:e.offsetTop,width:n,height:r}}function b(e){return"html"===l(e)?e:e.assignedSlot||e.parentNode||(o(e)?e.host:null)||d(e)}function x(e){return["html","body","#document"].indexOf(l(e))>=0?e.ownerDocument.body:r(e)&&v(e)?e:x(b(e))}function w(e,n){var r;void 0===n&&(n=[]);var o=x(e),i=o===(null==(r=e.ownerDocument)?void 0:r.body),a=t(o),s=i?[a].concat(a.visualViewport||[],v(o)?o:[]):o,f=n.concat(s);return i?f:f.concat(w(b(s)))}function O(e){return["table","td","th"].indexOf(l(e))>=0}function j(e){return r(e)&&"fixed"!==m(e).position?e.offsetParent:null}function E(e){for(var n=t(e),i=j(e);i&&O(i)&&"static"===m(i).position;)i=j(i);return i&&("html"===l(i)||"body"===l(i)&&"static"===m(i).position)?n:i||function(e){var t=/firefox/i.test(f());if(/Trident/i.test(f())&&r(e)&&"fixed"===m(e).position)return null;var n=b(e);for(o(n)&&(n=n.host);r(n)&&["html","body"].indexOf(l(n))<0;){var i=m(n);if("none"!==i.transform||"none"!==i.perspective||"paint"===i.contain||-1!==["transform","perspective"].indexOf(i.willChange)||t&&"filter"===i.willChange||t&&i.filter&&"none"!==i.filter)return n;n=n.parentNode}return null}(e)||n}var D="top",A="bottom",L="right",P="left",M="auto",k=[D,A,L,P],W="start",B="end",H="viewport",T="popper",R=k.reduce((function(e,t){return e.concat([t+"-"+W,t+"-"+B])}),[]),S=[].concat(k,[M]).reduce((function(e,t){return e.concat([t,t+"-"+W,t+"-"+B])}),[]),V=["beforeRead","read","afterRead","beforeMain","main","afterMain","beforeWrite","write","afterWrite"];function q(e){var t=new Map,n=new Set,r=[];function o(e){n.add(e.name),[].concat(e.requires||[],e.requiresIfExists||[]).forEach((function(e){if(!n.has(e)){var r=t.get(e);r&&o(r)}})),r.push(e)}return e.forEach((function(e){t.set(e.name,e)})),e.forEach((function(e){n.has(e.name)||o(e)})),r}function C(e,t){var n=t.getRootNode&&t.getRootNode();if(e.contains(t))return!0;if(n&&o(n)){var r=t;do{if(r&&e.isSameNode(r))return!0;r=r.parentNode||r.host}while(r)}return!1}function N(e){return Object.assign({},e,{left:e.x,top:e.y,right:e.x+e.width,bottom:e.y+e.height})}function I(e,r,o){return r===H?N(function(e,n){var r=t(e),o=d(e),i=r.visualViewport,a=o.clientWidth,s=o.clientHeight,f=0,p=0;if(i){a=i.width,s=i.height;var u=c();(u||!u&&"fixed"===n)&&(f=i.offsetLeft,p=i.offsetTop)}return{width:a,height:s,x:f+h(e),y:p}}(e,o)):n(r)?function(e,t){var n=p(e,!1,"fixed"===t);return n.top=n.top+e.clientTop,n.left=n.left+e.clientLeft,n.bottom=n.top+e.clientHeight,n.right=n.left+e.clientWidth,n.width=e.clientWidth,n.height=e.clientHeight,n.x=n.left,n.y=n.top,n}(r,o):N(function(e){var t,n=d(e),r=u(e),o=null==(t=e.ownerDocument)?void 0:t.body,a=i(n.scrollWidth,n.clientWidth,o?o.scrollWidth:0,o?o.clientWidth:0),s=i(n.scrollHeight,n.clientHeight,o?o.scrollHeight:0,o?o.clientHeight:0),f=-r.scrollLeft+h(e),c=-r.scrollTop;return"rtl"===m(o||n).direction&&(f+=i(n.clientWidth,o?o.clientWidth:0)-a),{width:a,height:s,x:f,y:c}}(d(e)))}function _(e,t,o,s){var f="clippingParents"===t?function(e){var t=w(b(e)),o=["absolute","fixed"].indexOf(m(e).position)>=0&&r(e)?E(e):e;return n(o)?t.filter((function(e){return n(e)&&C(e,o)&&"body"!==l(e)})):[]}(e):[].concat(t),c=[].concat(f,[o]),p=c[0],u=c.reduce((function(t,n){var r=I(e,n,s);return t.top=i(r.top,t.top),t.right=a(r.right,t.right),t.bottom=a(r.bottom,t.bottom),t.left=i(r.left,t.left),t}),I(e,p,s));return u.width=u.right-u.left,u.height=u.bottom-u.top,u.x=u.left,u.y=u.top,u}function F(e){return e.split("-")[0]}function U(e){return e.split("-")[1]}function z(e){return["top","bottom"].indexOf(e)>=0?"x":"y"}function X(e){var t,n=e.reference,r=e.element,o=e.placement,i=o?F(o):null,a=o?U(o):null,s=n.x+n.width/2-r.width/2,f=n.y+n.height/2-r.height/2;switch(i){case D:t={x:s,y:n.y-r.height};break;case A:t={x:s,y:n.y+n.height};break;case L:t={x:n.x+n.width,y:f};break;case P:t={x:n.x-r.width,y:f};break;default:t={x:n.x,y:n.y}}var c=i?z(i):null;if(null!=c){var p="y"===c?"height":"width";switch(a){case W:t[c]=t[c]-(n[p]/2-r[p]/2);break;case B:t[c]=t[c]+(n[p]/2-r[p]/2)}}return t}function Y(e){return Object.assign({},{top:0,right:0,bottom:0,left:0},e)}function G(e,t){return t.reduce((function(t,n){return t[n]=e,t}),{})}function J(e,t){void 0===t&&(t={});var r=t,o=r.placement,i=void 0===o?e.placement:o,a=r.strategy,s=void 0===a?e.strategy:a,f=r.boundary,c=void 0===f?"clippingParents":f,u=r.rootBoundary,l=void 0===u?H:u,h=r.elementContext,m=void 0===h?T:h,v=r.altBoundary,y=void 0!==v&&v,g=r.padding,b=void 0===g?0:g,x=Y("number"!=typeof b?b:G(b,k)),w=m===T?"reference":T,O=e.rects.popper,j=e.elements[y?w:m],E=_(n(j)?j:j.contextElement||d(e.elements.popper),c,l,s),P=p(e.elements.reference),M=X({reference:P,element:O,strategy:"absolute",placement:i}),W=N(Object.assign({},O,M)),B=m===T?W:P,R={top:E.top-B.top+x.top,bottom:B.bottom-E.bottom+x.bottom,left:E.left-B.left+x.left,right:B.right-E.right+x.right},S=e.modifiersData.offset;if(m===T&&S){var V=S[i];Object.keys(R).forEach((function(e){var t=[L,A].indexOf(e)>=0?1:-1,n=[D,A].indexOf(e)>=0?"y":"x";R[e]+=V[n]*t}))}return R}var K={placement:"bottom",modifiers:[],strategy:"absolute"};function Q(){for(var e=arguments.length,t=new Array(e),n=0;n=0?-1:1,i="function"==typeof n?n(Object.assign({},t,{placement:e})):n,a=i[0],s=i[1];return a=a||0,s=(s||0)*o,[P,L].indexOf(r)>=0?{x:s,y:a}:{x:a,y:s}}(n,t.rects,i),e}),{}),s=a[t.placement],f=s.x,c=s.y;null!=t.modifiersData.popperOffsets&&(t.modifiersData.popperOffsets.x+=f,t.modifiersData.popperOffsets.y+=c),t.modifiersData[r]=a}},se={left:"right",right:"left",bottom:"top",top:"bottom"};function fe(e){return e.replace(/left|right|bottom|top/g,(function(e){return se[e]}))}var ce={start:"end",end:"start"};function pe(e){return e.replace(/start|end/g,(function(e){return ce[e]}))}function ue(e,t){void 0===t&&(t={});var n=t,r=n.placement,o=n.boundary,i=n.rootBoundary,a=n.padding,s=n.flipVariations,f=n.allowedAutoPlacements,c=void 0===f?S:f,p=U(r),u=p?s?R:R.filter((function(e){return U(e)===p})):k,l=u.filter((function(e){return c.indexOf(e)>=0}));0===l.length&&(l=u);var d=l.reduce((function(t,n){return t[n]=J(e,{placement:n,boundary:o,rootBoundary:i,padding:a})[F(n)],t}),{});return Object.keys(d).sort((function(e,t){return d[e]-d[t]}))}var le={name:"flip",enabled:!0,phase:"main",fn:function(e){var t=e.state,n=e.options,r=e.name;if(!t.modifiersData[r]._skip){for(var o=n.mainAxis,i=void 0===o||o,a=n.altAxis,s=void 0===a||a,f=n.fallbackPlacements,c=n.padding,p=n.boundary,u=n.rootBoundary,l=n.altBoundary,d=n.flipVariations,h=void 0===d||d,m=n.allowedAutoPlacements,v=t.options.placement,y=F(v),g=f||(y===v||!h?[fe(v)]:function(e){if(F(e)===M)return[];var t=fe(e);return[pe(e),t,pe(t)]}(v)),b=[v].concat(g).reduce((function(e,n){return e.concat(F(n)===M?ue(t,{placement:n,boundary:p,rootBoundary:u,padding:c,flipVariations:h,allowedAutoPlacements:m}):n)}),[]),x=t.rects.reference,w=t.rects.popper,O=new Map,j=!0,E=b[0],k=0;k=0,S=R?"width":"height",V=J(t,{placement:B,boundary:p,rootBoundary:u,altBoundary:l,padding:c}),q=R?T?L:P:T?A:D;x[S]>w[S]&&(q=fe(q));var C=fe(q),N=[];if(i&&N.push(V[H]<=0),s&&N.push(V[q]<=0,V[C]<=0),N.every((function(e){return e}))){E=B,j=!1;break}O.set(B,N)}if(j)for(var I=function(e){var t=b.find((function(t){var n=O.get(t);if(n)return n.slice(0,e).every((function(e){return e}))}));if(t)return E=t,"break"},_=h?3:1;_>0;_--){if("break"===I(_))break}t.placement!==E&&(t.modifiersData[r]._skip=!0,t.placement=E,t.reset=!0)}},requiresIfExists:["offset"],data:{_skip:!1}};function de(e,t,n){return i(e,a(t,n))}var he={name:"preventOverflow",enabled:!0,phase:"main",fn:function(e){var t=e.state,n=e.options,r=e.name,o=n.mainAxis,s=void 0===o||o,f=n.altAxis,c=void 0!==f&&f,p=n.boundary,u=n.rootBoundary,l=n.altBoundary,d=n.padding,h=n.tether,m=void 0===h||h,v=n.tetherOffset,y=void 0===v?0:v,b=J(t,{boundary:p,rootBoundary:u,padding:d,altBoundary:l}),x=F(t.placement),w=U(t.placement),O=!w,j=z(x),M="x"===j?"y":"x",k=t.modifiersData.popperOffsets,B=t.rects.reference,H=t.rects.popper,T="function"==typeof y?y(Object.assign({},t.rects,{placement:t.placement})):y,R="number"==typeof T?{mainAxis:T,altAxis:T}:Object.assign({mainAxis:0,altAxis:0},T),S=t.modifiersData.offset?t.modifiersData.offset[t.placement]:null,V={x:0,y:0};if(k){if(s){var q,C="y"===j?D:P,N="y"===j?A:L,I="y"===j?"height":"width",_=k[j],X=_+b[C],Y=_-b[N],G=m?-H[I]/2:0,K=w===W?B[I]:H[I],Q=w===W?-H[I]:-B[I],Z=t.elements.arrow,$=m&&Z?g(Z):{width:0,height:0},ee=t.modifiersData["arrow#persistent"]?t.modifiersData["arrow#persistent"].padding:{top:0,right:0,bottom:0,left:0},te=ee[C],ne=ee[N],re=de(0,B[I],$[I]),oe=O?B[I]/2-G-re-te-R.mainAxis:K-re-te-R.mainAxis,ie=O?-B[I]/2+G+re+ne+R.mainAxis:Q+re+ne+R.mainAxis,ae=t.elements.arrow&&E(t.elements.arrow),se=ae?"y"===j?ae.clientTop||0:ae.clientLeft||0:0,fe=null!=(q=null==S?void 0:S[j])?q:0,ce=_+ie-fe,pe=de(m?a(X,_+oe-fe-se):X,_,m?i(Y,ce):Y);k[j]=pe,V[j]=pe-_}if(c){var ue,le="x"===j?D:P,he="x"===j?A:L,me=k[M],ve="y"===M?"height":"width",ye=me+b[le],ge=me-b[he],be=-1!==[D,P].indexOf(x),xe=null!=(ue=null==S?void 0:S[M])?ue:0,we=be?ye:me-B[ve]-H[ve]-xe+R.altAxis,Oe=be?me+B[ve]+H[ve]-xe-R.altAxis:ge,je=m&&be?function(e,t,n){var r=de(e,t,n);return r>n?n:r}(we,me,Oe):de(m?we:ye,me,m?Oe:ge);k[M]=je,V[M]=je-me}t.modifiersData[r]=V}},requiresIfExists:["offset"]};var me={name:"arrow",enabled:!0,phase:"main",fn:function(e){var t,n=e.state,r=e.name,o=e.options,i=n.elements.arrow,a=n.modifiersData.popperOffsets,s=F(n.placement),f=z(s),c=[P,L].indexOf(s)>=0?"height":"width";if(i&&a){var p=function(e,t){return Y("number"!=typeof(e="function"==typeof e?e(Object.assign({},t.rects,{placement:t.placement})):e)?e:G(e,k))}(o.padding,n),u=g(i),l="y"===f?D:P,d="y"===f?A:L,h=n.rects.reference[c]+n.rects.reference[f]-a[f]-n.rects.popper[c],m=a[f]-n.rects.reference[f],v=E(i),y=v?"y"===f?v.clientHeight||0:v.clientWidth||0:0,b=h/2-m/2,x=p[l],w=y-u[c]-p[d],O=y/2-u[c]/2+b,j=de(x,O,w),M=f;n.modifiersData[r]=((t={})[M]=j,t.centerOffset=j-O,t)}},effect:function(e){var t=e.state,n=e.options.element,r=void 0===n?"[data-popper-arrow]":n;null!=r&&("string"!=typeof r||(r=t.elements.popper.querySelector(r)))&&C(t.elements.popper,r)&&(t.elements.arrow=r)},requires:["popperOffsets"],requiresIfExists:["preventOverflow"]};function ve(e,t,n){return void 0===n&&(n={x:0,y:0}),{top:e.top-t.height-n.y,right:e.right-t.width+n.x,bottom:e.bottom-t.height+n.y,left:e.left-t.width-n.x}}function ye(e){return[D,L,A,P].some((function(t){return e[t]>=0}))}var ge={name:"hide",enabled:!0,phase:"main",requiresIfExists:["preventOverflow"],fn:function(e){var t=e.state,n=e.name,r=t.rects.reference,o=t.rects.popper,i=t.modifiersData.preventOverflow,a=J(t,{elementContext:"reference"}),s=J(t,{altBoundary:!0}),f=ve(a,r),c=ve(s,o,i),p=ye(f),u=ye(c);t.modifiersData[n]={referenceClippingOffsets:f,popperEscapeOffsets:c,isReferenceHidden:p,hasPopperEscaped:u},t.attributes.popper=Object.assign({},t.attributes.popper,{"data-popper-reference-hidden":p,"data-popper-escaped":u})}},be=Z({defaultModifiers:[ee,te,oe,ie]}),xe=[ee,te,oe,ie,ae,le,he,me,ge],we=Z({defaultModifiers:xe});e.applyStyles=ie,e.arrow=me,e.computeStyles=oe,e.createPopper=we,e.createPopperLite=be,e.defaultModifiers=xe,e.detectOverflow=J,e.eventListeners=ee,e.flip=le,e.hide=ge,e.offset=ae,e.popperGenerator=Z,e.popperOffsets=te,e.preventOverflow=he,Object.defineProperty(e,"__esModule",{value:!0})})); +//# sourceMappingURL=popper.min.js.map diff --git a/www/src/modals/create-command-modal.jsx b/www/src/modals/create-command-modal.jsx new file mode 100644 index 0000000..3351108 --- /dev/null +++ b/www/src/modals/create-command-modal.jsx @@ -0,0 +1,215 @@ +import { createEffect, createMemo, createSignal } from "solid-js"; +import ValidatedTextInput from "../modules/validated-text-input.jsx"; +import EventEmitter from "../tools/event-emitter.js"; +import ModalHandler from "./modal-handler.js"; +import Modal from "./modal.jsx"; +import RemotesService from "../services/remotes-service.js"; +import Command from "../data/command.js"; + +const eventEmitter = new EventEmitter(); +const COMMAND_CREATED_EVENT = "success"; +const MIN_TITLE_LENGTH = 3; + +function CreateCommandModal(props) { + const [protocol, setProtocol] = createSignal(""); + const [commandNumber, setCommandNumber] = createSignal(""); + const [device, setDevice] = createSignal(""); + const [commandType, setCommandType] = createSignal(""); + const [title, setTitle] = createSignal(""); + const [error, setError] = createSignal(""); + + const isProtocolValid = createMemo(() => protocol() !== ""); + const isCommandNumberValid = createMemo( + () => commandNumber() !== "" && !isNaN(commandNumber()) + ); + const isDeviceValid = createMemo(() => device() !== "" && !isNaN(device())); + const isCommandTypeValid = createMemo(() => commandType() !== ""); + const isTitleValid = createMemo(() => title().length >= MIN_TITLE_LENGTH); + + createEffect(() => { + let commandString = commandType() ? Command.CommandTypes[commandType()] : ""; + let protocolString = protocol() ? Command.Protocols[protocol()] : ""; + setTitle(commandString + " " + protocolString); + }); + + const isFormValid = createMemo( + () => + isProtocolValid() && + isCommandNumberValid() && + isDeviceValid() && + isCommandTypeValid() && + isTitleValid() + ); + + async function handleCreateCommand() { + let command; + try { + command = await RemotesService.createCommand({ + protocol: protocol(), + commandNumber: commandNumber(), + device: device(), + commandType: commandType(), + title: title(), + }); + } catch (e) { + setError(e.message); + return; + } + resetFields(); + CreateCommandModal.Handler.hide(); + eventEmitter.dispatchEvent(COMMAND_CREATED_EVENT, command); + } + + function resetFields() { + setProtocol(""); + setCommandNumber(""); + setDevice(""); + setCommandType(""); + setTitle(""); + setError(""); + } + + return ( + +
+ + + +
+ +
+
+ + +
+
+
+
+ + setCommandNumber(e.target.value)} + errorText={"Command number must be a number"} + /> +
+
+ + setDevice(e.target.value)} + errorText={"Device number must be a number"} + /> +
+
+ +
+
+ + +
+
+
+
+ + setTitle(e.target.value)} + errorText={`Title must be at least ${MIN_TITLE_LENGTH} characters long`} + /> +
+
+
+ + +
+ + ); +} + +CreateCommandModal.Handler = new ModalHandler(); +CreateCommandModal.onCommandCreated = (callback) => + eventEmitter.on(COMMAND_CREATED_EVENT, callback); + +export default CreateCommandModal; diff --git a/www/src/modals/modal-registry.jsx b/www/src/modals/modal-registry.jsx index 2e8382a..301fecf 100644 --- a/www/src/modals/modal-registry.jsx +++ b/www/src/modals/modal-registry.jsx @@ -6,6 +6,7 @@ import UserSettingsModal from "./user-settings-modal.jsx"; import CreateDeviceModal from "./create-device-modal.jsx"; import ShowRegistrationCodeModal from "./show-registration-code-modal.jsx"; import DeleteIntegrationModal from "./delete-integration-modal.jsx"; +import CreateCommandModal from "./create-command-modal.jsx"; const ModalRegistry = (function () { const modals = [ @@ -39,6 +40,11 @@ const ModalRegistry = (function () { component: DeleteIntegrationModal, ref: null, }, + { + id: "newCommandModal", + component: CreateCommandModal, + ref: null, + }, ]; function getModals(props) { diff --git a/www/src/services/remotes-service.js b/www/src/services/remotes-service.js index 1712ff5..aa0d4ec 100644 --- a/www/src/services/remotes-service.js +++ b/www/src/services/remotes-service.js @@ -1,15 +1,26 @@ +import Serializer from "../data/serializer"; + function RemotesService() { + let commands = []; + async function getRemotes() { return []; } async function getCommands() { - return []; + return [].concat(commands); + } + + async function createCommand(commandObject) { + let command = Serializer.deserializeCommand(commandObject); + commands.push(command); + return command; } return { getRemotes, getCommands, + createCommand, }; } diff --git a/www/src/views/remotes/commands-list-view.jsx b/www/src/views/remotes/commands-list-view.jsx index 591a54f..3eb591d 100644 --- a/www/src/views/remotes/commands-list-view.jsx +++ b/www/src/views/remotes/commands-list-view.jsx @@ -1,6 +1,7 @@ import { createResource, onMount } from "solid-js"; import List from "../../modules/list"; import RemotesService from "../../services/remotes-service"; +import CreateCommandModal from "../../modals/create-command-modal"; function CommandsList(props) { const [commands, { refetch: refetchCommands }] = createResource( @@ -11,7 +12,18 @@ function CommandsList(props) { refetchCommands(); }); - function handleNewCommand() {} + CreateCommandModal.onCommandCreated(() => { + console.log("CREATED"); + refetchCommands(); + }); + + function handleNewCommand() { + refetchCommands(); + CreateCommandModal.Handler.show(); + } + + function handleDeleteCommand(command) { + } return ( <>