Some javascript libraries didn't need to be hardcoded. So, add them to packages dependency and import them at frontend files Signed-off-by: Ramon Medeiros <ramonn(a)linux.vnet.ibm.com&gt; --- docs/fedora-deps.md | 4 +- docs/ubuntu-deps.md | 3 +- src/wok/config.py.in | 22 +++ ui/pages/login.html.tmpl.fedora | 332 +++++++++++++++++++++++++++++++++++++++ ui/pages/login.html.tmpl.ubuntu | 332 +++++++++++++++++++++++++++++++++++++++ ui/pages/wok-ui.html.tmpl.fedora | 231 +++++++++++++++++++++++++++ ui/pages/wok-ui.html.tmpl.ubuntu | 231 +++++++++++++++++++++++++++ 7 files changed, 1153 insertions(+), 2 deletions(-) create mode 100644 ui/pages/login.html.tmpl.fedora create mode 100644 ui/pages/login.html.tmpl.ubuntu create mode 100644 ui/pages/wok-ui.html.tmpl.fedora create mode 100644 ui/pages/wok-ui.html.tmpl.ubuntu diff --git a/docs/fedora-deps.md b/docs/fedora-deps.md index e665cdb..337f75a 100644 --- a/docs/fedora-deps.md +++ b/docs/fedora-deps.md @@ -28,7 +28,9 @@ Runtime Dependencies $ sudo yum install python-cherrypy python-cheetah PyPAM m2crypto \ python-jsonschema python-psutil python-ldap \ python-lxml nginx openssl open-sans-fonts \ - fontawesome-fonts logrotate + fontawesome-fonts logrotate js-jquery \ + js-moment js-typeahead.js nodejs-lodash.noarch \ + nodejs-es5-shim # For RHEL systems, install the additional packages: $ sudo yum install python-ordereddict diff --git a/docs/ubuntu-deps.md b/docs/ubuntu-deps.md index 3a0f75c..0fe0038 100644 --- a/docs/ubuntu-deps.md +++ b/docs/ubuntu-deps.md @@ -18,7 +18,8 @@ Runtime Dependencies $ sudo apt-get install python-cherrypy3 python-cheetah python-pam \ python-m2crypto python-jsonschema \ python-psutil python-ldap python-lxml nginx \ - openssl fonts-font-awesome texlive-fonts-extra + openssl fonts-font-awesome texlive-fonts-extra \ + libjs-jquery libjs-lodash jquery-ui libjs-bootstrap Packages required for UI development ------------------------------------ diff --git a/src/wok/config.py.in b/src/wok/config.py.in index cbe585c..c007935 100644 --- a/src/wok/config.py.in +++ b/src/wok/config.py.in @@ -57,6 +57,15 @@ FONTS_PATH = { ] } +JS_LIBS = { + "jquery" : "/usr/share/javascript/jquery/2.1.3/jquery.min.js", + "lodash" : "/usr/lib/node_modules/lodash/lodash.js", + "moment" : "/usr/share/javascript/moment/min/moment-with-locales.min.js", + "typeahead" : "/usr/share/javascript/typeahead.js/dist/typeahead.bundle.min.js", + "es5-shim" : "/usr/lib/node_modules/es5-shim/es5-shim.min.js" +} + + def get_log_download_path(): return os.path.join(paths.state_dir, 'logs') @@ -103,6 +112,11 @@ class Paths(object): if os.path.exists(font_file): setattr(self, '%s_dir' % font, path) + for js in JS_LIBS.keys(): + path = JS_LIBS[js] + if os.path.exists(path): + setattr(self, '%s_dir' % js, path) + def get_prefix(self): if __file__.startswith("/"): base = os.path.dirname(__file__) @@ -172,6 +186,14 @@ class UIConfig(dict): 'tools.wokauth.on': False, 'tools.nocache.on': False} + for js, file in JS_LIBS.iteritems(): + if os.path.exists(file): + ui_configs['/js/%s' % os.path.basename(file) ] = { + 'tools.staticfile.on': True, + 'tools.staticfile.filename': file, + 'tools.wokauth.on': False, + 'tools.nocache.on': False} + self.update(ui_configs) diff --git a/ui/pages/login.html.tmpl.fedora b/ui/pages/login.html.tmpl.fedora new file mode 100644 index 0000000..22aa8f1 --- /dev/null +++ b/ui/pages/login.html.tmpl.fedora @@ -0,0 +1,332 @@ +#* + * Project Wok + * + * Copyright IBM Corp, 2014-2016 + * + * Code derived from Project Kimchi + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + *# +#unicode UTF-8 +#import gettext +#from wok.cachebust import href +#silent t = gettext.translation($lang.domain, $lang.localedir, languages=$lang.lang, fallback=True) +#silent _ = t.gettext +#silent _t = t.gettext +#silent next = "?next=%s" % $getVar('data.next', '') if $getVar('data.next', '') else "" +#from wok.config import get_version +<!DOCTYPE html> +<html lang="$lang.lang[0]"> +<head> + <meta charset="UTF-8"> + <title>Wok</title> + <meta http-equiv="X-UA-Compatible" content="IE=edge" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" /> + <meta name="apple-mobile-web-app-capable" content="yes"> + <meta name="apple-mobile-web-app-title" content="Wok"> + <link href="$href('images/apple-touch-icon-57x57.png')" sizes="57x57" rel="apple-touch-icon-precomposed"> + <link href="$href('images/apple-touch-icon-72x72.png')" sizes="72x72" rel="apple-touch-icon-precomposed"> + <link href="$href('images/apple-touch-icon-76x76.png')" sizes="76x76" rel="apple-touch-icon-precomposed"> + <link href="$href('images/apple-touch-icon-114x114.png')" sizes="114x114" rel="apple-touch-icon-precomposed"> + <link href="$href('images/apple-touch-icon-144x144.png')" sizes="144x144" rel="apple-touch-icon-precomposed"> + <link href="$href('images/apple-touch-icon-152x152.png')" sizes="152x152" rel="apple-touch-icon-precomposed"> + <link href="$href('images/apple-touch-icon-180x180.png')" sizes="120x120" rel="apple-touch-icon-precomposed"> + <link rel="icon" type="image/png" href="$href('images/android-chrome-36x36.png')" sizes="36x36"> + <link rel="icon" type="image/png" href="$href('images/android-chrome-48x48.png')" sizes="48x48"> + <link rel="icon" type="image/png" href="$href('images/android-chrome-72x72.png')" sizes="72x72"> + <link rel="icon" type="image/png" href="$href('images/android-chrome-96x96.png')" sizes="96x96"> + <link rel="icon" type="image/png" href="$href('images/android-chrome-144x144.png')" sizes="144x144"> + <link rel="icon" type="image/png" href="$href('images/android-chrome-192x192.png')" sizes="192x192"> + <link rel="icon" type="image/png" href="$href('images/favicon-16x16.png')" sizes="16x16"> + <link rel="icon" type="image/png" href="$href('images/favicon-32x32.png')" sizes="32x32"> + <link rel="icon" type="image/png" href="$href('images/favicon-96x96.png')" sizes="96x96"> + <link rel="icon" type="image/png" href="$href('images/favicon-194x194.png')" sizes="194x194"> + <link rel="mask-icon" href="$href('images/safari-pinned-tab.svg')" color="#5bbad5"> + <meta name="application-name" content="Wok"> + <meta name="msapplication-config" content="none" /> + <meta name="msapplication-TileColor" content="#f73434" /> + <meta name="msapplication-square70x70logo" content="$href('images/mstile-70x70.png')" /> + <meta name="msapplication-square150x150logo" content="$href('images/mstile-150x150.png')" /> + <meta name="msapplication-wide310x150logo" content="$href('images/mstile-310x310.png')" /> + <meta name="msapplication-square310x310logo" content="$href('images/mstile-310x150.png')" /> + <link rel="stylesheet" href="$href('libs/jquery-ui/themes/base/jquery-ui.min.css')"> + <link rel="stylesheet" href="$href('css/jquery-ui.custom.css')"> + <link rel="stylesheet" href="$href('css/bootstrap.custom.css')"> + <link rel="stylesheet" href="$href('libs/bootstrap-select/dist/css/bootstrap-select.min.css')"> + <link rel="stylesheet" href="$href('libs/datatables/css/datatables.min.css')"> + <link rel="stylesheet" href="$href('css/fontawesome/fontawesome.css')"> + <link rel="stylesheet" href="$href('css/opensans/opensans.css')"> + <link rel="stylesheet" href="$href('css/bootstrap-select.custom.css')"> + <link rel="stylesheet" href="$href('css/datatables.bootstrap.css')"> + <link rel="stylesheet" href="$href('css/wok.css')"> + <script src="js/es5-shim.min.js"></script> + <script src="js/jquery.min.js"></script> + <script src="$href('libs/jquery-ui/jquery-ui.min.js')"></script> + <script src="$href('libs/jquery-ui/jquery-ui-i18n.min.js')"></script> + <script src="$href('libs/jquery-i18n/jquery.i18n.min.js')"></script> + <script src="$href('libs/bootstrap/bootstrap.min.js')"></script> + <script src="$href('libs/bootstrap-select/dist/js/bootstrap-select.min.js')"></script> + <script src="js/lodash.js"></script> + <script src="js/moment-with-locales.min.js"></script> + <script src="$href('libs/datatables/js/datatables.min.js')"></script> + <script src="$href('js/wok.min.js')"></script> +</head> +<body class="login" onload="wok.login_main()"> + <div class="topbar"> + <nav class="navbar navbar-inverse"> + <div class="container"> + <div class="navbar-header"> + <a class="navbar-brand" href="#">Wok</a> + </div> + </div> + </nav> + <nav class="navbar navbar-default"> + <div class="container"> + <div class="navbar-header"> + </div> + <ul class="nav navbar-nav"> + <li class="hostname"><span class="host-location"></span></li> + </ul> + </div> + </nav> + </div> + <div class="content"> + <div class="container"> + <div id="login-window" class="login-area row"> + <div class="err-area"> + <div id="messUserPass" class="alert alert-danger" style="display: none;">$_("The username or password you entered is incorrect. Please try again.")</div> + <div id="messSession" class="alert alert-danger" style="display: none;">$_("Session timeout, please re-login.")</div> + <div id="missServer" class="alert alert-danger" style="display: none;">$_("Server unreachable.")</div> + </div> + <form id="form-login" class="form-horizontal" method="post"> + <div class="form-group"> + <label for="username" class="sr-only">$_("User Name")</label> + <input type="text" class="form-control" id="username" name="username" required="required" placeholder="$_(" User Name ")" autofocus autocomplete="off" /> + <div id="username-msg" class="msg-required"></div> + </div> + <div class="form-group"> + <label for="password" class="sr-only">$_("Password")</label> + <input type="password" class="form-control" id="password" name="password" required="required" placeholder="$_(" Password ")" autocomplete="off" /> + <div id="password-msg" class="msg-required"></div> + </div> + <div class="form-group"> + <button id="btn-login" class="btn btn-login col-md-12 col-lg-12"> + <span id="login">$_("Log in")</span> + <span id="logging" style="display: none;">$_("Logging in...")</span> + </button> + </div> + <div class="form-group"> + <label for="userLang">$_("Language")</label> + <select id="userLang" class="selectpicker col-md-12 col-lg-12"> + <option value="en_US">English (US)</option> + <option value="zh_CN">中文（简体）</option> + <option value="pt_BR">Português (Brasil)</option> + <option value="de_DE">Deutsch (Deutschland)</option> + <option value="es_ES">Español (España)</option> + <option value="fr_FR">Français (France)</option> + <option value="it_IT">Italiano (Italia)</option> + <option value="ja_JP">日本語 (日本)</option> + <option value="ko_KR">한국어 (대한민국)</option> + <option value="ru_RU">Русский (Россия)</option> + <option value="zh_TW">中文（繁體）</option> + </select> + </div> + <div class="form-group"> + <label for="userLocale">$_("Locale")</label> + <select id="userLocale" class="selectpicker col-md-12 col-lg-12"> + <option value="af-ZA">Afrikaans (South Africa)</option> + <option value="sq-AL">Albanian (Albania)</option> + <option value="am-ET">Amharic (Ethiopia)</option> + <option value="ar-DZ">Arabic (Algeria)</option> + <option value="ar-BH">Arabic (Bahrain)</option> + <option value="ar-EG">Arabic (Egypt)</option> + <option value="ar-IQ">Arabic (Iraq)</option> + <option value="ar-JO">Arabic (Jordan)</option> + <option value="ar-KW">Arabic (Kuwait)</option> + <option value="ar-LB">Arabic (Lebanon)</option> + <option value="ar-LY">Arabic (Libya)</option> + <option value="ar-MR">Arabic (Mauritania)</option> + <option value="ar-MA">Arabic (Morocco)</option> + <option value="ar-OM">Arabic (Oman)</option> + <option value="ar-QA">Arabic (Qatar)</option> + <option value="ar-SA">Arabic (Saudi Arabia)</option> + <option value="ar-SY">Arabic (Syria)</option> + <option value="ar-TN">Arabic (Tunisia)</option> + <option value="ar-AE">Arabic (United Arab Emirates)</option> + <option value="ar-YE">Arabic (Yemen)</option> + <option value="hy-AM">Armenian (Armenia)</option> + <option value="as-IN">Assamese (India)</option> + <option value="az-AZ">Azerbaijani (Azerbaijan)</option> + <option value="eu-ES">Basque (Spain)</option> + <option value="be-BY">Belarusian (Belarus)</option> + <option value="bn-BD">Bengali (Bangladesh)</option> + <option value="bn-IN">Bengali (India)</option> + <option value="bs-BA">Bosnian (Bosnia)</option> + <option value="bg-BG">Bulgarian (Bulgaria)</option> + <option value="my-MM">Burmese (Myanmar)</option> + <option value="ca-ES">Catalan (Spain)</option> + <option value="zh-CN">Chinese-simplified (China)</option> + <option value="zh-SG">Chinese-simplified (Singapore)</option> + <option value="zh-HK">Chinese-traditional (Hong Kong S.A.R. of China)</option> + <option value="zh-MO">Chinese-traditional (Macao)</option> + <option value="zh-TW">Chinese-traditional (Taiwan)</option> + <option value="hr-HR">Croatian (Croatia)</option> + <option value="cs-CZ">Czech (Czech Republic)</option> + <option value="da-DK">Danish (Denmark)</option> + <option value="nl-BE">Dutch (Belgium)</option> + <option value="nl-NL">Dutch (The Netherlands)</option> + <option value="en-AU">English (Australia)</option> + <option value="en-BE">English (Belgium)</option> + <option value="en-CM">English (Cameroon)</option> + <option value="en-CA">English (Canada)</option> + <option value="en-GH">English (Ghana)</option> + <option value="en-HK">English (Hong Kong S.A.R. of China)</option> + <option value="en-IN">English (India)</option> + <option value="en-IE">English (Ireland)</option> + <option value="en-KE">English (Kenya)</option> + <option value="en-MU">English (Mauritius)</option> + <option value="en-NZ">English (New Zealand)</option> + <option value="en-NG">English (Nigeria)</option> + <option value="en-PH">English (Philippines)</option> + <option value="en-SG">English (Singapore)</option> + <option value="en-ZA">English (South Africa)</option> + <option value="en-TZ">English (Tanzania)</option> + <option value="en-GB">English (United Kingdom)</option> + <option value="en-US">English (United States)</option> + <option value="en-ZM">English (Zambia)</option> + <option value="et-EE">Estonian (Estonia)</option> + <option value="tl-PH">Filipino (Philippines)</option> + <option value="fi-FI">Finnish (Finland)</option> + <option value="fr-DZ">French (Algeria)</option> + <option value="fr-CM">French (Cameroon)</option> + <option value="fr-CD">French (Democratic Republic of the Congo)</option> + <option value="fr-BE">French (Belgium)</option> + <option value="fr-CA">French (Canada)</option> + <option value="fr-FR">French (France)</option> + <option value="fr-CI">French (Ivory Coast [Côte d’Ivoire])</option> + <option value="fr-LU">French (Luxembourg)</option> + <option value="fr-MR">French (Mauritania)</option> + <option value="fr-MU">French (Mauritius)</option> + <option value="fr-MA">French (Morocco)</option> + <option value="fr-SN">French (Senegal)</option> + <option value="fr-CH">French (Switzerland)</option> + <option value="fr-TN">French (Tunisia)</option> + <option value="gl-ES">Galician (Spain)</option> + <option value="lg-UG">Ganda (Uganda)</option> + <option value="ka-GE">Georgian (Georgia)</option> + <option value="de-AT">German (Austria)</option> + <option value="de-DE">German (Germany)</option> + <option value="de-LU">German (Luxembourg)</option> + <option value="de-CH">German (Switzerland)</option> + <option value="el-GR">Greek (Greece)</option> + <option value="gu-IN">Gujarati (India)</option> + <option value="ha-NG">Hausa (Nigeria)</option> + <option value="he-IL">Hebrew (Israel)</option> + <option value="hi-IN">Hindi (India)</option> + <option value="hu-HU">Hungarian (Hungary)</option> + <option value="is-IS">Icelandic (Iceland)</option> + <option value="ig-NG">Igbo (Nigeria)</option> + <option value="id-ID">Indonesian (Indonesia)</option> + <option value="it-IT">Italian (Italy)</option> + <option value="it-CH">Italian (Switzerland)</option> + <option value="ja-JP">Japanese (Japan)</option> + <option value="kn-IN">Kannada (India)</option> + <option value="kk-KZ">Kazakh (Kazakhstan)</option> + <option value="km-KH">Khmer (Cambodia)</option> + <option value="rw-RW">Kinyarwanda (Rwanda)</option> + <option value="kok-IN">Konkani (India)</option> + <option value="ko-KR">Korean (Korea, South)</option> + <option value="lo-LA">Lao (Laos)</option> + <option value="lv-LV">Latvian (Latvia)</option> + <option value="lt-LT">Lithuanian (Lithuania)</option> + <option value="mk-MK">Macedonian (Macedonia)</option> + <option value="ms-MY">Malay-Latin (Malaysia)</option> + <option value="ml-IN">Malayalam (India)</option> + <option value="mt-MT">Maltese (Malta)</option> + <option value="mr-IN">Marathi (India)</option> + <option value="mn-Cyrl-MN">Mongolian-Cyrillic (Mongolia)</option> + <option value="ne-IN">Nepali (India)</option> + <option value="ne-NP">Nepali (Nepal)</option> + <option value="nb-NO">Norwegian Bokmål (Norway)</option> + <option value="nn-NO">Norwegian Nynorsk (Norway)</option> + <option value="or-IN">Oriya [aka, Odia] (India)</option> + <option value="om-ET">Oromo (Ethiopia)</option> + <option value="pl-PL">Polish (Poland)</option> + <option value="pt-AO">Portuguese (Angola)</option> + <option value="pt-BR">Portuguese (Brazil)</option> + <option value="pt-MO">Portuguese (Macao)</option> + <option value="pt-MZ">Portuguese (Mozambique)</option> + <option value="pt-PT">Portuguese (Portugal)</option> + <option value="pa-IN">Punjabi (India)</option> + <option value="ro-RO">Romanian (Romania)</option> + <option value="ru-RU">Russian (Russia)</option> + <option value="sr-RS">Serbian-Cyrillic (Serbia)</option> + <option value="sr-ME">Serbian-Latin (Montenegro)</option> + <option value="sr-Latn-RS">Serbian-Latin (Serbia)</option> + <option value="si-LK">Sinhala (Sri Lanka)</option> + <option value="sk-SK">Slovak (Slovakia)</option> + <option value="sl-SI">Slovenian (Slovenia)</option> + <option value="es-AR">Spanish (Argentina)</option> + <option value="es-BO">Spanish (Bolivia)</option> + <option value="es-CL">Spanish (Chile)</option> + <option value="es-CO">Spanish (Colombia)</option> + <option value="es-CR">Spanish (Costa Rica)</option> + <option value="es-DO">Spanish (Dominican Republic)</option> + <option value="es-EC">Spanish (Ecuador)</option> + <option value="es-SV">Spanish (El Salvador)</option> + <option value="es-GT">Spanish (Guatemala)</option> + <option value="es-HN">Spanish (Honduras)</option> + <option value="es-MX">Spanish (Mexico)</option> + <option value="es-NI">Spanish (Nicaragua)</option> + <option value="es-PA">Spanish (Panama)</option> + <option value="es-PY">Spanish (Paraguay)</option> + <option value="es-PE">Spanish (Peru)</option> + <option value="es-PR">Spanish (Puerto Rico)</option> + <option value="es-ES">Spanish (Spain)</option> + <option value="es-US">Spanish (United States)</option> + <option value="es-UY">Spanish (Uruguay)</option> + <option value="es-VE">Spanish (Venezuela)</option> + <option value="sw-KE">Swahili (Kenya)</option> + <option value="sw-TZ">Swahili (Tanzania)</option> + <option value="sv-SE">Swedish (Sweden)</option> + <option value="ta-IN">Tamil (India)</option> + <option value="te-IN">Telugu (India)</option> + <option value="th-TH">Thai (Thailand)</option> + <option value="tr-TR">Turkish (Turkey)</option> + <option value="uk-UA">Ukrainian (Ukraine)</option> + <option value="ur-IN">Urdu (India)</option> + <option value="ur-PK">Urdu (Pakistan)</option> + <option value="uz-Cyrl-UZ">Uzbek-Cyrillic (Uzbekistan)</option> + <option value="uz-Latn-UZ">Uzbek-Latin (Uzbekistan)</option> + <option value="vi-VN">Vietnamese (Vietnam)</option> + <option value="cy-GB">Welsh (United Kingdom)</option> + <option value="yo-NG">Yoruba (Nigeria)</option> + <option value="zu-ZA">Zulu (South Africa)</option> + <option value="az-AZ">Azerbaijani-Latin (Azerbaijan)</option> + <option value="sr-CS">Serbian-Cyrillic ()</option> + <option value="sr-Cyrl-CS">Serbian-Cyrillic (Serbia and Montenegro)</option> + <option value="sr-Latn-CS">Serbian-Latin (Serbia and Montenegro)</option> + </select> + </div> + </form> + </div> + <div class="row"> + <div class="col-lg-4 delayed-fadein"> + <p class="text-muted powered hidden">Powered by:</p> + <ul id="wok-logos" class="list-inline"></ul> + </div> + </div> + </div> + </div> +</body> +</html> diff --git a/ui/pages/login.html.tmpl.ubuntu b/ui/pages/login.html.tmpl.ubuntu new file mode 100644 index 0000000..3d8ddcc --- /dev/null +++ b/ui/pages/login.html.tmpl.ubuntu @@ -0,0 +1,332 @@ +#* + * Project Wok + * + * Copyright IBM Corp, 2014-2016 + * + * Code derived from Project Kimchi + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + *# +#unicode UTF-8 +#import gettext +#from wok.cachebust import href +#silent t = gettext.translation($lang.domain, $lang.localedir, languages=$lang.lang, fallback=True) +#silent _ = t.gettext +#silent _t = t.gettext +#silent next = "?next=%s" % $getVar('data.next', '') if $getVar('data.next', '') else "" +#from wok.config import get_version +<!DOCTYPE html> +<html lang="$lang.lang[0]"> +<head> + <meta charset="UTF-8"> + <title>Wok</title> + <meta http-equiv="X-UA-Compatible" content="IE=edge" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" /> + <meta name="apple-mobile-web-app-capable" content="yes"> + <meta name="apple-mobile-web-app-title" content="Wok"> + <link href="$href('images/apple-touch-icon-57x57.png')" sizes="57x57" rel="apple-touch-icon-precomposed"> + <link href="$href('images/apple-touch-icon-72x72.png')" sizes="72x72" rel="apple-touch-icon-precomposed"> + <link href="$href('images/apple-touch-icon-76x76.png')" sizes="76x76" rel="apple-touch-icon-precomposed"> + <link href="$href('images/apple-touch-icon-114x114.png')" sizes="114x114" rel="apple-touch-icon-precomposed"> + <link href="$href('images/apple-touch-icon-144x144.png')" sizes="144x144" rel="apple-touch-icon-precomposed"> + <link href="$href('images/apple-touch-icon-152x152.png')" sizes="152x152" rel="apple-touch-icon-precomposed"> + <link href="$href('images/apple-touch-icon-180x180.png')" sizes="120x120" rel="apple-touch-icon-precomposed"> + <link rel="icon" type="image/png" href="$href('images/android-chrome-36x36.png')" sizes="36x36"> + <link rel="icon" type="image/png" href="$href('images/android-chrome-48x48.png')" sizes="48x48"> + <link rel="icon" type="image/png" href="$href('images/android-chrome-72x72.png')" sizes="72x72"> + <link rel="icon" type="image/png" href="$href('images/android-chrome-96x96.png')" sizes="96x96"> + <link rel="icon" type="image/png" href="$href('images/android-chrome-144x144.png')" sizes="144x144"> + <link rel="icon" type="image/png" href="$href('images/android-chrome-192x192.png')" sizes="192x192"> + <link rel="icon" type="image/png" href="$href('images/favicon-16x16.png')" sizes="16x16"> + <link rel="icon" type="image/png" href="$href('images/favicon-32x32.png')" sizes="32x32"> + <link rel="icon" type="image/png" href="$href('images/favicon-96x96.png')" sizes="96x96"> + <link rel="icon" type="image/png" href="$href('images/favicon-194x194.png')" sizes="194x194"> + <link rel="mask-icon" href="$href('images/safari-pinned-tab.svg')" color="#5bbad5"> + <meta name="application-name" content="Wok"> + <meta name="msapplication-config" content="none" /> + <meta name="msapplication-TileColor" content="#f73434" /> + <meta name="msapplication-square70x70logo" content="$href('images/mstile-70x70.png')" /> + <meta name="msapplication-square150x150logo" content="$href('images/mstile-150x150.png')" /> + <meta name="msapplication-wide310x150logo" content="$href('images/mstile-310x310.png')" /> + <meta name="msapplication-square310x310logo" content="$href('images/mstile-310x150.png')" /> + <link rel="stylesheet" href="/usr/share/javascript/jquery-ui/css/smoothness/jquery-ui.min.css"> + <link rel="stylesheet" href="/usr/share/javascript/jquery-ui/css/smoothness/jquery-ui.css"> + <link rel="stylesheet" href="/usr/share/javascript/bootstrap/css/bootstrap.css"> + <link rel="stylesheet" href="$href('libs/bootstrap-select/dist/css/bootstrap-select.min.css')"> + <link rel="stylesheet" href="$href('libs/datatables/css/datatables.min.css')"> + <link rel="stylesheet" href="$href('css/fontawesome/fontawesome.css')"> + <link rel="stylesheet" href="$href('css/opensans/opensans.css')"> + <link rel="stylesheet" href="$href('css/bootstrap-select.custom.css')"> + <link rel="stylesheet" href="$href('css/datatables.bootstrap.css')"> + <link rel="stylesheet" href="$href('css/wok.css')"> + <script src="$href('libs/es5-shim/es5-shim.min.js')"></script> + <script src="/usr/share/javascript/jquery/jquery.min.js"></script> + <script src="/usr/share/javascript/jquery-ui/jquery-ui.min.js"></script> + <script src="/usr/share/javascript/jquery-ui/ui/i18n/jquery-ui-i18n.js"></script> + <script src="$href('libs/jquery-i18n/jquery.i18n.min.js')"></script> + <script src="/usr/share/javascript/bootstrap/js/bootstrap.min.js"></script> + <script src="$href('libs/bootstrap-select/dist/js/bootstrap-select.min.js')"></script> + <script src="/usr/share/javascript/lodash.js"></script> + <script src="$href('libs/moment/moment-with-locales.min.js')"></script> + <script src="$href('libs/datatables/js/datatables.min.js')"></script> + <script src="$href('js/wok.min.js')"></script> +</head> +<body class="login" onload="wok.login_main()"> + <div class="topbar"> + <nav class="navbar navbar-inverse"> + <div class="container"> + <div class="navbar-header"> + <a class="navbar-brand" href="#">Wok</a> + </div> + </div> + </nav> + <nav class="navbar navbar-default"> + <div class="container"> + <div class="navbar-header"> + </div> + <ul class="nav navbar-nav"> + <li class="hostname"><span class="host-location"></span></li> + </ul> + </div> + </nav> + </div> + <div class="content"> + <div class="container"> + <div id="login-window" class="login-area row"> + <div class="err-area"> + <div id="messUserPass" class="alert alert-danger" style="display: none;">$_("The username or password you entered is incorrect. Please try again.")</div> + <div id="messSession" class="alert alert-danger" style="display: none;">$_("Session timeout, please re-login.")</div> + <div id="missServer" class="alert alert-danger" style="display: none;">$_("Server unreachable.")</div> + </div> + <form id="form-login" class="form-horizontal" method="post"> + <div class="form-group"> + <label for="username" class="sr-only">$_("User Name")</label> + <input type="text" class="form-control" id="username" name="username" required="required" placeholder="$_(" User Name ")" autofocus autocomplete="off" /> + <div id="username-msg" class="msg-required"></div> + </div> + <div class="form-group"> + <label for="password" class="sr-only">$_("Password")</label> + <input type="password" class="form-control" id="password" name="password" required="required" placeholder="$_(" Password ")" autocomplete="off" /> + <div id="password-msg" class="msg-required"></div> + </div> + <div class="form-group"> + <button id="btn-login" class="btn btn-login col-md-12 col-lg-12"> + <span id="login">$_("Log in")</span> + <span id="logging" style="display: none;">$_("Logging in...")</span> + </button> + </div> + <div class="form-group"> + <label for="userLang">$_("Language")</label> + <select id="userLang" class="selectpicker col-md-12 col-lg-12"> + <option value="en_US">English (US)</option> + <option value="zh_CN">中文（简体）</option> + <option value="pt_BR">Português (Brasil)</option> + <option value="de_DE">Deutsch (Deutschland)</option> + <option value="es_ES">Español (España)</option> + <option value="fr_FR">Français (France)</option> + <option value="it_IT">Italiano (Italia)</option> + <option value="ja_JP">日本語 (日本)</option> + <option value="ko_KR">한국어 (대한민국)</option> + <option value="ru_RU">Русский (Россия)</option> + <option value="zh_TW">中文（繁體）</option> + </select> + </div> + <div class="form-group"> + <label for="userLocale">$_("Locale")</label> + <select id="userLocale" class="selectpicker col-md-12 col-lg-12"> + <option value="af-ZA">Afrikaans (South Africa)</option> + <option value="sq-AL">Albanian (Albania)</option> + <option value="am-ET">Amharic (Ethiopia)</option> + <option value="ar-DZ">Arabic (Algeria)</option> + <option value="ar-BH">Arabic (Bahrain)</option> + <option value="ar-EG">Arabic (Egypt)</option> + <option value="ar-IQ">Arabic (Iraq)</option> + <option value="ar-JO">Arabic (Jordan)</option> + <option value="ar-KW">Arabic (Kuwait)</option> + <option value="ar-LB">Arabic (Lebanon)</option> + <option value="ar-LY">Arabic (Libya)</option> + <option value="ar-MR">Arabic (Mauritania)</option> + <option value="ar-MA">Arabic (Morocco)</option> + <option value="ar-OM">Arabic (Oman)</option> + <option value="ar-QA">Arabic (Qatar)</option> + <option value="ar-SA">Arabic (Saudi Arabia)</option> + <option value="ar-SY">Arabic (Syria)</option> + <option value="ar-TN">Arabic (Tunisia)</option> + <option value="ar-AE">Arabic (United Arab Emirates)</option> + <option value="ar-YE">Arabic (Yemen)</option> + <option value="hy-AM">Armenian (Armenia)</option> + <option value="as-IN">Assamese (India)</option> + <option value="az-AZ">Azerbaijani (Azerbaijan)</option> + <option value="eu-ES">Basque (Spain)</option> + <option value="be-BY">Belarusian (Belarus)</option> + <option value="bn-BD">Bengali (Bangladesh)</option> + <option value="bn-IN">Bengali (India)</option> + <option value="bs-BA">Bosnian (Bosnia)</option> + <option value="bg-BG">Bulgarian (Bulgaria)</option> + <option value="my-MM">Burmese (Myanmar)</option> + <option value="ca-ES">Catalan (Spain)</option> + <option value="zh-CN">Chinese-simplified (China)</option> + <option value="zh-SG">Chinese-simplified (Singapore)</option> + <option value="zh-HK">Chinese-traditional (Hong Kong S.A.R. of China)</option> + <option value="zh-MO">Chinese-traditional (Macao)</option> + <option value="zh-TW">Chinese-traditional (Taiwan)</option> + <option value="hr-HR">Croatian (Croatia)</option> + <option value="cs-CZ">Czech (Czech Republic)</option> + <option value="da-DK">Danish (Denmark)</option> + <option value="nl-BE">Dutch (Belgium)</option> + <option value="nl-NL">Dutch (The Netherlands)</option> + <option value="en-AU">English (Australia)</option> + <option value="en-BE">English (Belgium)</option> + <option value="en-CM">English (Cameroon)</option> + <option value="en-CA">English (Canada)</option> + <option value="en-GH">English (Ghana)</option> + <option value="en-HK">English (Hong Kong S.A.R. of China)</option> + <option value="en-IN">English (India)</option> + <option value="en-IE">English (Ireland)</option> + <option value="en-KE">English (Kenya)</option> + <option value="en-MU">English (Mauritius)</option> + <option value="en-NZ">English (New Zealand)</option> + <option value="en-NG">English (Nigeria)</option> + <option value="en-PH">English (Philippines)</option> + <option value="en-SG">English (Singapore)</option> + <option value="en-ZA">English (South Africa)</option> + <option value="en-TZ">English (Tanzania)</option> + <option value="en-GB">English (United Kingdom)</option> + <option value="en-US">English (United States)</option> + <option value="en-ZM">English (Zambia)</option> + <option value="et-EE">Estonian (Estonia)</option> + <option value="tl-PH">Filipino (Philippines)</option> + <option value="fi-FI">Finnish (Finland)</option> + <option value="fr-DZ">French (Algeria)</option> + <option value="fr-CM">French (Cameroon)</option> + <option value="fr-CD">French (Democratic Republic of the Congo)</option> + <option value="fr-BE">French (Belgium)</option> + <option value="fr-CA">French (Canada)</option> + <option value="fr-FR">French (France)</option> + <option value="fr-CI">French (Ivory Coast [Côte d’Ivoire])</option> + <option value="fr-LU">French (Luxembourg)</option> + <option value="fr-MR">French (Mauritania)</option> + <option value="fr-MU">French (Mauritius)</option> + <option value="fr-MA">French (Morocco)</option> + <option value="fr-SN">French (Senegal)</option> + <option value="fr-CH">French (Switzerland)</option> + <option value="fr-TN">French (Tunisia)</option> + <option value="gl-ES">Galician (Spain)</option> + <option value="lg-UG">Ganda (Uganda)</option> + <option value="ka-GE">Georgian (Georgia)</option> + <option value="de-AT">German (Austria)</option> + <option value="de-DE">German (Germany)</option> + <option value="de-LU">German (Luxembourg)</option> + <option value="de-CH">German (Switzerland)</option> + <option value="el-GR">Greek (Greece)</option> + <option value="gu-IN">Gujarati (India)</option> + <option value="ha-NG">Hausa (Nigeria)</option> + <option value="he-IL">Hebrew (Israel)</option> + <option value="hi-IN">Hindi (India)</option> + <option value="hu-HU">Hungarian (Hungary)</option> + <option value="is-IS">Icelandic (Iceland)</option> + <option value="ig-NG">Igbo (Nigeria)</option> + <option value="id-ID">Indonesian (Indonesia)</option> + <option value="it-IT">Italian (Italy)</option> + <option value="it-CH">Italian (Switzerland)</option> + <option value="ja-JP">Japanese (Japan)</option> + <option value="kn-IN">Kannada (India)</option> + <option value="kk-KZ">Kazakh (Kazakhstan)</option> + <option value="km-KH">Khmer (Cambodia)</option> + <option value="rw-RW">Kinyarwanda (Rwanda)</option> + <option value="kok-IN">Konkani (India)</option> + <option value="ko-KR">Korean (Korea, South)</option> + <option value="lo-LA">Lao (Laos)</option> + <option value="lv-LV">Latvian (Latvia)</option> + <option value="lt-LT">Lithuanian (Lithuania)</option> + <option value="mk-MK">Macedonian (Macedonia)</option> + <option value="ms-MY">Malay-Latin (Malaysia)</option> + <option value="ml-IN">Malayalam (India)</option> + <option value="mt-MT">Maltese (Malta)</option> + <option value="mr-IN">Marathi (India)</option> + <option value="mn-Cyrl-MN">Mongolian-Cyrillic (Mongolia)</option> + <option value="ne-IN">Nepali (India)</option> + <option value="ne-NP">Nepali (Nepal)</option> + <option value="nb-NO">Norwegian Bokmål (Norway)</option> + <option value="nn-NO">Norwegian Nynorsk (Norway)</option> + <option value="or-IN">Oriya [aka, Odia] (India)</option> + <option value="om-ET">Oromo (Ethiopia)</option> + <option value="pl-PL">Polish (Poland)</option> + <option value="pt-AO">Portuguese (Angola)</option> + <option value="pt-BR">Portuguese (Brazil)</option> + <option value="pt-MO">Portuguese (Macao)</option> + <option value="pt-MZ">Portuguese (Mozambique)</option> + <option value="pt-PT">Portuguese (Portugal)</option> + <option value="pa-IN">Punjabi (India)</option> + <option value="ro-RO">Romanian (Romania)</option> + <option value="ru-RU">Russian (Russia)</option> + <option value="sr-RS">Serbian-Cyrillic (Serbia)</option> + <option value="sr-ME">Serbian-Latin (Montenegro)</option> + <option value="sr-Latn-RS">Serbian-Latin (Serbia)</option> + <option value="si-LK">Sinhala (Sri Lanka)</option> + <option value="sk-SK">Slovak (Slovakia)</option> + <option value="sl-SI">Slovenian (Slovenia)</option> + <option value="es-AR">Spanish (Argentina)</option> + <option value="es-BO">Spanish (Bolivia)</option> + <option value="es-CL">Spanish (Chile)</option> + <option value="es-CO">Spanish (Colombia)</option> + <option value="es-CR">Spanish (Costa Rica)</option> + <option value="es-DO">Spanish (Dominican Republic)</option> + <option value="es-EC">Spanish (Ecuador)</option> + <option value="es-SV">Spanish (El Salvador)</option> + <option value="es-GT">Spanish (Guatemala)</option> + <option value="es-HN">Spanish (Honduras)</option> + <option value="es-MX">Spanish (Mexico)</option> + <option value="es-NI">Spanish (Nicaragua)</option> + <option value="es-PA">Spanish (Panama)</option> + <option value="es-PY">Spanish (Paraguay)</option> + <option value="es-PE">Spanish (Peru)</option> + <option value="es-PR">Spanish (Puerto Rico)</option> + <option value="es-ES">Spanish (Spain)</option> + <option value="es-US">Spanish (United States)</option> + <option value="es-UY">Spanish (Uruguay)</option> + <option value="es-VE">Spanish (Venezuela)</option> + <option value="sw-KE">Swahili (Kenya)</option> + <option value="sw-TZ">Swahili (Tanzania)</option> + <option value="sv-SE">Swedish (Sweden)</option> + <option value="ta-IN">Tamil (India)</option> + <option value="te-IN">Telugu (India)</option> + <option value="th-TH">Thai (Thailand)</option> + <option value="tr-TR">Turkish (Turkey)</option> + <option value="uk-UA">Ukrainian (Ukraine)</option> + <option value="ur-IN">Urdu (India)</option> + <option value="ur-PK">Urdu (Pakistan)</option> + <option value="uz-Cyrl-UZ">Uzbek-Cyrillic (Uzbekistan)</option> + <option value="uz-Latn-UZ">Uzbek-Latin (Uzbekistan)</option> + <option value="vi-VN">Vietnamese (Vietnam)</option> + <option value="cy-GB">Welsh (United Kingdom)</option> + <option value="yo-NG">Yoruba (Nigeria)</option> + <option value="zu-ZA">Zulu (South Africa)</option> + <option value="az-AZ">Azerbaijani-Latin (Azerbaijan)</option> + <option value="sr-CS">Serbian-Cyrillic ()</option> + <option value="sr-Cyrl-CS">Serbian-Cyrillic (Serbia and Montenegro)</option> + <option value="sr-Latn-CS">Serbian-Latin (Serbia and Montenegro)</option> + </select> + </div> + </form> + </div> + <div class="row"> + <div class="col-lg-4 delayed-fadein"> + <p class="text-muted powered hidden">Powered by:</p> + <ul id="wok-logos" class="list-inline"></ul> + </div> + </div> + </div> + </div> +</body> +</html> diff --git a/ui/pages/wok-ui.html.tmpl.fedora b/ui/pages/wok-ui.html.tmpl.fedora new file mode 100644 index 0000000..1dcf0df --- /dev/null +++ b/ui/pages/wok-ui.html.tmpl.fedora @@ -0,0 +1,231 @@ +#* + * Project Wok + * + * Copyright IBM Corp, 2015-2016 + * + * Code derived from Project Kimchi + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + *# +#unicode UTF-8 +#import gettext +#from wok.cachebust import href +#silent t = gettext.translation($lang.domain, $lang.localedir, languages=$lang.lang, fallback=True) +#silent _ = t.gettext +#silent _t = t.gettext +#from wok.config import get_version +<!DOCTYPE html> +<html lang="$lang.lang[0]"> +<head> + <meta charset="UTF-8"> + <title>Wok</title> + <meta http-equiv="X-UA-Compatible" content="IE=edge" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" /> + <meta name="apple-mobile-web-app-capable" content="yes"> + <meta name="apple-mobile-web-app-title" content="Wok"> + <link href="$href('images/apple-touch-icon-57x57.png')" sizes="57x57" rel="apple-touch-icon-precomposed"> + <link href="$href('images/apple-touch-icon-72x72.png')" sizes="72x72" rel="apple-touch-icon-precomposed"> + <link href="$href('images/apple-touch-icon-76x76.png')" sizes="76x76" rel="apple-touch-icon-precomposed"> + <link href="$href('images/apple-touch-icon-114x114.png')" sizes="114x114" rel="apple-touch-icon-precomposed"> + <link href="$href('images/apple-touch-icon-144x144.png')" sizes="144x144" rel="apple-touch-icon-precomposed"> + <link href="$href('images/apple-touch-icon-152x152.png')" sizes="152x152" rel="apple-touch-icon-precomposed"> + <link href="$href('images/apple-touch-icon-180x180.png')" sizes="120x120" rel="apple-touch-icon-precomposed"> + <link rel="icon" type="image/png" href="$href('images/android-chrome-36x36.png')" sizes="36x36"> + <link rel="icon" type="image/png" href="$href('images/android-chrome-48x48.png')" sizes="48x48"> + <link rel="icon" type="image/png" href="$href('images/android-chrome-72x72.png')" sizes="72x72"> + <link rel="icon" type="image/png" href="$href('images/android-chrome-96x96.png')" sizes="96x96"> + <link rel="icon" type="image/png" href="$href('images/android-chrome-144x144.png')" sizes="144x144"> + <link rel="icon" type="image/png" href="$href('images/android-chrome-192x192.png')" sizes="192x192"> + <link rel="icon" type="image/png" href="$href('images/favicon-16x16.png')" sizes="16x16"> + <link rel="icon" type="image/png" href="$href('images/favicon-32x32.png')" sizes="32x32"> + <link rel="icon" type="image/png" href="$href('images/favicon-96x96.png')" sizes="96x96"> + <link rel="icon" type="image/png" href="$href('images/favicon-194x194.png')" sizes="194x194"> + <link rel="mask-icon" href="$href('images/safari-pinned-tab.svg')" color="#5bbad5"> + <meta name="application-name" content="Wok"> + <meta name="msapplication-config" content="none" /> + <meta name="msapplication-TileColor" content="#f73434" /> + <meta name="msapplication-square70x70logo" content="$href('images/mstile-70x70.png')" /> + <meta name="msapplication-square150x150logo" content="$href('images/mstile-150x150.png')" /> + <meta name="msapplication-wide310x150logo" content="$href('images/mstile-310x310.png')" /> + <meta name="msapplication-square310x310logo" content="$href('images/mstile-310x150.png')" /> + <link rel="stylesheet" href="$href('libs/jquery-ui/themes/base/jquery-ui.min.css')"> + <link rel="stylesheet" href="$href('css/jquery-ui.custom.css')"> + <link rel="stylesheet" href="$href('css/bootstrap.custom.css')"> + <link rel="stylesheet" href="$href('libs/bootstrap-select/dist/css/bootstrap-select.min.css')"> + <link rel="stylesheet" href="$href('libs/jquery-bootgrid/dist/css/jquery.bootgrid.min.css')"> + <link rel="stylesheet" href="$href('libs/bootstrap-switch/dist/css/bootstrap-switch.min.css')"> + <link rel="stylesheet" href="$href('libs/bootstrap-editable/dist/css/bootstrap-editable.css')"> + <link rel="stylesheet" href="$href('libs/datatables/css/datatables.min.css')"> + <link rel="stylesheet" href="$href('css/fontawesome/fontawesome.css')"> + <link rel="stylesheet" href="$href('css/opensans/opensans.css')"> + <link rel="stylesheet" href="$href('css/bootstrap-select.custom.css')"> + <link rel="stylesheet" href="$href('css/datatables.bootstrap.css')"> + <link rel="stylesheet" href="$href('css/wok.css')"> + <script src="js/es5-shim.min.js"></script> + <script src="js/jquery.min.js"></script> + <script src="$href('libs/jquery-containsNC/jquery.containsNC.js')"></script> + <script src="$href('libs/jquery-ui/jquery-ui.min.js')"></script> + <script src="$href('libs/jquery-ui/jquery-ui-i18n.min.js')"></script> + <script src="$href('libs/jquery-i18n/jquery.i18n.min.js')"></script> + <script src="$href('libs/list-js/list.min.js')"></script> + <script src="$href('libs/bootstrap/bootstrap.min.js')"></script> + <script src="$href('libs/bootstrap-select/dist/js/bootstrap-select.min.js')"></script> + <script src="$href('libs/jquery-bootgrid/dist/js/jquery.bootgrid.min.js')"></script> + <script src="$href('libs/bootstrap-switch/dist/js/bootstrap-switch.min.js')"></script> + <script src="$href('libs/bootstrap-editable/dist/js/bootstrap-editable.min.js')"></script> + <script src="js/typeahead.bundle.min.js"></script> + <script src="js/lodash.js"></script> + <script src="js/moment-with-locales.min.js"></script> + <script src="$href('libs/datatables/js/datatables.min.js')"></script> + <script src="$href('base64/jquery.base64.js')"></script> + <script src="$href('js/wok.min.js')"></script> + <!-- This is used for detecting if the UI needs to be built --> + <style type="text/css"> + #buildme { + position: fixed; + background: rgba(0, 0, 0, 0.5); + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 10000; + } + #buildme div { + background-color: #FFB2C0; + border-style: solid; + border-color: #FF0000; + padding: 30px; + width: 75%; + margin-left: auto; + margin-right: auto; + margin-top: 50px; + -moz-border-radius: 15px; + border-radius: 15px; + } + </style> + </head> +<body onload="wok.main()"> + <div class="topbar"> + <nav class="navbar navbar-inverse"> + <div class="container"> + <div class="navbar-header"> + <a id="logo" class="navbar-brand" href="#" title="Wok">Wok</a> + </div> + <ul class="nav navbar-nav navbar-right"> + <li class="dropdown hide-content peers" id="peers"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="topbar-text">$_("Peers")</span><span class="caret"></span></a> + <ul class="dropdown-menu"> + <li id="search-peers"><span>$_("Searching")...</span></li> + <li id="no-peers" class="hide-content">$_("No peers found.")</li> + </ul> + </li> + <li class="dropdown" id="user-login"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> + <i class="fa fa-user" id="user-icon"></i><span class="topbar-text empty-when-logged-off" id="user-name"></span><span class="caret"></span> + </a> + <ul class="dropdown-menu"> + <li class="critical"><a id="btn-logout" href="javascript: void(0);"><i class="fa fa-ban"></i><span>$_("Log out")</span></a></li> + </ul> + </li> + <li class="dropdown"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-question-circle"></i><span class="topbar-text">$_("Help")</span><span class="caret"></span></a> + <ul class="dropdown-menu"> + <li><a id="btn-help" href="javascript: void(0);">$_("Help")</a></li> + <li><a id="btn-about" href="#" data-toggle="modal" data-target="#aboutModal">$_("About")</a></li> + </ul> + </li> + </ul> + </div> + </nav> + <nav class="navbar navbar-default"> + <div class="container" id="navigation-bar"> + <div class="navbar-header"> + <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-menu" aria-expanded="false"> + <span class="sr-only">$_("Toggle navigation")</span> + <span class="icon-bar"><!-- Hamburguer button here --></span> + </button> + </div> + <div id="functionalTabPanel" class="collapse navbar-collapse"> + <ul class="nav navbar-nav"> + <li class="hostname"><span class="host-location"></span></li> + </ul> + </div> + <div id="tabPanel" class="collapse navbar-collapse"> + <ul class="nav navbar-nav"> + </ul> + </div> + </div> + </nav> + </div> + <div class="content"> + <div id="main"> + </div> + </div> + </div> + + <div id="buildme" style="display:none"> + <div><p>Oops! It looks like I am running from a source tree and you forgot to build! + Please run the following command from the wok and plugins directories and reload this page:</p> + <p><code>make</code></p> + </div> + </div> + + <div class="modal fade host-modal" id="aboutModal" tabindex="-1" role="dialog" labelledby="aboutModalLabel" aria-hidden="true"> + </div> + + + <div class="fade in session-expiring" id="session-expiring-alert" hidden> + <button type="button" class="close">&times;</button> + <div class="well"> + <p>$_("Your session will expire on: 30s. Do you want to renew it?")</p> + <div class="form-group"> + <button class="btn btn-primary btn-xs" id="renew-session-button" onclick="wok.session.renewSession();">Renew</button> + <button class="btn btn-primary btn-xs" id="dismiss-session-button" onclick="wok.session.hideExpiringAlert();">Dismiss</button> + </div> + </div> + </div> + + + <script id="about-tmpl" type="wok/template"> + <div class="modal-dialog" role="document"> + <div class="modal-content" > + <div class="modal-header"> + <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> + <h4 class="modal-title">$_("About")</h4> + </div> + <div class="modal-body"> + <div class="content"> + <div class="col-md-10"> + <ul id="wok-about" class="list-inline"> + <li> + <img src="$href('images/wok.svg')" alt="Wok $get_version()" title="Wok"> + <span class="plugin-title">Wok</span> + <span class="plugin-version">$get_version()</span> + </li> + </ul> + </div> + </div> + </div> + </div> + </div> + </script> + <footer class="footer"> + <div class="container"> + <p class="text-muted powered hidden">$_("Powered by"):</p> + <ul id="plugins"> + </ul> + <span class="wok-version">Wok Version: $get_version()</span> + </div> + </footer> +</body> +</html> diff --git a/ui/pages/wok-ui.html.tmpl.ubuntu b/ui/pages/wok-ui.html.tmpl.ubuntu new file mode 100644 index 0000000..b458a6c --- /dev/null +++ b/ui/pages/wok-ui.html.tmpl.ubuntu @@ -0,0 +1,231 @@ +#* + * Project Wok + * + * Copyright IBM Corp, 2015-2016 + * + * Code derived from Project Kimchi + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + *# +#unicode UTF-8 +#import gettext +#from wok.cachebust import href +#silent t = gettext.translation($lang.domain, $lang.localedir, languages=$lang.lang, fallback=True) +#silent _ = t.gettext +#silent _t = t.gettext +#from wok.config import get_version +<!DOCTYPE html> +<html lang="$lang.lang[0]"> +<head> + <meta charset="UTF-8"> + <title>Wok</title> + <meta http-equiv="X-UA-Compatible" content="IE=edge" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" /> + <meta name="apple-mobile-web-app-capable" content="yes"> + <meta name="apple-mobile-web-app-title" content="Wok"> + <link href="$href('images/apple-touch-icon-57x57.png')" sizes="57x57" rel="apple-touch-icon-precomposed"> + <link href="$href('images/apple-touch-icon-72x72.png')" sizes="72x72" rel="apple-touch-icon-precomposed"> + <link href="$href('images/apple-touch-icon-76x76.png')" sizes="76x76" rel="apple-touch-icon-precomposed"> + <link href="$href('images/apple-touch-icon-114x114.png')" sizes="114x114" rel="apple-touch-icon-precomposed"> + <link href="$href('images/apple-touch-icon-144x144.png')" sizes="144x144" rel="apple-touch-icon-precomposed"> + <link href="$href('images/apple-touch-icon-152x152.png')" sizes="152x152" rel="apple-touch-icon-precomposed"> + <link href="$href('images/apple-touch-icon-180x180.png')" sizes="120x120" rel="apple-touch-icon-precomposed"> + <link rel="icon" type="image/png" href="$href('images/android-chrome-36x36.png')" sizes="36x36"> + <link rel="icon" type="image/png" href="$href('images/android-chrome-48x48.png')" sizes="48x48"> + <link rel="icon" type="image/png" href="$href('images/android-chrome-72x72.png')" sizes="72x72"> + <link rel="icon" type="image/png" href="$href('images/android-chrome-96x96.png')" sizes="96x96"> + <link rel="icon" type="image/png" href="$href('images/android-chrome-144x144.png')" sizes="144x144"> + <link rel="icon" type="image/png" href="$href('images/android-chrome-192x192.png')" sizes="192x192"> + <link rel="icon" type="image/png" href="$href('images/favicon-16x16.png')" sizes="16x16"> + <link rel="icon" type="image/png" href="$href('images/favicon-32x32.png')" sizes="32x32"> + <link rel="icon" type="image/png" href="$href('images/favicon-96x96.png')" sizes="96x96"> + <link rel="icon" type="image/png" href="$href('images/favicon-194x194.png')" sizes="194x194"> + <link rel="mask-icon" href="$href('images/safari-pinned-tab.svg')" color="#5bbad5"> + <meta name="application-name" content="Wok"> + <meta name="msapplication-config" content="none" /> + <meta name="msapplication-TileColor" content="#f73434" /> + <meta name="msapplication-square70x70logo" content="$href('images/mstile-70x70.png')" /> + <meta name="msapplication-square150x150logo" content="$href('images/mstile-150x150.png')" /> + <meta name="msapplication-wide310x150logo" content="$href('images/mstile-310x310.png')" /> + <meta name="msapplication-square310x310logo" content="$href('images/mstile-310x150.png')" /> + <link rel="stylesheet" href="/usr/share/javascript/jquery-ui/css/smoothness/jquery-ui.min.css"> + <link rel="stylesheet" href="/usr/share/javascript/jquery-ui/css/smoothness/jquery-ui.css"> + <link rel="stylesheet" href="/usr/share/javascript/bootstrap/css/bootstrap.css"> + <link rel="stylesheet" href="$href('libs/bootstrap-select/dist/css/bootstrap-select.min.css')"> + <link rel="stylesheet" href="$href('libs/jquery-bootgrid/dist/css/jquery.bootgrid.min.css')"> + <link rel="stylesheet" href="$href('libs/bootstrap-switch/dist/css/bootstrap-switch.min.css')"> + <link rel="stylesheet" href="$href('libs/bootstrap-editable/dist/css/bootstrap-editable.css')"> + <link rel="stylesheet" href="$href('libs/datatables/css/datatables.min.css')"> + <link rel="stylesheet" href="$href('css/fontawesome/fontawesome.css')"> + <link rel="stylesheet" href="$href('css/opensans/opensans.css')"> + <link rel="stylesheet" href="$href('css/bootstrap-select.custom.css')"> + <link rel="stylesheet" href="$href('css/datatables.bootstrap.css')"> + <link rel="stylesheet" href="$href('css/wok.css')"> + <script src="$href('libs/es5-shim/es5-shim.min.js')"></script> + <script src="/usr/share/javascript/jquery/jquery.min.js""></script> + <script src="$href('libs/jquery-containsNC/jquery.containsNC.js')"></script> + <script src="/usr/share/javascript/jquery-ui/jquery-ui.min.js"></script> + <script src="/usr/share/javascript/jquery-ui/ui/i18n/jquery-ui-i18n.js"></script> + <script src="$href('libs/jquery-i18n/jquery.i18n.min.js')"></script> + <script src="$href('libs/list-js/list.min.js')"></script> + <script src="/usr/share/javascript/bootstrap/js/bootstrap.min.js"></script> + <script src="$href('libs/bootstrap-select/dist/js/bootstrap-select.min.js')"></script> + <script src="$href('libs/jquery-bootgrid/dist/js/jquery.bootgrid.min.js')"></script> + <script src="$href('libs/bootstrap-switch/dist/js/bootstrap-switch.min.js')"></script> + <script src="$href('libs/bootstrap-editable/dist/js/bootstrap-editable.min.js')"></script> + <script src="$href('libs/typeahead/typeahead.bundle.min.js')"></script> + <script src="/usr/share/javascript/lodash.js"></script> + <script src="$href('libs/moment/moment-with-locales.min.js')"></script> + <script src="$href('libs/datatables/js/datatables.min.js')"></script> + <script src="$href('base64/jquery.base64.js')"></script> + <script src="$href('js/wok.min.js')"></script> + <!-- This is used for detecting if the UI needs to be built --> + <style type="text/css"> + #buildme { + position: fixed; + background: rgba(0, 0, 0, 0.5); + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 10000; + } + #buildme div { + background-color: #FFB2C0; + border-style: solid; + border-color: #FF0000; + padding: 30px; + width: 75%; + margin-left: auto; + margin-right: auto; + margin-top: 50px; + -moz-border-radius: 15px; + border-radius: 15px; + } + </style> + </head> +<body onload="wok.main()"> + <div class="topbar"> + <nav class="navbar navbar-inverse"> + <div class="container"> + <div class="navbar-header"> + <a id="logo" class="navbar-brand" href="#" title="Wok">Wok</a> + </div> + <ul class="nav navbar-nav navbar-right"> + <li class="dropdown hide-content peers" id="peers"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="topbar-text">$_("Peers")</span><span class="caret"></span></a> + <ul class="dropdown-menu"> + <li id="search-peers"><span>$_("Searching")...</span></li> + <li id="no-peers" class="hide-content">$_("No peers found.")</li> + </ul> + </li> + <li class="dropdown" id="user-login"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> + <i class="fa fa-user" id="user-icon"></i><span class="topbar-text empty-when-logged-off" id="user-name"></span><span class="caret"></span> + </a> + <ul class="dropdown-menu"> + <li class="critical"><a id="btn-logout" href="javascript: void(0);"><i class="fa fa-ban"></i><span>$_("Log out")</span></a></li> + </ul> + </li> + <li class="dropdown"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-question-circle"></i><span class="topbar-text">$_("Help")</span><span class="caret"></span></a> + <ul class="dropdown-menu"> + <li><a id="btn-help" href="javascript: void(0);">$_("Help")</a></li> + <li><a id="btn-about" href="#" data-toggle="modal" data-target="#aboutModal">$_("About")</a></li> + </ul> + </li> + </ul> + </div> + </nav> + <nav class="navbar navbar-default"> + <div class="container" id="navigation-bar"> + <div class="navbar-header"> + <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-menu" aria-expanded="false"> + <span class="sr-only">$_("Toggle navigation")</span> + <span class="icon-bar"><!-- Hamburguer button here --></span> + </button> + </div> + <div id="functionalTabPanel" class="collapse navbar-collapse"> + <ul class="nav navbar-nav"> + <li class="hostname"><span class="host-location"></span></li> + </ul> + </div> + <div id="tabPanel" class="collapse navbar-collapse"> + <ul class="nav navbar-nav"> + </ul> + </div> + </div> + </nav> + </div> + <div class="content"> + <div id="main"> + </div> + </div> + </div> + + <div id="buildme" style="display:none"> + <div><p>Oops! It looks like I am running from a source tree and you forgot to build! + Please run the following command from the wok and plugins directories and reload this page:</p> + <p><code>make</code></p> + </div> + </div> + + <div class="modal fade host-modal" id="aboutModal" tabindex="-1" role="dialog" labelledby="aboutModalLabel" aria-hidden="true"> + </div> + + + <div class="fade in session-expiring" id="session-expiring-alert" hidden> + <button type="button" class="close">&times;</button> + <div class="well"> + <p>$_("Your session will expire on: 30s. Do you want to renew it?")</p> + <div class="form-group"> + <button class="btn btn-primary btn-xs" id="renew-session-button" onclick="wok.session.renewSession();">Renew</button> + <button class="btn btn-primary btn-xs" id="dismiss-session-button" onclick="wok.session.hideExpiringAlert();">Dismiss</button> + </div> + </div> + </div> + + + <script id="about-tmpl" type="wok/template"> + <div class="modal-dialog" role="document"> + <div class="modal-content" > + <div class="modal-header"> + <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> + <h4 class="modal-title">$_("About")</h4> + </div> + <div class="modal-body"> + <div class="content"> + <div class="col-md-10"> + <ul id="wok-about" class="list-inline"> + <li> + <img src="$href('images/wok.svg')" alt="Wok $get_version()" title="Wok"> + <span class="plugin-title">Wok</span> + <span class="plugin-version">$get_version()</span> + </li> + </ul> + </div> + </div> + </div> + </div> + </div> + </script> + <footer class="footer"> + <div class="container"> + <p class="text-muted powered hidden">$_("Powered by"):</p> + <ul id="plugins"> + </ul> + <span class="wok-version">Wok Version: $get_version()</span> + </div> + </footer> +</body> +</html> -- 2.5.5

On 08/12/2016 01:55 PM, Ramon Medeiros wrote: You don't need to create a specific file for each distro to get the right file path placed there. All the files *.html.tmpl are processed in the backend. Look at default() function in root.py The render() function in template.py does the magic. The 'data' parameter is a dict of data. In the *.html.tmpl file you just need to add a variable, for example: <script src="$jquery-ui-file-path"></script> Then you need to proper add 'jquery-ui-file-path' to the data dict and the Template will be set as desired. Does that make sense? Please, let me know if you need help to do that. Having the version number as part of the file path is really dangerous for us. That means the UI will not work as expected when some newer or older version is installed. Said that, I recommend to use the glob module to find the file path. For example. import glob filepaths = glob.glob('/usr/share/javascript/jquery/*/jquery.min.js') That will return a list of files found. So you sort the result and get the newer version. Does that make sense?

On 08/22/2016 01:38 PM, Aline Manera wrote: Nop. We have less than half packages available. Nop, take a look in the previous patch. There is listed the complete list of packages present on distros Yep, the commands isn't running due my low knowledge on makefile -- Ramon Nunes Medeiros Kimchi Developer Linux Technology Center Brazil IBM Systems & Technology Group Phone : +55 19 2132 7878 ramonn(a)br.ibm.com