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         <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  16         <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  17         <!--[if lt IE 9]>
  18         <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  19         <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  20         <![endif]-->
  21     </head>
  22
  23     <body data-spy="scroll" data-target=".navbar-fixed-top">
  24         <!-- Navigation -->
  25         <nav class="navbar navbar-inverse navbar-fixed-top">
  26             <div class="container">
  27                 <div class="navbar-header">
  28                     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
  29                         <span class="sr-only">Toggle navigation</span>
  30                         <span class="icon-bar"></span>
  31                         <span class="icon-bar"></span>
  32                         <span class="icon-bar"></span>
  33                     </button>
  34                     <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>
  35                 </div>
  36
  37                 <!-- Collect the nav links, forms, and other content for toggling -->
  38                 <div id="navbar" class="collapse navbar-collapse">
  39                     <ul class="nav navbar-nav">
  40                         <li>
  41                             <a class="tic-page-scroll" href="#tic-package-section">Packages</a>
  42                         </li>
  43                         <li>
  44                             <a class="tic-page-scroll"href="#tic-job-section">Jobs</a>
  45                         </li>
  46                         <li>
  47                             <a class="tic-page-scroll"href="#tic-image-section">Images</a>
  48                         </li>
  49                         <li>
  50                             <a class="tic-page-scroll"href="#tic-settings-section">Settings</a>
  51                         </li>
  52                     </ul>
  53                     <!-- Log in -->
  54                     <ul class="nav navbar-nav navbar-right">
  55                         <li class="dropdown">
  56                             <a id="tic-page-login-dropdown-toggle" href="#" class="dropdown-toggle" data-toggle="dropdown">Login<span class="caret"></span></a>
  57                             <ul id="tic-page-login-dropdown-menu" class="dropdown-menu">
  58                                 <li>
  59                                     <div class="row">
  60                                         <div class="col-md-12">
  61                                             <form id="tic-page-login-form" class="form" role="form" method="get" accept-charset="UTF-8">
  62                                                 <div class="form-group">
  63                                                     <label class="sr-only" for="tic-page-login-form-email">Email address</label>
  64                                                     <input type="email" id="tic-page-login-form-email" class="form-control" name="email" placeholder="Email address" required>
  65                                                 </div>
  66                                                 <div class="form-group">
  67                                                     <label class="sr-only" for="tic-page-login-form-password">Password</label>
  68                                                     <input type="password" id="tic-page-login-form-password" class="form-control" name="password" placeholder="Password" required>
  69                                                 </div>
  70                                                 <div class="form-group">
  71                                                     <button type="submit" class="btn btn-primary btn-block">Log in</button>
  72                                                 </div>
  73                                             </form>
  74                                         </div>
  75                                     </div>
  76                                 </li>
  77                             </ul>
  78                         </li>
  79                     </ul>
  80                 </div><!--/.nav-collapse -->
  81             </div><!-- /.container -->
  82         </nav>
  83
  84
  85         <!-- Package Section -->
  86         <section id="tic-package-section">
  87             <div class="container">
  88                 <div class="row">
  89                     <!-- Package Left Column -->
  90                     <div class="col-md-6">
  91                         <div class="panel panel-primary">
  92                             <div class="panel-body">
  93                                 <!-- Profile Toolbar -->
  94                                 <div class="btn-group btn-group-justified">
  95                                     <div class="btn-group">
  96                                         <button type="button" class="btn btn-primary">All</button>
  97                                     </div>
  98                                     <div class="btn-group">
  99                                         <button type="button" class="btn btn-primary">Common</button>
 100                                     </div>
 101                                     <div class="btn-group">
 102                                         <button type="button" class="btn btn-primary">Mobile</button>
 103                                     </div>
 104                                     <div class="btn-group">
 105                                         <button type="button" class="btn btn-primary">Wearable</button>
 106                                     </div>
 107                                     <div class="btn-group">
 108                                         <button type="button" class="btn btn-primary">TV</button>
 109                                     </div>
 110                                 </div>
 111                                 <!-- Package Tree Toolbar -->
 112                                 <div id="tic-package-left-col-tree-toolbar">
 113                                     <div class="input-group">
 114                                         <div class="form-group has-feedback has-clear">
 115                                             <input type="text" class="form-control" placeholder="Start typing to filter list of packages" id="tic-package-toolbar-input"/>
 116                                             <span class="form-control-clear glyphicon glyphicon-remove form-control-feedback hidden" id="tic-package-toolbar-input-clear"></span>
 117                                         </div>
 118                                         <div class="input-group-btn">
 119                                             <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 120                                                 <i class="fa fa-navicon"></i>
 121                                             </button>
 122                                             <ul class="dropdown-menu dropdown-menu-right">
 123                                                 <li><a id="tic-package-toolbar-checkall">Check All</a></li>
 124                                                 <li><a id="tic-package-toolbar-uncheckall">Uncheck All</a></li>
 125                                             </ul>
 126                                             <button type="button" class="btn btn-default" id="tic-package-left-col-tree-toolbar-collapse-all">
 127                                                 <i class="fa fa-minus"></i>
 128                                             </button>
 129                                             <button type="button" class="btn btn-default" id="tic-package-left-col-tree-toolbar-expand-all">
 130                                                 <i class="fa fa-plus"></i>
 131                                             </button>
 132                                         </div>
 133                                     </div>
 134                                 </div>
 135                                 <!-- Package Tree -->
 136                                 <div id="tic-package-left-col-tree">
 137                                 </div>
 138                             </div>
 139                         </div>
 140                     </div><!-- /End Package Left Column -->
 141
 142                     <!-- Package Right Column -->
 143                     <div class="col-md-6">
 144                         <!-- Package Information -->
 145                         <div class="panel panel-primary">
 146                             <div class="panel-heading">Package Information</div>
 147                             <div class="panel-body">
 148                                 <table id="tic-package-info-table" class="table table-condensed">
 149                                     <tbody>
 150                                         <tr><td>Name</td><td id="tic-package-info-text"></td></tr>
 151                                         <tr><td>Version</td><td id="tic-package-info-version"></td></tr>
 152                                         <tr><td>Architecture</td><td id="tic-package-info-arch"></td></tr>
 153                                         <tr><td>Size</td><td id="tic-package-info-size"></td></tr>
 154                                         <tr><td>Installed Size</td><td id="tic-package-info-installed-size"></td></tr>
 155                                         <tr><td>Summary</td><td id="tic-package-info-summary"></td></tr>
 156                                         <tr><td>Description</td><td id="tic-package-info-description"></td></tr>
 157                                     </tbody>
 158                                 </table>
 159                             </div>
 160                         </div>
 161                         <!-- Package Summary -->
 162                         <div class="panel panel-primary">
 163                             <div class="panel-heading">Summary</div>
 164                             <div class="panel-body">
 165                                 <table id="tic-package-summary" class="table table-condensed">
 166                                     <tbody>
 167                                         <tr><td>Image Size</td><td id="tic-package-image-size"></td></tr>
 168                                         <tr><td>Image Installed Size</td><td id="tic-package-image-installed-size"></td></tr>
 169                                         <tr><td>Package List <span class="badge" id="tic-package-list-badge"></span></td><td id="tic-package-list"></td></tr>
 170                                     </tbody>
 171                                 </table>
 172                             </div>
 173                             <div class="panel-footer">
 174                                 <a type="button" id="tic-package-create" class="btn btn-primary disabled" href="#">Image Creation</a>
 175                             </div>
 176                         </div>
 177                     </div><!-- /End Package Right Column -->
 178                 </div>
 179             </div><!-- /.container -->
 180         </section>
 181
 182         <!-- Job Section -->
 183         <section id="tic-job-section">
 184             <div class="container">
 185                 <div class="row">
 186                     <!-- Job List Column -->
 187                     <div class="col-md-12">
 188                         <div class="panel panel-primary">
 189                             <div class="panel-heading">
 190                                 <h3 class="panel-title">Job List</h3>
 191                             </div>
 192                             <div class="panel-body">
 193                                 <div id="tic-job-list">
 194                                     <div id="tic-job-list-content">
 195                                         <div id="tic-job-filter">
 196                                             <form class="navbar-form" role="search">
 197                                                 <div class="input-group">
 198                                                     <input type="text" class="form-control" placeholder="Search Status, JobId" name="q">
 199                                                     <div class="input-group-btn">
 200                                                         <button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span></button>
 201                                                     </div>
 202                                                 </div>
 203                                             </form>
 204                                         </div>
 205                                         <div>
 206                                             <table class="table table-hover table-bordered" id="tic-job-table">
 207                                                 <thead>
 208                                                     <tr class="filters text-center">
 209                                                         <th>#</th>
 210                                                         <th>Status</th>
 211                                                         <th>Image</th>
 212                                                         <th>Image Size</th>
 213                                                         <th>Updated</th>
 214                                                         <th>Action</th>
 215                                                         <th>KS</th>
 216                                                         <th>Log</th>
 217                                                     </tr>
 218                                                 </thead>
 219                                                 <tbody>
 220                                                 </tbody>
 221                                             </table>
 222                                         </div>
 223                                     </div>
 224                                     <div id="tic-job-list-pagination">
 225                                         <ul class="pagination pagination-sm">
 226                                             <li class="disabled"><a href="#"><span class="glyphicon glyphicon-chevron-left"></span></a></li>
 227                                             <li class="disabled"><a href="#"><span class="glyphicon glyphicon-chevron-right"></span></a></li>
 228                                         </ul>
 229                                     </div>
 230                                 </div>
 231                             </div>
 232                         </div>
 233                     </div><!-- /End Job List Column -->
 234                 </div>
 235             </div><!-- /.container -->
 236         </section>
 237
 238         <!-- Image Section -->
 239         <section id="tic-image-section">
 240             <div class="container">
 241                 <div class="row">
 242                     <!-- Image List Column -->
 243                     <div class="col-md-12">
 244                         <div class="panel panel-primary">
 245                             <div class="panel-heading">Image List</div>
 246                             <div class="panel-body">
 247                                 <div id="tic-image-list-content">
 248                                     <div id="tic-image-filter">
 249                                         <form class="navbar-form" role="search">
 250                                             <div class="input-group">
 251                                                 <input type="text" class="form-control" placeholder="Search JobId" name="q">
 252                                                 <div class="input-group-btn">
 253                                                     <button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span></button>
 254                                                 </div>
 255                                             </div>
 256                                         </form>
 257                                     </div>
 258                                     <div>
 259                                         <ul class="list-group" id="tic-image-list"></ul>
 260                                     </div>
 261                                 </div>
 262                                 <div id="tic-image-list-pagination">
 263                                     <ul class="pagination pagination-sm">
 264                                         <li class="disabled"><a href="#"><span class="glyphicon glyphicon-chevron-left"></span></a></li>
 265                                         <li class="disabled"><a href="#"><span class="glyphicon glyphicon-chevron-right"></span></a></li>
 266                                     </ul>
 267                                 </div>
 268                             </div>
 269                         </div>
 270                     </div><!-- /End Image List Column -->
 271                 </div>
 272             </div><!-- /.container -->
 273         </section>
 274
 275
 276         <!-- Settings Section -->
 277         <section id="tic-settings-section">
 278             <div class="container">
 279                 <div class="row">
 280                     <!-- Settings Column -->
 281                     <div class="col-md-12">
 282                         <div class="panel panel-primary">
 283                             <div class="panel-heading">Settings</div>
 284                             <div class="panel-body">
 285                                 <!-- Settings Toolbar -->
 286                                 <div id="tic-repository-toolbar">
 287                                     <button type="button" id="tic-repository-recipe-import" class="btn btn-default"><i class="fa fa-download"></i> Recipe Import</button>
 288                                     <button type="button" id="tic-repository-recipe-export" class="btn btn-default"><i class="fa fa-upload"></i> Recipe Export</button>
 289                                 </div>
 290
 291                                 <!-- Repository Column -->
 292                                 <div class="panel panel-primary">
 293                                     <div class="panel-heading">Repository</div>
 294                                     <div class="panel-body">
 295                                         <div class="input-group">
 296                                             <div class="form-group has-feedback has-clear">
 297                                                 <input id="tic-repository-input" type="text" class="form-control" placeholder="Enter repository URL">
 298                                                 <span id="tic-repository-input-clear" class="form-control-clear glyphicon glyphicon-remove form-control-feedback hidden"></span>
 299                                             </div>
 300                                             <span class="input-group-btn">
 301                                                 <button type="button" id="tic-repository-add"class="btn btn-default">Add Repository</button>
 302                                             </span>
 303                                         </div>
 304                                         <ol id="tic-repository-list" class="list-group"></ol>
 305                                     </div>
 306                                 </div>
 307                             </div>
 308
 309                             <div class="panel-footer">
 310                                 <a id="tic-repository-apply" type="button" class="btn btn-primary" href="#tic-package-section">Apply</a>
 311                             </div>
 312                         </div>
 313                     </div><!-- /End Settings Column -->
 314                 </div>
 315             </div><!-- /.container -->
 316         </section>
 317
 318
 319         <!-- Loading Dialog -->
 320         <div class="modal fade" id="tic-load-dialog" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
 321             <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
 322         </div><!-- /End Loading Dialog -->
 323
 324         <!-- Info Dialog -->
 325         <div class="modal fade" id="tic-info-dialog" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
 326             <div class="modal-dialog modal-sm">
 327                 <div class="modal-content">
 328                     <div class="modal-body">
 329                         <p id="tic-info-content"></p>
 330                     </div>
 331                     <div class="modal-footer">
 332                         <button type="button" class="btn btn-success" data-dismiss="modal">Close</button>
 333                 </div>
 334                 </div>
 335             </div>
 336         </div><!-- /End Info Dialog -->
 337
 338         <!-- Alert Dialog -->
 339         <div class="modal fade" id="tic-alert-dialog" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
 340             <div class="modal-dialog modal-sm">
 341                 <div class="modal-content">
 342                     <div class="modal-body">
 343                         <p id="tic-alert-content"></p>
 344                     </div>
 345                     <div class="modal-footer">
 346                         <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
 347                 </div>
 348                 </div>
 349             </div>
 350         </div><!-- /End Alert Dialog -->
 351
 352         <!-- Confirm Dialog -->
 353         <div class="modal fade" id="tic-confirm-dialog" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
 354             <div class="modal-dialog modal-sm">
 355                 <div class="modal-content">
 356                     <div class="modal-body">
 357                         <p id="tic-confirm-content"></p>
 358                     </div>
 359                     <div class="modal-footer">
 360                         <button id="tic-confirm-ok" type="button" class="btn btn-primary" data-dismiss="modal">OK</button>
 361                         <button id="tic-confirm-cancel" type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
 362                    </div>
 363                 </div>
 364             </div>
 365         </div><!-- /End Confirm Dialog -->
 366
 367
 368         <!-- library loading -->
 369         <script src="/socket.io/socket.io.js"></script>
 370         <script src="/js/config.js"></script>
 371         <script src="/lib/requirejs/require.js" data-main="js/main"></script>
 372     </body>
 373 </html>