-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
ae8e53f
commit d1db29d
Showing
24 changed files
with
512 additions
and
257 deletions.
There are no files selected for viewing
Empty file.
Empty file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,4 @@ | ||
| @tailwind base; | ||
| @tailwind components; | ||
| @tailwind utilities; | ||
| @tailwind utilities; | ||
| /* @import 'quill/dist/quill.snow.css'; */ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,225 +1,15 @@ | ||
| <!-- https://www.tailwindawesome.com/resources/tailwind-admin-template/demo --> | ||
| <template> | ||
| <!-- <div class="container mx-auto px-4"> | ||
| <div class="container mx-auto px-4"> | ||
| <p>Article</p> | ||
| <p>Category</p> | ||
| <p>Authors</p> | ||
| <p>Comments</p> | ||
| <p>Tags</p> | ||
| <p>Settings</p> | ||
| </div> --> | ||
|
|
||
| <aside class="relative bg-gray-900 h-screen w-64 hidden sm:block shadow-xl"> | ||
| <div class="p-6"> | ||
| <a href="index.html" class="text-white text-3xl font-semibold uppercase hover:text-gray-300">Admin</a> | ||
| <button | ||
| class="w-full bg-white cta-btn font-semibold py-2 mt-5 rounded-br-lg rounded-bl-lg rounded-tr-lg shadow-lg hover:shadow-xl hover:bg-gray-300 flex items-center justify-center" | ||
| > | ||
| <i class="fas fa-plus mr-3"></i> New Report | ||
| </button> | ||
| </div> | ||
| <nav class="text-white text-base font-semibold pt-3"> | ||
| <a href="index.html" class="flex items-center active-nav-link text-white py-4 pl-6 nav-item"> | ||
| <i class="fas fa-tachometer-alt mr-3"></i> | ||
| Dashboard | ||
| </a> | ||
| <a href="blank.html" class="flex items-center text-white opacity-75 hover:opacity-100 py-4 pl-6 nav-item"> | ||
| <i class="fas fa-sticky-note mr-3"></i> | ||
| Blank Page | ||
| </a> | ||
| <a href="tables.html" class="flex items-center text-white opacity-75 hover:opacity-100 py-4 pl-6 nav-item"> | ||
| <i class="fas fa-table mr-3"></i> | ||
| Tables | ||
| </a> | ||
| <a href="forms.html" class="flex items-center text-white opacity-75 hover:opacity-100 py-4 pl-6 nav-item"> | ||
| <i class="fas fa-align-left mr-3"></i> | ||
| Forms | ||
| </a> | ||
| <a href="tabs.html" class="flex items-center text-white opacity-75 hover:opacity-100 py-4 pl-6 nav-item"> | ||
| <i class="fas fa-tablet-alt mr-3"></i> | ||
| Tabbed Content | ||
| </a> | ||
| <a href="calendar.html" class="flex items-center text-white opacity-75 hover:opacity-100 py-4 pl-6 nav-item"> | ||
| <i class="fas fa-calendar mr-3"></i> | ||
| Calendar | ||
| </a> | ||
| </nav> | ||
| <a href="#" class="absolute w-full upgrade-btn bottom-0 active-nav-link text-white flex items-center justify-center py-4"> | ||
| <i class="fas fa-arrow-circle-up mr-3"></i> | ||
| Upgrade to Pro! | ||
| </a> | ||
| </aside> | ||
|
|
||
| <div class="w-full flex flex-col h-screen overflow-y-hidden"> | ||
| <!-- Desktop Header --> | ||
| <header class="w-full items-center bg-white py-2 px-6 hidden sm:flex"> | ||
| <div class="w-1/2"></div> | ||
| <div x-data="{ isOpen: false }" class="relative w-1/2 flex justify-end"> | ||
| <button | ||
| @click="isOpen = !isOpen" | ||
| class="realtive z-10 w-12 h-12 rounded-full overflow-hidden border-4 border-gray-400 hover:border-gray-300 focus:border-gray-300 focus:outline-none" | ||
| > | ||
| <img src="https://source.unsplash.com/uJ8LNVCBjFQ/400x400" /> | ||
| </button> | ||
| <button x-show="isOpen" @click="isOpen = false" class="h-full w-full fixed inset-0 cursor-default"></button> | ||
| <div x-show="isOpen" class="absolute w-32 bg-white rounded-lg shadow-lg py-2 mt-16"> | ||
| <a href="#" class="block px-4 py-2 account-link hover:text-white">Account</a> | ||
| <a href="#" class="block px-4 py-2 account-link hover:text-white">Support</a> | ||
| <a href="#" class="block px-4 py-2 account-link hover:text-white">Sign Out</a> | ||
| </div> | ||
| </div> | ||
| </header> | ||
|
|
||
| <!-- Mobile Header & Nav --> | ||
| <header x-data="{ isOpen: false }" class="w-full bg-gray-900 py-5 px-6 sm:hidden"> | ||
| <div class="flex items-center justify-between"> | ||
| <a href="index.html" class="text-white text-3xl font-semibold uppercase hover:text-gray-300">Admin</a> | ||
| <button @click="isOpen = !isOpen" class="text-white text-3xl focus:outline-none"> | ||
| <i x-show="!isOpen" class="fas fa-bars"></i> | ||
| <i x-show="isOpen" class="fas fa-times"></i> | ||
| </button> | ||
| </div> | ||
|
|
||
| <!-- Dropdown Nav --> | ||
| <nav :class="isOpen ? 'flex' : 'hidden'" class="flex flex-col pt-4"> | ||
| <a href="index.html" class="flex items-center active-nav-link text-white py-2 pl-4 nav-item"> | ||
| <i class="fas fa-tachometer-alt mr-3"></i> | ||
| Dashboard | ||
| </a> | ||
| <a href="blank.html" class="flex items-center text-white opacity-75 hover:opacity-100 py-2 pl-4 nav-item"> | ||
| <i class="fas fa-sticky-note mr-3"></i> | ||
| Blank Page | ||
| </a> | ||
| <a href="tables.html" class="flex items-center text-white opacity-75 hover:opacity-100 py-2 pl-4 nav-item"> | ||
| <i class="fas fa-table mr-3"></i> | ||
| Tables | ||
| </a> | ||
| <a href="forms.html" class="flex items-center text-white opacity-75 hover:opacity-100 py-2 pl-4 nav-item"> | ||
| <i class="fas fa-align-left mr-3"></i> | ||
| Forms | ||
| </a> | ||
| <a href="tabs.html" class="flex items-center text-white opacity-75 hover:opacity-100 py-2 pl-4 nav-item"> | ||
| <i class="fas fa-tablet-alt mr-3"></i> | ||
| Tabbed Content | ||
| </a> | ||
| <a href="calendar.html" class="flex items-center text-white opacity-75 hover:opacity-100 py-2 pl-4 nav-item"> | ||
| <i class="fas fa-calendar mr-3"></i> | ||
| Calendar | ||
| </a> | ||
| <a href="#" class="flex items-center text-white opacity-75 hover:opacity-100 py-2 pl-4 nav-item"> | ||
| <i class="fas fa-cogs mr-3"></i> | ||
| Support | ||
| </a> | ||
| <a href="#" class="flex items-center text-white opacity-75 hover:opacity-100 py-2 pl-4 nav-item"> | ||
| <i class="fas fa-user mr-3"></i> | ||
| My Account | ||
| </a> | ||
| <a href="#" class="flex items-center text-white opacity-75 hover:opacity-100 py-2 pl-4 nav-item"> | ||
| <i class="fas fa-sign-out-alt mr-3"></i> | ||
| Sign Out | ||
| </a> | ||
| <button class="w-full bg-white cta-btn font-semibold py-2 mt-3 rounded-lg shadow-lg hover:shadow-xl hover:bg-gray-300 flex items-center justify-center"> | ||
| <i class="fas fa-arrow-circle-up mr-3"></i> Upgrade to Pro! | ||
| </button> | ||
| </nav> | ||
| <!-- <button class="w-full bg-white cta-btn font-semibold py-2 mt-5 rounded-br-lg rounded-bl-lg rounded-tr-lg shadow-lg hover:shadow-xl hover:bg-gray-300 flex items-center justify-center"> | ||
| <i class="fas fa-plus mr-3"></i> New Report | ||
| </button> --> | ||
| </header> | ||
|
|
||
| <div class="w-full overflow-x-hidden border-t flex flex-col"> | ||
| <main class="w-full flex-grow p-6"> | ||
| <h1 class="text-3xl text-black pb-6">Dashboard</h1> | ||
|
|
||
| <div class="flex flex-wrap mt-6"> | ||
| <div class="w-full lg:w-1/2 pr-0 lg:pr-2"> | ||
| <p class="text-xl pb-3 flex items-center"><i class="fas fa-plus mr-3"></i> Monthly Reports</p> | ||
| <div class="p-6 bg-white"> | ||
| <canvas id="chartOne" width="400" height="200"></canvas> | ||
| </div> | ||
| </div> | ||
| <div class="w-full lg:w-1/2 pl-0 lg:pl-2 mt-12 lg:mt-0"> | ||
| <p class="text-xl pb-3 flex items-center"><i class="fas fa-check mr-3"></i> Resolved Reports</p> | ||
| <div class="p-6 bg-white"> | ||
| <canvas id="chartTwo" width="400" height="200"></canvas> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="w-full mt-12"> | ||
| <p class="text-xl pb-3 flex items-center"><i class="fas fa-list mr-3"></i> Latest Reports</p> | ||
| <div class="bg-white overflow-auto"> | ||
| <table class="min-w-full bg-white"> | ||
| <thead class="bg-gray-800 text-white"> | ||
| <tr> | ||
| <th class="w-1/3 text-left py-3 px-4 uppercase font-semibold text-sm">Name</th> | ||
| <th class="w-1/3 text-left py-3 px-4 uppercase font-semibold text-sm">Last name</th> | ||
| <th class="text-left py-3 px-4 uppercase font-semibold text-sm">Phone</th> | ||
| <th class="text-left py-3 px-4 uppercase font-semibold text-sm">Email</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody class="text-gray-700"> | ||
| <tr> | ||
| <td class="w-1/3 text-left py-3 px-4">Lian</td> | ||
| <td class="w-1/3 text-left py-3 px-4">Smith</td> | ||
| <td class="text-left py-3 px-4"><a class="hover:text-blue-500" href="tel:622322662">622322662</a></td> | ||
| <td class="text-left py-3 px-4"><a class="hover:text-blue-500" href="mailto:jonsmith@mail.com">jonsmith@mail.com</a></td> | ||
| </tr> | ||
| <tr class="bg-gray-200"> | ||
| <td class="w-1/3 text-left py-3 px-4">Emma</td> | ||
| <td class="w-1/3 text-left py-3 px-4">Johnson</td> | ||
| <td class="text-left py-3 px-4"><a class="hover:text-blue-500" href="tel:622322662">622322662</a></td> | ||
| <td class="text-left py-3 px-4"><a class="hover:text-blue-500" href="mailto:jonsmith@mail.com">jonsmith@mail.com</a></td> | ||
| </tr> | ||
| <tr> | ||
| <td class="w-1/3 text-left py-3 px-4">Oliver</td> | ||
| <td class="w-1/3 text-left py-3 px-4">Williams</td> | ||
| <td class="text-left py-3 px-4"><a class="hover:text-blue-500" href="tel:622322662">622322662</a></td> | ||
| <td class="text-left py-3 px-4"><a class="hover:text-blue-500" href="mailto:jonsmith@mail.com">jonsmith@mail.com</a></td> | ||
| </tr> | ||
| <tr class="bg-gray-200"> | ||
| <td class="w-1/3 text-left py-3 px-4">Isabella</td> | ||
| <td class="w-1/3 text-left py-3 px-4">Brown</td> | ||
| <td class="text-left py-3 px-4"><a class="hover:text-blue-500" href="tel:622322662">622322662</a></td> | ||
| <td class="text-left py-3 px-4"><a class="hover:text-blue-500" href="mailto:jonsmith@mail.com">jonsmith@mail.com</a></td> | ||
| </tr> | ||
| <tr> | ||
| <td class="w-1/3 text-left py-3 px-4">Lian</td> | ||
| <td class="w-1/3 text-left py-3 px-4">Smith</td> | ||
| <td class="text-left py-3 px-4"><a class="hover:text-blue-500" href="tel:622322662">622322662</a></td> | ||
| <td class="text-left py-3 px-4"><a class="hover:text-blue-500" href="mailto:jonsmith@mail.com">jonsmith@mail.com</a></td> | ||
| </tr> | ||
| <tr class="bg-gray-200"> | ||
| <td class="w-1/3 text-left py-3 px-4">Emma</td> | ||
| <td class="w-1/3 text-left py-3 px-4">Johnson</td> | ||
| <td class="text-left py-3 px-4"><a class="hover:text-blue-500" href="tel:622322662">622322662</a></td> | ||
| <td class="text-left py-3 px-4"><a class="hover:text-blue-500" href="mailto:jonsmith@mail.com">jonsmith@mail.com</a></td> | ||
| </tr> | ||
| <tr> | ||
| <td class="w-1/3 text-left py-3 px-4">Oliver</td> | ||
| <td class="w-1/3 text-left py-3 px-4">Williams</td> | ||
| <td class="text-left py-3 px-4"><a class="hover:text-blue-500" href="tel:622322662">622322662</a></td> | ||
| <td class="text-left py-3 px-4"><a class="hover:text-blue-500" href="mailto:jonsmith@mail.com">jonsmith@mail.com</a></td> | ||
| </tr> | ||
| <tr class="bg-gray-200"> | ||
| <td class="w-1/3 text-left py-3 px-4">Isabella</td> | ||
| <td class="w-1/3 text-left py-3 px-4">Brown</td> | ||
| <td class="text-left py-3 px-4"><a class="hover:text-blue-500" href="tel:622322662">622322662</a></td> | ||
| <td class="text-left py-3 px-4"><a class="hover:text-blue-500" href="mailto:jonsmith@mail.com">jonsmith@mail.com</a></td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| </div> | ||
| </div> | ||
| </main> | ||
|
|
||
| <footer class="w-full bg-white text-right p-4">Built by <a target="_blank" href="https://davidgrzyb.com" class="underline">David Grzyb</a>.</footer> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| const state = reactive({ isOpen: false }); | ||
|
|
||
| const { isOpen } = state; | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,86 @@ | ||
| <template> | ||
| <ClientOnly> | ||
| <h1>Add Article</h1> | ||
| <form class="mb-4" v-on:submit.prevent="handleArticleAdd"> | ||
| <div class="input-group mb-3"> | ||
| <label for="title">Title</label> | ||
| <input type="text" class="border outline-none bg-gray-300" name="title" id="title" /> | ||
| </div> | ||
| <div class="input-group mb-3"> | ||
| <label for="content">Content</label> | ||
| <QuillEditor v-model:content="state.content" theme="snow" v-bind:options="options" v-on:editorChange="handleContentChange" contentType="delta" /> | ||
| <!-- <div class="border border-green-500"> | ||
| <h2>Display content</h2> | ||
| <QuillEditor v-model="initialContent" :options="options" /> | ||
| </div> --> | ||
| </div> | ||
| <div class="input-group mb-3"> | ||
| <label for="createdAt">Date</label> | ||
| <input type="datetime-local" name="createdAt" id="createdAt" /> | ||
| </div> | ||
| <div class="input-group mb-3"> | ||
| <label for="category">Category</label> | ||
| <select name="category" id="category"> | ||
| <option v-for="cat in props.categories" v-bind:value="cat.id">{{ cat.name }}</option> | ||
| </select> | ||
| </div> | ||
| <div class="input-group mb-3"> | ||
| <label for="author">Author</label> | ||
| <select name="author" id="author"> | ||
| <option v-for="a in props.authors" v-bind:value="a.id">{{ a.name }}</option> | ||
| </select> | ||
| </div> | ||
| <div class="input-group mb-3"> | ||
| <label for="link">Link</label> | ||
| <input type="text" class="border outline-none bg-gray-300" name="link" id="link" /> | ||
| </div> | ||
| <div class="input-group"> | ||
| <button type="submit">Add</button> | ||
| </div> | ||
| </form> | ||
| </ClientOnly> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| // @ts-ignore | ||
| import { QuillEditor, Delta, Quill } from "@vueup/vue-quill"; | ||
| import "@vueup/vue-quill/dist/vue-quill.snow.css"; | ||
| const isReadOnly = true; | ||
| const options = { | ||
| debug: "info", | ||
| modules: { | ||
| toolbar: isReadOnly ? false : ["bold", "italic", "underline"], | ||
| }, | ||
| placeholder: "Compose an epic...", | ||
| readOnly: true, | ||
| theme: "snow", | ||
| }; | ||
| const state = reactive({ content: initialContent }); | ||
| const props = defineProps(["categories", "authors"]); | ||
| const handleArticleAdd = (e) => { | ||
| console.log({ state: state.content }); | ||
| }; | ||
| const handleContentChange = (e: EventListener) => { | ||
| console.log(e); | ||
| }; | ||
| </script> | ||
|
|
||
| <style scoped lang="css"> | ||
| :deep(.ql-editor) { | ||
| min-height: 200px; | ||
| } | ||
| :deep(.ql-toolbar.ql-snow) { | ||
| border-top-left-radius: 5px; | ||
| border-top-right-radius: 5px; | ||
| } | ||
| :deep(.ql-container.ql-snow) { | ||
| border-bottom-left-radius: 5px; | ||
| border-bottom-right-radius: 5px; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.