From be9f58d92a1fd6ce88a28a7e442a9781638625f3 Mon Sep 17 00:00:00 2001
From: johannnes <>
Date: Sat, 2 Mar 2013 12:56:18 +0000
Subject: [PATCH] added commandline including save option   - added shutdown
 and restart buttons   - added some icons

git-svn-id: https://svn.fhem.de/fhem/trunk@2840 2b470e98-0d58-463d-a4d8-8e2adae1ed80
---
 fhem/www/frontend/CHANGED                     |   6 +
 fhem/www/frontend/controls_frontend.txt       |  14 +-
 fhem/www/frontend/www/frontend/app/app.js     |   3 +-
 .../frontend/app/controller/MainController.js | 201 ++++++++++++++++++
 .../app/resources/icons/database_refresh.png  | Bin 0 -> 770 bytes
 .../app/resources/icons/database_save.png     | Bin 0 -> 755 bytes
 .../frontend/app/resources/icons/readme.txt   |  22 ++
 .../app/resources/icons/resultset_last.png    | Bin 0 -> 524 bytes
 .../app/resources/icons/resultset_next.png    | Bin 0 -> 395 bytes
 .../www/frontend/app/resources/icons/stop.png | Bin 0 -> 700 bytes
 .../www/frontend/app/view/Viewport.js         |  66 +++++-
 11 files changed, 306 insertions(+), 6 deletions(-)
 create mode 100644 fhem/www/frontend/www/frontend/app/resources/icons/database_refresh.png
 create mode 100644 fhem/www/frontend/www/frontend/app/resources/icons/database_save.png
 create mode 100644 fhem/www/frontend/www/frontend/app/resources/icons/readme.txt
 create mode 100644 fhem/www/frontend/www/frontend/app/resources/icons/resultset_last.png
 create mode 100644 fhem/www/frontend/www/frontend/app/resources/icons/resultset_next.png
 create mode 100644 fhem/www/frontend/www/frontend/app/resources/icons/stop.png

diff --git a/fhem/www/frontend/CHANGED b/fhem/www/frontend/CHANGED
index 852ab266e..9b13c8805 100644
--- a/fhem/www/frontend/CHANGED
+++ b/fhem/www/frontend/CHANGED
@@ -1,3 +1,9 @@
+Update vom 2.3.2012
+
+* Kommandozeile hinzugefügt, inkl Speichern in der fhem.cfg
+* Shutdown und Restart Button für FHEM hinzugefügt
+* Icons  
+
 Update vom 1.3.2012
 
 * Charts unterstützen jetzt mehrere Y Achsen. Diese können nach Klick auf den Button "Add another Y Axis" hinzugefügt werden
diff --git a/fhem/www/frontend/controls_frontend.txt b/fhem/www/frontend/controls_frontend.txt
index 5e15f030d..fd7bae483 100644
--- a/fhem/www/frontend/controls_frontend.txt
+++ b/fhem/www/frontend/controls_frontend.txt
@@ -4,6 +4,8 @@ DIR www/frontend/app/model
 DIR www/frontend/app/store
 DIR www/frontend/app/view
 DIR www/frontend/app/controller
+DIR www/frontend/app/resources
+DIR www/frontend/app/resources/icons
 DIR www/frontend/lib
 DIR www/frontend/lib/ext-4.1.1a
 DIR www/frontend/lib/ext-4.1.1a/images
@@ -38,13 +40,13 @@ DIR www/frontend/lib/ext-4.1.1a/images/gray/tip
 UPD 2013-03-01_05:44:48 49099 FHEM/93_DbLog.pm
 UPD 2013-02-25_08:13:15 499 www/frontend/index.html
 UPD 2013-02-27_07:20:39 236 www/frontend/README.txt
-UPD 2013-03-01_05:42:05 1655 www/frontend/app/app.js
+UPD 2013-03-02_01:26:28 1763 www/frontend/app/app.js
 UPD 2013-03-01_05:43:56 20350 www/frontend/app/view/LineChartPanel.js
