initial commit (long overdue)

2023-05-17 20:44:36 -04:00
commit 72184f07f2
32 changed files with 17274 additions and 0 deletions
--- a/Website/src/views/users.vue
+++ b/Website/src/views/users.vue
@@ -0,0 +1,187 @@
+<script>
+import Dropdown from '../components/dropdown/Dropdown.vue'
+import DropdownContent from '../components/dropdown/DropdownContent.vue'
+import DropdownItem from '../components/dropdown/DropDownItem.vue'
+export default {
+    data() {
+        return {
+            parentMessage: 'Parent',
+            items: [{ message: 'Foo' }, { message: 'Bar' }],
+            dropped: false,
+            search: '',
+            filter1: 'All Groups',
+            filter2: 'All Roles',
+        }
+    },
+    methods: {
+        toggle: () => {
+            this.dropped = !this.dropped
+        },
+        resetFilters() {
+            this.filter1 = 'All Groups'
+            this.filter2 = 'All Roles'
+            this.search = ''            
+        }
+    },
+    components: {
+        Dropdown,
+        DropdownContent,
+        DropdownItem
+    }
+}
+</script>
+
+<template>
+    <!-- Page header (but not really) -->
+    <div id="header">
+
+        <h1>Members</h1>
+        <div id="searchRow">
+            <input type="text" v-model="search" placeholder="Search..." />
+            <div id="dropdownWrapper">
+                <select v-model="filter1">
+                    <option>All Groups</option>
+                    <option>Alpha</option>
+                    <option>Echo</option>
+                    <option>HHC</option>
+                    <option>Recruit</option>
+                </select>
+                <select v-model="filter2">
+                    <option>All Roles</option>
+                    <option>NCO</option>
+                    <option>Admin</option>
+                    <option>Recruiter</option>
+                    <option>RRC</option>
+                </select>
+                
+                <dropdown>
+                    <DropdownContent>
+                        <DropDownItem>Test1</DropDownItem>
+                    </DropdownContent>
+                </dropdown>
+
+                <!-- This button needs to get finished -->
+                <button @click="resetFilters()">Clear Filters</button>
+            </div>
+        </div>
+
+    </div>
+    <table id="userTable">
+        <thead>
+            <tr>
+                <th>Member</th>
+                <th>Unit</th>
+                <th>Rank</th>
+                <th>Join Date</th>
+                <th>LOA Until</th>
+                <th>Last Active</th>
+            </tr>
+        </thead>
+        <tbody id="tableBody">
+            <tr v-for="(item, index) in items">
+                <td>{{ parentMessage }}</td>
+                <td>{{ index }}</td>
+                <td>{{ item.message }}</td>
+            </tr>
+        </tbody>
+    </table>
+</template>
+
+<style>
+@import '../assets/base.css';
+
+button {
+    transition: all 0.2s ease-out;
+    cursor: pointer;
+}
+
+button:hover {
+    background-color: var(--accent-primary);
+}
+
+.clicked {
+    filter: brightness(85%)
+}
+
+#dropdownWrapper {
+    margin: 0 15px;
+    display: flex;
+}
+
+#dropdownWrapper select {
+    background-color: var(--background-secondary);
+    border: none;
+    border-radius: 5px;
+    color: var(--white);
+    padding: 10px;
+    outline: none;
+    cursor: pointer;
+}
+
+input {
+    background-color: var(--background-secondary);
+    padding: 10px;
+    font-size: 15px;
+    color: var(--white);
+    border-style: none;
+    border-radius: 5px;
+    width: 25vw;
+    /* transition: all 0.2s ease-out; THESE TRANSITIONS ARE BROKEN*/
+}
+
+/* textarea:focus, input:focus {
+    outline-color: var(--accent-primary);
+    border-color: var(--accent-primary);
+}  */
+
+#searchRow {
+    margin: 30px 0;
+    display: flex;
+}
+
+#searchRow select, button {
+    margin: 0 15px 0 0;
+}
+
+#header h1 {
+    color: var(--white);
+    font-weight: 400;
+    font-size: 60px;
+    margin: 20px 0 20px 0px;
+}
+
+tr {
+    /* background-color: white; */
+    border-style: none none solid none;
+    border-width: 2px;
+    border-color: var(--background-secondary);
+
+    font-size: 20px;
+    font-weight: 100;
+    color: var(--white);
+}
+
+tr:hover {
+    background-color: var(--background-secondary);
+    cursor: pointer;
+}
+
+/* Table styles */
+table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+th,
+td {
+    /* border: 1px solid #dddddd; */
+    text-align: left;
+    padding: 8px;
+}
+
+th {
+    background-color: var(--background-secondary);
+    font-size: 18px;
+    cursor: auto;
+}
+</style>