Frontend fich

store-service/routes/routes.py

@@ -162,3 +162,14 @@ def open_library_page():
 
 	user_games = get_user_games_in_library(session['user_id'])
 	return render_template('Library.html', user_games=[Game(x) for x in user_games])
+
+
+@routes_blueprint.route('/studio', methods=['GET'])
+def open_studio_page():
+	print(f'is user logged in:{is_user_logged_in()}')
+	if not is_user_logged_in():
+		return redirect(url_for('routes.login_register'))
+	# TODO:
+	# pic = get_profile_picture(session['user_id'])
+	# TODO: add to render_template uid=session['user_id'], upicture=pic
+	return render_template('Studio.html')

store-service/static/css/base.css

@@ -63,6 +63,16 @@ input[type="password"] {
   background-color: var(--white-transparent);
 }
 
+input[type="tel"] {
+  width: 100%;
+  border-radius: var(--border-radius-sm);
+}
+
+textarea {
+  width: 100%;
+  border-radius: var(--border-radius-md);
+}
+
 .form {
   display: none;
 }

store-service/static/css/user.css

@@ -47,12 +47,4 @@
   flex: 1;
   min-height: 60vh;
   overflow-y: auto;
-}
-
-.section_user input[type="tel"] {
-  width: 100%;
-}
-
-.section_user input[type=file]::file-selector-button {
-  display: none;
 }

store-service/static/javascripts/Studio.js

