debian/patches/0018-show-start-button-on-not-running-vm-ct.patch

   1 From 0000000000000000000000000000000000000000 Mon Sep 17 00:00:00 2001
   2 From: Dominik Csapak <d.csapak@proxmox.com>
   3 Date: Wed, 9 Feb 2022 14:50:35 +0100
   4 Subject: [PATCH] show start button on not running vm/ct
   5
   6 by querying the 'status' api first and showing a simple startbutton
   7 if the status is not 'running'
   8
   9 adds a play icon from fontawesome, since novnc had none itself
  10
  11 css style is mostly copied from novnc "connect dialog", only the
  12 colors were adapted
  13
  14 Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
  15 ---
  16  app/pve.js         | 34 +++++++++++++++++++++++++--
  17  app/styles/pve.css | 58 ++++++++++++++++++++++++++++++++++++++++++++++
  18  vnc.html           |  9 +++++++
  19  3 files changed, 99 insertions(+), 2 deletions(-)
  20
  21 diff --git a/app/pve.js b/app/pve.js
  22 index 042eb7c..9da23ed 100644
  23 --- a/app/pve.js
  24 +++ b/app/pve.js
  25 @@ -311,6 +311,11 @@ PVEUI.prototype = {
  26                 .classList.add('pve_hidden');
  27         }
  28
  29 +        document.getElementById("pve_start_button")
  30 +            .addEventListener('click', function() {
  31 +               me.pve_vm_command('start');
  32 +           });
  33 +
  34         // add command logic
  35         var commandArray = [
  36             { cmd: 'start', kvm: 1, lxc: 1},
  37 @@ -359,8 +364,8 @@ PVEUI.prototype = {
  38         return { width: ow, height: oh };
  39      },
  40
  41 -    pveStart: function(callback) {
  42 -       var me = this;
  43 +    initConnection: function(callback) {
  44 +       let me = this;
  45         me.API2Request({
  46             url: me.url,
  47             method: 'POST',
  48 @@ -382,6 +387,31 @@ PVEUI.prototype = {
  49         });
  50      },
  51
  52 +    pveStart: function(callback) {
  53 +       var me = this;
  54 +       if (me.consoletype === 'kvm' || me.consoletype === 'lxc') {
  55 +           // check status for vms first
  56 +           me.API2Request({
  57 +               url: `${me.baseUrl}/status/current`,
  58 +               method: 'GET',
  59 +               success: function(result) {
  60 +                   let status = result.data.status;
  61 +                   if (status === 'running') {
  62 +                       me.initConnection(callback);
  63 +                   } else {
  64 +                       document.getElementById('pve_start_dlg')
  65 +                           .classList.add("noVNC_open");
  66 +                   }
  67 +               },
  68 +               failure: function(msg) {
  69 +                   me.UI.showStatus(msg, 'error');
  70 +               }
  71 +           });
  72 +       } else {
  73 +           me.initConnection(callback);
  74 +       }
  75 +    },
  76 +
  77      updateFBSize: function(rfb, width, height) {
  78         var me = this;
  79         try {
  80 diff --git a/app/styles/pve.css b/app/styles/pve.css
  81 index 18126b0..e0ca61f 100644
  82 --- a/app/styles/pve.css
  83 +++ b/app/styles/pve.css
  84 @@ -44,3 +44,61 @@
  85  .noVNC_button.pve_hidden {
  86    display: none;
  87  }
  88 +
  89 +/* start button */
  90 +#pve_start_dlg {
  91 +  transition: 0.2s ease-in-out;
  92 +  transform: scale(0, 0);
  93 +  visibility: hidden;
  94 +  opacity: 0;
  95 +}
  96 +
  97 +#pve_start_dlg.noVNC_open {
  98 +  transform: scale(1, 1);
  99 +  visibility: visible;
 100 +  opacity: 1;
 101 +}
 102 +
 103 +#pve_start_info {
 104 +  color: white;
 105 +  text-align: center;
 106 +  font-size: 20px;
 107 +  padding: 6px;
 108 +}
 109 +
 110 +#pve_start_button {
 111 +  cursor: pointer;
 112 +  padding: 6px;
 113 +  color: white;
 114 +  background:#4c4c4c;;
 115 +  border-radius: 8px;
 116 +  text-align: center;
 117 +  font-size: 20px;
 118 +  box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.5);
 119 +}
 120 +
 121 +#pve_start_button div {
 122 +  margin: 2px;
 123 +  padding: 5px 30px;
 124 +  border: 1px solid #2f2f2f;
 125 +  border-bottom-width: 2px;
 126 +  border-radius: 5px;
 127 +  background:#4c4c4c;;
 128 +
 129 +  /* This avoids it jumping around when :active */
 130 +  vertical-align: middle;
 131 +}
 132 +
 133 +#pve_start_button div:active {
 134 +  border-bottom-width: 1px;
 135 +  margin-top: 3px;
 136 +}
 137 +
 138 +:root:not(.noVNC_touch) #pve_start_button div:hover {
 139 +  background: rgba(255, 255, 255, 0.2);
 140 +}
 141 +
 142 +#pve_start_button img {
 143 +  vertical-align: bottom;
 144 +  padding: 0 5px 2px 0;
 145 +}
 146 diff --git a/vnc.html b/vnc.html
 147 index 3e63087..f0488b1 100644
 148 --- a/vnc.html
 149 +++ b/vnc.html
 150 @@ -281,6 +281,15 @@
 151          </div>
 152      </div>
 153
 154 +    <div class="noVNC_center">
 155 +        <div id="pve_start_dlg">
 156 +            <div id="pve_start_info">Guest not running</div>
 157 +            <div id="pve_start_button"><div>
 158 +                <img alt="" src="/novnc/app/images/power.svg"> Start Now
 159 +            </div></div>
 160 +        </div>
 161 +    </div>
 162 +
 163      <!-- Password Dialog -->
 164      <div class="noVNC_center noVNC_connect_layer">
 165      <div id="noVNC_credentials_dlg" class="noVNC_panel"><form>