-UPD 2013-03-01_05:43:56 6770 www/frontend/app/view/Viewport.js
+UPD 2013-03-02_01:42:33 9490 www/frontend/app/view/Viewport.js
 UPD 2013-03-01_05:43:56 2503 www/frontend/app/view/TableDataGridPanel.js
 UPD 2013-03-01_05:43:55 1310 www/frontend/app/view/LineChartView.js
 UPD 2013-03-01_05:42:32 41591 www/frontend/app/controller/ChartController.js
-UPD 2013-03-01_05:42:32 2115 www/frontend/app/controller/MainController.js
+UPD 2013-03-02_01:44:22 8479 www/frontend/app/controller/MainController.js
 UPD 2013-03-01_05:43:32 202 www/frontend/app/model/ReadingsModel.js
 UPD 2013-03-01_05:43:32 338 www/frontend/app/model/SavedChartsModel.js
 UPD 2013-03-01_05:43:31 674 www/frontend/app/model/ChartModel.js
@@ -55,6 +57,12 @@ UPD 2013-03-01_05:43:45 505 www/frontend/app/store/SavedChartsStore.js
 UPD 2013-03-01_05:43:45 426 www/frontend/app/store/ReadingsStore.js
 UPD 2013-03-01_05:43:45 1048 www/frontend/app/store/TableDataStore.js
 UPD 2013-03-01_05:43:44 447 www/frontend/app/store/DeviceStore.js
+UPD 2013-03-02_10:07:52 770 www/frontend/app/resources/icons/database_refresh.png
+UPD 2013-03-02_10:04:18 755 www/frontend/app/resources/icons/database_save.png
+UPD 2013-03-02_10:05:29 626 www/frontend/app/resources/icons/readme.txt
+UPD 2013-03-02_10:04:18 524 www/frontend/app/resources/icons/resultset_last.png
+UPD 2013-03-02_10:04:18 395 www/frontend/app/resources/icons/resultset_next.png
+UPD 2013-03-02_10:07:52 700 www/frontend/app/resources/icons/stop.png
 UPD 2013-02-25_08:13:15 1291919 www/frontend/lib/ext-4.1.1a/ext-all.js
 UPD 2013-02-25_08:13:15 381835 www/frontend/lib/ext-4.1.1a/ext-all-gray-debug.css
 UPD 2013-02-25_08:13:15 1981 www/frontend/lib/ext-4.1.1a/images/gray/tools/tools-sprites-trans.gif