@@ -1,11 +1,45 @@
-function toggleEditMode() {
-  var gamesSection = document.getElementById('games-section');
-  var editForm = document.getElementById('edit-form');
-  if (gamesSection.style.display === 'none') {
-    gamesSection.style.display = 'block';
-    editForm.style.display = 'none';
-  } else {
-    gamesSection.style.display = 'none';
-    editForm.style.display = 'block';
+document.addEventListener('DOMContentLoaded', function () {
+  // File-upload-label with change text
+  const fileInput = document.getElementById('studio-avatar');
+  const fileLabel = document.querySelector('.file-upload-label');
+
+  fileInput.addEventListener('change', function() {
+    if (fileInput.files.length > 0) {
+       fileLabel.textContent = fileInput.files[0].name
+    } else {
+        fileLabel.textContent = 'Click for download image'
+    }
+  });
+
+  // Change forms
+  const formButton = document.querySelectorAll('.button_form');
+  const forms = document.querySelectorAll('.form');  
+
+  function showForm(formId) {
+    forms.forEach(form => {
+      form.classList.remove('active');
+      if (form.id === formId) {
+        form.classList.add('active');
+      }
+    });
   }
-}
+
+  function setActiveButton(button) {
+    formButton.forEach(btn => btn.classList.remove('active'));
+      button.classList.add('active');
+  }
+
+  formButton.forEach(button => {
+    button.addEventListener('click', function () {
+      const formId = this.getAttribute('data-form');
+      showForm(formId);
+      setActiveButton(this);
+    });
+  });
+
+  const activeForm = document.querySelector('.form.active');
+  if (activeForm) {
+    const activeBtn = document.querySelector(`[data-form="${activeForm.id}"]`);
+    setActiveButton(activeBtn);
+  }
+});

store-service/static/javascripts/User.js

@@ -47,10 +47,4 @@ document.addEventListener('DOMContentLoaded', function () {
 function check_int(value) {
   value = Math.max(0, Math.min(2147483647 , parseInt(value)));
   return isNaN(value) ? 0 : value;;
-}
-
-document.addEventListener('DOMContentLoaded', function() {
-
-
-
-});
+}

store-service/templates/Cart.html

@@ -33,19 +33,20 @@ <h1 class="game-hub"></h1>
 
     </header>
 
-    <div class="main-content">
-      <div class="container_cart">
-        
-        <div class="cart_info">
-          <div class="total">Cost total: </div>
-          <div class="total">{{total // 100}}.{{total % 100}} RUB</div>
-          <form action="/cart/pay" method="POST">
-            <button class="button_common pay" type="submit">
-              Pay
-            </button>
-          </form>
-        </div>
+  <div class="main-content">
+		<div class="container_cart">
+			
+			<div class="cart_info">
+        <div class="total">Cost total: </div>
+				<div class="total">{{total // 100}}.{{total % 100}} RUB</div>
+        <form action="/cart/pay" method="POST">
+          <button class="button_common pay" type="submit">
+            Pay
+          </button>
+        </form>
+      </div>
 
+      <div class="cart-list">
         {% for game in games %}
         <div class="cart-item">
           <img src={{url_for('static', filename='images/games/{game_id}/{cover}'.format(game_id=game.game_id, cover=game.cover))}} alt="Game Icon" class="game-picture">
@@ -59,8 +60,9 @@ <h1 class="game-hub"></h1>
           </form>
         </div>
         {% endfor %}
-
       </div>
-    </div>
+	  </div>
+  </div>
+
 	</body>
 </html>

store-service/templates/Studio.html

@@ -30,7 +30,7 @@ <h1 class="game-hub"></h1>
     </div>
   </header>
 
-  <main class="main-content">
+  <div class="main-content">
     <div class="container_user">
       <div class="user_info">
         {# TODO: <img src="{{ url_for('static', filename='images/studios/{avatar}'.format(avatar=studio.avatar)) }}" alt="Studio Logo" class="user_image"> #}
@@ -39,17 +39,17 @@ <h1 class="game-hub"></h1>
           <div class="user_info_text">Studio Name{# TODO: {studio.name}#}</div>
         </div>
         <div class="user_info_text">Games:<br/>5{# TODO: {studio.games|length} #}</div>
-        <button class="button_common" onclick="toggleEditMode()">Edit</button>
+        <button class="button_common button_form" data-form="edit-section">Edit</button>
       </div>
 
       <div class="button_container">
-        <button class="button_common active">Games</button>
-        <button class="button_common">About</button>
+        <button class="button_common button_form active" data-form="games-section">Games</button>
+        <button class="button_common button_form" data-form="about-section">About</button>
         <button class="button_common">Add game</button>
       </div>
 
       <div class="section_user">
-        <div class="games_section" id="games-section">
+        <div class="games_section form active" id="games-section">
           <h2>Games by Studio Name{# TODO: {studio.name}#}</h2>
 						<ul>
 							{# TODO:
@@ -63,25 +63,36 @@ <h2>Games by Studio Name{# TODO: {studio.name}#}</h2>
 						</ul>
         </div>
 
-        <div id="edit-form" style="display: none;">
+        <div class="form" id="about-section">
+          <p>About studio...</p>
+        </div>
+
+        <div class="form" id="edit-section">
           <form action="{# TODO:{url_for('update_studio', studio_id=studio.id)}#}" method="POST" enctype="multipart/form-data">
-            <label for="studio-name">Studio Name:</label>
-            <input type="text" id="studio-name" name="name" value="{# TODO: {studio.name} #}" required>
-
+
             <label for="studio-description">Description:</label>
             <textarea id="studio-description" name="description" rows="4" required>{# TODO:{studio.description}#}</textarea>
 
-            <label for="studio-avatar">Studio Logo:</label>
-            <input type="file" id="studio-avatar" name="avatar" accept="image/*">
+
+            <label for="studio-avatar">Studio Avatar:</label>
+            <div class="file-upload-container">
+              <input type="file" id="studio-avatar" name="avatar" accept="image/*">
+              <label for="studio-avatar" class="file-upload-label">
+                  Click for download
+              </label>
+            </div>
 
-            <button type="submit" class="button_common">Save</button>
-            <button type="button" class="button_common" onclick="toggleEditMode()">Cancel</button>
+            <div class="chose-buttons">
+              <button type="submit" class="button_common">Save</button>
+              <button class="button_common button_form" data-form="games-section">Cancel</button>
+            </div>
           </form>
+
         </div>
 
       </div>
     </div>
-  </main>
+  </div>
 
   <script src="{{url_for('static', filename='javascripts/Studio.js')}}"></script>
 

store-service/templates/User.html

@@ -47,7 +47,9 @@ <h1 class="game-hub"></h1>
 
 			<div class="button_container">
 				<button class="button_common button_form" data-form="replenishment">Replenishment</button>
-				<button class="button_common">Workshop</button>
+				<form action="/studio">
+					<button class="button_common">Workshop</button>
+				</form>
 				<a href="{{url_for('routes.logout')}}">
 					<button class="button_common">Logout</button>
 				</a>
@@ -99,7 +101,6 @@ <h1 class="game-hub"></h1>
 
 			</div>
 
-
 		</div>
   <!-- END USER DATA -->
   </div>