17th-Ranger-Battalion-ORG/17th-Site-Front-End-V2
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

initial commit (long overdue)

Browse Source
This commit is contained in:
Alistair Campbell
2023-05-17 20:44:36 -04:00
commit 72184f07f2
32 changed files with 17274 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
17th Website/.eslintrc.cjs Normal file
View File

@@ -0,0 +1,14 @@
/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')
module.exports = {
root: true,
'extends': [
'plugin:vue/vue3-essential',
'eslint:recommended',
'@vue/eslint-config-prettier/skip-formatting'
],
parserOptions: {
ecmaVersion: 'latest'
}
}

28
17th Website/.gitignore vendored Normal file
View File

@@ -0,0 +1,28 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
.DS_Store
dist
dist-ssr
coverage
*.local
/cypress/videos/
/cypress/screenshots/
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

8
17th Website/.prettierrc.json Normal file
View File

@@ -0,0 +1,8 @@
{
"$schema": "https://json.schemastore.org/prettierrc",
"semi": false,
"tabWidth": 2,
"singleQuote": true,
"printWidth": 100,
"trailingComma": "none"
}

3
17th Website/.vscode/extensions.json vendored Normal file
View File

@@ -0,0 +1,3 @@
{
"recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
}

35
17th Website/README.md Normal file
View File

@@ -0,0 +1,35 @@
# 17th Website
This template should help get you started developing with Vue 3 in Vite.
## Recommended IDE Setup
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
## Customize configuration
See [Vite Configuration Reference](https://vitejs.dev/config/).
## Project Setup
```sh
npm install
```
### Compile and Hot-Reload for Development
```sh
npm run dev
```
### Compile and Minify for Production
```sh
npm run build
```
### Lint with [ESLint](https://eslint.org/)
```sh
npm run lint
```

13
17th Website/index.html Normal file
View File

@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>17th stuff n things</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>

16483
17th Website/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

27
17th Website/package.json Normal file
View File

@@ -0,0 +1,27 @@
{
"name": "17th-website",
"version": "0.0.0",
"private": true,
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
"format": "prettier --write src/"
},
"dependencies": {
"vue": "^3.2.47",
"vue-router": "^4.2.0"
},
"devDependencies": {
"@iconify/vue": "^4.1.1",
"@rushstack/eslint-patch": "^1.2.0",
"@vitejs/plugin-vue": "^4.2.1",
"@vue/cli-plugin-router": "~5.0.0",
"@vue/eslint-config-prettier": "^7.1.0",
"eslint": "^8.39.0",
"eslint-plugin-vue": "^9.11.0",
"prettier": "^2.8.8",
"vite": "^4.3.4"
}
}

BIN
17th Website/public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

24
17th Website/src/App.vue Normal file
View File

@@ -0,0 +1,24 @@
<script setup>
import Navbar from './components/navigation/Navbar.vue'
</script>
<template>
<Navbar />
<div id="content-wrapper">
<RouterView />
</div>
</template>
<style>
body {
background-color: var(--background-primary);
margin: 0;
}
#content-wrapper {
display: block;
margin: 0 0 0 50px;
padding: 0px 100px;
}
</style>

16
17th Website/src/assets/base.css Normal file
View File

@@ -0,0 +1,16 @@
/* color palette from <https://github.com/vuejs/theme> */
:root {
--background-primary: #272731;
--background-secondary: #1C1C21;
--accent-primary: #01bde7;
--white: #EDF2F4;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
h1 {
color: var(--white);
font-weight: 400;
font-size: 60px;
margin: 20px 0 20px 0px;
}

1
17th Website/src/assets/logo.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 276 B

23
17th Website/src/assets/main.css Normal file
View File

@@ -0,0 +1,23 @@
@import './base.css';
#app {
/* max-width: 1280px; */
/* margin: 0 auto;
padding: 2rem; */
/* font-weight: normal; */
}
/* @media (min-width: 1024px) {
body {
display: flex;
place-items: center;
}
#app {
display: grid;
grid-template-columns: 1fr 1fr;
padding: 0 2rem;
}
} */

3
17th Website/src/components/ProfilePage/activityHistory.vue Normal file
View File

