Compare commits
No commits in common. "main" and "usefetch-to-fetch" have entirely different histories.
main
...
usefetch-t
44 changed files with 3021 additions and 6748 deletions
2
.gitignore
vendored
2
.gitignore
vendored
|
|
@ -6,5 +6,3 @@ node_modules
|
||||||
.output
|
.output
|
||||||
.env
|
.env
|
||||||
dist
|
dist
|
||||||
|
|
||||||
.idea
|
|
||||||
|
|
|
||||||
6
.idea/inspectionProfiles/Project_Default.xml
generated
Normal file
6
.idea/inspectionProfiles/Project_Default.xml
generated
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
<component name="InspectionProjectProfileManager">
|
||||||
|
<profile version="1.0">
|
||||||
|
<option name="myName" value="Project Default" />
|
||||||
|
<inspection_tool class="TsLint" enabled="true" level="WARNING" enabled_by_default="true" />
|
||||||
|
</profile>
|
||||||
|
</component>
|
||||||
8
.idea/modules.xml
generated
Normal file
8
.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/web.iml" filepath="$PROJECT_DIR$/.idea/web.iml" />
|
||||||
|
</modules>
|
||||||
|
</component>
|
||||||
|
</project>
|
||||||
33
.idea/php.xml
generated
Normal file
33
.idea/php.xml
generated
Normal file
|
|
@ -0,0 +1,33 @@
|
||||||
|
<?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="PhpCodeSniffer">
|
||||||
|
<phpcs_settings>
|
||||||
|
<phpcs_by_interpreter asDefaultInterpreter="true" interpreter_id="53f7f9d8-dddf-4d4f-ad7e-428c57c55670" timeout="30000" />
|
||||||
|
</phpcs_settings>
|
||||||
|
</component>
|
||||||
|
<component name="PhpStan">
|
||||||
|
<PhpStan_settings>
|
||||||
|
<phpstan_by_interpreter asDefaultInterpreter="true" interpreter_id="53f7f9d8-dddf-4d4f-ad7e-428c57c55670" timeout="60000" />
|
||||||
|
</PhpStan_settings>
|
||||||
|
</component>
|
||||||
|
<component name="PhpStanOptionsConfiguration">
|
||||||
|
<option name="transferred" value="true" />
|
||||||
|
</component>
|
||||||
|
<component name="Psalm">
|
||||||
|
<Psalm_settings>
|
||||||
|
<psalm_fixer_by_interpreter asDefaultInterpreter="true" interpreter_id="53f7f9d8-dddf-4d4f-ad7e-428c57c55670" timeout="60000" />
|
||||||
|
</Psalm_settings>
|
||||||
|
</component>
|
||||||
|
<component name="PsalmOptionsConfiguration">
|
||||||
|
<option name="transferred" value="true" />
|
||||||
|
</component>
|
||||||
|
</project>
|
||||||
7
.idea/prettier.xml
generated
Normal file
7
.idea/prettier.xml
generated
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="PrettierConfiguration">
|
||||||
|
<option name="myConfigurationMode" value="AUTOMATIC" />
|
||||||
|
<option name="myRunOnSave" 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>
|
||||||
8
.idea/web.iml
generated
Normal file
8
.idea/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>
|
||||||
153
.idea/workspace.xml
generated
Normal file
153
.idea/workspace.xml
generated
Normal file
|
|
@ -0,0 +1,153 @@
|
||||||
|
<?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/components/admin/lists.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/admin/lists.vue" afterDir="false" />
|
||||||
|
<change beforePath="$PROJECT_DIR$/src/components/admin/showings.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/admin/showings.vue" afterDir="false" />
|
||||||
|
<change beforePath="$PROJECT_DIR$/src/pages/admin/index.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/admin/index.vue" afterDir="false" />
|
||||||
|
<change beforePath="$PROJECT_DIR$/src/pages/lists/[id].vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/lists/[id].vue" afterDir="false" />
|
||||||
|
<change beforePath="$PROJECT_DIR$/src/pages/lists/index.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/lists/index.vue" afterDir="false" />
|
||||||
|
<change beforePath="$PROJECT_DIR$/src/pages/schedule/index.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/schedule/index.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" />
|
||||||
|
<option value="TypeScript File" />
|
||||||
|
</list>
|
||||||
|
</option>
|
||||||
|
</component>
|
||||||
|
<component name="FormatOnSaveOptions">
|
||||||
|
<option name="myRunOnSave" value="true" />
|
||||||
|
</component>
|
||||||
|
<component name="Git.Settings">
|
||||||
|
<option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
|
||||||
|
</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="PhpWorkspaceProjectConfiguration" interpreter_name="/usr/bin/php" />
|
||||||
|
<component name="ProblemsViewState">
|
||||||
|
<option name="selectedTabId" value="CurrentFile" />
|
||||||
|
</component>
|
||||||
|
<component name="ProjectColorInfo">{
|
||||||
|
"associatedIndex": 8
|
||||||
|
}</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"><![CDATA[{
|
||||||
|
"keyToString": {
|
||||||
|
"RunOnceActivity.OpenProjectViewOnStart": "true",
|
||||||
|
"RunOnceActivity.ShowReadmeOnStart": "true",
|
||||||
|
"RunOnceActivity.git.unshallow": "true",
|
||||||
|
"WebServerToolWindowFactoryState": "false",
|
||||||
|
"code.cleanup.on.save": "true",
|
||||||
|
"git-widget-placeholder": "usefetch-to-fetch",
|
||||||
|
"last_opened_file_path": "/home/tiradoe/Projects/movie-night/web/src/types",
|
||||||
|
"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",
|
||||||
|
"npm.dev.executor": "Run",
|
||||||
|
"prettierjs.PrettierConfiguration.Package": "/home/tiradoe/Projects/movie-night/web/src/node_modules/prettier",
|
||||||
|
"rearrange.code.on.save": "true",
|
||||||
|
"settings.editor.selected.configurable": "settings.vue",
|
||||||
|
"ts.external.directory.path": "/home/tiradoe/Projects/movie-night/web/src/node_modules/typescript/lib",
|
||||||
|
"vue.rearranger.settings.migration": "true"
|
||||||
|
}
|
||||||
|
}]]></component>
|
||||||
|
<component name="RecentsManager">
|
||||||
|
<key name="CopyFile.RECENT_KEYS">
|
||||||
|
<recent name="$PROJECT_DIR$/src/types" />
|
||||||
|
<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="SharedIndexes">
|
||||||
|
<attachedChunks>
|
||||||
|
<set>
|
||||||
|
<option value="bundled-js-predefined-d6986cc7102b-1632447f56bf-JavaScript-PS-243.26053.13" />
|
||||||
|
<option value="bundled-php-predefined-a98d8de5180a-1ec7b7818973-com.jetbrains.php.sharedIndexes-PS-243.26053.13" />
|
||||||
|
</set>
|
||||||
|
</attachedChunks>
|
||||||
|
</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" />
|
||||||
|
<workItem from="1743904898331" duration="20256000" />
|
||||||
|
<workItem from="1743998844137" duration="23268000" />
|
||||||
|
<workItem from="1744430699183" duration="32152000" />
|
||||||
|
</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>
|
||||||
|
|
@ -2,5 +2,3 @@ Movie Night Web
|
||||||
=
|
=
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Uses filmstrip icon by momentbloom (https://www.vecteezy.com/vector-art/36659391-filmstrip)
|
|
||||||
|
|
|
||||||
|
|
@ -94,12 +94,6 @@ input {
|
||||||
width: 80%; /* Could be more or less, depending on screen size */
|
width: 80%; /* Could be more or less, depending on screen size */
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-header {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
line-height: calc(2 / 1.5);
|
|
||||||
padding-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hover-pointer {
|
.hover-pointer {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Binary file not shown.
Binary file not shown.
|
|
@ -1,48 +0,0 @@
|
||||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
|
||||||
<svg
|
|
||||||
viewBox="1413.5 192.80002 108.59998 149.10001"
|
|
||||||
width="108.59998"
|
|
||||||
height="149.10001"
|
|
||||||
version="1.1"
|
|
||||||
id="svg1"
|
|
||||||
sodipodi:docname="poster-placeholder.svg"
|
|
||||||
inkscape:export-filename="poster-placeholder2.svg"
|
|
||||||
inkscape:export-xdpi="96"
|
|
||||||
inkscape:export-ydpi="96"
|
|
||||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
|
||||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
xmlns:svg="http://www.w3.org/2000/svg">
|
|
||||||
<defs
|
|
||||||
id="defs1" />
|
|
||||||
<sodipodi:namedview
|
|
||||||
id="namedview1"
|
|
||||||
pagecolor="#ffffff"
|
|
||||||
bordercolor="#000000"
|
|
||||||
borderopacity="0.25"
|
|
||||||
inkscape:showpageshadow="2"
|
|
||||||
inkscape:pageopacity="0.0"
|
|
||||||
inkscape:pagecheckerboard="0"
|
|
||||||
inkscape:deskcolor="#d1d1d1"
|
|
||||||
inkscape:export-bgcolor="#ffffffff">
|
|
||||||
<inkscape:page
|
|
||||||
x="0"
|
|
||||||
y="0"
|
|
||||||
width="108.59998"
|
|
||||||
height="149.10001"
|
|
||||||
id="page2"
|
|
||||||
margin="0"
|
|
||||||
bleed="0" />
|
|
||||||
</sodipodi:namedview>
|
|
||||||
<rect
|
|
||||||
style="fill:#5c5b79;fill-opacity:1"
|
|
||||||
id="rect1"
|
|
||||||
width="108.28388"
|
|
||||||
height="148.72725"
|
|
||||||
x="1413.6864"
|
|
||||||
y="193.17278" />
|
|
||||||
<path
|
|
||||||
fill="#cccccc"
|
|
||||||
d="m 1413.5,242.5 c 0,16.6 0,33.1 0,49.7 36.2,49.7 72.4,-49.7 108.6,0 0,-16.6 0,-33.1 0,-49.7 -36.2,-49.7 -72.4,49.7 -108.6,0 z m 8.7,56.7 c -1.6,-1.3 -3.3,-2.8 -4.9,-4.6 0,-1.6 0,-3.3 0,-4.9 1.6,1.8 3.3,3.3 4.9,4.6 0,1.7 0,3.3 0,4.9 z m 0,-39.8 c -1.6,-1.3 -3.3,-2.8 -4.9,-4.6 0,-1.6 0,-3.3 0,-4.9 1.6,1.8 3.3,3.3 4.9,4.6 0,1.6 0,3.3 0,4.9 z m 9.6,44.4 c -1.6,-0.4 -3.3,-0.9 -4.9,-1.7 0,-1.6 0,-3.3 0,-4.9 1.6,0.8 3.3,1.4 4.9,1.7 0,1.7 0,3.3 0,4.9 z m 0,-39.8 c -1.6,-0.4 -3.3,-0.9 -4.9,-1.7 0,-1.6 0,-3.3 0,-4.9 1.6,0.8 3.3,1.4 4.9,1.7 0,1.7 0,3.3 0,4.9 z m 9.6,39.8 c -1.6,0.3 -3.3,0.5 -4.9,0.5 0,-1.6 0,-3.3 0,-4.9 1.6,0 3.3,-0.2 4.9,-0.5 0,1.7 0,3.3 0,4.9 z m 0,-39.8 c -1.6,0.3 -3.3,0.5 -4.9,0.5 0,-1.6 0,-3.3 0,-4.9 1.6,0 3.3,-0.2 4.9,-0.5 0,1.6 0,3.3 0,4.9 z m 9.6,36.4 c -1.6,0.8 -3.3,1.5 -4.9,2.1 0,-1.6 0,-3.3 0,-4.9 1.6,-0.6 3.3,-1.3 4.9,-2.1 0,1.7 0,3.3 0,4.9 z m 0,-39.8 c -1.6,0.8 -3.3,1.5 -4.9,2.1 0,-1.6 0,-3.3 0,-4.9 1.6,-0.6 3.3,-1.3 4.9,-2.1 0,1.6 0,3.3 0,4.9 z m 9.5,34.3 c -1.6,1.1 -3.3,2.1 -4.9,3 0,-1.6 0,-3.3 0,-4.9 1.6,-1 3.3,-2 4.9,-3 0,1.6 0,3.2 0,4.9 z m 0,-39.8 c -1.6,1.1 -3.3,2.1 -4.9,3 0,-1.6 0,-3.3 0,-4.9 1.6,-1 3.3,-2 4.9,-3 0,1.6 0,3.2 0,4.9 z m 9.6,33.3 c -1.6,1.1 -3.3,2.3 -4.9,3.4 0,-1.6 0,-3.3 0,-4.9 1.6,-1.1 3.3,-2.2 4.9,-3.4 0,1.6 0,3.2 0,4.9 z m 0,-39.8 c -1.6,1.1 -3.3,2.3 -4.9,3.4 0,-1.6 0,-3.3 0,-4.9 1.6,-1.1 3.3,-2.2 4.9,-3.4 0,1.6 0,3.2 0,4.9 z m 9.6,33.6 c -1.6,1 -3.3,2 -4.9,3.1 0,-1.6 0,-3.3 0,-4.9 1.6,-1.1 3.3,-2.1 4.9,-3.1 0,1.6 0,3.3 0,4.9 z m 0,-39.8 c -1.6,1 -3.3,2 -4.9,3.1 0,-1.6 0,-3.3 0,-4.9 1.6,-1.1 3.3,-2.1 4.9,-3.1 0,1.6 0,3.2 0,4.9 z m 9.6,35.1 c -1.6,0.6 -3.3,1.3 -4.9,2.1 0,-1.6 0,-3.3 0,-4.9 1.6,-0.8 3.3,-1.5 4.9,-2.1 0,1.7 0,3.3 0,4.9 z m 0,-39.8 c -1.6,0.6 -3.3,1.3 -4.9,2.1 0,-1.6 0,-3.3 0,-4.9 1.6,-0.8 3.3,-1.5 4.9,-2.1 0,1.7 0,3.3 0,4.9 z m 9.6,37.9 c -1.6,0 -3.3,0.2 -4.9,0.6 0,-1.6 0,-3.3 0,-4.9 1.6,-0.3 3.3,-0.5 4.9,-0.6 0,1.7 0,3.3 0,4.9 z m 0,-39.8 c -1.6,0 -3.3,0.2 -4.9,0.6 0,-1.6 0,-3.3 0,-4.9 1.6,-0.3 3.3,-0.5 4.9,-0.6 0,1.6 0,3.3 0,4.9 z m 14.2,0 c 1.6,1.2 3.3,2.7 4.9,4.5 0,1.6 0,3.3 0,4.9 -1.6,-1.8 -3.3,-3.2 -4.9,-4.5 0,-1.6 0,-3.2 0,-4.9 z m 0,39.8 c 1.6,1.2 3.3,2.7 4.9,4.5 0,1.6 0,3.3 0,4.9 -1.6,-1.8 -3.3,-3.2 -4.9,-4.5 0,-1.6 0,-3.2 0,-4.9 z m -9.6,-44.2 c 1.6,0.3 3.3,0.9 4.9,1.6 0,1.6 0,3.3 0,4.9 -1.6,-0.8 -3.3,-1.3 -4.9,-1.6 0,-1.7 0,-3.3 0,-4.9 z m 0,39.8 c 1.6,0.3 3.3,0.9 4.9,1.6 0,1.6 0,3.3 0,4.9 -1.6,-0.8 -3.3,-1.3 -4.9,-1.6 0,-1.7 0,-3.3 0,-4.9 z"
|
|
||||||
id="path1" />
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 3.6 KiB |
|
|
@ -1,30 +0,0 @@
|
||||||
<template>
|
|
||||||
<div
|
|
||||||
class="flex absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 flex-col"
|
|
||||||
>
|
|
||||||
<video alt="Loading" autoplay class="max-h-52" loop muted playsinline>
|
|
||||||
<source
|
|
||||||
v-if="supportsHEVC"
|
|
||||||
src="/assets/img/movie-loader.mov"
|
|
||||||
type="video/quicktime"
|
|
||||||
/>
|
|
||||||
<source v-else src="/assets/img/movie-loader.webm" type="video/webm" />
|
|
||||||
</video>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
const supportsHEVC = ref(false);
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
|
|
||||||
|
|
||||||
// iOS devices also support HEVC
|
|
||||||
const isIOS =
|
|
||||||
/iPad|iPhone|iPod/.test(navigator.userAgent) && !(window as any).MSStream;
|
|
||||||
|
|
||||||
supportsHEVC.value = isSafari || isIOS;
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped></style>
|
|
||||||
23
src/components/Modal.vue
Normal file
23
src/components/Modal.vue
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
<template>
|
||||||
|
<div v-show="visible" id="movie-modal" class="movie-modal movie-card p-5">
|
||||||
|
<span
|
||||||
|
class="hover-pointer font-bold w-full block text-right sm:pr-5 pb-3 pt-5"
|
||||||
|
@click="toggleModal()"
|
||||||
|
>
|
||||||
|
X
|
||||||
|
</span>
|
||||||
|
<slot class=""></slot>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
const visible = ref(false);
|
||||||
|
|
||||||
|
const toggleModal = () => {
|
||||||
|
visible.value = !visible.value;
|
||||||
|
};
|
||||||
|
|
||||||
|
defineExpose({ toggleModal });
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
|
|
@ -1,36 +0,0 @@
|
||||||
<script lang="ts" setup>
|
|
||||||
import placeholderPoster from "assets/img/poster-placeholder.svg";
|
|
||||||
|
|
||||||
const imgRef = ref<HTMLImageElement | null>(null);
|
|
||||||
const props = defineProps<{ image: string }>();
|
|
||||||
|
|
||||||
const handleImageError = function (event: Event) {
|
|
||||||
(event.target as HTMLImageElement).classList.remove("lazyload");
|
|
||||||
(event.target as HTMLImageElement).classList.add("object-cover");
|
|
||||||
(event.target as HTMLImageElement).src = placeholderPoster;
|
|
||||||
};
|
|
||||||
|
|
||||||
watch(
|
|
||||||
() => props.image,
|
|
||||||
(newImage) => {
|
|
||||||
if (imgRef.value && newImage) {
|
|
||||||
imgRef.value.classList.add("lazyload");
|
|
||||||
imgRef.value.setAttribute("data-src", newImage);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="aspect-[2/3] w-full text-blue-300">
|
|
||||||
<img
|
|
||||||
ref="imgRef"
|
|
||||||
:data-src="props.image"
|
|
||||||
alt="Movie Details"
|
|
||||||
class="lazyload hover-pointer w-full h-full"
|
|
||||||
@error="handleImageError"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped></style>
|
|
||||||
|
|
@ -1,54 +0,0 @@
|
||||||
<template>
|
|
||||||
<blockquote
|
|
||||||
class="flex flex-col gap-10 movie-card p-10 neon-border text-center"
|
|
||||||
>
|
|
||||||
<span>
|
|
||||||
{{ quote.quote }}
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<div class="flex gap-2 italic flex-col">
|
|
||||||
<span>{{ quote.actor }}</span>
|
|
||||||
<span>{{ quote.movie }}</span>
|
|
||||||
</div>
|
|
||||||
</blockquote>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped></style>
|
|
||||||
<script lang="ts" setup>
|
|
||||||
const quotes = [
|
|
||||||
{
|
|
||||||
actor: "Darren Ewing as Arnold",
|
|
||||||
movie: "Troll 2",
|
|
||||||
quote: "They're eating her... and then they're going to eat me! OH MY GOD!",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
actor: "Tommy Wiseau as Johnny",
|
|
||||||
movie: "The Room",
|
|
||||||
quote: "You're tearing me apart, Lisa!",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
actor: "Arnold Schwaarzenegger as T-800",
|
|
||||||
movie: "Terminator 2: Judgment Day",
|
|
||||||
quote: "Hasta la vista, baby.",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
actor: "Karolyn Grimes as Zuzu",
|
|
||||||
movie: "It's a Wonderful Life",
|
|
||||||
quote: "Every time a bell rings, an angel gets his wings.",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
actor: "Pat Morita as Mr. Miyagi",
|
|
||||||
movie: "The Karate Kid",
|
|
||||||
quote: "Wax on, Wax off",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
actor: "Dolph Lundgren as Drago",
|
|
||||||
movie: "Rocky 4",
|
|
||||||
quote: "I must break you.",
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const randomQuote = () => quotes[Math.floor(Math.random() * quotes.length)];
|
|
||||||
|
|
||||||
const quote = ref(randomQuote());
|
|
||||||
</script>
|
|
||||||
|
|
@ -32,7 +32,7 @@
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import type { MovieList } from "~/types/movielist";
|
import type { MovieList } from "~/types/movielist";
|
||||||
|
|
||||||
const lists = ref<MovieList[]>([]);
|
const lists = defineModel<MovieList[]>("lists", { default: [] });
|
||||||
|
|
||||||
const addList = async function () {
|
const addList = async function () {
|
||||||
let config = useRuntimeConfig();
|
let config = useRuntimeConfig();
|
||||||
|
|
@ -86,10 +86,7 @@ const getLists = function () {
|
||||||
const config = useRuntimeConfig();
|
const config = useRuntimeConfig();
|
||||||
$fetch<MovieList[]>(`${config.public.apiURL}/lists`, {
|
$fetch<MovieList[]>(`${config.public.apiURL}/lists`, {
|
||||||
method: "GET",
|
method: "GET",
|
||||||
headers: {
|
headers: { "Content-type": "application/json" },
|
||||||
"Content-type": "application/json",
|
|
||||||
Authorization: `Token ${useCookie("token").value}`,
|
|
||||||
},
|
|
||||||
})
|
})
|
||||||
.then((data) => (lists.value = data))
|
.then((data) => (lists.value = data))
|
||||||
.catch((err) => console.log(err));
|
.catch((err) => console.log(err));
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,4 @@
|
||||||
<template>
|
<template>
|
||||||
<LoadingIcon v-if="loading" class="p-1 bg-gray-900 rounded-3xl" />
|
|
||||||
<form class="py-3 p-sm-0 align-items-center" @submit="findMovies">
|
<form class="py-3 p-sm-0 align-items-center" @submit="findMovies">
|
||||||
<label class="px-0" for="search-field">Search</label>
|
<label class="px-0" for="search-field">Search</label>
|
||||||
<div class="px-0 mx-0">
|
<div class="px-0 mx-0">
|
||||||
|
|
@ -9,7 +8,12 @@
|
||||||
</form>
|
</form>
|
||||||
<ul class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 gap-4">
|
<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">
|
<li v-for="movie in movies" class="p-1 movie-card">
|
||||||
<MoviePoster :image="movie.poster" @click="showModal(movie)" />
|
<img
|
||||||
|
:src="movie.poster"
|
||||||
|
alt="movie poster"
|
||||||
|
class="neon-border hover-pointer"
|
||||||
|
@click="showModal(movie)"
|
||||||
|
/>
|
||||||
<div class="p-2">
|
<div class="p-2">
|
||||||
<h5 class="text-center">{{ movie.title }} ({{ movie.year }})</h5>
|
<h5 class="text-center">{{ movie.title }} ({{ movie.year }})</h5>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -19,14 +23,11 @@
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import type { Movie } from "~/types/movie";
|
import type { Movie } from "~/types/movie";
|
||||||
import "lazysizes";
|
|
||||||
|
|
||||||
const loading = ref(false);
|
|
||||||
|
|
||||||
const emit = defineEmits<{
|
const emit = defineEmits<{
|
||||||
(e: "show-modal", movie: Movie): void;
|
(e: "show-modal", movie: Movie): void;
|
||||||
}>();
|
}>();
|
||||||
const movies = ref<Movie[]>([]);
|
const movies = defineModel<Movie[]>("movie_list", { default: [] });
|
||||||
|
|
||||||
const showModal = (movie: Movie) => {
|
const showModal = (movie: Movie) => {
|
||||||
emit("show-modal", movie);
|
emit("show-modal", movie);
|
||||||
|
|
@ -35,7 +36,6 @@ const showModal = (movie: Movie) => {
|
||||||
const findMovies = async function (e: Event) {
|
const findMovies = async function (e: Event) {
|
||||||
let config = useRuntimeConfig();
|
let config = useRuntimeConfig();
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
loading.value = true;
|
|
||||||
let searchTerm = (document.getElementById("search-field") as HTMLInputElement)
|
let searchTerm = (document.getElementById("search-field") as HTMLInputElement)
|
||||||
?.value;
|
?.value;
|
||||||
|
|
||||||
|
|
@ -43,27 +43,28 @@ const findMovies = async function (e: Event) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
$fetch<Movie[]>(`${config.public.apiURL}/movies/search?q=${searchTerm}`, {
|
const { data, error } = await useFetch<Movie[]>(
|
||||||
method: "GET",
|
`${config.public.apiURL}/movies/search?q=${searchTerm}`,
|
||||||
headers: {
|
{
|
||||||
"Content-type": "application/json",
|
method: "GET",
|
||||||
Authorization: `Token ${useCookie("token").value}`,
|
headers: {
|
||||||
|
"Content-type": "application/json",
|
||||||
|
Authorization: `Token ${useCookie("token").value}`,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
})
|
);
|
||||||
.then((data) => {
|
|
||||||
movies.value = data;
|
if (error.value) {
|
||||||
loading.value = false;
|
if (error.value.statusCode === 401) {
|
||||||
})
|
alert("Unauthorized");
|
||||||
.catch((err) => {
|
}
|
||||||
if (err.statusCode === 401) {
|
} else {
|
||||||
navigateTo("/login");
|
if (!data.value) {
|
||||||
} else if (err.statusCode === 404) {
|
alert("No movies found.");
|
||||||
alert("No movies found");
|
} else {
|
||||||
loading.value = false;
|
movies.value = data.value || [];
|
||||||
} else {
|
}
|
||||||
alert("An error occurred. Please try again later.");
|
}
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -28,9 +28,25 @@ import { useCookie } from "#app";
|
||||||
import type { Schedule } from "~/types/schedule";
|
import type { Schedule } from "~/types/schedule";
|
||||||
import { $fetch } from "ofetch";
|
import { $fetch } from "ofetch";
|
||||||
|
|
||||||
const showings = ref<Showing[]>([]);
|
const showings = defineModel<Showing[]>("showings", { default: [] });
|
||||||
const previous_showings = ref<Showing[]>([]);
|
const previous_showings = defineModel<Showing[]>("previous_showings", {
|
||||||
|
default: [],
|
||||||
|
});
|
||||||
const got_previous = ref(false);
|
const got_previous = ref(false);
|
||||||
|
const months = [
|
||||||
|
"January",
|
||||||
|
"February",
|
||||||
|
"March",
|
||||||
|
"April",
|
||||||
|
"May",
|
||||||
|
"June",
|
||||||
|
"July",
|
||||||
|
"August",
|
||||||
|
"September",
|
||||||
|
"October",
|
||||||
|
"November",
|
||||||
|
"December",
|
||||||
|
];
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
getShowings();
|
getShowings();
|
||||||
|
|
@ -38,20 +54,6 @@ onMounted(() => {
|
||||||
|
|
||||||
const formatDate = function (date_string: string) {
|
const formatDate = function (date_string: string) {
|
||||||
let parsed_date = new Date(Date.parse(date_string));
|
let parsed_date = new Date(Date.parse(date_string));
|
||||||
const months = [
|
|
||||||
"January",
|
|
||||||
"February",
|
|
||||||
"March",
|
|
||||||
"April",
|
|
||||||
"May",
|
|
||||||
"June",
|
|
||||||
"July",
|
|
||||||
"August",
|
|
||||||
"September",
|
|
||||||
"October",
|
|
||||||
"November",
|
|
||||||
"December",
|
|
||||||
];
|
|
||||||
let month = months[parsed_date.getMonth()];
|
let month = months[parsed_date.getMonth()];
|
||||||
|
|
||||||
return `${month} ${parsed_date.getDate()}, ${parsed_date.getFullYear()}`;
|
return `${month} ${parsed_date.getDate()}, ${parsed_date.getFullYear()}`;
|
||||||
|
|
|
||||||
|
|
@ -1,120 +0,0 @@
|
||||||
<script lang="ts" setup>
|
|
||||||
import { logout } from "~/composables/logout";
|
|
||||||
|
|
||||||
let isOpened = ref(false);
|
|
||||||
const menuRef = ref<HTMLElement>();
|
|
||||||
|
|
||||||
const toggleMenu = function () {
|
|
||||||
isOpened.value = !isOpened.value;
|
|
||||||
};
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
const handleClickOutside = (e: Event) => {
|
|
||||||
if (!menuRef.value?.contains(e.target as Node)) {
|
|
||||||
isOpened.value = false;
|
|
||||||
} else {
|
|
||||||
const target = e.target as HTMLElement;
|
|
||||||
if (
|
|
||||||
target.classList.contains("menu-link") ||
|
|
||||||
target.closest(".menu-link")
|
|
||||||
) {
|
|
||||||
isOpened.value = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
document.addEventListener("click", handleClickOutside);
|
|
||||||
|
|
||||||
onUnmounted(() => {
|
|
||||||
document.removeEventListener("click", handleClickOutside);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div ref="menuRef" class="profile-menu">
|
|
||||||
<img
|
|
||||||
alt="profile menu"
|
|
||||||
class="profile-pic"
|
|
||||||
src="https://placecage.lucidinternets.com/50/50"
|
|
||||||
tabindex="0"
|
|
||||||
@click="toggleMenu"
|
|
||||||
@keydown.enter="toggleMenu"
|
|
||||||
@keydown.space="toggleMenu"
|
|
||||||
/>
|
|
||||||
<div class="menu-content">
|
|
||||||
<ul v-show="isOpened">
|
|
||||||
<li role="none">
|
|
||||||
<NuxtLink class="menu-link" to="/admin">Admin</NuxtLink>
|
|
||||||
</li>
|
|
||||||
<li role="none">
|
|
||||||
<NuxtLink class="menu-link" to="/user/profile"> Profile</NuxtLink>
|
|
||||||
</li>
|
|
||||||
<!--
|
|
||||||
<li role="none">
|
|
||||||
<NuxtLink class="menu-link" to="/user/settings"> Settings</NuxtLink>
|
|
||||||
</li>
|
|
||||||
-->
|
|
||||||
<li
|
|
||||||
id="logout"
|
|
||||||
class="menu-link"
|
|
||||||
role="none"
|
|
||||||
tabindex="0"
|
|
||||||
@click="logout"
|
|
||||||
>
|
|
||||||
Logout
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.profile-menu {
|
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.profile-pic {
|
|
||||||
width: 2rem;
|
|
||||||
height: 2rem;
|
|
||||||
border-radius: 50%;
|
|
||||||
margin-right: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.profile-pic:hover {
|
|
||||||
border: 1px solid #6f0b51;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-content {
|
|
||||||
position: absolute;
|
|
||||||
top: 100%;
|
|
||||||
right: 0;
|
|
||||||
min-width: 150px;
|
|
||||||
background-color: #f9f9f9;
|
|
||||||
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
|
|
||||||
z-index: 1;
|
|
||||||
overflow: hidden;
|
|
||||||
border-radius: 0.5rem;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-content li {
|
|
||||||
color: black;
|
|
||||||
text-decoration: none;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-content li:hover {
|
|
||||||
background-color: #6f0b51;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-link {
|
|
||||||
padding: 12px 16px;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: block;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,45 +0,0 @@
|
||||||
<script lang="ts" setup>
|
|
||||||
const showScroll = ref(false);
|
|
||||||
const updateScrollPosition = () => {
|
|
||||||
showScroll.value = document.documentElement.scrollTop > 1500;
|
|
||||||
};
|
|
||||||
const scrollToTop = () => {
|
|
||||||
window.scrollTo({
|
|
||||||
top: 0,
|
|
||||||
behavior: "smooth",
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
window.addEventListener("scroll", updateScrollPosition);
|
|
||||||
});
|
|
||||||
|
|
||||||
onUnmounted(() => {
|
|
||||||
window.removeEventListener("scroll", updateScrollPosition);
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<span v-if="showScroll" class="floater overlay-text" @click="scrollToTop">
|
|
||||||
Scroll To Top
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.floater {
|
|
||||||
display: block;
|
|
||||||
position: fixed;
|
|
||||||
right: 10px;
|
|
||||||
bottom: 10px;
|
|
||||||
z-index: 1000;
|
|
||||||
cursor: pointer;
|
|
||||||
background-color: rgba(112, 128, 144, 0.8);
|
|
||||||
padding: 0.5rem;
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.overlay-text {
|
|
||||||
color: white;
|
|
||||||
text-shadow: 1px 1px #6f0b51;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,32 +0,0 @@
|
||||||
<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="/">
|
|
||||||
<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>
|
|
||||||
<li v-if="authenticated">
|
|
||||||
<ProfileMenu />
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { hasToken } from "~/composables/hasToken";
|
|
||||||
import ProfileMenu from "~/components/common/menus/ProfileMenu.vue";
|
|
||||||
|
|
||||||
const authenticated = computed(() => hasToken());
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped></style>
|
|
||||||
|
|
@ -1,9 +0,0 @@
|
||||||
<script lang="ts" setup></script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<button class="btn p-3 mt-5" type="button">
|
|
||||||
<slot> </slot>
|
|
||||||
</button>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped></style>
|
|
||||||
|
|
@ -1,25 +0,0 @@
|
||||||
<template>
|
|
||||||
<div v-show="visible" id="movie-modal" class="movie-modal movie-card">
|
|
||||||
<div class="max-w-4xl mx-auto flex flex-col px-2 sm:px-0">
|
|
||||||
<span
|
|
||||||
class="hover-pointer font-bold self-end pr-1 sm:pr-5 pt-5 pb-5 sm:pb-0"
|
|
||||||
@click="toggleModal()"
|
|
||||||
>
|
|
||||||
<span class="bg-red-600 p-2 rounded">X</span>
|
|
||||||
</span>
|
|
||||||
<slot></slot>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
const visible = ref(false);
|
|
||||||
|
|
||||||
const toggleModal = () => {
|
|
||||||
visible.value = !visible.value;
|
|
||||||
};
|
|
||||||
|
|
||||||
defineExpose({ toggleModal });
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped></style>
|
|
||||||
|
|
@ -1,21 +0,0 @@
|
||||||
<script lang="ts" setup>
|
|
||||||
import FormButton from "~/components/common/ui/FormButton.vue";
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<h3 class="text-bold text-xl">Reset Password</h3>
|
|
||||||
<div class="flex flex-col gap-2">
|
|
||||||
<div class="flex flex-col gap-2">
|
|
||||||
<label for="old_password">Old Password</label>
|
|
||||||
<input id="old_password" class="p-3" name="password" type="password" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex flex-col gap-2">
|
|
||||||
<label for="password">New Password</label>
|
|
||||||
<input id="password" class="p-3" name="password" type="password" />
|
|
||||||
</div>
|
|
||||||
<FormButton>Update Password</FormButton>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped></style>
|
|
||||||
|
|
@ -27,9 +27,7 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import type { Movie } from "~/types/movie";
|
const props = defineProps(["movie"]);
|
||||||
|
|
||||||
const props = defineProps<{ movie: Movie }>();
|
|
||||||
const emits = defineEmits(["closeModal"]);
|
const emits = defineEmits(["closeModal"]);
|
||||||
|
|
||||||
const schedule = function (e: Event) {
|
const schedule = function (e: Event) {
|
||||||
|
|
@ -45,8 +43,7 @@ const schedule = function (e: Event) {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
let date = new Date(`${showtime_input}T23:59:00`);
|
const date = new Date(`${showtime_input}T00:00:00`);
|
||||||
convertToUserTimezone(date);
|
|
||||||
|
|
||||||
fetch(`${config.public.apiURL}/showings/`, {
|
fetch(`${config.public.apiURL}/showings/`, {
|
||||||
method: "POST",
|
method: "POST",
|
||||||
|
|
@ -61,16 +58,12 @@ const schedule = function (e: Event) {
|
||||||
Authorization: `Token ${useCookie("token").value}`,
|
Authorization: `Token ${useCookie("token").value}`,
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
.then((_resp) => {
|
.then((response) => response.json())
|
||||||
|
.then((_json) => {
|
||||||
emits("closeModal");
|
emits("closeModal");
|
||||||
})
|
})
|
||||||
.catch((err) => alert("Unable to schedule movie. Error:\n" + err));
|
.catch((err) => alert("Unable to schedule movie. Error:\n" + err));
|
||||||
};
|
};
|
||||||
|
|
||||||
// @todo pull the timezone from a user setting
|
|
||||||
const convertToUserTimezone = function (date: Date) {
|
|
||||||
date.toLocaleString("en-US", { timeZone: "America/Chicago" });
|
|
||||||
};
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped></style>
|
<style scoped></style>
|
||||||
|
|
|
||||||
|
|
@ -1,18 +1,22 @@
|
||||||
<template>
|
<template>
|
||||||
<div v-if="props.movie != null" class="sm:m-5 p-10 movie-card neon-border">
|
<div v-if="props.movie != null" class="sm:m-5 p-10 movie-card neon-border">
|
||||||
<div>
|
<div>
|
||||||
<h2 id="modal-title" class="row pb-10 text-center sm:text-left">
|
<h2 id="modal-title" class="row pb-3">
|
||||||
{{ movie.title }} ({{ movie.year }})
|
{{ movie.title }} ({{ movie.year }})
|
||||||
</h2>
|
</h2>
|
||||||
|
|
||||||
<div class="grid sm:grid-cols-2 gap-5">
|
<div class="grid sm:grid-cols-2">
|
||||||
<!-- MODAL POSTER -->
|
<!-- MODAL POSTER -->
|
||||||
<MoviePoster
|
<div class="text-end">
|
||||||
:image="movie.poster"
|
<img
|
||||||
class="max-h-72 max-w-60 sm:max-h-2xl sm:max-w-72 mx-auto sm:mx-0"
|
id="modal-poster"
|
||||||
/>
|
:src="movie.poster"
|
||||||
|
alt="poster"
|
||||||
|
class="pt-5"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="mx-auto sm:mx-none">
|
<div class="pt-5">
|
||||||
<label class="" for="list-picker">Add To List</label><br />
|
<label class="" for="list-picker">Add To List</label><br />
|
||||||
<select id="list-picker" v-model="list_id" class="p-1 text-black">
|
<select id="list-picker" v-model="list_id" class="p-1 text-black">
|
||||||
<option v-for="list in lists" :value="list.id">
|
<option v-for="list in lists" :value="list.id">
|
||||||
|
|
@ -34,11 +38,10 @@
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import type { MovieList } from "~/types/movielist";
|
import type { MovieList } from "~/types/movielist";
|
||||||
import type { Movie } from "~/types/movie";
|
|
||||||
|
|
||||||
const props = defineProps<{ movie: Movie }>();
|
const props = defineProps(["movie"]);
|
||||||
const list_id = ref(0);
|
const list_id = ref(0);
|
||||||
const lists = ref<MovieList[]>(new Array<MovieList>());
|
const lists = defineModel<MovieList[]>("lists", { default: [] });
|
||||||
const emit = defineEmits<{
|
const emit = defineEmits<{
|
||||||
(e: "close-modal"): void;
|
(e: "close-modal"): void;
|
||||||
}>();
|
}>();
|
||||||
|
|
|
||||||
|
|
@ -1,32 +1,23 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="sm:m-5 p-10 movie-card neon-border">
|
<div class="sm:m-5 p-10 movie-card neon-border">
|
||||||
<div>
|
<div>
|
||||||
<LoadingIcon v-if="updating" />
|
<h2 class="text-xl pb-3 text-center sm:text-left">
|
||||||
<h2 class="text-xl pb-10 text-center sm:text-left">
|
|
||||||
{{ movie.title }} ({{ movie.year }})
|
{{ movie.title }} ({{ movie.year }})
|
||||||
</h2>
|
</h2>
|
||||||
<div class="sm:inline-flex sm:space-x-5">
|
<div class="sm:inline-flex sm:space-x-5">
|
||||||
<MoviePoster
|
<img
|
||||||
:image="movie.poster"
|
:src="movie.poster"
|
||||||
class="max-h-80 max-w-60 mx-auto sm:mx-none"
|
alt="movie poster"
|
||||||
|
class="mx-auto sm:mx-0 neon-border"
|
||||||
/>
|
/>
|
||||||
<div class="pt-5 sm:pt-0">
|
<div class="pt-5 sm:pt-0">
|
||||||
<p>{{ movie.plot }}</p>
|
<p>{{ movie.plot }}</p>
|
||||||
|
|
||||||
<ScheduleMovie
|
<ScheduleMovie
|
||||||
v-if="logged_in"
|
v-if="logged_in"
|
||||||
:movie="movie"
|
:movie="movie"
|
||||||
class="mt-5"
|
class="mt-5"
|
||||||
@close-modal="$emit('close-modal')"
|
@close-modal="$emit('close-modal')"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<button
|
|
||||||
v-if="logged_in"
|
|
||||||
class="my-10 btn p-2 rounded"
|
|
||||||
@click="updateMovie"
|
|
||||||
>
|
|
||||||
Refresh movie
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -35,16 +26,11 @@
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import ScheduleMovie from "~/components/forms/ScheduleMovie.vue";
|
import ScheduleMovie from "~/components/forms/ScheduleMovie.vue";
|
||||||
import type { Movie } from "~/types/movie";
|
|
||||||
|
|
||||||
defineProps<{ movie: Movie; updating: boolean }>();
|
const props = defineProps(["movie"]);
|
||||||
const emits = defineEmits(["close-modal", "update-movie"]);
|
const emits = defineEmits(["close-modal"]);
|
||||||
const logged_in = ref(false);
|
const logged_in = ref(false);
|
||||||
|
|
||||||
const updateMovie = function () {
|
|
||||||
emits("update-movie");
|
|
||||||
};
|
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
const token = useCookie("token").value;
|
const token = useCookie("token").value;
|
||||||
if (token) {
|
if (token) {
|
||||||
|
|
|
||||||
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>
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
import { useCookie } from "#app";
|
|
||||||
|
|
||||||
export function hasToken() {
|
|
||||||
const token = useCookie("token").value;
|
|
||||||
return token !== null && token !== undefined && token !== "";
|
|
||||||
}
|
|
||||||
|
|
@ -1,19 +0,0 @@
|
||||||
import { useCookie } from "#app";
|
|
||||||
|
|
||||||
export function logout() {
|
|
||||||
let config = useRuntimeConfig();
|
|
||||||
fetch(`${config.public.apiURL}/auth/logout/`, {
|
|
||||||
method: "POST",
|
|
||||||
headers: {
|
|
||||||
"Content-type": "application/json",
|
|
||||||
Authorization: `Token ${useCookie("token").value}`,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
.then((response) => response)
|
|
||||||
.then((_json) => {
|
|
||||||
let token = useCookie("token");
|
|
||||||
token.value = null;
|
|
||||||
navigateTo("/");
|
|
||||||
})
|
|
||||||
.catch((err) => console.log(err));
|
|
||||||
}
|
|
||||||
|
|
@ -1,17 +1,16 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="container mx-auto">
|
<div class="container mx-auto">
|
||||||
<Navbar />
|
<Navbar/>
|
||||||
<NuxtPage class="mb-32" />
|
<NuxtPage/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Navbar from "~/components/common/navigation/navbar.vue";
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "default",
|
name: "default",
|
||||||
components: { Navbar },
|
}
|
||||||
};
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped></style>
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -9,12 +9,7 @@ export default defineNuxtConfig({
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
modules: ["@nuxtjs/tailwindcss", "@vesp/nuxt-fontawesome"],
|
modules: ["@nuxtjs/tailwindcss"],
|
||||||
fontawesome: {
|
|
||||||
icons: {
|
|
||||||
solid: ["user"],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
css: ["@/assets/css/main.css"],
|
css: ["@/assets/css/main.css"],
|
||||||
compatibilityDate: "2025-04-05",
|
compatibilityDate: "2025-04-05",
|
||||||
|
|
||||||
|
|
@ -29,7 +24,7 @@ export default defineNuxtConfig({
|
||||||
|
|
||||||
runtimeConfig: {
|
runtimeConfig: {
|
||||||
public: {
|
public: {
|
||||||
apiURL: process.env.API_URL || "http://localhost:8000/v1",
|
apiURL: process.env.API_URL || "http://localhost:8000/api",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
||||||
8253
src/package-lock.json
generated
8253
src/package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -8,12 +8,8 @@
|
||||||
"postinstall": "nuxt prepare"
|
"postinstall": "nuxt prepare"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@fortawesome/free-brands-svg-icons": "^6.7.2",
|
|
||||||
"@fortawesome/free-regular-svg-icons": "^6.7.2",
|
|
||||||
"@fortawesome/free-solid-svg-icons": "^6.7.2",
|
|
||||||
"@nuxtjs/tailwindcss": "^6.2.0",
|
"@nuxtjs/tailwindcss": "^6.2.0",
|
||||||
"@types/node": "^22.14.0",
|
"@types/node": "^22.14.0",
|
||||||
"@vesp/nuxt-fontawesome": "^1.2.1",
|
|
||||||
"nuxt": "3.x",
|
"nuxt": "3.x",
|
||||||
"prettier": "3.x",
|
"prettier": "3.x",
|
||||||
"typescript": "^5.8.3",
|
"typescript": "^5.8.3",
|
||||||
|
|
@ -21,8 +17,5 @@
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"lazysizes": "^5.3.2"
|
"lazysizes": "^5.3.2"
|
||||||
},
|
|
||||||
"overrides": {
|
|
||||||
"rollup": "4.44.2"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -54,11 +54,11 @@ import AddMovie from "~/components/modal-content/AddMovie.vue";
|
||||||
import Search from "~/components/admin/search.vue";
|
import Search from "~/components/admin/search.vue";
|
||||||
import Showings from "~/components/admin/showings.vue";
|
import Showings from "~/components/admin/showings.vue";
|
||||||
import Lists from "~/components/admin/lists.vue";
|
import Lists from "~/components/admin/lists.vue";
|
||||||
|
import { useCookie } from "#app";
|
||||||
import type { Movie } from "~/types/movie";
|
import type { Movie } from "~/types/movie";
|
||||||
import Modal from "~/components/common/ui/Modal.vue";
|
import Modal from "~/components/Modal.vue";
|
||||||
import { logout } from "~/composables/logout";
|
|
||||||
|
|
||||||
const modal_movie = ref<Movie | null>(null);
|
const modal_movie = defineModel<Movie>("#movie-modal");
|
||||||
|
|
||||||
const movie_modal = ref<InstanceType<typeof Modal> | null>(null);
|
const movie_modal = ref<InstanceType<typeof Modal> | null>(null);
|
||||||
const current_view = ref("search");
|
const current_view = ref("search");
|
||||||
|
|
@ -72,7 +72,7 @@ const showModal = function (movie: Movie) {
|
||||||
};
|
};
|
||||||
const toggleDisplay = function (element_id: string) {
|
const toggleDisplay = function (element_id: string) {
|
||||||
if (element_id === current_view.value) return;
|
if (element_id === current_view.value) return;
|
||||||
const tabs = ["search", "showings", "lists"];
|
let tabs = ["search", "showings", "lists"];
|
||||||
|
|
||||||
tabs.forEach((value) => {
|
tabs.forEach((value) => {
|
||||||
if (value === element_id) {
|
if (value === element_id) {
|
||||||
|
|
@ -87,6 +87,30 @@ const toggleDisplay = function (element_id: string) {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
const logout = () => {
|
||||||
|
let config = useRuntimeConfig();
|
||||||
|
fetch(`${config.public.apiURL}/auth/logout/`, {
|
||||||
|
method: "POST",
|
||||||
|
headers: {
|
||||||
|
"Content-type": "application/json",
|
||||||
|
Authorization: `Token ${useCookie("token").value}`,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
.then((response) => response)
|
||||||
|
.then((_json) => {
|
||||||
|
let token = useCookie("token");
|
||||||
|
token.value = null;
|
||||||
|
navigateTo("/");
|
||||||
|
})
|
||||||
|
.catch((err) => console.log(err));
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
const token = useCookie("token").value;
|
||||||
|
if (!token) {
|
||||||
|
navigateTo("/");
|
||||||
|
}
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped></style>
|
<style scoped></style>
|
||||||
|
|
|
||||||
|
|
@ -1,81 +1,65 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div v-if="list_id !== 0" class="p-5 sm:p-0">
|
||||||
<LoadingIcon v-if="loading" show-quote="true" />
|
<Modal ref="movie_modal">
|
||||||
<div v-else class="p-5 sm:p-0">
|
<ShowMovie
|
||||||
<ScrollToTop></ScrollToTop>
|
v-if="modal_movie"
|
||||||
<Modal ref="movie_modal">
|
:movie="modal_movie"
|
||||||
<ShowMovie
|
@close-modal="closeModal"
|
||||||
v-if="modal_movie"
|
></ShowMovie>
|
||||||
:movie="modal_movie"
|
</Modal>
|
||||||
:updating="updating"
|
<h2 class="text-xl font-bold pb-5">{{ list.name }}</h2>
|
||||||
@close-modal="closeModal"
|
<div class="grid grid-cols-2 rounded movie-card neon-border p-5">
|
||||||
@update-movie="updateMovie(modal_movie)"
|
<div>
|
||||||
></ShowMovie>
|
<ul class="flex flex-row">
|
||||||
</Modal>
|
<li>
|
||||||
<h2 class="text-xl font-bold pb-5">{{ list?.name }}</h2>
|
<label class="mr-2" for="hide_scheduled">Hide Scheduled</label>
|
||||||
<div
|
<input
|
||||||
v-if="movies.length > 1 && !loading"
|
id="hide_scheduled"
|
||||||
class="grid grid-cols-2 rounded movie-card neon-border p-5"
|
v-model="hide_scheduled"
|
||||||
>
|
type="checkbox"
|
||||||
<div>
|
@change="hideScheduled"
|
||||||
<ul class="flex flex-row">
|
/>
|
||||||
<li>
|
</li>
|
||||||
<label class="mr-2" for="hide_scheduled">Hide Scheduled</label>
|
</ul>
|
||||||
<input
|
|
||||||
id="hide_scheduled"
|
|
||||||
v-model="hide_scheduled"
|
|
||||||
type="checkbox"
|
|
||||||
@change="hideScheduled"
|
|
||||||
/>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<input
|
|
||||||
v-model="movie_query"
|
|
||||||
class="p-1 rounded"
|
|
||||||
placeholder="Filter Movies"
|
|
||||||
type="text"
|
|
||||||
@input="filterMovies"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
<input
|
||||||
<div
|
v-model="movie_query"
|
||||||
v-if="movies.length < 1 && !loading"
|
class="p-1 rounded"
|
||||||
class="mt-10 flex gap-5 flex-col"
|
placeholder="Filter Movies"
|
||||||
>
|
type="text"
|
||||||
No Movies Found
|
@input="filterMovies"
|
||||||
<MovieQuote />
|
/>
|
||||||
</div>
|
|
||||||
<!-- MOVIE LIST -->
|
|
||||||
<ul
|
|
||||||
v-else
|
|
||||||
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.poster"
|
|
||||||
class="rounded movie-card neon-border flex flex-col overflow-hidden"
|
|
||||||
>
|
|
||||||
<!-- POSTER -->
|
|
||||||
<MoviePoster
|
|
||||||
:image="movie.poster"
|
|
||||||
class="flex-shrink-0"
|
|
||||||
@click="showModal(movie)"
|
|
||||||
/>
|
|
||||||
<div class="p-5 flex flex-col justify-between flex-1">
|
|
||||||
<!-- 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.imdb_id)"
|
|
||||||
>
|
|
||||||
X
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</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.imdb_id)"
|
||||||
|
>
|
||||||
|
X
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -84,42 +68,32 @@ import ShowMovie from "~/components/modal-content/ShowMovie.vue";
|
||||||
import "lazysizes";
|
import "lazysizes";
|
||||||
import type { MovieList } from "~/types/movielist";
|
import type { MovieList } from "~/types/movielist";
|
||||||
import type { Movie } from "~/types/movie";
|
import type { Movie } from "~/types/movie";
|
||||||
import Modal from "~/components/common/ui/Modal.vue";
|
import Modal from "~/components/Modal.vue";
|
||||||
import { useCookie } from "#app";
|
|
||||||
import { $fetch } from "ofetch";
|
|
||||||
import MoviePoster from "~/components/MoviePoster.vue";
|
|
||||||
import ScrollToTop from "~/components/common/navigation/ScrollToTop.vue";
|
|
||||||
|
|
||||||
const list_id = ref(0);
|
const list_id = ref(0);
|
||||||
const list = ref<MovieList | null>(null);
|
const list = defineModel<MovieList>("movie_list", { default: [] });
|
||||||
const loading = ref(true);
|
|
||||||
const modal_movie: Ref<Movie | null> = ref(null);
|
const modal_movie: Ref<Movie | null> = ref(null);
|
||||||
const movies = ref<Movie[]>(new Array<Movie>());
|
const movies = defineModel<Movie[] | []>("movies", {
|
||||||
const filtered_movies = ref<Movie[]>(new Array<Movie>());
|
default: [],
|
||||||
|
});
|
||||||
|
const filtered_movies = defineModel<Movie[]>("filtered_movies");
|
||||||
const movie_query = ref("");
|
const movie_query = ref("");
|
||||||
const logged_in = ref(false);
|
const logged_in = ref(false);
|
||||||
const hide_scheduled = ref(false);
|
const hide_scheduled = ref(false);
|
||||||
|
|
||||||
const getList = async function (list_id: number) {
|
const getList = async function (list_id: number) {
|
||||||
loading.value = true;
|
|
||||||
let config = useRuntimeConfig();
|
let config = useRuntimeConfig();
|
||||||
let headers: any = {
|
|
||||||
"Content-type": "application/json",
|
|
||||||
};
|
|
||||||
|
|
||||||
if (typeof useCookie("token").value !== "undefined") {
|
|
||||||
headers["Authorization"] = `Token ${useCookie("token").value}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
$fetch<MovieList>(`${config.public.apiURL}/lists/${list_id}`, {
|
$fetch<MovieList>(`${config.public.apiURL}/lists/${list_id}`, {
|
||||||
method: "GET",
|
method: "GET",
|
||||||
headers: headers,
|
headers: {
|
||||||
|
"Content-type": "application/json",
|
||||||
|
Authorization: `Token ${useCookie("token").value}`,
|
||||||
|
},
|
||||||
})
|
})
|
||||||
.then((data) => {
|
.then((data) => {
|
||||||
list.value = data;
|
list.value = data;
|
||||||
movies.value = data?.movies || new Array<Movie>();
|
movies.value = data?.movies || [];
|
||||||
filtered_movies.value = movies.value;
|
filtered_movies.value = movies.value;
|
||||||
loading.value = false;
|
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
if (err.statusCode === 401) {
|
if (err.statusCode === 401) {
|
||||||
|
|
@ -133,9 +107,9 @@ const getList = async function (list_id: number) {
|
||||||
};
|
};
|
||||||
|
|
||||||
const hideScheduled = function () {
|
const hideScheduled = function () {
|
||||||
if (hide_scheduled.value && movies.value.length > 0) {
|
if (hide_scheduled && movies.value.length > 0) {
|
||||||
let filtered = movies.value.filter((movie) => {
|
let filtered = movies.value.filter((movie) => {
|
||||||
return !movie.has_been_scheduled;
|
return movie.last_watched === null;
|
||||||
});
|
});
|
||||||
if (typeof filtered != "undefined") {
|
if (typeof filtered != "undefined") {
|
||||||
filtered_movies.value = filtered;
|
filtered_movies.value = filtered;
|
||||||
|
|
@ -184,38 +158,6 @@ const removeMovie = async function (movie_id: string) {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const updating = ref(false);
|
|
||||||
const updateMovie = async function (movie: Movie) {
|
|
||||||
let config = useRuntimeConfig();
|
|
||||||
updating.value = true;
|
|
||||||
|
|
||||||
$fetch<Movie>(`${config.public.apiURL}/movies/${movie.id}/`, {
|
|
||||||
method: "PUT",
|
|
||||||
headers: {
|
|
||||||
"Content-type": "application/json",
|
|
||||||
Authorization: `Token ${useCookie("token").value}`,
|
|
||||||
},
|
|
||||||
body: JSON.stringify(movie),
|
|
||||||
})
|
|
||||||
.then((data) => {
|
|
||||||
modal_movie.value = data || [];
|
|
||||||
movies.value = movies.value.map((movie) => {
|
|
||||||
return movie.id === data.id ? data : movie;
|
|
||||||
});
|
|
||||||
filtered_movies.value = movies.value;
|
|
||||||
updating.value = false;
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
if (err.statusCode === 401) {
|
|
||||||
navigateTo("/");
|
|
||||||
}
|
|
||||||
if (err.statusCode === 404) {
|
|
||||||
alert("Unable to update movie");
|
|
||||||
}
|
|
||||||
updating.value = false;
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const filterMovies = function () {
|
const filterMovies = function () {
|
||||||
if (!movie_query) {
|
if (!movie_query) {
|
||||||
filtered_movies.value = movies.value;
|
filtered_movies.value = movies.value;
|
||||||
|
|
@ -243,7 +185,6 @@ onMounted(() => {
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
if (typeof route.params.id === "string") {
|
if (typeof route.params.id === "string") {
|
||||||
const list_param: string = route.params.id;
|
const list_param: string = route.params.id;
|
||||||
|
|
||||||
list_id.value = parseInt(list_param);
|
list_id.value = parseInt(list_param);
|
||||||
getList(list_id.value);
|
getList(list_id.value);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,16 +1,8 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div class="p-5 sm:p-0">
|
||||||
<LoadingIcon
|
<div v-if="lists.length < 1">
|
||||||
v-if="loading"
|
|
||||||
class="w-full p-5 sm:p-0 max-w-2xl"
|
|
||||||
show-quote="true"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div v-if="lists.length < 1 && !loading" class="flex flex-col gap-10">
|
|
||||||
<p>No lists found</p>
|
<p>No lists found</p>
|
||||||
<MovieQuote />
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<ul class="grid grid-cols-2 gap-3 mt-5">
|
<ul class="grid grid-cols-2 gap-3 mt-5">
|
||||||
<li v-for="list in lists" class="movie-card neon-border p-5 rounded">
|
<li v-for="list in lists" class="movie-card neon-border p-5 rounded">
|
||||||
<div class="grid grid-rows-2 gap-3">
|
<div class="grid grid-rows-2 gap-3">
|
||||||
|
|
@ -28,11 +20,8 @@
|
||||||
import type { MovieList } from "~/types/movielist";
|
import type { MovieList } from "~/types/movielist";
|
||||||
import { useCookie } from "#app";
|
import { useCookie } from "#app";
|
||||||
|
|
||||||
const lists = ref<MovieList[]>(new Array<MovieList>());
|
const lists = defineModel<MovieList[]>("movie_list", { default: [] });
|
||||||
const loading = ref(true);
|
|
||||||
|
|
||||||
const updateLists = async function () {
|
const updateLists = async function () {
|
||||||
loading.value = true;
|
|
||||||
let config = useRuntimeConfig();
|
let config = useRuntimeConfig();
|
||||||
let headers: any = {
|
let headers: any = {
|
||||||
"Content-type": "application/json",
|
"Content-type": "application/json",
|
||||||
|
|
@ -47,8 +36,7 @@ const updateLists = async function () {
|
||||||
headers: headers,
|
headers: headers,
|
||||||
})
|
})
|
||||||
.then((data) => {
|
.then((data) => {
|
||||||
lists.value = data || new Array<MovieList>();
|
lists.value = data || [];
|
||||||
loading.value = false;
|
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
if (err.statusCode === 401) {
|
if (err.statusCode === 401) {
|
||||||
|
|
|
||||||
|
|
@ -1,19 +1,44 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="p-5 sm:p-0">
|
<div class="p-5 sm:p-0">
|
||||||
<LoadingIcon v-if="loading" show-quote="true" />
|
<div v-if="schedule && schedule?.showings.length < 1" class="p-5">
|
||||||
<div v-else>
|
<span>No Showings Found</span>
|
||||||
<div
|
</div>
|
||||||
v-if="schedule && schedule?.showings.length < 1 && !loading"
|
<ul class="flex flex-col gap-5">
|
||||||
class="p-5"
|
<li
|
||||||
|
v-for="showing in schedule?.showings"
|
||||||
|
class="p-5 movie-card neon-border"
|
||||||
>
|
>
|
||||||
<span>No Showings Found</span>
|
<div class="sm:grid grid-cols-2 lg:grid-cols-3">
|
||||||
<MovieQuote />
|
<img
|
||||||
</div>
|
:src="showing.movie.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.movie.title }}
|
||||||
|
</h5>
|
||||||
|
<h5 class="text-center sm:text-left mb-3">
|
||||||
|
{{ formatDate(showing.showtime) }}
|
||||||
|
</h5>
|
||||||
|
<span class="">{{ showing.movie.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="getSchedule(true)"
|
||||||
|
>
|
||||||
|
Previous Showings
|
||||||
|
</span>
|
||||||
|
<span id="loader" class="hidden">Loading...</span>
|
||||||
<ul class="flex flex-col gap-5">
|
<ul class="flex flex-col gap-5">
|
||||||
<li
|
<li v-for="showing in past_showings" class="p-5 movie-card neon-border">
|
||||||
v-for="showing in schedule?.showings"
|
|
||||||
class="p-5 movie-card neon-border"
|
|
||||||
>
|
|
||||||
<div class="sm:grid grid-cols-2 lg:grid-cols-3">
|
<div class="sm:grid grid-cols-2 lg:grid-cols-3">
|
||||||
<img
|
<img
|
||||||
:src="showing.movie.poster"
|
:src="showing.movie.poster"
|
||||||
|
|
@ -22,48 +47,13 @@
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<div class="self-center text-left">
|
<div class="self-center text-left">
|
||||||
<h5 class="text-center sm:text-left mb-3 text-xl">
|
<h5 class="text-xl mb-3">{{ showing.movie.title }}</h5>
|
||||||
{{ showing.movie.title }}
|
<h5 class="mb-3">{{ formatDate(showing.showtime) }}</h5>
|
||||||
</h5>
|
|
||||||
<h5 class="text-center sm:text-left mb-3">
|
|
||||||
{{ formatDate(showing.showtime) }}
|
|
||||||
</h5>
|
|
||||||
<span class="">{{ showing.movie.plot }}</span>
|
<span class="">{{ showing.movie.plot }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<!-- PREVIOUS SHOWINGS -->
|
|
||||||
<LoadingIcon v-if="loadingPrevious" />
|
|
||||||
<div v-else id="previous-showings" class="p-5 mt-5 list-group">
|
|
||||||
<span
|
|
||||||
class="block mb-5 hover-pointer underline"
|
|
||||||
@click="getSchedule(true)"
|
|
||||||
>
|
|
||||||
Previous Showings
|
|
||||||
</span>
|
|
||||||
<ul class="flex flex-col gap-5">
|
|
||||||
<li
|
|
||||||
v-for="showing in past_showings"
|
|
||||||
class="p-5 movie-card neon-border"
|
|
||||||
>
|
|
||||||
<div class="sm:grid grid-cols-2 lg:grid-cols-3">
|
|
||||||
<img
|
|
||||||
:src="showing.movie.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.movie.title }}</h5>
|
|
||||||
<h5 class="mb-3">{{ formatDate(showing.showtime) }}</h5>
|
|
||||||
<span class="">{{ showing.movie.plot }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -74,47 +64,51 @@ import type { Schedule } from "~/types/schedule";
|
||||||
import { $fetch } from "ofetch";
|
import { $fetch } from "ofetch";
|
||||||
import { useCookie } from "#app";
|
import { useCookie } from "#app";
|
||||||
|
|
||||||
const schedule = ref<Schedule>();
|
const schedule = defineModel<Schedule>("schedule");
|
||||||
const past_showings = ref<Showing[]>(new Array<Showing>());
|
const past_showings = defineModel<Showing[]>("past_showings", {
|
||||||
const loading = ref(true);
|
default: [],
|
||||||
const loadingPrevious = ref(false);
|
});
|
||||||
const got_previous = ref(false);
|
const got_previous = ref(false);
|
||||||
|
const months = [
|
||||||
|
"January",
|
||||||
|
"February",
|
||||||
|
"March",
|
||||||
|
"April",
|
||||||
|
"May",
|
||||||
|
"June",
|
||||||
|
"July",
|
||||||
|
"August",
|
||||||
|
"September",
|
||||||
|
"October",
|
||||||
|
"November",
|
||||||
|
"December",
|
||||||
|
];
|
||||||
|
|
||||||
const formatDate = function (date_string: string) {
|
const formatDate = function (date_string: string) {
|
||||||
let date = new Date(date_string);
|
let date = new Date(date_string);
|
||||||
//let month = months[date.getMonth()];
|
let month = months[date.getMonth()];
|
||||||
|
|
||||||
//return `${month} ${date.getDate()}, ${date.getFullYear()}`;
|
return `${month} ${date.getDate()}, ${date.getFullYear()}`;
|
||||||
return new Intl.DateTimeFormat("en-US", {
|
|
||||||
month: "long",
|
|
||||||
day: "numeric",
|
|
||||||
year: "numeric",
|
|
||||||
}).format(date);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const getSchedule = async function (previous = false) {
|
const getSchedule = async function (previous = false) {
|
||||||
if (previous) loadingPrevious.value = true;
|
|
||||||
else loading.value = true;
|
|
||||||
|
|
||||||
let config = useRuntimeConfig();
|
let config = useRuntimeConfig();
|
||||||
if (got_previous.value) {
|
if (got_previous.value) {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
document.getElementById("loader")?.classList.toggle("hidden");
|
||||||
|
|
||||||
let params = "";
|
let params = "";
|
||||||
if (previous) params = "?past_showings=true";
|
if (previous) params = "?past_showings=true";
|
||||||
|
|
||||||
let headers: any = {
|
|
||||||
"Content-type": "application/json",
|
|
||||||
};
|
|
||||||
|
|
||||||
if (typeof useCookie("token").value !== "undefined") {
|
|
||||||
headers["Authorization"] = `Token ${useCookie("token").value}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
await $fetch(`${config.public.apiURL}/schedules/1${params}`, {
|
await $fetch(`${config.public.apiURL}/schedules/1${params}`, {
|
||||||
method: "GET",
|
method: "GET",
|
||||||
headers: headers,
|
headers: {
|
||||||
|
Accept: "application/json",
|
||||||
|
"Content-type": "application/json",
|
||||||
|
Authorization: `Token ${useCookie("token").value}`,
|
||||||
|
},
|
||||||
})
|
})
|
||||||
.then((data) => {
|
.then((data) => {
|
||||||
if (previous) {
|
if (previous) {
|
||||||
|
|
@ -122,8 +116,7 @@ const getSchedule = async function (previous = false) {
|
||||||
} else {
|
} else {
|
||||||
schedule.value = data;
|
schedule.value = data;
|
||||||
}
|
}
|
||||||
loading.value = false;
|
document.getElementById("loader")?.classList.toggle("hidden");
|
||||||
loadingPrevious.value = false;
|
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
switch (err.statusCode) {
|
switch (err.statusCode) {
|
||||||
|
|
@ -133,7 +126,6 @@ const getSchedule = async function (previous = false) {
|
||||||
break;
|
break;
|
||||||
case 404:
|
case 404:
|
||||||
alert("Unable to find schedule");
|
alert("Unable to find schedule");
|
||||||
navigateTo("/");
|
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,143 +0,0 @@
|
||||||
<script lang="ts" setup>
|
|
||||||
import { useCookie } from "#app";
|
|
||||||
import type { UserProfile } from "~/types/userProfile";
|
|
||||||
|
|
||||||
const config = useRuntimeConfig();
|
|
||||||
|
|
||||||
const profile = ref<UserProfile | null>(null);
|
|
||||||
const loading = ref(true);
|
|
||||||
|
|
||||||
const getProfile = async function () {
|
|
||||||
await $fetch<UserProfile>(`${config.public.apiURL}/users/profile`, {
|
|
||||||
method: "GET",
|
|
||||||
headers: {
|
|
||||||
"Content-Type": "application/json",
|
|
||||||
Authorization: `Token ${useCookie("token").value}`,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
.then((data) => {
|
|
||||||
profile.value = data;
|
|
||||||
loading.value = false;
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
if (err.statusCode === 401) {
|
|
||||||
useCookie("token").value = null;
|
|
||||||
navigateTo("/");
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const formatDate = function (date_string: string) {
|
|
||||||
return new Date(date_string).toLocaleDateString();
|
|
||||||
};
|
|
||||||
|
|
||||||
onMounted(getProfile);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<LoadingIcon v-if="loading" show-quote="true" />
|
|
||||||
<div v-else>
|
|
||||||
<h2 class="page-header">Profile</h2>
|
|
||||||
<div id="profile-card" class="movie-card neon-border">
|
|
||||||
<div id="user-data">
|
|
||||||
<div id="profile-picture">
|
|
||||||
<img
|
|
||||||
alt="profile image"
|
|
||||||
class="user-icon neon-border"
|
|
||||||
src="https://placecage.lucidinternets.com/g/200/200"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<ul class="profile-details">
|
|
||||||
<li class="user-detail">
|
|
||||||
<label for="name">Name</label>
|
|
||||||
<span id="name">{{ profile?.name || profile?.username }}</span>
|
|
||||||
</li>
|
|
||||||
<li class="user-detail">
|
|
||||||
<label for="username">Username</label>
|
|
||||||
<span id="username">{{ profile?.username }}@movienight.social</span>
|
|
||||||
</li>
|
|
||||||
<li class="user-detail">
|
|
||||||
<label for="date-joined">Date Joined</label>
|
|
||||||
<span id="date-joined">{{
|
|
||||||
formatDate(profile?.date_joined || "")
|
|
||||||
}}</span>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<hr class="neon-border my-5" />
|
|
||||||
|
|
||||||
<div id="extra-fields">
|
|
||||||
<div id="movielists">
|
|
||||||
<h3 class="section-header">Lists</h3>
|
|
||||||
<ul id="movielist-list">
|
|
||||||
<li v-for="list in profile?.lists">
|
|
||||||
<NuxtLink :to="`/lists/${list.id}`">{{ list.name }}</NuxtLink>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
label {
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 1.2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-header {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
line-height: calc(2 / 1.5);
|
|
||||||
padding-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
#user-data {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-detail {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-icon {
|
|
||||||
object-fit: cover;
|
|
||||||
border-radius: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.profile-details {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 1rem;
|
|
||||||
list-style: none;
|
|
||||||
margin: 3rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.movie-card {
|
|
||||||
padding: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.movie-review {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
#extra-fields {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (width >= 48rem) {
|
|
||||||
#user-data {
|
|
||||||
flex-direction: row;
|
|
||||||
gap: 5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,50 +0,0 @@
|
||||||
<script lang="ts" setup>
|
|
||||||
import PasswordResetForm from "~/components/forms/PasswordReset.vue";
|
|
||||||
|
|
||||||
const timezones = Intl.supportedValuesOf("timeZone");
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<h2 class="page-header">Settings</h2>
|
|
||||||
|
|
||||||
<div class="movie-card neon-border">
|
|
||||||
<form action="#" class="flex flex-col gap-5">
|
|
||||||
<label class="text-bold text-xl" for="site-name">Site Name</label>
|
|
||||||
<input
|
|
||||||
id="site-name"
|
|
||||||
class="p-3"
|
|
||||||
name="site-name"
|
|
||||||
placeholder="Movie Night"
|
|
||||||
type="text"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<h3 class="text-bold text-xl">Locale</h3>
|
|
||||||
<!--SET TIMEZONE -->
|
|
||||||
<div class="flex flex-col gap-2">
|
|
||||||
<label for="timezone">Timezone</label>
|
|
||||||
<select id="timezone" name="timezone">
|
|
||||||
<option v-for="timezone in timezones" :value="timezone">
|
|
||||||
{{ timezone }}
|
|
||||||
</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<hr class="my-5 neon-border" />
|
|
||||||
|
|
||||||
<PasswordResetForm />
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.movie-card {
|
|
||||||
padding: 2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
#timezone {
|
|
||||||
color: black;
|
|
||||||
padding: 1em;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -10,5 +10,5 @@ export type Movie = {
|
||||||
actors: string;
|
actors: string;
|
||||||
plot: string;
|
plot: string;
|
||||||
poster: string;
|
poster: string;
|
||||||
has_been_scheduled: boolean;
|
last_watched: string;
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -1,8 +0,0 @@
|
||||||
import type { MovieList } from "~/types/movielist";
|
|
||||||
|
|
||||||
export type UserProfile = {
|
|
||||||
name: string;
|
|
||||||
username: string;
|
|
||||||
date_joined: string;
|
|
||||||
lists: MovieList[];
|
|
||||||
};
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue