Initial commit
This commit is contained in:
commit
50c4133930
35 changed files with 12673 additions and 0 deletions
8
.gitignore
vendored
Normal file
8
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
node_modules
|
||||||
|
*.log*
|
||||||
|
.nuxt
|
||||||
|
.nitro
|
||||||
|
.cache
|
||||||
|
.output
|
||||||
|
.env
|
||||||
|
dist
|
||||||
18
.idea/php.xml
generated
Normal file
18
.idea/php.xml
generated
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="MessDetectorOptionsConfiguration">
|
||||||
|
<option name="transferred" value="true" />
|
||||||
|
</component>
|
||||||
|
<component name="PHPCSFixerOptionsConfiguration">
|
||||||
|
<option name="transferred" value="true" />
|
||||||
|
</component>
|
||||||
|
<component name="PHPCodeSnifferOptionsConfiguration">
|
||||||
|
<option name="transferred" value="true" />
|
||||||
|
</component>
|
||||||
|
<component name="PhpStanOptionsConfiguration">
|
||||||
|
<option name="transferred" value="true" />
|
||||||
|
</component>
|
||||||
|
<component name="PsalmOptionsConfiguration">
|
||||||
|
<option name="transferred" value="true" />
|
||||||
|
</component>
|
||||||
|
</project>
|
||||||
6
.idea/vcs.xml
generated
Normal file
6
.idea/vcs.xml
generated
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="VcsDirectoryMappings">
|
||||||
|
<mapping directory="$PROJECT_DIR$" vcs="Git" />
|
||||||
|
</component>
|
||||||
|
</project>
|
||||||
122
.idea/workspace.xml
generated
Normal file
122
.idea/workspace.xml
generated
Normal file
|
|
@ -0,0 +1,122 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="AutoImportSettings">
|
||||||
|
<option name="autoReloadType" value="SELECTIVE" />
|
||||||
|
</component>
|
||||||
|
<component name="ChangeListManager">
|
||||||
|
<list default="true" id="5e320804-68c9-4504-97d5-d421de3438b2" name="Changes" comment="">
|
||||||
|
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
|
||||||
|
<change beforePath="$PROJECT_DIR$/src/pages/lists/[id].vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/lists/[id].vue" afterDir="false" />
|
||||||
|
</list>
|
||||||
|
<option name="SHOW_DIALOG" value="false" />
|
||||||
|
<option name="HIGHLIGHT_CONFLICTS" value="true" />
|
||||||
|
<option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
|
||||||
|
<option name="LAST_RESOLUTION" value="IGNORE" />
|
||||||
|
</component>
|
||||||
|
<component name="ComposerSettings">
|
||||||
|
<execution />
|
||||||
|
</component>
|
||||||
|
<component name="FileTemplateManagerImpl">
|
||||||
|
<option name="RECENT_TEMPLATES">
|
||||||
|
<list>
|
||||||
|
<option value="CSS File" />
|
||||||
|
<option value="Vue Single File Component" />
|
||||||
|
</list>
|
||||||
|
</option>
|
||||||
|
</component>
|
||||||
|
<component name="FormatOnSaveOptions">
|
||||||
|
<option name="myRunOnSave" value="true" />
|
||||||
|
</component>
|
||||||
|
<component name="MacroExpansionManager">
|
||||||
|
<option name="directoryName" value="cvh2jllu" />
|
||||||
|
</component>
|
||||||
|
<component name="MarkdownSettingsMigration">
|
||||||
|
<option name="stateVersion" value="1" />
|
||||||
|
</component>
|
||||||
|
<component name="OptimizeOnSaveOptions">
|
||||||
|
<option name="myRunOnSave" value="true" />
|
||||||
|
</component>
|
||||||
|
<component name="ProjectId" id="2K1xoABBc3o8XBi4orGtOrB9Dxn" />
|
||||||
|
<component name="ProjectLevelVcsManager">
|
||||||
|
<ConfirmationsSetting value="1" id="Add" />
|
||||||
|
</component>
|
||||||
|
<component name="ProjectViewState">
|
||||||
|
<option name="hideEmptyMiddlePackages" value="true" />
|
||||||
|
<option name="showLibraryContents" value="true" />
|
||||||
|
</component>
|
||||||
|
<component name="PropertiesComponent">{
|
||||||
|
"keyToString": {
|
||||||
|
"RunOnceActivity.OpenProjectViewOnStart": "true",
|
||||||
|
"RunOnceActivity.ShowReadmeOnStart": "true",
|
||||||
|
"WebServerToolWindowFactoryState": "false",
|
||||||
|
"code.cleanup.on.save": "true",
|
||||||
|
"last_opened_file_path": "/home/tiradoe/Projects/movie-night/movie-night-web/src/package.json",
|
||||||
|
"list.type.of.created.stylesheet": "CSS",
|
||||||
|
"node.js.detected.package.eslint": "true",
|
||||||
|
"node.js.detected.package.standard": "true",
|
||||||
|
"node.js.detected.package.tslint": "true",
|
||||||
|
"node.js.selected.package.eslint": "(autodetect)",
|
||||||
|
"node.js.selected.package.standard": "",
|
||||||
|
"node.js.selected.package.tslint": "(autodetect)",
|
||||||
|
"nodejs_package_manager_path": "npm",
|
||||||
|
"prettierjs.PrettierConfiguration.Package": "/home/tiradoe/Projects/movie-night/movie-night-web/node_modules/prettier",
|
||||||
|
"rearrange.code.on.save": "true",
|
||||||
|
"settings.editor.selected.configurable": "settings.javascript.prettier",
|
||||||
|
"ts.external.directory.path": "/home/tiradoe/.local/share/JetBrains/Toolbox/apps/PhpStorm/ch-0/223.8214.64/plugins/javascript-impl/jsLanguageServicesImpl/external",
|
||||||
|
"vue.rearranger.settings.migration": "true"
|
||||||
|
}
|
||||||
|
}</component>
|
||||||
|
<component name="RecentsManager">
|
||||||
|
<key name="CopyFile.RECENT_KEYS">
|
||||||
|
<recent name="$PROJECT_DIR$/components" />
|
||||||
|
</key>
|
||||||
|
<key name="MoveFile.RECENT_KEYS">
|
||||||
|
<recent name="$PROJECT_DIR$/src/public" />
|
||||||
|
<recent name="$PROJECT_DIR$" />
|
||||||
|
<recent name="$PROJECT_DIR$/components/modal-content" />
|
||||||
|
<recent name="$PROJECT_DIR$/assets/css" />
|
||||||
|
</key>
|
||||||
|
</component>
|
||||||
|
<component name="RunManager">
|
||||||
|
<configuration name="dev" type="js.build_tools.npm" nameIsGenerated="true">
|
||||||
|
<package-json value="$PROJECT_DIR$/src/package.json" />
|
||||||
|
<command value="run" />
|
||||||
|
<scripts>
|
||||||
|
<script value="dev" />
|
||||||
|
</scripts>
|
||||||
|
<node-interpreter value="project" />
|
||||||
|
<envs />
|
||||||
|
<method v="2" />
|
||||||
|
</configuration>
|
||||||
|
</component>
|
||||||
|
<component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="application-level" UseSingleDictionary="true" transferred="true" />
|
||||||
|
<component name="TaskManager">
|
||||||
|
<task active="true" id="Default" summary="Default task">
|
||||||
|
<changelist id="5e320804-68c9-4504-97d5-d421de3438b2" name="Changes" comment="" />
|
||||||
|
<created>1673156065550</created>
|
||||||
|
<option name="number" value="Default" />
|
||||||
|
<option name="presentableId" value="Default" />
|
||||||
|
<updated>1673156065550</updated>
|
||||||
|
<workItem from="1673156066556" duration="5928000" />
|
||||||
|
<workItem from="1673164832861" duration="23180000" />
|
||||||
|
<workItem from="1673308542228" duration="9499000" />
|
||||||
|
<workItem from="1673325248718" duration="9321000" />
|
||||||
|
<workItem from="1673334572599" duration="6831000" />
|
||||||
|
<workItem from="1673385927574" duration="3502000" />
|
||||||
|
<workItem from="1673397538637" duration="47416000" />
|
||||||
|
<workItem from="1673508732689" duration="1316000" />
|
||||||
|
<workItem from="1673547794038" duration="2346000" />
|
||||||
|
</task>
|
||||||
|
<servers />
|
||||||
|
</component>
|
||||||
|
<component name="TypeScriptGeneratedFilesManager">
|
||||||
|
<option name="version" value="3" />
|
||||||
|
</component>
|
||||||
|
<component name="UnknownFeatures">
|
||||||
|
<option featureType="com.intellij.fileTypeFactory" implementationName=".env" />
|
||||||
|
</component>
|
||||||
|
<component name="XSLT-Support.FileAssociations.UIState">
|
||||||
|
<expand />
|
||||||
|
<select />
|
||||||
|
</component>
|
||||||
|
</project>
|
||||||
42
README.md
Normal file
42
README.md
Normal file
|
|
@ -0,0 +1,42 @@
|
||||||
|
# Nuxt 3 Minimal Starter
|
||||||
|
|
||||||
|
Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
|
||||||
|
|
||||||
|
## Setup
|
||||||
|
|
||||||
|
Make sure to install the dependencies:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# yarn
|
||||||
|
yarn install
|
||||||
|
|
||||||
|
# npm
|
||||||
|
npm install
|
||||||
|
|
||||||
|
# pnpm
|
||||||
|
pnpm install --shamefully-hoist
|
||||||
|
```
|
||||||
|
|
||||||
|
## Development Server
|
||||||
|
|
||||||
|
Start the development server on http://localhost:3000
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
## Production
|
||||||
|
|
||||||
|
Build the application for production:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
Locally preview production build:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run preview
|
||||||
|
```
|
||||||
|
|
||||||
|
Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
|
||||||
8
src/.idea/.gitignore
generated
vendored
Normal file
8
src/.idea/.gitignore
generated
vendored
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
# Default ignored files
|
||||||
|
/shelf/
|
||||||
|
/workspace.xml
|
||||||
|
# Editor-based HTTP Client requests
|
||||||
|
/httpRequests/
|
||||||
|
# Datasource local storage ignored files
|
||||||
|
/dataSources/
|
||||||
|
/dataSources.local.xml
|
||||||
8
src/.idea/modules.xml
generated
Normal file
8
src/.idea/modules.xml
generated
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="ProjectModuleManager">
|
||||||
|
<modules>
|
||||||
|
<module fileurl="file://$PROJECT_DIR$/.idea/movie-night-web.iml" filepath="$PROJECT_DIR$/.idea/movie-night-web.iml" />
|
||||||
|
</modules>
|
||||||
|
</component>
|
||||||
|
</project>
|
||||||
8
src/.idea/movie-night-web.iml
generated
Normal file
8
src/.idea/movie-night-web.iml
generated
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<module type="WEB_MODULE" version="4">
|
||||||
|
<component name="NewModuleRootManager">
|
||||||
|
<content url="file://$MODULE_DIR$" />
|
||||||
|
<orderEntry type="inheritedJdk" />
|
||||||
|
<orderEntry type="sourceFolder" forTests="false" />
|
||||||
|
</component>
|
||||||
|
</module>
|
||||||
18
src/.idea/php.xml
generated
Normal file
18
src/.idea/php.xml
generated
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="MessDetectorOptionsConfiguration">
|
||||||
|
<option name="transferred" value="true" />
|
||||||
|
</component>
|
||||||
|
<component name="PHPCSFixerOptionsConfiguration">
|
||||||
|
<option name="transferred" value="true" />
|
||||||
|
</component>
|
||||||
|
<component name="PHPCodeSnifferOptionsConfiguration">
|
||||||
|
<option name="transferred" value="true" />
|
||||||
|
</component>
|
||||||
|
<component name="PhpStanOptionsConfiguration">
|
||||||
|
<option name="transferred" value="true" />
|
||||||
|
</component>
|
||||||
|
<component name="PsalmOptionsConfiguration">
|
||||||
|
<option name="transferred" value="true" />
|
||||||
|
</component>
|
||||||
|
</project>
|
||||||
6
src/.idea/prettier.xml
generated
Normal file
6
src/.idea/prettier.xml
generated
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="PrettierConfiguration">
|
||||||
|
<option name="myRunOnSave" value="true" />
|
||||||
|
</component>
|
||||||
|
</project>
|
||||||
2
src/.prettierignore
Normal file
2
src/.prettierignore
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
build
|
||||||
|
coverage
|
||||||
1
src/.prettierrc.json
Normal file
1
src/.prettierrc.json
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
{}
|
||||||
5
src/app.vue
Normal file
5
src/app.vue
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<NuxtLayout />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
111
src/assets/css/main.css
Normal file
111
src/assets/css/main.css
Normal file
|
|
@ -0,0 +1,111 @@
|
||||||
|
@font-face {
|
||||||
|
font-family: 'BloodSeeker';
|
||||||
|
src: url('assets/fonts/bloodseeker.ttf') format('truetype');
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Xolonium';
|
||||||
|
src: url('assets/fonts/xolonium-regular.ttf') format('truetype');
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
body, .list-header {
|
||||||
|
background: #080809;
|
||||||
|
color: white;
|
||||||
|
font-family: "Xolonium";
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.movie-card {
|
||||||
|
/*background: #0a0d40;*/
|
||||||
|
background: #1b1f24;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.schedule-poster {
|
||||||
|
width: 15em;
|
||||||
|
height: 15em;
|
||||||
|
object-fit: fill;
|
||||||
|
padding: .5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
color: white;
|
||||||
|
border: unset;
|
||||||
|
background: #6f0b51;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn:hover {
|
||||||
|
background: #a80f7a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.neon-border {
|
||||||
|
border: #6f0b51 1px solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-title {
|
||||||
|
font-size: 20pt;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-title:hover {
|
||||||
|
color: #6f0b51 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar {
|
||||||
|
border-bottom: #6f0b51 solid 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bloodseeker {
|
||||||
|
font-family: "BloodSeeker";
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-link:hover {
|
||||||
|
color: #6f0b51 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selected-link {
|
||||||
|
color: #6f0b51 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.movie-modal {
|
||||||
|
position: fixed; /* Stay in place */
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 100vw; /* Full width */
|
||||||
|
height: 100vh; /* Full height */
|
||||||
|
overflow: auto; /* Enable scroll if needed */
|
||||||
|
background: #080809;
|
||||||
|
z-index: 10000;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Modal Content/Box */
|
||||||
|
.movie-modal-content {
|
||||||
|
background: #1b1f24;
|
||||||
|
min-height: 20rem;
|
||||||
|
margin: 15% auto; /* 15% from the top and centered */
|
||||||
|
padding: 20px;
|
||||||
|
width: 80%; /* Could be more or less, depending on screen size */
|
||||||
|
}
|
||||||
|
|
||||||
|
.hover-pointer {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.delete-button:hover, .logout-button:hover, .close-button:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs > li {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs > li:hover {
|
||||||
|
color: #6f0b51 !important;
|
||||||
|
}
|
||||||
BIN
src/assets/fonts/bloodseeker.ttf
Normal file
BIN
src/assets/fonts/bloodseeker.ttf
Normal file
Binary file not shown.
BIN
src/assets/fonts/xolonium-regular.ttf
Normal file
BIN
src/assets/fonts/xolonium-regular.ttf
Normal file
Binary file not shown.
23
src/components/Modal.vue
Normal file
23
src/components/Modal.vue
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
<template>
|
||||||
|
<div id="movie-modal" class="movie-modal movie-card hidden p-5">
|
||||||
|
<span class="hover-pointer font-bold w-full block text-right sm:pr-5 pb-3 pt-5" @click="closeModal()">
|
||||||
|
X
|
||||||
|
</span>
|
||||||
|
<slot class=""></slot>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "Modal",
|
||||||
|
methods: {
|
||||||
|
closeModal: function () {
|
||||||
|
document.getElementById("movie-modal").classList.add("hidden")
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
92
src/components/admin/lists.vue
Normal file
92
src/components/admin/lists.vue
Normal file
|
|
@ -0,0 +1,92 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div id="add-list-container" class="my-5">
|
||||||
|
<label class="text-md font-bold" for="add-list">Add List</label>
|
||||||
|
<div class="flex">
|
||||||
|
<input id="add-list" class="p-1 rounded-l" placeholder="List Title" type="text" v-on:keyup.enter="addList"/>
|
||||||
|
|
||||||
|
<button class="btn p-1 rounded-r" @click="addList">Add</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ul class="grid grid-rows gap-2">
|
||||||
|
<li v-for="list in lists" class="movie-card p-3 neon-border">
|
||||||
|
<span class="mb-2">{{ list.name }}</span> <br/>
|
||||||
|
<button class="btn mt-2 p-1 rounded" type="button" @click="deleteList(list.id)">Delete</button>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "lists",
|
||||||
|
data: () => ({
|
||||||
|
lists: [],
|
||||||
|
}),
|
||||||
|
methods: {
|
||||||
|
addList: async function () {
|
||||||
|
let config = useRuntimeConfig();
|
||||||
|
const list_name = document.getElementById("add-list").value;
|
||||||
|
if (!list_name) {
|
||||||
|
alert("Please add list name.");
|
||||||
|
return
|
||||||
|
}
|
||||||
|
let list_json = await fetch(`${config.public.apiURL}/lists`, {
|
||||||
|
method: "POST",
|
||||||
|
body: JSON.stringify({
|
||||||
|
name: list_name,
|
||||||
|
public: false
|
||||||
|
}),
|
||||||
|
headers: {
|
||||||
|
"Content-type": "application/json",
|
||||||
|
"token": useCookie("token").value,
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(json => json)
|
||||||
|
.catch(err => console.log(err))
|
||||||
|
|
||||||
|
list_json.list.movie_count = 0;
|
||||||
|
this.lists.push(list_json.list);
|
||||||
|
},
|
||||||
|
deleteList: function (list_id) {
|
||||||
|
const config = useRuntimeConfig();
|
||||||
|
let confirmed = confirm("Delete list?");
|
||||||
|
|
||||||
|
if (!confirmed) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
return fetch(`${config.public.apiURL}/lists/${list_id}`, {
|
||||||
|
credentials: "include",
|
||||||
|
method: "DELETE",
|
||||||
|
headers: {
|
||||||
|
"Content-type": "application/json",
|
||||||
|
"token": useCookie("token").value,
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(_json => {
|
||||||
|
window.location.reload();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
getLists: function () {
|
||||||
|
const config = useRuntimeConfig();
|
||||||
|
fetch(`${config.public.apiURL}/lists`, {
|
||||||
|
method: "GET",
|
||||||
|
headers: {"Content-type": "application/json"}
|
||||||
|
})
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(json => this.lists = json)
|
||||||
|
.catch(err => console.log(err))
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.getLists();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
51
src/components/admin/search.vue
Normal file
51
src/components/admin/search.vue
Normal file
|
|
@ -0,0 +1,51 @@
|
||||||
|
<template>
|
||||||
|
<form class="py-3 p-sm-0 align-items-center" @submit="findMovies">
|
||||||
|
<label class="px-0 " for="search-field">Search</label>
|
||||||
|
<div class="px-0 mx-0">
|
||||||
|
<input id="search-field" class="p-1" name="search-field" type="text"/>
|
||||||
|
<button class="btn p-1" type="button" @click="findMovies">Submit</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
<ul class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 gap-4">
|
||||||
|
<li v-for="movie in movies" class="p-1 movie-card">
|
||||||
|
<img :src="movie.Poster" alt="movie poster" class="neon-border hover-pointer" @click="$parent.showModal(movie)"/>
|
||||||
|
<div class="p-2">
|
||||||
|
<h5 class="text-center">{{ movie.Title }} {{ movie.year }}</h5>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "search",
|
||||||
|
data: () => ({
|
||||||
|
movies: [],
|
||||||
|
}),
|
||||||
|
methods: {
|
||||||
|
findMovies: function (e) {
|
||||||
|
let config = useRuntimeConfig();
|
||||||
|
e.preventDefault();
|
||||||
|
let searchTerm = document.getElementById('search-field').value
|
||||||
|
|
||||||
|
return fetch(`${config.public.apiURL}/movies/search/${searchTerm}`, {
|
||||||
|
method: "GET",
|
||||||
|
headers: {
|
||||||
|
"Content-type": "application/json",
|
||||||
|
"token": useCookie("token").value,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(json => {
|
||||||
|
this.movies = json;
|
||||||
|
})
|
||||||
|
.catch(err => console.log(err))
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
86
src/components/admin/showings.vue
Normal file
86
src/components/admin/showings.vue
Normal file
|
|
@ -0,0 +1,86 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<ul>
|
||||||
|
<li v-for="showing in showings" class="movie-card p-3 neon-border mb-2">
|
||||||
|
<ul>
|
||||||
|
<li class="pb-2">
|
||||||
|
<span class="mb-3">{{ showing.title }}</span>
|
||||||
|
</li>
|
||||||
|
<li class="pb-2">
|
||||||
|
<span class="mb-3">{{ formatDate(showing.showtime) }} </span>
|
||||||
|
</li>
|
||||||
|
<button class="btn p-1 rounded" type="button" @click="deleteShowing(showing.id)">Delete</button>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "showings",
|
||||||
|
data: () => ({
|
||||||
|
showings: [],
|
||||||
|
months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
|
||||||
|
}),
|
||||||
|
mounted() {
|
||||||
|
this.getShowings()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
formatDate: function (date_string) {
|
||||||
|
let parsed_date = new Date(Date.parse(date_string));
|
||||||
|
let month = this.months[parsed_date.getMonth()];
|
||||||
|
|
||||||
|
return `${month} ${parsed_date.getDate()}, ${parsed_date.getFullYear()}`
|
||||||
|
},
|
||||||
|
deleteShowing: function (showing_id) {
|
||||||
|
let config = useRuntimeConfig();
|
||||||
|
let confirmed = confirm("Delete showing?");
|
||||||
|
|
||||||
|
if (!confirmed) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
return fetch(`${config.public.apiURL}/schedules/${showing_id}`, {
|
||||||
|
credentials: "include",
|
||||||
|
method: "DELETE",
|
||||||
|
headers: {
|
||||||
|
"Content-type": "application/json",
|
||||||
|
"token": useCookie("token").value
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(json => {
|
||||||
|
this.showings = this.showings.filter((showing) => {
|
||||||
|
return showing.id !== showing_id
|
||||||
|
})
|
||||||
|
});
|
||||||
|
},
|
||||||
|
getShowings: function (previous = false) {
|
||||||
|
let config = useRuntimeConfig();
|
||||||
|
let params = "";
|
||||||
|
if (previous) params = "?previous=true";
|
||||||
|
|
||||||
|
return fetch(`${config.public.apiURL}/schedules/1${params}`, {
|
||||||
|
method: "GET",
|
||||||
|
headers: {"Content-type": "application/json"}
|
||||||
|
})
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(showings => {
|
||||||
|
|
||||||
|
if (previous) {
|
||||||
|
this.got_previous = true;
|
||||||
|
this.previous_showings = showings;
|
||||||
|
} else {
|
||||||
|
this.showings = showings
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(err => console.log(err));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
58
src/components/forms/ScheduleMovie.vue
Normal file
58
src/components/forms/ScheduleMovie.vue
Normal file
|
|
@ -0,0 +1,58 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<form id="schedule-form" class="visually-hidden" method="post" onsubmit="return false">
|
||||||
|
<!-- SCHEDULE -->
|
||||||
|
<label class="pb-1 text-start font-bold" for="schedule-date">Date</label><br/>
|
||||||
|
<input id="schedule-input" class="rounded-l p-1" name="schedule-date"
|
||||||
|
type="date"/>
|
||||||
|
<button class="btn mt-5 sm:mt-0 p-1 rounded sm:rounded-none sm:rounded-r" type="button" @click="schedule">Schedule
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "ScheduleMovie",
|
||||||
|
methods: {
|
||||||
|
schedule: function (e) {
|
||||||
|
const config = useRuntimeConfig();
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
let showtime_input = document.getElementById("schedule-input").value;
|
||||||
|
if (!showtime_input) {
|
||||||
|
alert("Please set showtime.");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
let showtime = showtime_input + " " + "00:00:00";
|
||||||
|
|
||||||
|
fetch(`${config.public.apiURL}/schedules/movie`, {
|
||||||
|
credentials: "include",
|
||||||
|
method: "POST",
|
||||||
|
body: JSON.stringify({
|
||||||
|
"schedule_id": 1,
|
||||||
|
"movie_id": this.movie.id,
|
||||||
|
"showtime": showtime,
|
||||||
|
"owner": 1,
|
||||||
|
"public": false
|
||||||
|
}),
|
||||||
|
headers: {
|
||||||
|
"Content-type": "application/json",
|
||||||
|
"token": useCookie("token").value,
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(_json => {
|
||||||
|
this.$parent.$parent.closeModal();
|
||||||
|
}
|
||||||
|
)
|
||||||
|
.catch(err => alert("Unable to schedule movie. Error:\n" + err))
|
||||||
|
}
|
||||||
|
},
|
||||||
|
props: ["movie"]
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
75
src/components/modal-content/AddMovie.vue
Normal file
75
src/components/modal-content/AddMovie.vue
Normal file
|
|
@ -0,0 +1,75 @@
|
||||||
|
<template>
|
||||||
|
<div v-if="movie != null" class="sm:m-5 p-10 movie-card neon-border">
|
||||||
|
<div>
|
||||||
|
<h2 id="modal-title" class="row pb-3">
|
||||||
|
{{ movie.Title }} ({{ movie.Year }})
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div class="grid sm:grid-cols-2">
|
||||||
|
<!-- MODAL POSTER -->
|
||||||
|
<div class="text-end">
|
||||||
|
<img id="modal-poster" :src="movie.Poster" alt="poster" class="pt-5"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pt-5">
|
||||||
|
<label class="" for="list-picker">Add To List</label><br/>
|
||||||
|
<select id="list-picker" v-model="list_id" class="p-1 text-black">
|
||||||
|
<option v-for="list in lists" :value="list.id">{{ list.name }}</option>
|
||||||
|
</select>
|
||||||
|
<button class="modal-poster btn p-1" type="button" @click="addMovie(movie.imdbID)">
|
||||||
|
Submit
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "AddMovie",
|
||||||
|
data: () => ({
|
||||||
|
list_id: 0,
|
||||||
|
lists: {}
|
||||||
|
}),
|
||||||
|
methods: {
|
||||||
|
addMovie: function (imdb_id) {
|
||||||
|
let config = useRuntimeConfig()
|
||||||
|
let list = parseInt(this.list_id)
|
||||||
|
|
||||||
|
return fetch(`${config.public.apiURL}/lists/movie`, {
|
||||||
|
method: "POST",
|
||||||
|
body: JSON.stringify({imdb_id: imdb_id, list_id: list}),
|
||||||
|
headers: {
|
||||||
|
"Content-type": "application/json",
|
||||||
|
"token": useCookie("token").value,
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(_json => {
|
||||||
|
this.$parent.closeModal()
|
||||||
|
})
|
||||||
|
.catch(err => console.log(err))
|
||||||
|
},
|
||||||
|
getLists: function () {
|
||||||
|
let config = useRuntimeConfig()
|
||||||
|
fetch(`${config.public.apiURL}/lists`, {
|
||||||
|
method: "GET",
|
||||||
|
headers: {"Content-type": "application/json",}
|
||||||
|
})
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(json => this.lists = json)
|
||||||
|
.catch(err => console.log(err))
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.getLists();
|
||||||
|
},
|
||||||
|
props: ['movie']
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
40
src/components/modal-content/ShowMovie.vue
Normal file
40
src/components/modal-content/ShowMovie.vue
Normal file
|
|
@ -0,0 +1,40 @@
|
||||||
|
<template>
|
||||||
|
<div class="sm:m-5 p-10 movie-card neon-border">
|
||||||
|
<div>
|
||||||
|
<h2 class="text-xl pb-3 text-center sm:text-left">
|
||||||
|
{{ movie.title }} ({{ movie.year }})
|
||||||
|
</h2>
|
||||||
|
<div class="sm:inline-flex sm:space-x-5">
|
||||||
|
<img :src="movie.poster" alt="movie poster" class="mx-auto sm:mx-0 neon-border"/>
|
||||||
|
<div class="pt-5 sm:pt-0">
|
||||||
|
<p>{{ movie.plot }}</p>
|
||||||
|
<ScheduleMovie v-if="logged_in" :movie="movie" class="mt-5"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import ScheduleMovie from "~/components/forms/ScheduleMovie.vue";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "ShowMovie",
|
||||||
|
data: () => ({
|
||||||
|
logged_in: false,
|
||||||
|
}),
|
||||||
|
components: {ScheduleMovie},
|
||||||
|
props: ["movie"],
|
||||||
|
mounted() {
|
||||||
|
const token = useCookie("token").value;
|
||||||
|
if (token) {
|
||||||
|
this.logged_in = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
26
src/components/navbar.vue
Normal file
26
src/components/navbar.vue
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
<template>
|
||||||
|
<div class="grid grid-rows-2 text-center sm:text-left sm:grid-rows-none sm:grid-cols-2 my-5 navbar w-full">
|
||||||
|
<NuxtLink class="block" to="/admin">
|
||||||
|
<h1 class="block site-title bloodseeker">Cinema Corona</h1>
|
||||||
|
</NuxtLink>
|
||||||
|
|
||||||
|
<ul class="mt-3 sm:mt-0 justify-self-center sm:justify-self-end inline-flex space-x-5 bloodseeker leading-10">
|
||||||
|
<li>
|
||||||
|
<NuxtLink class="text-xl header-link" to="/lists">Lists</NuxtLink>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<NuxtLink class="text-xl header-link" to="/schedule">Schedule</NuxtLink>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "navbar",
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
16
src/layouts/default.vue
Normal file
16
src/layouts/default.vue
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
<template>
|
||||||
|
<div class="container mx-auto">
|
||||||
|
<Navbar/>
|
||||||
|
<NuxtPage/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "default",
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
28
src/nuxt.config.ts
Normal file
28
src/nuxt.config.ts
Normal file
|
|
@ -0,0 +1,28 @@
|
||||||
|
// https://nuxt.com/docs/api/configuration/nuxt-config
|
||||||
|
export default defineNuxtConfig({
|
||||||
|
app: {
|
||||||
|
head: {
|
||||||
|
charset: 'utf-8',
|
||||||
|
viewport: "width=device-width,initial-scale=1.0",
|
||||||
|
title: "Cinema Corona",
|
||||||
|
link: [
|
||||||
|
{rel: "icon", type: "image/png", href: "/favicon.png"}
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
modules: ["@nuxtjs/tailwindcss"],
|
||||||
|
css: ["@/assets/css/main.css"],
|
||||||
|
components: {
|
||||||
|
dirs: [
|
||||||
|
'~/components',
|
||||||
|
'~/components/modal-content',
|
||||||
|
'~/components/forms',
|
||||||
|
'~/components/admin',
|
||||||
|
]
|
||||||
|
},
|
||||||
|
runtimeConfig: {
|
||||||
|
public: {
|
||||||
|
apiURL: process.env.API_URL || "http://localhost:8000/api"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
11334
src/package-lock.json
generated
Normal file
11334
src/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
18
src/package.json
Normal file
18
src/package.json
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
{
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"build": "nuxt build",
|
||||||
|
"dev": "nuxt dev",
|
||||||
|
"generate": "nuxt generate",
|
||||||
|
"preview": "nuxt preview",
|
||||||
|
"postinstall": "nuxt prepare"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@nuxtjs/tailwindcss": "^6.2.0",
|
||||||
|
"nuxt": "3.x",
|
||||||
|
"prettier": "3.x"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"lazysizes": "^5.3.2"
|
||||||
|
}
|
||||||
|
}
|
||||||
88
src/pages/admin/index.vue
Normal file
88
src/pages/admin/index.vue
Normal file
|
|
@ -0,0 +1,88 @@
|
||||||
|
<template>
|
||||||
|
<div class="p-5 sm:p-0">
|
||||||
|
<Modal>
|
||||||
|
<AddMovie v-if="modal_movie" :movie="modal_movie"></AddMovie>
|
||||||
|
</Modal>
|
||||||
|
|
||||||
|
<div class="text-center sm:text-left">
|
||||||
|
<ul class="inline-flex space-x-5 pb-3">
|
||||||
|
<li id="search-tab" class="hover-pointer me-3 underline" @click="toggleDisplay('search')">Search</li>
|
||||||
|
<li id="showings-tab" class="hover-pointer me-3" @click="toggleDisplay('showings')">Showings</li>
|
||||||
|
<li id="lists-tab" class="hover-pointer" @click="toggleDisplay('lists')">Lists</li>
|
||||||
|
<li id="logout" class="hover-pointer" @click="logout">Logout</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="search">
|
||||||
|
<search/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="showings" class="hidden">
|
||||||
|
<showings/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="lists" class="hidden">
|
||||||
|
<lists></lists>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import AddMovie from "~/components/modal-content/AddMovie.vue";
|
||||||
|
import Search from "~/components/admin/search.vue";
|
||||||
|
import Showings from "~/components/admin/showings.vue";
|
||||||
|
import Lists from "~/components/admin/lists.vue";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "index",
|
||||||
|
components: {Lists, Showings, Search, AddMovie},
|
||||||
|
data: () => ({
|
||||||
|
lists: [],
|
||||||
|
modal_movie: null,
|
||||||
|
}),
|
||||||
|
methods: {
|
||||||
|
showModal: function (movie) {
|
||||||
|
this.modal_movie = movie;
|
||||||
|
document.getElementById("movie-modal").classList.remove("hidden");
|
||||||
|
},
|
||||||
|
toggleDisplay: function (id) {
|
||||||
|
let tabs = ["search", "showings", "lists"];
|
||||||
|
|
||||||
|
tabs.forEach((value) => {
|
||||||
|
if (value === id) {
|
||||||
|
document.getElementById(id).classList.toggle("hidden");
|
||||||
|
document.getElementById(id + "-tab").classList.toggle("underline");
|
||||||
|
} else if (!document.getElementById(value).classList.contains("hidden")) {
|
||||||
|
document.getElementById(value).classList.toggle("hidden");
|
||||||
|
document.getElementById(value + "-tab").classList.toggle("underline");
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
logout: () => {
|
||||||
|
let config = useRuntimeConfig()
|
||||||
|
let token = useCookie("token").value;
|
||||||
|
fetch(`${config.public.apiURL}/logout`, {
|
||||||
|
method: "PUT",
|
||||||
|
headers: {"Content-type": "application/json", "token": token},
|
||||||
|
})
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(_json => {
|
||||||
|
let token = useCookie("token");
|
||||||
|
token.value = null;
|
||||||
|
window.location = "/";
|
||||||
|
})
|
||||||
|
.catch(err => console.log(err))
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
const token = useCookie("token").value;
|
||||||
|
if (!token) {
|
||||||
|
navigateTo("/")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
84
src/pages/index.vue
Normal file
84
src/pages/index.vue
Normal file
|
|
@ -0,0 +1,84 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="p-5 movie-card neon-border">
|
||||||
|
<h3 class="bloodseeker mb-5">Login</h3>
|
||||||
|
<form class="grid p-1 p-sm-5" method="post" name="login-form" v-on:keyup.enter="login">
|
||||||
|
<div class="mx-auto">
|
||||||
|
<!-- USERNAME -->
|
||||||
|
<div class="row pb-5">
|
||||||
|
<label class="fw-bold pb-1 mx-0 px-0" for="username">Username</label><br/>
|
||||||
|
<input id="username" class="p-2 rounded" placeholder="username" type="text"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- PASSWORD -->
|
||||||
|
<div class="row">
|
||||||
|
<label class="fw-bold pb-1 px-0" for="password">Password</label><br/>
|
||||||
|
<input id="password" class="p-2 rounded" placeholder="password" type="password"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- SUBMIT BUTTON -->
|
||||||
|
<div class="mx-auto">
|
||||||
|
<button class="btn my-5 p-3 rounded" type="button" @click="login">Submit</button>
|
||||||
|
</div>
|
||||||
|
<div class="mx-auto pt-5">
|
||||||
|
<img id="password-incorrect" alt="password-incorrect" class="hidden"
|
||||||
|
src="https://i.imgur.com/6pXxxyZ.gif"/>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "index",
|
||||||
|
methods: {
|
||||||
|
login: async function (e) {
|
||||||
|
const config = useRuntimeConfig();
|
||||||
|
e.preventDefault()
|
||||||
|
document.getElementById("password-incorrect").classList.add("hidden")
|
||||||
|
let username = document.getElementById("username").value;
|
||||||
|
let password = document.getElementById("password").value;
|
||||||
|
|
||||||
|
let response = await fetch(`${config.public.apiURL}/auth/login`, {
|
||||||
|
method: "POST",
|
||||||
|
body: JSON.stringify({username: username, password: password}),
|
||||||
|
headers: {"Content-type": "application/json"}
|
||||||
|
})
|
||||||
|
.then(response => {
|
||||||
|
if (!response.ok) {
|
||||||
|
document.getElementById("password-incorrect").classList.remove("hidden")
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
return response.json();
|
||||||
|
|
||||||
|
//window.location = "/admin"
|
||||||
|
})
|
||||||
|
.catch(err => {
|
||||||
|
return false
|
||||||
|
})
|
||||||
|
|
||||||
|
if (response) {
|
||||||
|
let token = useCookie("token", {
|
||||||
|
sameSite: "lax",
|
||||||
|
});
|
||||||
|
token.value = response.token;
|
||||||
|
|
||||||
|
return navigateTo("/admin")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
let token = useCookie("token");
|
||||||
|
if (token.value) {
|
||||||
|
navigateTo("/admin")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
144
src/pages/lists/[id].vue
Normal file
144
src/pages/lists/[id].vue
Normal file
|
|
@ -0,0 +1,144 @@
|
||||||
|
<template>
|
||||||
|
<div v-if="list_id !== 0" class="p-5 sm:p-0">
|
||||||
|
<Modal>
|
||||||
|
<ShowMovie v-if="modal_movie" :movie="modal_movie"></ShowMovie>
|
||||||
|
</Modal>
|
||||||
|
<h2 class="text-xl font-bold pb-5">{{ list.name }}</h2>
|
||||||
|
<div class="grid grid-cols-2 rounded movie-card neon-border p-5">
|
||||||
|
<div>
|
||||||
|
<ul class="flex flex-row">
|
||||||
|
<li>
|
||||||
|
<label class="mr-2" for="hide_scheduled">Hide Scheduled</label>
|
||||||
|
<input
|
||||||
|
@change="hideScheduled"
|
||||||
|
v-model="hide_scheduled" id="hide_scheduled" type="checkbox"/>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<input v-model="movie_query"
|
||||||
|
class="p-1 rounded"
|
||||||
|
placeholder="Filter Movies"
|
||||||
|
type="text"
|
||||||
|
@input="filterMovies"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- MOVIE LIST -->
|
||||||
|
<ul class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-2 mt-5">
|
||||||
|
<li v-for="movie in filtered_movies" :key="movie.id" class="rounded movie-card neon-border">
|
||||||
|
<!-- POSTER -->
|
||||||
|
<img
|
||||||
|
:data-src="movie.poster"
|
||||||
|
alt="movie poster"
|
||||||
|
class="lazyload p-3 movie-poster hover-pointer mx-auto"
|
||||||
|
@click="showModal(movie)"
|
||||||
|
/>
|
||||||
|
<div class="p-5 flex flex-col">
|
||||||
|
<!-- TITLE -->
|
||||||
|
<span class="font-bold text-center mb-1">{{ movie.title }}</span>
|
||||||
|
<span v-if="logged_in" class="text-center hover-pointer" @click="removeMovie(movie.id)">
|
||||||
|
X
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import ShowMovie from "~/components/modal-content/ShowMovie.vue";
|
||||||
|
import 'lazysizes';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "list",
|
||||||
|
components: {ShowMovie},
|
||||||
|
data: () => ({
|
||||||
|
list_id: 0,
|
||||||
|
list: [],
|
||||||
|
modal_movie: null,
|
||||||
|
movies: [],
|
||||||
|
filtered_movies: [],
|
||||||
|
movie_query: "",
|
||||||
|
logged_in: false,
|
||||||
|
hide_scheduled: false,
|
||||||
|
}),
|
||||||
|
methods: {
|
||||||
|
getList: function (list_id) {
|
||||||
|
let config = useRuntimeConfig()
|
||||||
|
fetch(`${config.public.apiURL}/lists/${list_id}`, {
|
||||||
|
method: "GET",
|
||||||
|
headers: {"Content-type": "application/json"}
|
||||||
|
})
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(json => {
|
||||||
|
this.list = json.list;
|
||||||
|
this.movies = json.movies;
|
||||||
|
this.filtered_movies = this.movies;
|
||||||
|
})
|
||||||
|
.catch(err => console.log(err))
|
||||||
|
},
|
||||||
|
hideScheduled: function() {
|
||||||
|
if(this.hide_scheduled) {
|
||||||
|
this.filtered_movies = this.movies.filter(movie => {
|
||||||
|
return movie.last_watched === null
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
this.filtered_movies = this.movies;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
removeMovie: function (movie_id) {
|
||||||
|
let config = useRuntimeConfig()
|
||||||
|
let confirmed = confirm("Remove movie from list?");
|
||||||
|
|
||||||
|
if (!confirmed) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
return fetch(`${config.public.apiURL}/movies/l/${this.list_id}/m/${movie_id}`, {
|
||||||
|
credentials: "include",
|
||||||
|
method: "DELETE",
|
||||||
|
headers: {
|
||||||
|
"Content-type": "application/json",
|
||||||
|
"token": useCookie("token").value,
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(_json => {
|
||||||
|
this.filtered_movies = this.filtered_movies.filter((movie) => {
|
||||||
|
return movie.id !== movie_id
|
||||||
|
})
|
||||||
|
})
|
||||||
|
.catch(err => console.log(err));
|
||||||
|
},
|
||||||
|
filterMovies: function () {
|
||||||
|
if (!this.movie_query) {
|
||||||
|
this.filtered_movies = this.movies;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.filtered_movies = this.movies.filter(movie => {
|
||||||
|
return movie.title.toLowerCase()
|
||||||
|
.search(this.movie_query.toLowerCase()) > -1
|
||||||
|
});
|
||||||
|
},
|
||||||
|
showModal: function (movie) {
|
||||||
|
this.modal_movie = movie;
|
||||||
|
document.getElementById("movie-modal").classList.remove("hidden");
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
const route = useRoute();
|
||||||
|
this.list_id = route.params.id
|
||||||
|
this.getList(this.list_id)
|
||||||
|
|
||||||
|
const token = useCookie("token").value;
|
||||||
|
if (token) {
|
||||||
|
this.logged_in = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
42
src/pages/lists/index.vue
Normal file
42
src/pages/lists/index.vue
Normal file
|
|
@ -0,0 +1,42 @@
|
||||||
|
<template>
|
||||||
|
<div class="p-5 sm:p-0">
|
||||||
|
<ul class="grid grid-cols-2 gap-3 mt-5">
|
||||||
|
<li v-for="list in lists" class="movie-card neon-border p-5 rounded">
|
||||||
|
<div class="grid grid-rows-2 gap-3">
|
||||||
|
<NuxtLink :to="`/lists/${list.id}`" class="underline">
|
||||||
|
<h2 class="text-lg">{{ list.name }}</h2>
|
||||||
|
</NuxtLink>
|
||||||
|
<span>Movies: {{ list.movie_count }}</span>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "index",
|
||||||
|
data: () => ({
|
||||||
|
lists: [],
|
||||||
|
}),
|
||||||
|
methods: {
|
||||||
|
getLists: function () {
|
||||||
|
let config = useRuntimeConfig();
|
||||||
|
fetch(`${config.public.apiURL}/lists`, {
|
||||||
|
method: "GET",
|
||||||
|
headers: {"Content-type": "application/json"}
|
||||||
|
})
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(json => this.lists = json)
|
||||||
|
.catch(err => console.log(err))
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.getLists()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
101
src/pages/schedule/index.vue
Normal file
101
src/pages/schedule/index.vue
Normal file
|
|
@ -0,0 +1,101 @@
|
||||||
|
<template>
|
||||||
|
<div class="p-5 sm:p-0">
|
||||||
|
<ul class="flex flex-col gap-5">
|
||||||
|
<li v-for="showing in showings" class="p-5 movie-card neon-border">
|
||||||
|
<div class="sm:grid grid-cols-2 lg:grid-cols-3">
|
||||||
|
<img :src="showing.poster"
|
||||||
|
alt="Movie Poster"
|
||||||
|
class="mx-auto mb-5 sm:mb-0 sm:mx-0 neon-border bg-black schedule-poster"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div class="self-center text-left">
|
||||||
|
<h5 class="text-center sm:text-left mb-3 text-xl">{{ showing.title }}</h5>
|
||||||
|
<h5 class="text-center sm:text-left mb-3">{{ formatDate(showing.showtime) }}</h5>
|
||||||
|
<span class="">{{ showing.plot }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<!-- PREVIOUS SHOWINGS -->
|
||||||
|
<div id="previous-showings" class="mt-5 list-group">
|
||||||
|
<span class="block mb-5 hover-pointer underline" @click="getShowings(true)">
|
||||||
|
Previous Showings
|
||||||
|
</span>
|
||||||
|
<span id="loader" class="hidden">Loading...</span>
|
||||||
|
<ul class="flex flex-col gap-5">
|
||||||
|
<li v-for="showing in previous_showings" class="p-5 movie-card neon-border">
|
||||||
|
<div class="sm:grid grid-cols-2 lg:grid-cols-3">
|
||||||
|
<img :src="showing.poster"
|
||||||
|
alt="Movie Poster"
|
||||||
|
class="mx-auto mb-5 sm:mb-0 sm:mx-0 neon-border bg-black schedule-poster"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div class="self-center text-left">
|
||||||
|
<h5 class="text-xl mb-3">{{ showing.title }}</h5>
|
||||||
|
<h5 class="mb-3">{{ formatDate(showing.showtime) }}</h5>
|
||||||
|
<span class="">{{ showing.plot }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "index",
|
||||||
|
data: () => ({
|
||||||
|
showings: [],
|
||||||
|
previous_showings: [],
|
||||||
|
got_previous: false,
|
||||||
|
months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
|
||||||
|
}),
|
||||||
|
methods: {
|
||||||
|
formatDate: function (date_string) {
|
||||||
|
console.log(date_string)
|
||||||
|
let parsed_date = new Date(Date.parse(date_string));
|
||||||
|
let month = this.months[parsed_date.getMonth()];
|
||||||
|
|
||||||
|
return `${month} ${parsed_date.getDate()}, ${parsed_date.getFullYear()}`
|
||||||
|
},
|
||||||
|
getShowings: function (previous = false) {
|
||||||
|
let config = useRuntimeConfig()
|
||||||
|
if (this.got_previous) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById("loader").classList.toggle("hidden")
|
||||||
|
|
||||||
|
let params = "";
|
||||||
|
if (previous) params = "?previous=true";
|
||||||
|
|
||||||
|
return fetch(`${config.public.apiURL}/schedules/1${params}`, {
|
||||||
|
method: "GET",
|
||||||
|
headers: {"Content-type": "application/json"}
|
||||||
|
})
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(showings => {
|
||||||
|
|
||||||
|
if (previous) {
|
||||||
|
this.got_previous = true;
|
||||||
|
this.previous_showings = showings;
|
||||||
|
} else {
|
||||||
|
this.showings = showings
|
||||||
|
}
|
||||||
|
document.getElementById("loader").classList.toggle("hidden")
|
||||||
|
})
|
||||||
|
.catch(err => console.log(err));
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.getShowings()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
BIN
src/public/favicon.png
Normal file
BIN
src/public/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 648 B |
4
src/tsconfig.json
Normal file
4
src/tsconfig.json
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
{
|
||||||
|
// https://nuxt.com/docs/guide/concepts/typescript
|
||||||
|
"extends": "./.nuxt/tsconfig.json"
|
||||||
|
}
|
||||||
Loading…
Add table
Reference in a new issue