@@ -0,0 +1,3 @@
<template>
<h1>This is activity history</h1>
</template>

5
17th Website/src/components/ProfilePage/personnel.vue Normal file
View File

@@ -0,0 +1,5 @@
<template>
<h1>this is a personnel file</h1>
</template>

34
17th Website/src/components/ProfilePage/profileHeader.vue Normal file
View File

@@ -0,0 +1,34 @@
<script>
export default {
name: 'profileHeader',
data() {
return {
count: 0
}
}
}
</script>
<template>
<div>
<div id="headerImages">
<img id="rankImg" src="../icons/misc/test.png" />
<img id="rangerTab" src="#"/>
</div>
<h1>Dis the header</h1>
</div>
</template>
<style>
#rankImg {
max-width: 200px;
}
#headerImages {
display: flex;
flex-direction: column;
align-items: center;
}
</style>

3
17th Website/src/components/ProfilePage/shadowbox.vue Normal file
View File

@@ -0,0 +1,3 @@
<template>
<h1>This is shadowbox</h1>
</template>

53
17th Website/src/components/cards/Alert.vue Normal file
View File

@@ -0,0 +1,53 @@
<script setup>
import { Icon } from '@iconify/vue'
</script>
<script>
export const Alert = {
name: 'Alert',
props: {
icon: String,
title: String,
message: String
}
}
</script>
<template>
<div class="alert">
<div class="alertHead">
<p>
<Icon icon="carbon:warning" />
</p>
<h2>{{title}}</h2>
</div>
<p>{{message}}</p>
</div>
</template>
<style>
.alert {
background-color: #e0c422;
color: var(--background-secorndary);
display: flex;
flex-direction: column;
max-width: 800px;
margin: 20px auto;
}
.alertHead {
display: flex;
flex-direction: row;
align-items: center;
}
.alertHead p {
display: flex;
font-size: 35px;
margin: 10px;
}
.alertHead h2 {
display: flex;
}
</style>

18
17th Website/src/components/cards/Card.vue Normal file
View File

@@ -0,0 +1,18 @@
<template>
<div class="card">
</div>
</template>
<style>
.card {
background-color: #ffffff;
color: var(--white);
padding: 0 10px;
margin: 10px;
border-radius: 10px;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
height: fit-content;
}
</style>

48
17th Website/src/components/dropdown/Dropdown.vue Normal file
View File

@@ -0,0 +1,48 @@
<script>
import { provide } from 'vue';
import { Icon } from '@iconify/vue'
export default {
name: 'Dropdown',
provide() {
return {
sharedState: this.sharedState
}
},
data () {
return {
sharedState: {
active: false
}
}
},
methods: {
toggle() {
this.sharedState.active = !this.sharedState.active
}
}
}
</script>
<template>
<div @click="toggle">
<slot name="toggler">
<button>toggle <a href="#">hello</a></button>
<Icon icon="carbon:caret-down"/>
</slot>
<slot/>
</div>
</template>
<style>
button {
background-color: var(--background-secondary);
border: none;
border-radius: 5px;
font-size: 15px;
padding: 10px;
color: var(--white);
}
</style>

19
17th Website/src/components/dropdown/DropdownContent.vue Normal file
View File

@@ -0,0 +1,19 @@
<script>
import { inject } from 'vue';
export default {
name: 'DropdownContent',
inject: ['sharedState'],
computed: {
active() {
return this.sharedState.active
}
}
}
</script>
<template>
<div v-if="active">
<slot />
</div>
</template>

5
17th Website/src/components/dropdown/DropdownItem.vue Normal file
View File

@@ -0,0 +1,5 @@
<template>
<div>
test
</div>
</template>

BIN
17th Website/src/components/icons/misc/test.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

93
17th Website/src/components/navigation/Navbar.vue Normal file
View File

@@ -0,0 +1,93 @@
<script>
import navitem from './navitem.vue'
export default {
components: {
navitem
},
data() {
return {
activeButton: ''
}
},
methods: {
setActive(btn) {
this.activeButton = btn
}
}
}
</script>
<template>
<div class="sidebar">
<!-- TODO: Connect these buttons to the scripts, figure out if I can turn this into a component or summ -->
<navitem icon="carbon:user" link="/profile" @click="setActive('#user')" :active="activeButton === '#user'" />
<hr>
<navitem icon="carbon:home" link="/" @click="setActive('#home')" :active="activeButton === '#home'" />
<navitem icon="carbon:events" link="/users" @click="setActive('#users')" :active="activeButton === '#users'"/>
<navitem icon="carbon:align-box-bottom-left" link="#" @click="setActive('#docs')" :active="activeButton === '#docs'"/>
<navitem icon="carbon:tool-kit" link="#" @click="setActive('#tools')" :active="activeButton === '#tools'"/>
</div>
</template>
<style>
/*
COLOR PALLETE
BLACK #1C1C21
LIGHTER BLACK #272731
WHITE #EDF2F4
GREEN #71F79F
BLUE #46B1C9
RED #F93943
https://coolors.co/1c1c21-0de75a-46b1c9-f93943-edf2f4
https://dribbble.com/shots/4532899-dark-theme-table-view/attachments/10450101?mode=media
https://icon-sets.iconify.design/carbon/
USING THE IBM CARBON ICON SET
*/
.sidebar {
position: fixed;
left: 0;
top: 0;
background-color: var(--background-secondary);
text-align: center;
width: 80px;
height: 100vh;
display: flex;
flex-direction: column;
}
.sidebar a {
color: var(--white);
font-size: 30px;
overflow: hidden;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
margin: 10px 10px;
padding: 5px;
transition: color 0.2s ease-in-out;
}
.sidebar a:hover {
color: var(--accent-primary);
}
.active {
/* border: 2px solid var(--accent-primary); */
/* border-radius: 10px; */
outline-color: var(--accent-primary);
}
.sidebar hr {
margin: 0 15%;
display: flex;
flex-direction: row;
}
</style>

66
17th Website/src/components/navigation/navitem.vue Normal file
View File

@@ -0,0 +1,66 @@
<!-- <script>
export const navitem = {
props: ['icon', 'link']
}
</script>
<script setup>
import { Icon } from '@iconify/vue'
</script> -->
<script>
import { Icon } from '@iconify/vue'
import { RouterLink } from 'vue-router';
export default {
name: 'navitem',
props: {
icon: String,
link: String,
active: Boolean
},
methods: {
setActive() {
// Your code here
alert(`Hello ${event.target}!`)
}
},
components: {
Icon,
RouterLink
}
}
</script>
<template>
<RouterLink :to="link" class="button" :class="{active: active}">
<Icon :icon="icon" />
</RouterLink>
</template>
<style>
.button {
color: var(--white);
font-size: 30px;
overflow: hidden;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
margin: 10px 10px;
padding: 5px;
transition: color 0.2s ease-in-out;
}
.button:hover {
color: var(--accent-primary);
}
.active {
border: 2px solid var(--accent-primary);
border-radius: 10px;
}
</style>

7
17th Website/src/main.js Normal file
View File

@@ -0,0 +1,7 @@
import './assets/main.css'
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')

23
17th Website/src/router.js Normal file
View File

@@ -0,0 +1,23 @@
import { createRouter, createWebHistory } from 'vue-router'
import home from './views/home.vue'
export default createRouter({
history: createWebHistory(),
routes: [
{
path: '/',
name: 'Home',
component: () => import('./views/home.vue'),
},
{
path: '/profile',
name: 'Profile',
component: () => import('./views/profile.vue'),
},
{
path: '/users',
name: 'Users',
component: () => import('./views/users.vue'),
}
]
})

5
17th Website/src/views/home.vue Normal file
View File

@@ -0,0 +1,5 @@
<template>
<div>
<h1>Home screen</h1>
</div>
</template>

0
17th Website/src/views/personnel.vue Normal file
View File

16
17th Website/src/views/profile.vue Normal file
View File

@@ -0,0 +1,16 @@
<script>
import profileHeader from '../components/ProfilePage/profileHeader.vue'
export default {
name: 'ProfilePage',
components: {
profileHeader
}
}
</script>
<template>
<profileHeader></profileHeader>
test words
</template>

187
17th Website/src/views/users.vue Normal file
View File

@@ -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>

14
17th Website/vite.config.js Normal file
View File

@@ -0,0 +1,14 @@
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})