/
krasninja
/
querycat
Обзор
Документация
Войти
/
krasninja
/
querycat
Код
Пакеты
0
Релизы
0
Аналитика
Безопасность
develop
src/QueryCat.Cli/Infrastructure/WebServerIndex.html
256 строк
8 KB
Ivan Kozhin
Update Quasar and YamlDotNet
03 июн 2024, 18:30
03 июн 2024, 18:30
37faaf9
Код
Авторство
О чём код?
<!doctype html> <html lang="en"> <head> <title>QueryCat Console</title> <meta charset="UTF-8" /> <meta name="description" content="QueryCat web console" /> <meta name="robots" content="noindex, nofollow" /> <meta name="viewport" content="width=device-width,initial-scale=1.0" /> <link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet" type="text/css"> <link href="https://cdn.jsdelivr.net/npm/quasar@2.16/dist/quasar.prod.css" rel="stylesheet" type="text/css"> <link href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAYAAABPYyMiAAAABmJLR0T///////8JWPfcAAAACXBIWXMAAABIAAAASABGyWs+AAAAF0lEQVRIx2NgGAWjYBSMglEwCkbBSAcACBAAAeaR9cIAAAAASUVORK5CYII=" rel="icon" type="image/x-icon" /> <style> .sticky-header-table { max-height: 700px; } .sticky-header-table thead tr:first-child th { background-color: white; } .sticky-header-table thead tr th { position: sticky; z-index: 1; user-select: text; } .sticky-header-table thead tr:first-child th { top: 0; } .sticky-header-table .q-table--loading thead tr:last-child th { top: 48px; } .query-editor { font-family: monospace; height: calc(100% - 40px); outline: 0 none transparent; } ul { padding-left: 1em; } .folder { color: #f1d592; } </style> </head> <body> <div id="q-app"> <q-bar class="bg-primary text-white"> <div>QueryCat Console</div> </q-bar> <q-tabs dense no-caps align="left" class="bg-secondary text-white"> <q-route-tab to="/" label="Query"></q-route-tab> <q-route-tab to="/files" label="Files"></q-route-tab> <q-route-tab to="/info" label="Info"></q-route-tab> </q-tabs> <router-view v-slot="{ Component }"> <keep-alive> <component :is="Component"></component> </keep-alive> </router-view> </div> <!-- QueryPage --> <template id="query-page"> <q-splitter v-model="splitterModel" horizontal style="height: calc(100vh - 75px);"> <template v-slot:before> <q-form @submit.prevent="runQuery()" method="post" class="full-height" :ref="query"> <div> <q-btn type="submit" label="Run" size="sm" color="primary" class="q-ma-xs" icon="send"></q-btn> <q-btn label="Schema" size="sm" color="secondary" class="q-ma-xs" icon="schema" @click.native="runSchema()"></q-btn> <q-btn label="Reset" size="sm" color="secondary" class="q-ma-xs" icon="clear_all" @click.native="reset()"></q-btn> </div> <textarea v-model="query" @keydown.ctrl.enter.prevent="runQuery()" class="full-width query-editor" spellcheck="false" autofocus> </textarea> </q-form> </template> <template v-slot:after> <q-table :rows="rows" :columns="columns" class="sticky-header-table full-height" no-data-label="No data." dense flat square bordered hide-no-data separator="vertical" row-key="row_number" virtual-scroll :filter="filter" v-model:pagination="pagination" :rows-per-page-options="[0]" :virtual-scroll-sticky-size-start="48"> <template v-slot:top-right> <q-input dense debounce="300" v-model="filter" placeholder="Search"> <template v-slot:append> <q-icon name="search" /> </template> </q-input> </template> </q-table> </template> </q-splitter> </template> <!-- InfoPage --> <template id="info-page"> <div class="q-pa-md"> <div class="row"> <div class="col-2 text-bold">Version</div> <div class="col-10" v-html="version"></div> </div> <div class="row"> <div class="col-2 text-bold">OS</div> <div class="col-10" v-html="os"></div> </div> <div class="row"> <div class="col-2 text-bold">Platform</div> <div class="col-10" v-html="platform"></div> </div> <div class="row"> <div class="col-2 text-bold">Installed plugins</div> <div class="col-10"> <ul> <li v-for="plugin in installedPlugins" :key="plugin.name"> {{ plugin.name }} <code>({{ plugin.uri }})</code> </li> </ul> </div> </div> </div> </template> <!-- Files --> <template id="files-page"> <div class="q-pa-md"> <q-breadcrumbs> <q-breadcrumbs-el v-for="(name, index) in pathElements"> <router-link :to="{ path: 'files', query: { q: getFullPath('', index + 1) + '/' }}">{{ name }}</router-link> </q-breadcrumbs-el> </q-breadcrumbs> <q-separator></q-separator> <q-table :rows="rows" :columns="columns" :hide-pagination="true" :rows-per-page-options="[0]" row-key="name" dense flat square hide-no-data> <template v-slot:body="props"> <q-tr :props="props"> <q-td key="name" :props="props"> <q-icon v-if="props.row.type === 'd'" class="folder" name="folder"></q-icon> <q-icon v-if="props.row.type === 'f'" :name="getFileIcon(props.row.name)"></q-icon> <router-link :to="{ path: 'files', query: { q: getFullPath(props.row.name) }}" custom v-slot="{ href, navigate, isActive }"> <a :href="getFullDownloadPath(getFullPath(props.row.name))" @click="navigate">{{ props.row.name }}</a> </router-link> </q-td> <q-td key="last_write_time" :props="props"> {{ props.row.last_write_time }} </q-td> <q-td key="size" :props="props"> {{ props.row.size_pretty }} </q-td> <q-td key="actions" :props="props"> <router-link @click.native="setPathQuery(props.row.path)" :to="{ path: 'query' }">[ query ]</router-link> </q-td> </q-tr> </template> </q-table> </div> </template> <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script> <script src="https://cdn.jsdelivr.net/npm/quasar@2.16/dist/quasar.umd.prod.js"></script> <script src="https://cdn.jsdelivr.net/npm/axios@1.6/dist/axios.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue-router@4/dist/vue-router.global.min.js"></script> <script src="index.js?d=20240508"></script> <script> document.addEventListener('DOMContentLoaded', function() { const router = VueRouter.createRouter({ history: VueRouter.createWebHashHistory(), routes: [ { path: '/', component: queryPage }, { path: '/query', component: queryPage }, { path: '/info', component: infoPage }, { path: '/files', component: filesPage } ] }); axios.interceptors.response.use( function(response) { return response; }, function(error) { var errorMessage = error.message; if (error.response && error.response.data && error.response.data.message) { errorMessage = error.response.data.message; } Quasar.Notify.create({ type: 'negative', message: errorMessage }); return Promise.reject(error); }); const app = Vue.createApp(); app.use(Quasar, { config: { notify: {}, brand: { primary: '#7f7f7f', secondary: '#999999', accent: '#9C27B0', dark: '#1d1d1d', 'dark-page': '#121212', positive: '#21BA45', negative: '#C10015', info: '#31CCEC', warning: '#F2C037' } } }); app.use(router); app.mount('#q-app'); window.app = app; }); </script> <script> window.baseUrl = ''; </script> </body> </html>