shirt upload wip

singharaj-usai · Oct 6, 2024 · 8553f29 · 8553f29
1 parent 55ca12d
commit 8553f29
Show file tree

Hide file tree

Showing 8 changed files with 468 additions and 2 deletions.
diff --git a/.idea/.name b/.idea/.name
diff --git a/client/html/pages/upload/place.html → client/html/pages/upload/place/place.html b/client/html/pages/upload/place.html → client/html/pages/upload/place/place.html
diff --git a/client/html/pages/upload/shirt/shirt.html b/client/html/pages/upload/shirt/shirt.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Upload Shirt - Valkyrie</title>
+
+    <!-- Meta Tags -->
+    <meta name="description" content="Upload your game to Valkyrie and share it with the community.">
+    <meta name="keywords" content="Valkyrie, game upload, user-generated content">
+    <meta name="author" content="Valkyrie">
+
+    <!-- Stylesheets -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/paper/bootstrap.min.css" id="theme-stylesheet">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
+
+    <!-- Favicon -->
+    <link rel="icon" href="/images/Valkyrie.ico" type="image/x-icon">
+
+    <!-- Particles.js CSS -->
+    <style>
+        #particles-js {
+            position: fixed;
+            width: 100%;
+            height: 100%;
+            background-color: #f8f8f8;
+            z-index: -1;
+        }
+    </style>
+</head>
+<body>
+    <!-- Particles.js container -->
+    <div id="particles-js"></div>
+
+    <!-- Navigation -->
+    <div id="navbar-container"></div>
+
+  <!-- Access Key Modal -->
+<div id="access-key-modal" class="modal fade" tabindex="-1" role="dialog">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+          <h4 class="modal-title">Enter Access Key</h4>
+          <p>You must enter the access key to upload a game. Only admins can provide you with the access key.</p>
+        </div>
+        <div class="modal-body">
+          <form id="access-key-form">
+            <div class="form-group">
+              <label for="access-key">Access Key:</label>
+              <input type="password" class="form-control" id="access-key" required>
+            </div>
+            <div class="text-right">
+              <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
+              <button type="submit" class="btn btn-primary">Submit</button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  </div>
+
+    <div id="content-wrapper" style="display: none;">
+
+    <!-- Main Content -->
+    <div class="container" style="margin-top: 70px;">
+        <div class="panel panel-primary">
+            <div class="panel-heading">
+                <h3 class="panel-title">Upload Shirt</h3>
+            </div>
+            <div class="panel-body">
+                <div id="alert-container"></div>
+                <form id="upload-form" enctype="multipart/form-data">
+                    <div class="form-group">
+                        <label for="title">Shirt Title:</label>
+                        <input type="text" class="form-control" id="title" name="title" required maxlength="100">
+                    </div>
+                    <div class="form-group">
+                        <label for="description">Shirt Description:</label>
+                        <textarea class="form-control" id="description" name="description" rows="5" required maxlength="1000"></textarea>
+                    </div>
+
+                    <div class="form-group">
+                        <label for="thumbnail">Shirt Image (Max 5MB, PNG format):</label>
+                        <input type="file" class="form-control" id="thumbnail" name="thumbnail" accept="image/png" required>
+                        <small class="help-block">Upload your shirt image here. It should be a PNG file.</small>
+                    </div>
+
+                    <button type="submit" class="btn btn-primary">Upload Shirt</button>
+                </form>
+            </div>
+        </div>
+    </div>
+    </div>
+
+    <!-- Scripts -->
+    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/particles.min.js"></script>
+    <script src="/js/theme-loader.js"></script>
+    <script src="/js/auth/auth.js"></script>
+<!-- Other script references -->
+<script src="/js/upload/accesskey.js"></script>
+<script src="/js/upload/shirts/uploadform.js"></script>
+<script src="/js/upload/alert.js"></script>
+<script src="/js/upload/shirts/init.js"></script>    
+<script src="/js/particles-config.js"></script>
+
+</body>
+</html>
diff --git a/client/js/upload/shirts/init.js b/client/js/upload/shirts/init.js
@@ -0,0 +1,20 @@
+$(document).ready(function () {
+    const accessKey = localStorage.getItem('uploadAccessKey');
+    if (!accessKey) {
+        showAccessKeyModal();
+    } else {
+        verifyAccessKey(accessKey);
+    }
+
+    $('#access-key-form').on('submit', function (e) {
+        e.preventDefault();
+        const enteredKey = $('#access-key').val();
+        verifyAccessKey(enteredKey);
+    });
+
+    $('#access-key-modal').on('hide.bs.modal', function (e) {
+        if (!localStorage.getItem('uploadAccessKey')) {
+            window.location.href = '/';
+        }
+    });
+});
diff --git a/client/js/upload/shirts/uploadform.js b/client/js/upload/shirts/uploadform.js
@@ -0,0 +1,47 @@
+function initializeUploadForm() {
+    $('#upload-form').on('submit', function (e) {
+        e.preventDefault();
+
+        const formData = new FormData(this);
+        formData.append('year', $('input[name="year"]:checked').val());
+        const token = localStorage.getItem('token');
+        const accessKey = localStorage.getItem('uploadAccessKey');
+
+        // Validate file size
+        const thumbnailFile = $('#thumbnail')[0].files[0];
+
+        if (thumbnailFile && thumbnailFile.size > 5 * 1024 * 1024) {
+            showAlert('danger', 'Thumbnail file size must be less than 5MB');
+            return;
+        }
+
+        $.ajax({
+            url: '/api/shirt/upload',
+            method: 'POST',
+            data: formData,
+            contentType: false,
+            processData: false,
+            headers: {
+                'Authorization': `Bearer ${token}`,
+                'X-Access-Token': accessKey
+            },
+            success: function (response) {
+                showAlert('success', `Shirt uploaded successfully! Asset ID: ${response.assetId}`);
+                setTimeout(() => {
+                    window.location.href = `/shirt?id=${response.shirtId}`;
+                }, 2000);
+            },
+            error: function (xhr, status, error) {
+                let errorMessage = 'Unknown error';
+                if (xhr.responseJSON && xhr.responseJSON.error) {
+                    errorMessage = xhr.responseJSON.error;
+                    if (xhr.responseJSON.details) {
+                        errorMessage += ': ' + xhr.responseJSON.details;
+                    }
+                }
+                console.error('Upload error:', errorMessage);
+                showAlert('danger', 'Error uploading game: ' + errorMessage);
+            }
+        });
+    });
+}
diff --git a/server/functions/api/models/Shirt.js b/server/functions/api/models/Shirt.js
@@ -0,0 +1,41 @@
+const mongoose = require('mongoose');
+
+const shirtSchema = new mongoose.Schema({
+    title: {
+        type: String,
+        required: true,
+        trim: true
+    },
+    description: {
+        type: String,
+        required: true,
+        trim: true
+    },
+    thumbnailUrl: {
+        type: String,
+        required: true
+    },
+    creator: {
+        type: mongoose.Schema.Types.ObjectId,
+        ref: 'User',
+        required: true
+    },
+    createdAt: {
+        type: Date,
+        default: Date.now
+    },
+    updatedAt: {
+        type: Date,
+        default: Date.now
+    },
+    assetId: {
+        type: Number,
+        required: true,
+        unique: true
+    },
+});
+
+
+const Shirt = mongoose.model('Shirt', shirtSchema);
+
+module.exports = Shirt;
diff --git a/server/functions/api/routes/pages.js b/server/functions/api/routes/pages.js
@@ -36,8 +36,10 @@ router.get("/my/friends", (req, res) => sendHtmlFile(res, "pages/my/friends.html
 router.get("/my/messages", (req, res) => sendHtmlFile(res, "pages/my/messages.html"));
 router.get("/messages/compose", (req, res) => sendHtmlFile(res, "pages/my/compose/compose.html"));
 
-// Upload page
-router.get("/upload/place", (req, res) => sendHtmlFile(res, "pages/upload/place.html"));
+// Upload pages
+router.get("/upload/place", (req, res) => sendHtmlFile(res, "pages/upload/place/place.html"));
+router.get("/upload/shirt", (req, res) => sendHtmlFile(res, "pages/upload/shirt/shirt.html"));
+
 
 router.get("/upload", (req, res) => sendHtmlFile(res, "pages/upload/index.html"));