public/src/index.html

   1 <!doctype html>
   2 <html>
   3     <head>
   4         <meta charset="utf-8">
   5         <meta http-equiv="X-UA-Compatible" content="IE=edge">
   6         <meta name="viewport" content="width=device-width, initial-scale=1.0">
   7
   8         <title>Tizen Image Creator (TIC)</title>
   9
  10         <link rel="shortcut icon" href="/image/tizen.ico">
  11         <link rel="stylesheet" href="/lib/bootstrap/css/bootstrap.css">
  12         <link rel="stylesheet" href="/lib/bootstrap-treeview/bootstrap-treeview.min.css">
  13         <link rel="stylesheet" href="/lib/components-font-awesome/css/font-awesome.min.css">
  14         <link rel="stylesheet" href="/css/style.css">
  15         <script>
  16             var ua = window.navigator.userAgent;
  17             var msie = ua.indexOf("MSIE ");
  18             if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) {
  19                 window.location.replace('406.html');
  20             }
  21         </script>
  22     </head>
  23
  24     <body data-spy="scroll" data-target=".navbar-fixed-top">
  25         <!-- Navigation -->
  26         <nav class="navbar navbar-inverse navbar-fixed-top">
  27             <div class="container">
  28                 <div class="navbar-header">
  29                     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
  30                         <span class="sr-only">Toggle navigation</span>
  31                         <span class="icon-bar"></span>
  32                         <span class="icon-bar"></span>
  33                         <span class="icon-bar"></span>
  34                     </button>
  35                     <a class="navbar-brand tic-page-scroll" href="#tic-package-section"><img id="tic-brand-img" src="image/tizen_32.png"/> Tizen Image Creator (TIC)</a>
  36                 </div>
  37
  38                 <!-- Collect the nav links, forms, and other content for toggling -->
  39                 <div id="navbar" class="collapse navbar-collapse">
  40                     <ul class="nav navbar-nav">
  41                         <li>
  42                             <a class="tic-page-scroll" href="#tic-package-section">Packages</a>
  43                         </li>
  44                         <li>
  45                             <a class="tic-page-scroll"href="#tic-job-section">Jobs</a>
  46                         </li>
  47                         <li>
  48                             <a class="tic-page-scroll"href="#tic-image-section">Images</a>
  49                         </li>
  50                         <li>
  51                             <a class="tic-page-scroll"href="#tic-settings-section">Settings</a>
  52                         </li>
  53                     </ul>
  54                     <!-- Log in -->
  55                     <ul id="tic-navbar-login" class="nav navbar-nav navbar-right">
  56                         <li class="dropdown">
  57                             <a id="tic-page-login-dropdown-toggle" href="#" class="dropdown-toggle" data-toggle="dropdown">Login<span class="caret"></span></a>
  58                             <ul id="tic-page-login-dropdown-menu" class="dropdown-menu">
  59                                 <li>
  60                                     <div class="row">
  61                                         <div class="col-md-12">
  62                                             <form id="tic-page-login-form" class="form" role="form" method="get" accept-charset="UTF-8" data-toggle="validator" data-validate="true">
  63                                                 <div id="tic-page-form-group-email" class="form-group">
  64                                                     <label class="sr-only" for="tic-page-login-form-email">Email address</label>
  65                                                     <input type="email" id="tic-page-login-form-email" class="form-control" name="email" placeholder="Email address"
  66                                                         data-required-error="Please enter an email address." required>
  67                                                     <div id="tic-page-form-help-email" class="help-block with-errors"></div>
  68                                                 </div>
  69                                                 <div id="tic-page-form-group-password" class="form-group">
  70                                                     <label class="sr-only" for="tic-page-login-form-password">Password</label>
  71                                                     <input type="password" id="tic-page-login-form-password" class="form-control" name="password" placeholder="Password"
  72                                                         data-required-error="Please enter your password." required>
  73                                                     <div id="tic-page-form-help-password" class="help-block with-errors"></div>
  74                                                 </div>
  75                                                 <div class="form-group">
  76                                                     <button type="submit" class="btn btn-primary btn-block">Log in</button>
  77                                                 </div>
  78                                             </form>
  79                                         </div>
  80                                     </div>
  81                                 </li>
  82                             </ul>
  83                         </li>
  84                     </ul>
  85                     <!-- Log out -->
  86                     <ul id="tic-navbar-logout" class="nav navbar-nav navbar-right hidden">
  87                         <li class="dropdown">
  88                             <a id="tic-page-logout-dropdown-toggle" href="#" class="dropdown-toggle" data-toggle="dropdown">email<span class="caret"></span></a>
  89                             <ul id="tic-page-logout-dropdown-menu" class="dropdown-menu">
  90                                 <li>
  91                                     <div class="row">
  92                                         <div class="col-md-12">
  93                                             <form id="tic-page-logout-form" class="form" role="form" method="get" accept-charset="UTF-8">
  94                                                 <div class="form-group">
  95                                                     <button type="submit" class="btn btn-primary btn-block">Logout</button>
  96                                                 </div>
  97                                             </form>
  98                                         </div>
  99                                     </div>
 100                                 </li>
 101                             </ul>
 102                         </li>
 103                     </ul>
 104                 </div><!--/.nav-collapse -->
 105             </div><!-- /.container -->
 106         </nav>
 107
 108         <!-- Package Section -->
 109         <section id="tic-package-section">
 110             <div class="container">
 111                 <div class="row">
 112                     <!-- Package Left Column -->
 113                     <div class="col-md-6">
 114                         <div class="panel panel-primary">
 115                             <div class="panel-heading">
 116                                 <h3 class="panel-title">Package List</h3>
 117                             </div>
 118                             <div class="panel-body">
 119                                 <!-- Package Tree Toolbar -->
 120                                 <div id="tic-package-left-col-tree-toolbar">
 121                                     <div class="input-group">
 122                                         <div class="form-group has-feedback has-clear">
 123                                             <input type="text" class="form-control" placeholder="Start typing to filter list of packages" id="tic-package-toolbar-input"/>
 124                                             <span class="form-control-clear glyphicon glyphicon-remove form-control-feedback hidden" id="tic-package-toolbar-input-clear"></span>
 125                                         </div>
 126                                         <div class="input-group-btn">
 127                                             <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 128                                                 <i class="fa fa-filter"></i>
 129                                             </button>
 130                                             <ul class="dropdown-menu dropdown-menu-right">
 131                                                 <li>
 132                                                     <a href="#" tabIndex="-1">
 133                                                         <label class="checkbox-inline"><input type="checkbox" id="tic-package-toolbar-debug"/> Hide Debug Packages</label>
 134                                                     </a>
 135                                                 </li>
 136                                                 <li>
 137                                                     <a href="#" tabIndex="-1">
 138                                                         <label class="checkbox-inline"><input type="checkbox" id="tic-package-toolbar-devel"/> Hide Develop Packages</label>
 139                                                     </a>
 140                                                 </li>
 141                                             </ul>
 142                                             <button type="button" class="btn btn-default" id="tic-package-left-col-tree-toolbar-collapse-all">
 143                                                 <i class="fa fa-minus"></i>
 144                                             </button>
 145                                             <button type="button" class="btn btn-default" id="tic-package-left-col-tree-toolbar-expand-all">
 146                                                 <i class="fa fa-plus"></i>
 147                                             </button>
 148                                         </div>
 149                                     </div>
 150                                 </div>
 151                                 <!-- Package Tree -->
 152                                 <div id="tic-package-left-col-tree">
 153                                 </div>
 154                             </div>
 155                         </div>
 156                     </div><!-- /End Package Left Column -->
 157
 158                     <!-- Package Right Column -->
 159                     <div class="col-md-6">
 160                         <!-- Package Information -->
 161                         <div class="panel panel-primary">
 162                             <div class="panel-heading">Package Information</div>
 163                             <div class="panel-body">
 164                                 <table id="tic-package-info-table" class="table table-condensed">
 165                                     <tbody>
 166                                         <tr><td>Name</td><td id="tic-package-info-text"></td></tr>
 167                                         <tr><td>Version</td><td id="tic-package-info-version"></td></tr>
 168                                         <tr><td>Architecture</td><td id="tic-package-info-arch"></td></tr>
 169                                         <tr><td>Size</td><td id="tic-package-info-size"></td></tr>
 170                                         <tr><td>Installed Size</td><td id="tic-package-info-installed-size"></td></tr>
 171                                         <tr><td>Summary</td><td id="tic-package-info-summary"></td></tr>
 172                                         <tr><td>Description</td><td id="tic-package-info-description"></td></tr>
 173                                     </tbody>
 174                                 </table>
 175                             </div>
 176                         </div>
 177                         <!-- Package Summary -->
 178                         <div class="panel panel-primary">
 179                             <div class="panel-heading">Summary</div>
 180                             <div class="panel-body">
 181                                 <table id="tic-package-summary" class="table table-condensed">
 182                                     <tbody>
 183                                         <tr><td>Image Size</td><td id="tic-package-image-size"></td></tr>
 184                                         <tr><td>Image Installed Size</td><td id="tic-package-image-installed-size"></td></tr>
 185                                         <tr><td>Package List <span class="badge" id="tic-package-list-badge"></span></td><td id="tic-package-list"></td></tr>
 186                                     </tbody>
 187                                 </table>
 188                             </div>
 189                             <div class="panel-footer">
 190                                 <a type="button" id="tic-package-create" class="btn btn-primary disabled" href="#">Image Creation</a>
 191                             </div>
 192                         </div>
 193                     </div><!-- /End Package Right Column -->
 194                 </div>
 195             </div><!-- /.container -->
 196         </section>
 197
 198         <!-- Job Section -->
 199         <section id="tic-job-section">
 200             <div class="container">
 201                 <div class="row">
 202                     <!-- Job List Column -->
 203                     <div class="col-md-12">
 204                         <div class="panel panel-primary">
 205                             <div class="panel-heading">
 206                                 <h3 class="panel-title">Job List</h3>
 207                             </div>
 208                             <div class="panel-body">
 209                                 <div id="tic-job-list">
 210                                     <div id="tic-job-list-content">
 211                                         <div>
 212                                             <table class="table table-hover table-bordered ui-responsive tic-job-table" id="tic-job-table">
 213                                                 <thead>
 214                                                     <tr class="filters text-center">
 215                                                         <th>#</th>
 216                                                         <th>Status</th>
 217                                                         <th>Image</th>
 218                                                         <th>Image Size</th>
 219                                                         <th>Updated</th>
 220                                                         <th>Action</th>
 221                                                         <th>KS</th>
 222                                                         <th>Log</th>
 223                                                     </tr>
 224                                                 </thead>
 225                                                 <tbody>
 226                                                 </tbody>
 227                                             </table>
 228                                         </div>
 229                                     </div>
 230                                 </div>
 231                                 <div id="tic-job-list-pagination">
 232                                     <ul class="pagination pagination-sm">
 233                                         <li class="disabled"><a href="#"><span class="glyphicon glyphicon-chevron-left"></span></a></li>
 234                                         <li class="disabled"><a href="#"><span class="glyphicon glyphicon-chevron-right"></span></a></li>
 235                                     </ul>
 236                                 </div>
 237                             </div>
 238                         </div>
 239                     </div><!-- /End Job List Column -->
 240                 </div>
 241             </div><!-- /.container -->
 242         </section>
 243
 244         <!-- Image Section -->
 245         <section id="tic-image-section">
 246             <div class="container">
 247                 <div class="row">
 248                     <!-- Image List Column -->
 249                     <div class="col-md-12">
 250                         <div class="panel panel-primary">
 251                             <div class="panel-heading">Image List</div>
 252                             <div class="panel-body">
 253                                 <div id="tic-image-list-content">
 254                                     <ul class="list-group" id="tic-image-list"></ul>
 255                                 </div>
 256                                 <div id="tic-image-list-pagination">
 257                                     <ul class="pagination pagination-sm">
 258                                         <li class="disabled"><a href="#"><span class="glyphicon glyphicon-chevron-left"></span></a></li>
 259                                         <li class="disabled"><a href="#"><span class="glyphicon glyphicon-chevron-right"></span></a></li>
 260                                     </ul>
 261                                 </div>
 262                             </div>
 263                         </div>
 264                     </div><!-- /End Image List Column -->
 265                 </div>
 266             </div><!-- /.container -->
 267         </section>
 268
 269
 270         <!-- Settings Section -->
 271         <section id="tic-settings-section">
 272             <div class="container">
 273                 <div class="row">
 274                     <!-- Settings Column -->
 275                     <div class="col-md-12">
 276                         <div class="panel panel-primary">
 277                             <div class="panel-heading">Settings</div>
 278                             <div class="panel-body">
 279                                 <!-- Repository Column -->
 280                                 <div class="panel panel-primary">
 281                                     <div class="panel-heading">Recipe</div>
 282                                     <div class="panel-body">
 283                                         <!-- Settings Toolbar -->
 284                                         <div id="tic-settings-recipe-toolbar">
 285                                             <button type="button" id="tic-settings-recipe-import" class="btn btn-default"><i class="fa fa-download"></i> Import</button>
 286                                             <button type="button" id="tic-settings-recipe-export" class="btn btn-default"><i class="fa fa-upload"></i> Export</button>
 287                                         </div>
 288                                         <ol id="tic-recipe-list" class="list-group"></ol>
 289                                     </div>
 290                                 </div>
 291                             </div>
 292
 293                             <div class="panel-footer">
 294                                 <a id="tic-recipe-apply" type="button" class="btn btn-primary" href="#tic-package-section">Apply</a>
 295                             </div>
 296                         </div>
 297                     </div><!-- /End Settings Column -->
 298                 </div>
 299             </div><!-- /.container -->
 300         </section>
 301
 302
 303         <!-- Loading Dialog -->
 304         <div class="modal fade" id="tic-load-dialog" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
 305             <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
 306         </div><!-- /End Loading Dialog -->
 307
 308         <!-- Info Dialog -->
 309         <div class="modal fade" id="tic-info-dialog" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
 310             <div class="modal-dialog modal-sm">
 311                 <div class="modal-content">
 312                     <div class="modal-body">
 313                         <p id="tic-info-content"></p>
 314                     </div>
 315                     <div class="modal-footer">
 316                         <button type="button" class="btn btn-success" data-dismiss="modal">Close</button>
 317                 </div>
 318                 </div>
 319             </div>
 320         </div><!-- /End Info Dialog -->
 321
 322         <!-- Alert Dialog -->
 323         <div class="modal fade" id="tic-alert-dialog" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
 324             <div class="modal-dialog modal-sm">
 325                 <div class="modal-content">
 326                     <div class="modal-body">
 327                         <p id="tic-alert-content"></p>
 328                     </div>
 329                     <div class="modal-footer">
 330                         <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
 331                 </div>
 332                 </div>
 333             </div>
 334         </div><!-- /End Alert Dialog -->
 335
 336         <!-- Confirm Dialog -->
 337         <div class="modal fade" id="tic-confirm-dialog" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
 338             <div class="modal-dialog modal-sm">
 339                 <div class="modal-content">
 340                     <div class="modal-body">
 341                         <p id="tic-confirm-content"></p>
 342                     </div>
 343                     <div class="modal-footer">
 344                         <button id="tic-confirm-ok" type="button" class="btn btn-primary" data-dismiss="modal">OK</button>
 345                         <button id="tic-confirm-cancel" type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
 346                    </div>
 347                 </div>
 348             </div>
 349         </div><!-- /End Confirm Dialog -->
 350
 351         <!-- Log View -->
 352         <div id="log-view-content" class="log-view-content">
 353             <div class="log-view-content-header">
 354                 <button type="button" class="close log-view-content-close">x</button>
 355                 <h4 class="log-view-content-header-title">Log</h4>
 356                 <a type="button" id="log-view-content-download" class="fa fa-download log-view-content-download"> Download</a>
 357             </div>
 358             <div id="log-view-content-body" class="log-view-content-body"></div>
 359         </div><!-- /End Log View -->
 360
 361         <!-- Context menu in package tree -->
 362         <div id="tic-package-context-menu">
 363             <ul class="dropdown-menu" role="menu">
 364                 <li><a id="tic-package-context-menu-uncheck-all" tabindex="-1">Uncheck All</a></li>
 365                 <!--
 366                 <li class="divider"></li>
 367                 -->
 368             </ul>
 369         </div><!-- /End Context menu in package tree -->
 370
 371         <!-- Import Dialog -->
 372         <div class="modal fade" id="tic-import-dialog" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
 373             <div class="modal-dialog">
 374                 <div class="modal-content">
 375                     <div class="modal-header">
 376                         <h4 class="modal-title">Add Recipe or Repository</h4>
 377                     </div>
 378                     <div class="modal-body">
 379                         <div id="tic-import-recipe-container" data-toggle="validator" data-validate="true">
 380                             <!-- Recipe File -->
 381                             <div class="row">
 382                                 <div class="form-group col-md-3">
 383                                     <div class="radio">
 384                                         <label class="radio-inline control-label"><input id="tic-import-recipe-file-group" type="radio" name="recipe" checked="checked"> Recipe File</label>
 385                                     </div>
 386                                 </div>
 387                                 <div class="form-group has-feedback has-clear col-md-5">
 388                                     <input class="form-control tic-import-recipe-file-group" id="tic-import-recipe-file-input" type="text" readonly>
 389                                 </div>
 390                                 <div class="form-group col-md-2">
 391                                     <button id="tic-import-recipe-file-browser" class="tic-import-recipe-file-group btn btn-primary" type="button">Browser..</button>
 392                                 </div>
 393                             </div>
 394
 395                             <!-- Recipe URL -->
 396                             <div class="row">
 397                                 <div class="form-group col-md-3">
 398                                     <div class="radio">
 399                                         <label class="radio-inline control-label"><input id="tic-import-recipe-url-group" type="radio" name="recipe"> Recipe URL</label>
 400                                     </div>
 401                                 </div>
 402                                 <div id="tic-import-recipe-url-group" class="form-group has-feedback has-clear col-md-7">
 403                                     <input class="form-control tic-import-recipe-url-group" id="tic-import-recipe-url-input" type="url" placeholder="Enter recipe URL" data-unique="unique">
 404                                     <div id="tic-import-recipe-url-group-help" class="help-block with-errors"></div>
 405                                 </div>
 406                             </div>
 407
 408                             <!-- Repository URL -->
 409                             <div class="row">
 410                                 <div class="form-group col-md-3">
 411                                     <div class="radio">
 412                                         <label class="radio-inline control-label"><input id="tic-import-recipe-repo-url-group" type="radio" name="recipe" > Repository URL</label>
 413                                     </div>
 414                                 </div>
 415                                 <div class="form-group has-feedback has-clear col-md-7">
 416                                     <input class="form-control tic-import-recipe-repo-url-group" id="tic-import-recipe-repo-url-input" type="url" placeholder="Enter repository URL" data-unique="unique">
 417                                     <div class="help-block with-errors"></div>
 418                                 </div>
 419                             </div>
 420                         </div>
 421                     </div>
 422                     <div class="modal-footer">
 423                         <button id="tic-import-recipe-confirm-ok" type="button" class="btn btn-primary">OK</button>
 424                         <button id="tic-import-recipe-confirm-cancel" type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
 425                     </div>
 426                 </div>
 427             </div>
 428         </div><!-- /End Import Dialog -->
 429
 430         <!-- library loading -->
 431         <script src="/socket.io/socket.io.js"></script>
 432         <script src="/js/config.js"></script>
 433         <script src="/lib/requirejs/require.js" data-main="js/main"></script>
 434     </body>
 435 </html>