main.tpl 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345
  1. {if $currentPageName == 'Home'}
  2. {if $modulecustombuttonresult}
  3. {if $modulecustombuttonresult == "success"}
  4. {include file="$template/includes/alert.tpl" type="success" msg=$LANG.moduleactionsuccess textcenter=true idname="alertModuleCustomButtonSuccess"}
  5. {else}
  6. {include file="$template/includes/alert.tpl" type="error" msg=$LANG.moduleactionfailed|cat:' ':$modulecustombuttonresult textcenter=true idname="alertModuleCustomButtonFailed"}
  7. {/if}
  8. {/if}
  9. {if $pendingcancellation}
  10. {include file="$template/includes/alert.tpl" type="error" msg=$LANG.cancellationrequestedexplanation textcenter=true idname="alertPendingCancellation"}
  11. {/if}
  12. {if $unpaidInvoice}
  13. <div class="alert alert-{if $unpaidInvoiceOverdue}danger{else}warning{/if}" id="alert{if $unpaidInvoiceOverdue}Overdue{else}Unpaid{/if}Invoice">
  14. <div class="pull-right">
  15. <a href="viewinvoice.php?id={$unpaidInvoice}" class="btn btn-xs btn-default">
  16. {lang key='payInvoice'}
  17. </a>
  18. </div>
  19. {$unpaidInvoiceMessage}
  20. </div>
  21. {/if}
  22. <div class="tab-content margin-bottom">
  23. <div class="tab-pane fade show active" id="tabOverview">
  24. {if $tplOverviewTabOutput}
  25. {$tplOverviewTabOutput}
  26. {else}
  27. <div class="section">
  28. <div class="product-details">
  29. <div class="row row-eq-height row-eq-height-sm">
  30. <div class="col-md-6">
  31. <div class="product-holder product-status-{$rawstatus|strtolower}">
  32. <div class="product-content">
  33. <div class="product-image">
  34. <div class="feature-icon">
  35. <img src="/templates/croster/thurdata/logoVPS-color.svg" class="img-fluid">
  36. </div>
  37. </div>
  38. <h4>{$product}</h4>
  39. <div class="status-sticker-wrapper">
  40. <div class="status-sticker product-status-{$rawstatus|strtolower}">
  41. {$status}
  42. </div>
  43. </div>
  44. </div>
  45. </div>
  46. </div>
  47. <div class="col-md-6">
  48. <div class="product-info">
  49. <ul class="list-info list-v">
  50. <li>
  51. <span class="list-heading">{$LANG.clientareahostingregdate}</span>
  52. <span class="list-text">{$regdate}</span>
  53. </li>
  54. {if $firstpaymentamount neq $recurringamount}
  55. <li>
  56. <span class="list-heading">{$LANG.firstpaymentamount}</span>
  57. <span class="list-text">{$firstpaymentamount}</span>
  58. </li>
  59. {/if}
  60. {if $billingcycle != $LANG.orderpaymenttermonetime && $billingcycle != $LANG.orderfree}
  61. <li>
  62. <span class="list-heading">{$LANG.recurringamount}</span>
  63. <span class="list-text">{$recurringamount}</span>
  64. </li>
  65. {/if}
  66. <li>
  67. <span class="list-heading">{$LANG.orderbillingcycle}</span>
  68. <span class="list-text">{$billingcycle}</span>
  69. </li>
  70. {if $nextduedate == '-'}{else}
  71. <li>
  72. <span class="list-heading">{$LANG.clientareahostingnextduedate}</span>
  73. <span class="list-text">{$nextduedate}</span>
  74. </li>
  75. {/if}
  76. <li>
  77. <span class="list-heading">{$LANG.orderpaymentmethod}</span>
  78. <span class="list-text">{$paymentmethod}</span>
  79. </li>
  80. </ul>
  81. </div>
  82. </div>
  83. </div>
  84. </div>
  85. </div>
  86. {*
  87. {if $showcancelbutton || $packagesupgrade}
  88. <div class="row">
  89. {if $packagesupgrade}
  90. <div class="col-xs-{if $showcancelbutton}6{else}12{/if}">
  91. <a href="upgrade.php?type=package&amp;id={$id}" class="btn btn-block btn-primary">{$LANG.upgrade}</a>
  92. </div>
  93. {/if}
  94. {if $showcancelbutton}
  95. <div class="col-xs-{if $packagesupgrade}6{else}12{/if}">
  96. <a href="clientarea.php?action=cancel&amp;id={$id}" class="btn btn-block btn-danger {if $pendingcancellation}disabled{/if}">{if $pendingcancellation}{$LANG.cancellationrequested}{else}{$LANG.clientareacancelrequestbutton}{/if}</a>
  97. </div>
  98. {/if}
  99. </div>
  100. {/if}
  101. *}
  102. {if $systemStatus == 'Active'}
  103. {foreach $hookOutput as $output}
  104. <div class="section">
  105. <div>
  106. {$output}
  107. </div>
  108. <div class=" clearfix"></div>
  109. </div>
  110. {/foreach}
  111. {if $domain || $moduleclientarea || $configurableoptions || $customfields || $lastupdate}
  112. <div class="section">
  113. <div class="card panel panel-tabs">
  114. <div class="card-header">
  115. <ul class="nav nav-pills card-header-pills flex-column flex-md-row">
  116. {if $domain}
  117. <li class="nav-item">
  118. <a href="#domain" data-toggle="tab" class="nav-link active"><i class="fas fa-globe fa-fw"></i> {lang key='manage'}</a>
  119. </li>
  120. {/if}
  121. {if $configurableoptions}
  122. <li class="nav-item">
  123. <a href="#configoptions" data-toggle="tab" class="nav-link{if !$domain && !$moduleclientarea} active{/if}"><i class="fas fa-cubes fa-fw"></i>Details</a>
  124. </li>
  125. {/if}
  126. {if $metricStats}
  127. <li class="nav-item">
  128. <a href="#metrics" data-toggle="tab" class="nav-link{if !$domain && !$moduleclientarea && !$configurableoptions} active{/if}"><i class="fas fa-chart-line fa-fw"></i> {lang key='metrics.title'}</a>
  129. </li>
  130. {/if}
  131. {if $customfields}
  132. <li class="nav-item">
  133. <a href="#additionalinfo" data-toggle="tab" class="nav-link{if !$domain && !$moduleclientarea && !$metricStats && !$configurableoptions} active{/if}"><i class="fas fa-info fa-fw"></i>Zugangsdaten</a>
  134. </li>
  135. {/if}
  136. {if $lastupdate}
  137. <li class="nav-item">
  138. <a href="#resourceusage" data-toggle="tab" class="nav-link{if !$domain && !$moduleclientarea && !$configurableoptions && !$customfields} active{/if}"><i class="fas fa-inbox fa-fw"></i> {lang key='resourceUsage'}</a>
  139. </li>
  140. {/if}
  141. </ul>
  142. </div>
  143. <div class="card-body">
  144. <div class="tab-content">
  145. {if $configurableoptions}
  146. <div class="tab-pane fade{if !$domain && !$moduleclientarea} show active{/if}" role="tabpanel" id="configoptions">
  147. <table width="100%" cellspacing="0" cellpadding="0" class="frame">
  148. <tr>
  149. <td>
  150. <table width="100%" border="0" cellpadding="10" cellspacing="0" class="table table-striped table-framed">
  151. <tr>
  152. <td align='left'>Servername</td>
  153. <td align="left">{$domain}</td>
  154. </tr>
  155. <tr>
  156. <td align='left'>IP Adresse</td>
  157. <td align="left">{$dedicatedip}</td>
  158. </tr>
  159. <tr>
  160. <td align='left'>VM Template</td>
  161. <td align="left">{$moduleParams.configoptions['VM Template']}</td>
  162. </tr>
  163. <tr>
  164. <td align='left'>CPU Cores</td>
  165. <td align="left">{$moduleParams.configoptions['The number of cores per socket']}</td>
  166. </tr>
  167. <tr>
  168. <td align='left'>Hautspeicher</td>
  169. <td align="left">{$moduleParams.configoptions['Amount of RAM']} GB</td>
  170. </tr>
  171. <tr>
  172. <td align='left'>Festplattenplatz</td>
  173. <td align="left">{$moduleParams.configoptions['Disk Space']} GB</a></td>
  174. </tr>
  175. </table>
  176. </td>
  177. </tr>
  178. </table>
  179. </div>
  180. {/if}
  181. {if $metricStats}
  182. <div class="tab-pane fade{if !$domain && !$moduleclientarea && !$configurableoptions} show active{/if}" role="tabpanel" id="metrics">
  183. <p>{lang key='metrics.explanation'}</p>
  184. <table class="table table-striped mb-1 table-solid-bottom-border-light-gray">
  185. <tr>
  186. <th>{lang key='metrics.metric'}</th>
  187. <th>{lang key='metrics.currentUsage'}</th>
  188. <th>{lang key='metrics.pricing'}</th>
  189. <th>{lang key='metrics.lastUpdated'}</th>
  190. </tr>
  191. {foreach $metricStats as $metric}
  192. <tr>
  193. <td>{$metric.displayName}</td>
  194. <td>{$metric.currentValue|round:1}</td>
  195. <td>
  196. {if count($metric.pricing) > 1}
  197. {lang key='metrics.startingFrom'} {$metric.lowestPrice} / {if $metric.unitName}{$metric.unitName}{else}{lang key='metrics.unit'}{/if}
  198. <br>
  199. <button type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target="#modalMetricPricing-{$metric.systemName}">
  200. {lang key='metrics.viewPricing'}
  201. </button>
  202. {elseif count($metric.pricing) == 1}
  203. {$metric.lowestPrice} / {if $metric.unitName}{$metric.unitName}{else}{lang key='metrics.unit'}{/if}
  204. {if $metric.includedQuantity > 0} ({$metric.includedQuantity|round:1} {lang key='metrics.includedNotCounted'}){/if}
  205. {else}
  206. &mdash;
  207. {/if}
  208. {include file="$template/usagebillingpricing.tpl"}
  209. </td>
  210. <td>{if is_string($metric.lastUpdated)}{$metric.lastUpdated}{else}{$metric.lastUpdated->diffForHumans()}{/if}</td>
  211. </tr>
  212. {/foreach}
  213. </table>
  214. </div>
  215. {/if}
  216. {if $domain}
  217. <div class="tab-pane fade show active" role="tabpanel" id="domain">
  218. <table width="100%" cellspacing="0" cellpadding="0" class="frame">
  219. <tr>
  220. <td align='center'>
  221. <div class="mg-wrapper body" data-target=".body" data-spy="scroll" data-twttr-rendered="true">
  222. <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
  223. <link rel="stylesheet" href="{$assetsURL}/css/layers-ui.css">
  224. <link rel="stylesheet" href="{$assetsURL}/css/mg_styles.css">
  225. {if $isCustomModuleCss}
  226. <link rel="stylesheet" href="{$customAssetsURL}/css/module_styles.css">
  227. {/if}
  228. <div class="full-screen-module-container" id="layers">
  229. <div class="lu-app">
  230. {$content}
  231. </div>
  232. </div>
  233. </div>
  234. </td>
  235. </tr>
  236. </table>
  237. </div>
  238. {/if}
  239. {if $customfields}
  240. <div class="tab-pane fade{if !$domain && !$moduleclientarea && !$configurableoptions && !$metricStats} show active{/if}" role="tabpanel" id="additionalinfo">
  241. <table width="100%" border="0" cellpadding="10" cellspacing="0" class="table table-striped table-framed">
  242. <tr>
  243. <td align='left'>Admin Username</td>
  244. <td align="left">{$moduleParams.customfields['ciuser']}</td>
  245. </tr>
  246. <tr>
  247. <td align='left'>SSH-Key</td>
  248. <td align="left">{assign var=keyName value=' '|explode:$moduleParams.customfields['sshkeys']}{$keyName[2]}</td>
  249. </tr>
  250. </table>
  251. </div>
  252. {/if}
  253. {if $lastupdate}
  254. <div class="tab-pane fade" role="tabpanel" id="resourceusage" align="center">
  255. <table width="100%" cellspacing="0" cellpadding="0" class="frame">
  256. <tr>
  257. <td align="center">
  258. <div class="col-sm-10">
  259. <h4>{lang key='diskSpace'} %</h4>
  260. <input type="text" value="{$diskpercent|substr:0:-1}" class="dial-usage" data-width="100" data-height="100" data-min="0" data-readOnly="true" />
  261. <p>{($diskusage / 1024)|round:1} GB / {($disklimit / 1024)|round:1} GB</p>
  262. </div>
  263. <div class="clearfix"></div>
  264. <p class="text-muted">{lang key='clientarealastupdated'}: {$lastupdate}</p>
  265. </td>
  266. <td align="center">
  267. <div class="col-sm-10">
  268. <h4>{lang key='bandwidth'} %</h4>
  269. <input type="text" value="{$bwpercent|substr:0:-1}" class="dial-usage" data-width="100" data-height="100" data-min="0" data-readOnly="true" />
  270. <p>{($bwusage / 1024)|round:1} GB / {if $bwlimit == 'Unbegrenzt'}{$bwlimit}{else}{($bwlimit / 1024)|round:1} GB{/if}</p>
  271. </div>
  272. <div class="clearfix"></div>
  273. <p class="text-muted">{lang key='clientarealastupdated'}: {$lastupdate}</p>
  274. </td>
  275. </tr>
  276. </table>
  277. <script src="{$BASE_PATH_JS}/jquery.knob.js"></script>
  278. <script>
  279. jQuery(function() {
  280. jQuery(".dial-usage").knob({
  281. 'format': function(v) {
  282. alert(v);
  283. }
  284. });
  285. });
  286. </script>
  287. </div>
  288. {/if}
  289. </div>
  290. </div>
  291. </div>
  292. </div>
  293. {/if}
  294. {else}
  295. <div class="alert-lg no-data">
  296. <div class="icon">
  297. <i class="fas fa-exclamation-triangle"></i>
  298. </div>
  299. <div class="text">
  300. {if $suspendreason}
  301. <strong>{$suspendreason}</strong><br />
  302. {/if}
  303. {$LANG.cPanel.packageNotActive} {$status}.<br />
  304. {if $systemStatus eq "Pending"}
  305. {$LANG.cPanel.statusPendingNotice}
  306. {elseif $systemStatus eq "Suspended"}
  307. {$LANG.cPanel.statusSuspendedNotice}
  308. {/if}
  309. </div>
  310. </div>
  311. {/if}
  312. {/if}
  313. </div>
  314. </div>
  315. {else}
  316. <div class="mg-wrapper body" data-target=".body" data-spy="scroll" data-twttr-rendered="true">
  317. <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
  318. <link rel="stylesheet" href="{$assetsURL}/css/layers-ui.css">
  319. <link rel="stylesheet" href="{$assetsURL}/css/mg_styles.css">
  320. {if $isCustomModuleCss}
  321. <link rel="stylesheet" href="{$customAssetsURL}/css/module_styles.css">
  322. {/if}
  323. <div class="full-screen-module-container" id="layers">
  324. <div class="lu-app">
  325. {$content}
  326. </div>
  327. </div>
  328. </div>
  329. {/if}
  330. {if $isDebug}
  331. <script type="text/javascript" src="https://unpkg.com/vue"></script>
  332. <script type="text/javascript" src="https://unpkg.com/vuex"></script>
  333. {else}
  334. <script type="text/javascript" src="{$assetsURL}/js/vue.min.js"></script>
  335. <script type="text/javascript" src="{$assetsURL}/js/vuex.min.js"></script>
  336. {/if}
  337. <script type="text/javascript" src="{$assetsURL}/js/mgComponents.js"></script>
  338. <script type="text/javascript" src="{$assetsURL}/js/jscolor.min.js"></script>
  339. <script type="text/javascript" src="{$assetsURL}/js/layers-ui.js"></script>
  340. <script type="text/javascript" src="{$assetsURL}/js/chart.min.js"></script>
  341. <div class="clear"></div>