github.com/gocaveman/caveman@v0.0.0-20191211162744-0ddf99dbdf6e/uiproto/files/static/admin.html (about)

     1  <!DOCTYPE html>
     2  <html>
     3  <head>
     4  	<title>Sample Site - Administration</title>
     5  
     6  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.1.1/vuetify.css">
     7  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons">
     8  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
     9  
    10  <style>
    11  
    12  
    13  
    14  </style>
    15  
    16  </head>
    17  <body style="margin-top: 0;">
    18  
    19  <div id="app">
    20    <v-app id="inspire">
    21  
    22  
    23  
    24      <v-navigation-drawer fixed app value="true" clipped v-model="drawer">
    25  
    26  
    27          <v-list>
    28            <v-list-group
    29              v-for="item in items"
    30              v-model="item.active"
    31              :key="item.title"
    32              :prepend-icon="item.action"
    33              no-action
    34            >
    35              <v-list-tile slot="activator">
    36                <v-list-tile-content>
    37                  <v-list-tile-title>${item.title}</v-list-tile-title>
    38                </v-list-tile-content>
    39              </v-list-tile>
    40  
    41              <v-list-tile
    42                v-for="subItem in item.items"
    43                :key="subItem.title"
    44                @click="screen=subItem.screen"
    45              >
    46                <v-list-tile-content>
    47                  <v-list-tile-title>${subItem.title}</v-list-tile-title>
    48                </v-list-tile-content>
    49  
    50                <v-list-tile-action>
    51                  <v-icon>${subItem.action}</v-icon>
    52                </v-list-tile-action>
    53              </v-list-tile>
    54            </v-list-group>
    55          </v-list>
    56  
    57  
    58      </v-navigation-drawer>
    59  
    60  
    61      <v-toolbar
    62        clipped-left
    63        color="blue darken-3"
    64        dark
    65        app
    66        fixed
    67      >
    68        <v-toolbar-title style="width: 300px" class="ml-0">
    69          <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
    70          <span class="hidden-sm-and-down">Sample Site Admin</span>
    71        </v-toolbar-title>
    72  
    73      </v-toolbar>
    74      <v-content>
    75  
    76        <v-container fluid v-if="screen==''">
    77          <v-layout align-left>
    78            <v-flex xs12 >
    79              <v-card>
    80  
    81                <v-card-title>
    82                  <h3 class="headline mb-0">Administration</h3>
    83                  <!-- <h3 >Kangaroo Valley Safari</h3> -->
    84                </v-card-title>
    85  
    86                <v-card-text>
    87                  Administration stuffs
    88                </v-card-text>
    89  
    90              </v-card>
    91            </v-flex>
    92  
    93          </v-layout>
    94        </v-container>
    95  
    96        <v-container fluid v-if="screen=='users__settings'">
    97          <v-layout align-left>
    98            <v-flex xs12 >
    99              <v-card>
   100  
   101                <v-card-title>
   102                  <h3 class="headline mb-0">User Settings</h3>
   103                </v-card-title>
   104  
   105                <v-card-text>
   106  
   107                    <v-form>
   108                      <!-- <v-text-field label=""></v-text-field> -->
   109                      <v-checkbox label="Allow public user registration"></v-checkbox>
   110                      [drop down for login with user_name, email or either one]
   111                      [what about options for things like password length/strength, and account lockout]
   112                      <v-select :items="roles" label="Role for newly registered users"></v-select>
   113                      <v-select :items="groups" label="Group for newly registered users"></v-select>
   114                    </v-form>
   115  
   116                </v-card-text>
   117  
   118                <v-card-actions>
   119                  <v-btn flat color="primary">Save</v-btn>
   120                  <v-btn flat >Reset</v-btn>
   121                </v-card-actions>
   122  
   123              </v-card>
   124            </v-flex>
   125  
   126          </v-layout>
   127        </v-container>
   128  
   129  
   130        <v-container fluid v-if="screen=='users__users'">
   131          <v-layout align-left>
   132            <v-flex xs12 >
   133              <v-card>
   134  
   135                <v-card-title>
   136                  <h3 class="headline mb-0">Users</h3>
   137                </v-card-title>
   138  
   139                <v-card-text>
   140  
   141                  [drop down, search type] [search] [drop down, filters]<br/>
   142                  [fold out whatever custom filters, check boxes, etc.]<br/>
   143                  [adds a bar with chips for applied filters]
   144  
   145                  <v-data-table
   146                    v-model="selected"
   147                    :headers="headers"
   148                    :items="user_list"
   149                    :pagination.sync="pagination"
   150                    select-all
   151                    item-key="user_name"
   152                    class="elevation-1"
   153                  >
   154                    <template slot="headers" slot-scope="props">
   155                      <tr>
   156                        <th>
   157                          <v-checkbox
   158                            :input-value="props.all"
   159                            :indeterminate="props.indeterminate"
   160                            primary
   161                            hide-details
   162                            @click.native="toggleAll"
   163                          ></v-checkbox>
   164                        </th>
   165                        <th
   166                          v-for="header in props.headers"
   167                          :key="header.text"
   168                          :class="['column sortable', pagination.descending ? 'desc' : 'asc', header.value === pagination.sortBy ? 'active' : '']"
   169                          @click="changeSort(header.value)"
   170                        >
   171                          <v-icon small>arrow_upward</v-icon>
   172                          ${header.text}
   173                        </th>
   174                      </tr>
   175                    </template>
   176                    <template slot="items" slot-scope="props">
   177                      <tr :active="props.selected" @click="props.selected = !props.selected">
   178                        <td>
   179                          <v-checkbox
   180                            :input-value="props.selected"
   181                            primary
   182                            hide-details
   183                          ></v-checkbox>
   184                        </td>
   185                        <td>${props.item.user_name}</td>
   186                        <td class="text-xs-right">${props.item.email}</td>
   187                        <td class="text-xs-right">${props.item.status}</td>
   188                        <td class="text-xs-right">${props.item.roles}</td>
   189                        <td class="text-xs-right">${props.item.groups}</td>
   190                      </tr>
   191                    </template>
   192                  </v-data-table>
   193  
   194                </v-card-text>
   195  
   196              </v-card>
   197            </v-flex>
   198  
   199          </v-layout>
   200        </v-container>
   201  
   202  
   203  
   204      </v-content>
   205  
   206    </v-app>
   207  </div>
   208  
   209  <script src="https://unpkg.com/vue@2.5.16/dist/vue.js" type="text/javascript"></script>
   210  <script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
   211  <script src="https://unpkg.com/vuex@3.0.1/dist/vuex.js"></script>
   212  <script src="https://unpkg.com/vuetify@1.1.5/dist/vuetify.min.js" type="text/javascript"></script>
   213  
   214  
   215  <script>
   216  
   217  let vm = new Vue({
   218      delimiters: ['${', '}'],
   219      el: "#app",
   220      data: () => ({
   221  
   222        screen: '',
   223  
   224        items: [
   225  
   226            {
   227              action: 'people',
   228              title: 'Users & Access',
   229              items: [
   230                // A way to configure if you can publicly create accounts, and if so what role(s) or group(s) they should posses
   231                { title: 'Settings', screen: 'users__settings' },
   232                { title: 'Users', screen: 'users__users' },
   233                { title: 'Groups' },
   234                { title: 'Roles' },
   235                { title: 'Permissions' },
   236                { title: 'ACLs?' },
   237              ]
   238            },
   239  
   240            {
   241              action: 'pages',
   242              title: 'CMS',
   243              // active: true,
   244              items: [
   245                { title: 'Pages' },
   246                { title: 'Views' },
   247                { title: 'Menus' },
   248                { title: 'Regions' },
   249                { title: 'Media' },
   250                { title: 'Themes' },
   251                // other plugins would probably go here, like:
   252                { title: 'Forms' },
   253                { title: 'SEO' },
   254              ]
   255            },
   256  
   257            {
   258              action: 'computer',
   259              title: 'Server',
   260              items: [
   261                { title: 'Status' },
   262                { title: 'Logs' },
   263                { title: 'Cron' },
   264              ]
   265            },
   266  
   267            {
   268              action: 'storage',
   269              title: 'Database',
   270              items: [
   271                { title: 'Status' },
   272                { title: 'SQL Console' },
   273                { title: 'Import' },
   274                { title: 'Export' },
   275                { title: 'Migrations' },
   276                { title: 'Backups' },
   277                { title: 'Sharding' },
   278              ]
   279            },
   280  
   281            {
   282              action: 'search',
   283              title: 'Search',
   284              items: [
   285                { title: 'Status' },
   286                { title: 'Settings' },
   287              ]
   288            },
   289  
   290          ],
   291  
   292        roles: [
   293          '[none]', 'Content Viewer', 'Content Editor', 'Site Admin',
   294        ],
   295  
   296        groups: [
   297          '[none]', 'Public', 'Admin',
   298        ],
   299  
   300        drawer: null,
   301  
   302  
   303  
   304        pagination: {
   305          sortBy: 'user_name'
   306        },
   307        selected: [],
   308        headers: [
   309          { text: 'User Name', value: 'user_name', align: 'left' },
   310          { text: 'Email', value: 'email' },
   311          { text: 'Status', value: 'status' },
   312          { text: 'Roles', value: 'roles' },
   313          { text: 'Groups', value: 'groups' },
   314        ],
   315        user_list: [
   316          {
   317            value: false,
   318            user_name: 'johnjones@example.com',
   319            email: 'johnjones@example.com',
   320            status: 'active',
   321            groups: [],
   322            roles: [],
   323          },
   324          // {
   325          //   value: false,
   326          //   name: 'Ice cream sandwich',
   327          //   calories: 237,
   328          //   fat: 9.0,
   329          //   carbs: 37,
   330          //   protein: 4.3,
   331          //   iron: '1%'
   332          // },
   333          // {
   334          //   value: false,
   335          //   name: 'Eclair',
   336          //   calories: 262,
   337          //   fat: 16.0,
   338          //   carbs: 23,
   339          //   protein: 6.0,
   340          //   iron: '7%'
   341          // },
   342          // {
   343          //   value: false,
   344          //   name: 'Cupcake',
   345          //   calories: 305,
   346          //   fat: 3.7,
   347          //   carbs: 67,
   348          //   protein: 4.3,
   349          //   iron: '8%'
   350          // },
   351          // {
   352          //   value: false,
   353          //   name: 'Gingerbread',
   354          //   calories: 356,
   355          //   fat: 16.0,
   356          //   carbs: 49,
   357          //   protein: 3.9,
   358          //   iron: '16%'
   359          // },
   360          // {
   361          //   value: false,
   362          //   name: 'Jelly bean',
   363          //   calories: 375,
   364          //   fat: 0.0,
   365          //   carbs: 94,
   366          //   protein: 0.0,
   367          //   iron: '0%'
   368          // },
   369          // {
   370          //   value: false,
   371          //   name: 'Lollipop',
   372          //   calories: 392,
   373          //   fat: 0.2,
   374          //   carbs: 98,
   375          //   protein: 0,
   376          //   iron: '2%'
   377          // },
   378          // {
   379          //   value: false,
   380          //   name: 'Honeycomb',
   381          //   calories: 408,
   382          //   fat: 3.2,
   383          //   carbs: 87,
   384          //   protein: 6.5,
   385          //   iron: '45%'
   386          // },
   387          // {
   388          //   value: false,
   389          //   name: 'Donut',
   390          //   calories: 452,
   391          //   fat: 25.0,
   392          //   carbs: 51,
   393          //   protein: 4.9,
   394          //   iron: '22%'
   395          // },
   396          // {
   397          //   value: false,
   398          //   name: 'KitKat',
   399          //   calories: 518,
   400          //   fat: 26.0,
   401          //   carbs: 65,
   402          //   protein: 7,
   403          //   iron: '6%'
   404          // }
   405        ],
   406  
   407  
   408  
   409      }),
   410  
   411      props: {
   412        source: String
   413      }
   414  });
   415  
   416  </script>
   417  
   418  
   419  
   420  </body>
   421  </html>