diff --git a/fhem/www/frontend/www/frontend/app/app.js b/fhem/www/frontend/www/frontend/app/app.js
index becf696a3..d7e158896 100644
--- a/fhem/www/frontend/www/frontend/app/app.js
+++ b/fhem/www/frontend/www/frontend/app/app.js
@@ -26,13 +26,14 @@ Ext.application({
         // Gather information from FHEM to display status, devices, etc.
         var me = this,
             url = '../../../fhem?cmd=jsonlist&XHR=1';
-        
+        Ext.getBody().mask("Please wait while the Frontend is starting...");
         Ext.Ajax.request({
             method: 'GET',
             async: false,
             disableCaching: false,
             url: url,
             success: function(response){
+                Ext.getBody().unmask();
                 var json = Ext.decode(response.responseText);
                 FHEM.version = json.Results[0].devices[0].ATTR.version;
                 
diff --git a/fhem/www/frontend/www/frontend/app/controller/MainController.js b/fhem/www/frontend/www/frontend/app/controller/MainController.js
index 924096713..9faff8f35 100644
--- a/fhem/www/frontend/www/frontend/app/controller/MainController.js
+++ b/fhem/www/frontend/www/frontend/app/controller/MainController.js
@@ -16,6 +16,10 @@ Ext.define('FHEM.controller.MainController', {
            {
                selector: 'panel[name=culpanel]',
                ref: 'culpanel' //this.getCulpanel()
+           },
+           {
+               selector: 'textfield[name=commandfield]',
+               ref: 'commandfield' //this.getCommandfield()
            }
            
     ],
@@ -33,6 +37,21 @@ Ext.define('FHEM.controller.MainController', {
             },
             'panel[name=tabledataaccordionpanel]': {
                 expand: this.showDatabaseTablePanel
+            },
+            'textfield[name=commandfield]': {
+                specialkey: this.checkCommand
+            },
+            'button[name=saveconfig]': {
+                click: this.saveConfig
+            },
+            'button[name=executecommand]': {
+                click: this.submitCommand
+            },
+            'button[name=shutdownfhem]': {
+                click: this.shutdownFhem
+            },
+            'button[name=restartfhem]': {
+                click: this.restartFhem
             }
         
         });
@@ -60,6 +79,188 @@ Ext.define('FHEM.controller.MainController', {
 //        }
     },
     
+    /**
+     * 
+     */
+    saveConfig: function() {
+        
+        var command = this.getCommandfield().getValue();
+        if (command && !Ext.isEmpty(command)) {
+            this.submitCommand();
+        }
+        
+        Ext.Ajax.request({
+            method: 'GET',
+            disableCaching: false,
+            url: '../../../fhem?cmd=save',
+            success: function(response){
+                
+                var win = Ext.create('Ext.window.Window', {
+                    width: 110,
+                    height: 60,
+                    html: 'Save successful!',
+                    preventHeader: true,
+                    border: false,
+                    closable: false,
+                    plain: true
+                });win.showAt(Ext.getBody().getWidth() / 2 -100, 30);
+                win.getEl().animate({
+                    opacity: 0, 
+                    easing: 'easeOut',
+                    duration: 3000,
+                    delay: 2000
+                });
+            },
+            failure: function() {
+                Ext.Msg.alert("Error", "Could not save the current configuration!");
+            }
+        });
+    },
+    
+    /**
+     * 
+     */
+    checkCommand: function(field, e) {
+        if (e.getKey() == e.ENTER && !Ext.isEmpty(field.getValue())) {
+            this.submitCommand();
+        }
+    },
+    
+    /**
+     * 
+     */
+    submitCommand: function() {
+        
+        var command = this.getCommandfield().getValue();
+        
+        if (command && !Ext.isEmpty(command)) {
+            Ext.Ajax.request({
+                method: 'GET',
+                disableCaching: false,
+                url: '../../../fhem?cmd=' + command + '&XHR=1',
+                success: function(response){
+                    
+                    if(response.responseText && !Ext.isEmpty(response.responseText)) {
+                        Ext.create('Ext.window.Window', {
+                            maxWidth: 600,
+                            maxHeight: 500,
+                            autoScroll: true,
+                            layout: 'fit',
+                            title: "Response",
+                            items: [
+                                {
+                                    xtype: 'panel',
+                                    autoScroll: true,
+                                    items:[
+                                       {
+                                           xtype: 'displayfield',
+                                           htmlEncode: true,
+                                           value: response.responseText
+                                       }
+                                    ]
+                                }
+                            ]
+                        }).show();
+                    } else {
+                        var win = Ext.create('Ext.window.Window', {
+                            width: 130,
+                            height: 60,
+                            html: 'Command submitted!',
+                            preventHeader: true,
+                            border: false,
+                            closable: false,
+                            plain: true
+                        });win.showAt(Ext.getBody().getWidth() / 2 -100, 30);
+                        win.getEl().animate({
+                            opacity: 0, 
+                            easing: 'easeOut',
+                            duration: 3000,
+                            delay: 2000
+                        });
+                    }
+                    
+                },
+                failure: function() {
+                    Ext.Msg.alert("Error", "Could not submit the command!");
+                }
+        });
+        }
+        
+    },
+    
+    /**
+     * 
+     */
+    shutdownFhem: function() {
+        Ext.Ajax.request({
+            method: 'GET',
+            disableCaching: false,
+            url: '../../../fhem?cmd=shutdown&XHR=1'
+        });
+        var win = Ext.create('Ext.window.Window', {
+            width: 130,
+            height: 60,
+            html: 'Shutdown submitted!',
+            preventHeader: true,
+            border: false,
+            closable: false,
+            plain: true
+        });win.showAt(Ext.getBody().getWidth() / 2 -100, 30);
+        win.getEl().animate({
+            opacity: 0, 
+            easing: 'easeOut',
+            duration: 3000,
+            delay: 2000
+        });
+    },
+    
+    /**
+     * 
+     */
+    restartFhem: function() {
+        Ext.Ajax.request({
+            method: 'GET',
+            disableCaching: false,
+            url: '../../../fhem?cmd=shutdown restart&XHR=1'
+        });
+        Ext.getBody().mask("Please wait while FHEM is restarting...");
+        this.retryConnect();
+        
+    },
+    
+    /**
+     * 
+     */
+    retryConnect: function() {
+        var me = this;
+        
+        var task = new Ext.util.DelayedTask(function(){
+            Ext.Ajax.request({
+                method: 'GET',
+                disableCaching: false,
+                url: '../../../fhem?cmd=jsonlist&XHR=1',
+            
+                success: function(response){
+                    if (response.responseText !== "Unknown command JsonList, try help↵") {
+                        //restarting the frontend
+                        window.location.reload();
+                    } else {
+                        console.log("fail..");
+                        me.retryConnect();
+                    }
+                    
+                },
+                failure: function() {
+                    console.log("failure..");
+                    me.retryConnect();
+                }
+            });
+        });
+
+        task.delay(1000);
+        
+    },
+        
     /**
      * 
      */
diff --git a/fhem/www/frontend/www/frontend/app/resources/icons/database_refresh.png b/fhem/www/frontend/www/frontend/app/resources/icons/database_refresh.png
new file mode 100644
index 0000000000000000000000000000000000000000..ff803be124ac5f1bd747490d2243f876eebdf5f6
GIT binary patch
literal 770
zcmV+d1O5DoP)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00004XF*Lt006JZ
zHwB960000PbVXQnQ*UN;cVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU!lu1NER5;6p
zQ(Z`tQ5b%{`RUS4&C!?EG%GY*p&`<RL_|dyU6iqlGRmt6?V>L1E-$)@F1-w)3&R|k
zpe8{Z8<~c8GL+Q$?>DkG77MrB>ib*oIq``rr5B#_9^P}_=lwfJ$Ye4I1OislR|zeK
zVbqYWCeYUSM0$zz3qqi|xmm|wBKZCO<8;X*Nm5-|Ss83L8wv^vz=$_CHjqpv5e|nD
zi^V>Y?WWu9Ue99i`F!tXS!UrfyNRl*nP4!OdF<_2YxlP1Fme+XT27Rfmg0ZnbUKmN
zQchLT0^98(MdnP?)6=lq?HnZ~C0I!=;+^~kYsqD3nhs6X;Vdi{?VA1UEzfmtU&~-q
z7J<XzV09uAi6D{p9h1rg4iq_Y;oxQH865^eH*~&FrP7zKJ#ShXZu3@&W-TnTD2fzK
zLm)nbeYp}O>wZi{gIM{t3{_E4UR1%)L*WJg$bH{MmVw30fE`e?I2IEj?l`hAghYH3
zt$W+>w6P28pTBBza%f!nsWhE`b~-<+1YOrT3B$cZ4>?gZ8b$I)lH1swJjJS$^EqF~
zm_fejtPITPCdn3|s^RUIA%3SpXiSi^{?8N`Oh=PY(SA|m3=BsGkWx0eT~QP?b~cPr
zKhDrN8M!R7Nbz_a^b+|5(&_XcW=k#x<UZsT<v>vLap&a?YNRF|tvD>5s;|fF{5;0S
zC%l5k<GDiY{VtcwR#{mItJMlY5ODX^Z4?(4<K(g0t?`-TTv}a)-#<F3Yx*OBrQ6%v
zdxS_j32uwUQq2AWD`!xCjXjdcAJR-{4jNCJ^+x|d&QDf*!lRsEyL5MV7m{-o!Jwvw
zJkcI6rS6#OnyuUMjc@-LJE8VLO^&O*x_`Ix-y=XHft@O&>;M1&07*qoM6N<$f<K^O
A?f?J)

literal 0
HcmV?d00001

diff --git a/fhem/www/frontend/www/frontend/app/resources/icons/database_save.png b/fhem/www/frontend/www/frontend/app/resources/icons/database_save.png
new file mode 100644
index 0000000000000000000000000000000000000000..44c06dddf19fbda14efe428b9b1793c13f46b2cf
GIT binary patch
literal 755
zcmV<P0u23$P)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00004XF*Lt006JZ
zHwB960000PbVXQnQ*UN;cVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU!g-Jv~R5;6p
zQ%!3VQ4~Gz%}f#}t+rrHAYz4DG!+$!R&c2+L9~!f#4ZF8>3^_07cLZBR}_>&jXObH
zw2it@svr%qE?kJ(Xuudu+DSW|WWK!jNvbU^UO02#+<Et$^X|-uFbq*B6rz;R6D|fp
zaES5%ftJAs%AY9TBNRqPMtp1vF*`duNSme-iNw)VDusAF4%0Nj#LLUeXf~TDm&>Tt
zYOko4%Vx8c4Gh!M(=Qem7g;XcE?n0Qi^XD?&*vX7@xPFCIh;%;@xMr?(;$(vo9j9i
z6;riZMJyIWG#Z6r7^-I5HtO{{DwPWQ`}>&y+Y;!yjz*&a$8prX=XtO!3$0d5J>%Mz
z1f8>Jnx-7^X2#7Yb#zC2VYfZ>c17@L{s)8{OuWBa3WHFfVXfhLv2t?V0V~q5R2D*D
z&315l_#iF}b>Zoo?-;+7*`WOJWsMw(x3WXv`@U*s@Y-&<s5d>edFEYpz0skP)dFfu
zZ4wIp&Vbb!+|0+3Qa}p<*AH-eY>3q8s6?RA)zqP8W39IT5HLFG9m1F);gE|P`L7@@
zctjKsn1rA6!ZZR%R^(SjU!r=2o$yGp<$KViK~{B;AIcgvN+J+&Nvur+W(Sw&=H?z}
zGMRW^U!Nl3AvWzQ3~C%Z*G*(?qLfNCq;tpg2yRW4@yl9;p3CK)O-@c8Sy))OUMiKc
zQp#QYFZe-<Gz|n;!~OYd*lq437ZNr58?K(XL#r4Knr6UuM@L7$P`bjHn3(8ZSy?%t
z>*@LZDInR^#F=Bm=!vA2i6tkEJ#i0aggzp2D%3!>h~r~3uLt(-IMoyFA<H}I7%l`2
lScE<TVdG=@Gk#hwegmFXvIr+J^MU{X002ovPDHLkV1g+|PZ|IK

literal 0
HcmV?d00001

diff --git a/fhem/www/frontend/www/frontend/app/resources/icons/readme.txt b/fhem/www/frontend/www/frontend/app/resources/icons/readme.txt
new file mode 100644
index 000000000..400a64d78
--- /dev/null
+++ b/fhem/www/frontend/www/frontend/app/resources/icons/readme.txt
@@ -0,0 +1,22 @@
+Silk icon set 1.3
+
+_________________________________________
+Mark James
+http://www.famfamfam.com/lab/icons/silk/
+_________________________________________
+
+This work is licensed under a
+Creative Commons Attribution 2.5 License.
+[ http://creativecommons.org/licenses/by/2.5/ ]
+
+This means you may use it for any purpose,
+and make any changes you like.
+All I ask is that you include a link back
+to this page in your credits.
+
+Are you using this icon set? Send me an email
+(including a link or picture if available) to
+mjames@gmail.com
+
+Any other questions about this icon set please
+contact mjames@gmail.com
\ No newline at end of file
diff --git a/fhem/www/frontend/www/frontend/app/resources/icons/resultset_last.png b/fhem/www/frontend/www/frontend/app/resources/icons/resultset_last.png
new file mode 100644
index 0000000000000000000000000000000000000000..8ec89478477aada6c95cac22920094dd12f399a7
GIT binary patch
literal 524
zcmV+n0`vWeP)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00004XF*Lt006JZ
zHwB960000PbVXQnQ*UN;cVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBUzo=HSOR5;7U
zlfP>eQ51#0H@Z6sk_ajqECPZEqLq!PMf5MQ5gS1i(Owi(ut_CY*w|Psf-Iy6=08Y`
zHnsuDs6h)+OwcBqopImX_v1c`5LkrSCWWWFUvW71z%eN$cB714YVYtd`}$X<%JbQ)
zM;;CHJDu;#-swg0iul07{S&4s!M><GxYzyhWEfhjoSGiv(&-6GNzE@<uberSo5Pds
zhqqpQd$z*|;t(HkUa72WHV_w3VESO2sr~J{m!Gb^1Sln8T|&H4N^I`nk59Ou^ljw$
zREtfU-#q{LLmLdW8>4O+`c|6_tW_i^y+I%|aPsIlEx5K=^ki~8LwqDy-)t}thx1D9
zB6|#ECQ%2a60OQQ<{6-)5|ok<pCCb=8{QUMtbFY+kT~>v)6E>1Xpv+@iIv@MJ8v15
zR{N~1_2z$e&R$WgNhIQelIl1rK}5XruIN#GDZA_4bJqcqID*^mXXFcgt1K5iK7HPL
zwLW*@#tu()#Cyd@CHc^75Ul6pYT4PCpSeBE)hh4bY><NT@A%ArU*lhrcKIamJ{)WS
O0000<MNUMnLSTaY5bkLJ

literal 0
HcmV?d00001

diff --git a/fhem/www/frontend/www/frontend/app/resources/icons/resultset_next.png b/fhem/www/frontend/www/frontend/app/resources/icons/resultset_next.png
new file mode 100644
index 0000000000000000000000000000000000000000..e252606d3e68c6da135a9b165996d9da968ef7fc
GIT binary patch
literal 395
zcmV;60d)R}P)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00004XF*Lt006JZ
zHwB960000PbVXQnQ*UN;cVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBUz9Z5t%R5;6H
z`2YVu10|S&>IO8de(|Ml<%@O-40!dwX61{2C5s-llVw2V@@N0oo_PPieZ!0Y2~+R(
zk!(QTf=B;X9DnzJ@u9c>OP4(U@7{849!UlyO@H`*;lVfmCvAW6f9CF&{}ZR*{jXDW
zb_vl21ozzrYJBy-Vb$aRjjJF3@7nm}zjw#A|58cE9uZ}LbIY~=6ShA8U$XeY|MDdd
zfQCH!?_7WRzhvaG%|sbsT7Kz&`}!yUix%Do#>T_{_Ei`DO9UTSBkH=Hg(w4*^UnUS
zTk-IJ<+2C=ZObqG7Z2FGlB7VCN;>(!bn*TFHYMl(i+Sx`L~=ArL>~EXU3lidsO!!J
pWF;gqzXSh89JkLNxXeT<1_12n>%V}Y6R`jQ002ovPDHLkV1iLCz99er

literal 0
HcmV?d00001

diff --git a/fhem/www/frontend/www/frontend/app/resources/icons/stop.png b/fhem/www/frontend/www/frontend/app/resources/icons/stop.png
new file mode 100644
index 0000000000000000000000000000000000000000..0cfd585963d255190b8855a7689e8da1c4d7cf6b
GIT binary patch
literal 700
zcmV;t0z>_YP)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00004XF*Lt006JZ
zHwB960000PbVXQnQ*UN;cVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU!PDw;TR5;6}
zl08pUK@^6c-MfIG7zy&ZdO=W0RM5go6AL;JW9dJzHAaJtjTV}aNP&t#jK9E25`KYJ
z7-190qI|g^MC3yjcJIA2b7#h4m*qn(j3+rcCzCnP`_AM<thM}4#10;;z8Sh6DK2^%
ziAG(kwZIsx(Ir;M1)a$}vRV(<KX@qr2v`|>*?Fk0YVb%?UEFajs1S?+YtYiPrjx0+
z+4<Bxpm%2`vh#$MS1&q>YbyJXwz!SX#yqTlhtNQ%Ku9=RNm$j)&+(}lZ!UGGp|@|O
z09YA#-dR#rIaGe;MBLe!ht*}!c?U}6YT!dfHDO%~>xtx&Klk-^WB==sC_vP4ddg4L
z#GN10u$+QGf$!(i3&8VpF6O6+ef~&gQ#>AVqCJH_utvKMAuOeG%3%mn<<%9)yb~#4
zHc70e5sYyQ03$?zFUko7D1Bg1=6jXvg#bUm1b(pVKuC*}koEKGdj<=zd<p?lVuY}}
z02!2`6>M#RWsl+kfRf;OU^G_BQh+Fc$z&F_AHuQYu(b)<Z0@4xK{j7~54O@!dlDrz
zdV71Z08s1e-K%5C<<PwV6}7OL&Ox&ILC?pe)0lb}|Ke4?jgBveYir&67HRs{%^PJ6
zZeR7KbB#q~?_p*Ntij5VPzbEsjJkY{l@Ft{naPQ}ZHX_#`v3q_9qnD^r<(?<&!3GK
z8HH8~V@z(R46J^dAd^VkZ=0Nb_S-7&M6&%#ms585NhIdDHVlQ)nus+e+V>aq=H_Fx
idDl8IBmWBc*Z2i=4uSP&;Q8VJ0000<MNUMnLSTZ|>p<iH

literal 0
HcmV?d00001

diff --git a/fhem/www/frontend/www/frontend/app/view/Viewport.js b/fhem/www/frontend/www/frontend/app/view/Viewport.js
index 830199f0c..d482cb61d 100644
--- a/fhem/www/frontend/www/frontend/app/view/Viewport.js
+++ b/fhem/www/frontend/www/frontend/app/view/Viewport.js
@@ -19,8 +19,70 @@ Ext.define('FHEM.view.Viewport', {
             items: [
                 {
                     region: 'north',
-                    html: '<p align="center"><img align="center" src="../../fhem/images/default/fhemicon.png" height="70px"</></p><h1 class="x-panel-header" align="center">Frontend</h1>',
-                    height: 85
+                    height: 85,
+                    layout: 'hbox',
+                    items: [
+                        {
+                            xtype: 'panel',
+                            html: '<p><img src="../../fhem/images/default/fhemicon.png" height="70px"</></p><h1 class="x-panel-header">Frontend</h1>',
+                            width: '30%',
+                            border: false
+                        },
+                        {
+                            xtype: 'textfield',
+                            name: 'commandfield',
+                            width: '30%',
+                            padding: '30px 0 0 0',
+                            fieldLabel: 'Send Commands',
+                            border: false
+                        },
+                        {
+                            xtype: 'panel',
+                            border: false,
+                            width: '20%',
+                            items: [
+                                {
+                                    xtype: 'button',
+                                    width: 60,
+                                    margin: '30px 0 0 5px',
+                                    text: 'Execute',
+                                    name: 'executecommand'
+                                },
+                                {
+                                    xtype: 'button',
+                                    width: 90,
+                                    margin: '30px 0 0 5px',
+                                    text: 'Save to Config',
+                                    name: 'saveconfig'
+                                }
+                            ]
+                        },
+                        {
+                            xtype: 'panel',
+                            border: false,
+                            width: '20%',
+                            items: [
+                                {
+                                    xtype: 'button',
+                                    width: 75,
+                                    margin: '30px 5px 0 5px',
+                                    text: 'Shutdown',
+                                    name: 'shutdownfhem',
+                                    tooltip: 'Shutdown FHEM',
+                                    icon: 'app/resources/icons/stop.png'
+                                },
+                                {
+                                    xtype: 'button',
+                                    width: 70,
+                                    margin: '30px 5px 0 5px',
+                                    text: 'Restart',
+                                    name: 'restartfhem',
+                                    tooltip: 'Restart FHEM',
+                                    icon: 'app/resources/icons/database_refresh.png'
+                                }
+                            ]
+                        }
+                    ]
                 }, {
                     region: 'west',
                     title: 'Navigation',