Remove old stuff
This commit is contained in:
@@ -1,18 +0,0 @@
|
||||
<div class="center">
|
||||
<div class="big-frame background-border text-frame">
|
||||
<p><strong>What is the game</strong></p>
|
||||
<p style="padding-left: 30px;">Project-Mist is a survival game. Kind of like a battle royal in a sense but, think of it backwards. And no I know what your thinking. Its not the first person to die wins. No instead its a never ending survival game where you can free roam and build structures. The catch is, the person who has the highest stats [i.e A combination of kills, survival time] has a marker placed on their forhead.</p>
|
||||
<p><strong>How will the game play</strong></p>
|
||||
<p style="padding-left: 30px;">When you join the game you will be able to customize your character. There you can set a default loadout for your player. This will be the spawn weapon and gear. After that you will drop into the map with other players to fend for your life. The kill-leader will be marked loosely on the mini-map. You can choose to go after the kill leader or you can choose to loot first. The choice is yours. But be aware that if you survive long enough you will become the new kill leader.</p>
|
||||
<p><strong>Current Idea Board *SUBJECT TO CHANGE*</strong></p>
|
||||
<p>Survival Game<br />look at item to pick up 'e' for third person and click for third [No nearby]<br />normal weapons with bullet drop bullet travel time<br />snipers but rare [Maybe special]</p>
|
||||
<p>Abilities selectable at spawn<br /> a max 20 credit slider where you can spend them on traits<br /> Stamina -> run for longer distances<br /> Strength -> carry more weight<br /> Vitality -> Have more base health<br /> Stealth -> Approximate location on map is bigger</p>
|
||||
<p>More weight slows player some<br />Backpacks -> Add slots but not weight</p>
|
||||
<p>Oddball style game<br /> Map that shows the relitive area of the top player</p>
|
||||
<p>spawn with classes<br /> 2 mags<br /> no attachments<br /> unlock guns with experience</p>
|
||||
<p>no health regen<br />final hit headshots = 20 credits<br />final hit bodyshots = 10 credits</p>
|
||||
<p>classes require credits to spawn with better stuff<br />inventory and credits are transferrable between servers and sessions<br />combat loggging - if leave in combat start from scratch<br />one dynamicly roaming entity of the night ( Impossible to kill, when near heart starts pumping and vinegrette )<br /> goes after people possible to get away<br />Dyanmic day and night cycle<br />Dynamic weather ( rain, fog, thunder, lightning )<br />floods that cause roaring rivers to fill that cannot be swam<br />Fires that char trees(no leaves), regrows in 3ish days<br />Master leaderboard in the main menu of top players per rank<br />Ranked lobby ( Disabled until player base )<br />small towns around a main centralized area( ie city or temple )<br />large servers<br />random spawned skin boxes that require credits to open<br />purchasable skins<br />bullet penatration on certain materials<br />bullet reflection on certain materials<br />No kill leader until you get at least 2 kills minimum</p>
|
||||
<p>Tournament mode<br /> all players spawn at the same time<br /> hold oddball for 30mins total</p>
|
||||
<p>server quits introducing people into game after 5 hrs. (last man standing mode)<br /> last person in server wins<br /> on death quit to new server<br /> everyone becomes oddball<br /> less players alive equal less oddball area</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,19 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { Router, ActivatedRoute } from '@angular/router';
|
||||
import { Title } from '@angular/platform-browser';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
@Component({
|
||||
selector: 'project-mist',
|
||||
templateUrl: './mist.component.html',
|
||||
imports: [ FormsModule, CommonModule ]
|
||||
})
|
||||
export class MistComponent {
|
||||
|
||||
constructor( private http: HttpClient, private router: Router, private route: ActivatedRoute, private title: Title ) {
|
||||
this.title.setTitle("Mist | Mistox");
|
||||
};
|
||||
|
||||
}
|
||||
@@ -1,50 +0,0 @@
|
||||
<div class="center">
|
||||
<div class="column-content">
|
||||
<form class="big-frame background-border" style="width: 520px;" #accountForm="ngForm" (ngSubmit)="onSubmit()">
|
||||
<h3>Edit Item</h3>
|
||||
|
||||
<div class="frame-item">
|
||||
<input type="text" [(ngModel)]="newItem.name" name="ItemName" placeholder=" " />
|
||||
<label>Item Name</label>
|
||||
</div>
|
||||
|
||||
<div class="frame-item">
|
||||
<input type="number" [(ngModel)]="newItem.cost" name="ItemCost" placeholder=" " />
|
||||
<label>Cost</label>
|
||||
</div>
|
||||
|
||||
<div class="frame-item">
|
||||
<input type="text" [(ngModel)]="newItem.url" name="itemURL" placeholder=" " />
|
||||
<label>URL</label>
|
||||
</div>
|
||||
|
||||
<div class="frame-item">
|
||||
<textarea [(ngModel)]="newItem.description" name="ItemDesc" cols="40" placeholder=" " ></textarea>
|
||||
<label>Description</label>
|
||||
</div>
|
||||
|
||||
<div class="frame-item">
|
||||
<div id="FileUploadPlaceholder" ></div>
|
||||
<input #FileUpload type="file" (change)="onFileSelected($event)" accept="image/*" multiple />
|
||||
</div>
|
||||
|
||||
<div class="flex-row">
|
||||
<div class="frame-button">
|
||||
<input class="submit" type="submit" value="Update Item" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul *ngIf="errorMsgs.length > 0" >
|
||||
<li *ngFor="let msg of errorMsgs" >{{ msg }}</li>
|
||||
</ul>
|
||||
</form>
|
||||
|
||||
<!-- Finish file preview for uploads -->
|
||||
<div class="img-frame">
|
||||
<div *ngFor="let cur of imagePreviews" class="image-holder">
|
||||
<input class="delete-button" type="button" value="X" (click)="RemovePhoto(cur)" />
|
||||
<img [src]="cur" alt="Image Preview" style="max-width: 200px;"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,128 +0,0 @@
|
||||
import { Component, ElementRef, ViewChild } from '@angular/core';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { Router, ActivatedRoute } from '@angular/router';
|
||||
import { Title } from '@angular/platform-browser';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { Authentication } from '../../../../services/Authentication';
|
||||
import { Product } from 'app/models/Company';
|
||||
|
||||
@Component({
|
||||
selector: 'item-edit',
|
||||
templateUrl: './edit.component.html',
|
||||
imports: [ FormsModule, CommonModule ]
|
||||
})
|
||||
export class EditItemComponent {
|
||||
@ViewChild('FileUpload') InputDOM!: ElementRef<HTMLInputElement>;
|
||||
|
||||
readonly maxFileMB = 16;
|
||||
|
||||
newItem: Product = new Product();
|
||||
errorMsgs: string[] = [];
|
||||
|
||||
constructor( private http: HttpClient, private router: Router, private route: ActivatedRoute, private title: Title, public auth: Authentication ) {
|
||||
this.title.setTitle("Edit | ADMIN");
|
||||
this.route.queryParams.subscribe(params => {
|
||||
this.newItem.id = params['ProductID'] || '';
|
||||
});
|
||||
|
||||
// If user is not logged in -> route home
|
||||
if (!auth.isLoggedIn){
|
||||
router.navigate(["/"]);
|
||||
}
|
||||
|
||||
// If user is not Admin -> route home
|
||||
if (auth.loggedInUser.siteData.role != "Admin"){
|
||||
router.navigate(["/"]);
|
||||
}
|
||||
|
||||
// Load product
|
||||
const formData = new FormData();
|
||||
formData.append("productID", this.newItem.id.toString());
|
||||
this.http.post<Product>( "api/product/get", formData ).subscribe({
|
||||
next: async (data) => {
|
||||
this.newItem = data;
|
||||
this.newItem.images.forEach(img => {
|
||||
http.get("api/productimage/get?ProductID=" + img.productID + "&ImageID=" + img.imageID, { responseType: 'blob' }).subscribe(blob => {
|
||||
img.imageSrc = URL.createObjectURL(blob);
|
||||
this.imagePreviews.push(img.imageSrc);
|
||||
this.selectedFiles.push(new File([blob], "EmptyName", {type: "image/jpeg"}));
|
||||
});
|
||||
});
|
||||
},
|
||||
error: err => {
|
||||
console.log("Err loading product: ", err);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
sleep(ms: number) {
|
||||
return new Promise(resolve => setTimeout(resolve, ms));
|
||||
}
|
||||
|
||||
selectedFiles: File[] = [];
|
||||
imagePreviews: string[] = [];
|
||||
onFileSelected(event: Event){
|
||||
const fileInput = event.target as HTMLInputElement;
|
||||
|
||||
if (!fileInput.files?.length){
|
||||
return;
|
||||
}
|
||||
|
||||
for (let i=0; i<fileInput.files.length; i++){
|
||||
let file = fileInput.files[i];
|
||||
if (file.size > this.maxFileMB * 1024 * 1024){
|
||||
this.errorMsgs.push("File exceeds max file size of 16MB");
|
||||
continue;
|
||||
}
|
||||
// No issues add file to the list
|
||||
this.selectedFiles.push( file );
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onload= () => {
|
||||
this.imagePreviews.push(reader.result as string);
|
||||
}
|
||||
reader.readAsDataURL(file);
|
||||
|
||||
this.InputDOM.nativeElement.value = '';
|
||||
}
|
||||
}
|
||||
|
||||
RemovePhoto(imagePreview: string){
|
||||
let i = this.imagePreviews.indexOf(imagePreview);
|
||||
this.imagePreviews.splice(i, 1);
|
||||
this.selectedFiles.splice(i, 1);
|
||||
}
|
||||
|
||||
onSubmit(){
|
||||
const formData = new FormData();
|
||||
// Append non-file fields
|
||||
formData.append("Name", this.newItem.name);
|
||||
formData.append("Description", this.newItem.description);
|
||||
formData.append("Cost", this.newItem.cost.toString());
|
||||
formData.append("Url", this.newItem.url);
|
||||
|
||||
// Add image fileds
|
||||
if (this.selectedFiles.length > 0){
|
||||
for(let i=0; i<this.selectedFiles.length; i++){
|
||||
formData.append("images", this.selectedFiles[i], this.selectedFiles[i].name);
|
||||
};
|
||||
}
|
||||
|
||||
// Proccess data
|
||||
this.http.post<boolean>( "api/product/create", formData ).subscribe({
|
||||
next: async (data) => {
|
||||
if (data == true){
|
||||
this.errorMsgs = ["Product Created Successfully"];
|
||||
await this.sleep(3000);
|
||||
this.router.navigate(["/catalog"]);
|
||||
}else{
|
||||
this.errorMsgs = ["Error has ocurred"];
|
||||
}
|
||||
},
|
||||
error: err => {
|
||||
console.log("New Product Err: ", err);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -1,50 +0,0 @@
|
||||
<div class="center">
|
||||
<div class="column-content">
|
||||
<form class="big-frame background-border" style="width: 520px;" #accountForm="ngForm" (ngSubmit)="onSubmit()">
|
||||
<h3>Create New Item</h3>
|
||||
|
||||
<div class="frame-item">
|
||||
<input type="text" [(ngModel)]="newItem.name" name="ItemName" placeholder=" " />
|
||||
<label>Item Name</label>
|
||||
</div>
|
||||
|
||||
<div class="frame-item">
|
||||
<input type="number" [(ngModel)]="newItem.cost" name="ItemCost" placeholder=" " />
|
||||
<label>Cost</label>
|
||||
</div>
|
||||
|
||||
<div class="frame-item">
|
||||
<input type="text" [(ngModel)]="newItem.url" name="itemURL" placeholder=" " />
|
||||
<label>URL</label>
|
||||
</div>
|
||||
|
||||
<div class="frame-item">
|
||||
<textarea [(ngModel)]="newItem.description" name="ItemDesc" cols="40" placeholder=" " ></textarea>
|
||||
<label>Description</label>
|
||||
</div>
|
||||
|
||||
<div class="frame-item">
|
||||
<!-- Need to fix for image file upload -->
|
||||
<div id="FileUploadPlaceholder" ></div>
|
||||
<input type="file" (change)="onFileSelected($event)" accept="image/*" multiple />
|
||||
</div>
|
||||
|
||||
<div class="flex-row">
|
||||
<div class="frame-button">
|
||||
<input class="submit" type="submit" value="Create Item" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul *ngIf="errorMsgs.length > 0" >
|
||||
<li *ngFor="let msg of errorMsgs" >{{ msg }}</li>
|
||||
</ul>
|
||||
</form>
|
||||
|
||||
<!-- Finish file preview for uploads -->
|
||||
<div class="img-frame">
|
||||
<div *ngFor="let cur of imagePreviews" class="image-holder">
|
||||
<img [src]="cur" alt="Image Preview" style="max-width: 200px;"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,101 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { Router, ActivatedRoute } from '@angular/router';
|
||||
import { Title } from '@angular/platform-browser';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { Authentication } from '../../../../services/Authentication';
|
||||
import { Product } from 'app/models/Company';
|
||||
|
||||
@Component({
|
||||
selector: 'item-new',
|
||||
templateUrl: './new.component.html',
|
||||
imports: [ FormsModule, CommonModule ]
|
||||
})
|
||||
export class NewItemComponent {
|
||||
|
||||
readonly maxFileMB = 16;
|
||||
|
||||
newItem: Product = new Product();
|
||||
errorMsgs: string[] = [];
|
||||
|
||||
constructor( private http: HttpClient, private router: Router, private route: ActivatedRoute, private title: Title, public auth: Authentication ) {
|
||||
this.title.setTitle("New | ADMIN");
|
||||
|
||||
// If user is not logged in -> route home
|
||||
if (!auth.isLoggedIn){
|
||||
router.navigate(["/"]);
|
||||
}
|
||||
|
||||
// If user is not Admin -> route home
|
||||
if (auth.loggedInUser.siteData.role != "Admin"){
|
||||
router.navigate(["/"]);
|
||||
}
|
||||
};
|
||||
|
||||
sleep(ms: number) {
|
||||
return new Promise(resolve => setTimeout(resolve, ms));
|
||||
}
|
||||
|
||||
selectedFiles: File[] = [];
|
||||
imagePreviews: string[] = [];
|
||||
onFileSelected(event: Event){
|
||||
const fileInput = event.target as HTMLInputElement;
|
||||
this.imagePreviews = [];
|
||||
this.selectedFiles = [];
|
||||
|
||||
if (!fileInput.files?.length){
|
||||
return;
|
||||
}
|
||||
|
||||
for (let i=0; i<fileInput.files.length; i++){
|
||||
let file = fileInput.files[i];
|
||||
if (file.size > this.maxFileMB * 1024 * 1024){
|
||||
this.errorMsgs.push("File exceeds max file size of 16MB");
|
||||
continue;
|
||||
}
|
||||
// No issues add file to the list
|
||||
this.selectedFiles.push( file );
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onload= () => {
|
||||
this.imagePreviews.push(reader.result as string);
|
||||
}
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
}
|
||||
|
||||
onSubmit(){
|
||||
|
||||
const formData = new FormData();
|
||||
|
||||
// Append non-file fields
|
||||
formData.append("Name", this.newItem.name);
|
||||
formData.append("Description", this.newItem.description);
|
||||
formData.append("Cost", this.newItem.cost.toString());
|
||||
formData.append("Url", this.newItem.url);
|
||||
|
||||
// Add image fileds
|
||||
if (this.selectedFiles.length > 0){
|
||||
for(let i=0; i<this.selectedFiles.length; i++){
|
||||
formData.append("images", this.selectedFiles[i], this.selectedFiles[i].name);
|
||||
};
|
||||
}
|
||||
|
||||
// Proccess data
|
||||
this.http.post<boolean>( "api/product/create", formData ).subscribe({
|
||||
next: async (data) => {
|
||||
if (data == true){
|
||||
this.errorMsgs = ["Product Created Successfully"];
|
||||
await this.sleep(3000);
|
||||
this.router.navigate(["store/catalog"]);
|
||||
}else{
|
||||
this.errorMsgs = ["Error has ocurred"];
|
||||
}
|
||||
},
|
||||
error: err => {
|
||||
console.log("New Product Err: ", err);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -1,145 +0,0 @@
|
||||
.gameCard {
|
||||
position: relative;
|
||||
background-color: var(--Mistox-Black);
|
||||
float: left;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
break-inside: avoid;
|
||||
margin-bottom: 2rem;
|
||||
border: solid 2px var(--Mistox-Background);
|
||||
transition-duration: 1s;
|
||||
}
|
||||
|
||||
.gameCard :hover{
|
||||
border-color: var(--Mistox-Light);
|
||||
}
|
||||
|
||||
.gameCard-Name {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
font-size: 25px;
|
||||
padding: 5px 0 0 5px;
|
||||
background-color: rgba(0,0,0,.1);
|
||||
}
|
||||
|
||||
.gameCard-Grid {
|
||||
column-count: 4;
|
||||
column-gap: 2rem;
|
||||
padding-top: 20px;
|
||||
width: calc(100% - 40px);
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 1400px) {
|
||||
.gameCard-Grid {
|
||||
column-count: 3;
|
||||
padding-top: 20px;
|
||||
width: calc(100% - 40px);
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
.gameCard-Grid {
|
||||
column-count: 2;
|
||||
padding-top: 20px;
|
||||
width: calc(100% - 40px);
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.gameCard-Grid {
|
||||
column-count: 1;
|
||||
padding-top: 20px;
|
||||
width: calc(100% - 40px);
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.gameCard-Img {
|
||||
width: 100%;
|
||||
border-radius: 10px 10px 0 0;
|
||||
}
|
||||
|
||||
.gameCard-Next,
|
||||
.gameCard-Prev {
|
||||
background-color: transparent;
|
||||
color: var(--Mistox-White);
|
||||
padding: 16px;
|
||||
margin-top: -22px;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
border: none;
|
||||
transition: background-color 0.6s ease;
|
||||
}
|
||||
|
||||
.gameCard-Next:hover,
|
||||
.gameCard-Prev:hover {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.gameCard-Prev {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
.gameCard-Next {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.gameCard-Desc {
|
||||
font-size: 13px;
|
||||
margin: 5px;
|
||||
color: var(--Mistox-Light);
|
||||
}
|
||||
|
||||
.gameCard-Price {
|
||||
width: calc(50% - 10px);
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.gameCard-Button {
|
||||
width: 40%;
|
||||
margin: 5px 5%;
|
||||
height: 38.4px;
|
||||
color: var(--Mistox-Black);
|
||||
background-color: var(--Mistox-Light);
|
||||
font-size: 16px;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
overflow: hidden;
|
||||
transition: 0.5s;
|
||||
letter-spacing: 2px;
|
||||
border: 1px solid var(--Mistox-Light);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.gameCard-Button :hover{
|
||||
background-color: var(--Mistox-Light);
|
||||
color: var(--Mistox-White);
|
||||
box-shadow: 4px 3px 6px var(--Mistox-Dark);
|
||||
}
|
||||
|
||||
.cartopen {
|
||||
position: absolute;
|
||||
background: var(--Mistox-Offset);
|
||||
right: 10px;
|
||||
top: 55px;
|
||||
width: 400px;
|
||||
border-radius: 5px;
|
||||
backdrop-filter: blur(3px);
|
||||
border: 1px solid var(--Mistox-Light);
|
||||
}
|
||||
|
||||
.cartclosed {
|
||||
display: none;
|
||||
}
|
||||
@@ -1,32 +0,0 @@
|
||||
<div class="gameCard-Grid">
|
||||
<div class="gameCard" *ngFor="let product of Products">
|
||||
<div style="position: relative;">
|
||||
<div *ngIf="product.images.length > 1">
|
||||
<button class="gameCard-Prev" (click)="nextImg(product)">❮</button>
|
||||
<button class="gameCard-Next" (click)="prevImg(product)">❯</button>
|
||||
</div>
|
||||
<div *ngIf="product.images.length > 0" >
|
||||
<img class="gameCard-Img" [src]="product.images[product.curShowingIMG].imageSrc">
|
||||
</div>
|
||||
</div>
|
||||
<h1 class ="gameCard-Name">{{ product.name }}</h1>
|
||||
<div *ngFor="let line of product.description.split('\n')" >
|
||||
<h2 class="gameCard-Desc">{{ line }}</h2>
|
||||
</div>
|
||||
<h2 class="gameCard-Price">${{ (product.cost/100).toFixed(2) }}</h2>
|
||||
<button class="gameCard-Button" >Add To Cart</button>
|
||||
<div *ngIf="auth.loggedInUser.siteData.role == 'Admin'">
|
||||
<button style="width: calc(50% - 10px); margin: 5px;" [routerLink]="['/store/admin/edit']" [queryParams]="{ ProductID: product.id }" >
|
||||
Edit
|
||||
</button>
|
||||
<button style="width: calc(50% - 10px); margin: 5px;" (click)="DeleteItem(product.id)" >
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="auth.loggedInUser.siteData.role == 'Admin'">
|
||||
<button style="width: calc(100% - 10px); margin: 5px;" [routerLink]="['/store/admin/new']" >
|
||||
New
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,71 +0,0 @@
|
||||
import { Component, NgZone } from '@angular/core';
|
||||
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
|
||||
import { FormsModule, NgModel } from '@angular/forms';
|
||||
import { Router, ActivatedRoute, RouterModule } from '@angular/router';
|
||||
import { Title } from '@angular/platform-browser';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { Authentication } from '../../../services/Authentication';
|
||||
import { Product } from 'app/models/Company';
|
||||
|
||||
@Component({
|
||||
selector: 'store-catalog',
|
||||
templateUrl: './catalog.component.html',
|
||||
styleUrl: './catalog.component.css',
|
||||
imports: [ FormsModule, CommonModule, RouterModule ]
|
||||
})
|
||||
export class CatalogComponent {
|
||||
|
||||
public Products: Product[] = [];
|
||||
|
||||
constructor( private http: HttpClient, private router: Router, private route: ActivatedRoute, private title: Title, public auth: Authentication ) {
|
||||
this.title.setTitle("Store | Mistox");
|
||||
|
||||
// load each product
|
||||
http.post<Product[]>("api/product/getall", null).subscribe(
|
||||
response => {
|
||||
this.Products = response;
|
||||
|
||||
// Load each image
|
||||
this.Products.forEach(item => {
|
||||
item.curShowingIMG = 0;
|
||||
item.images.forEach(img => {
|
||||
http.get("api/productimage/get?ProductID=" + img.productID + "&ImageID=" + img.imageID, { responseType: 'blob' }).subscribe(blob => {
|
||||
img.imageSrc = URL.createObjectURL(blob);
|
||||
console.log(img.imageSrc);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
}
|
||||
)
|
||||
};
|
||||
|
||||
nextImg( prod: Product ){
|
||||
prod.curShowingIMG += 1;
|
||||
if (prod.curShowingIMG == prod.images.length){
|
||||
prod.curShowingIMG = 0;
|
||||
}
|
||||
}
|
||||
|
||||
prevImg( prod: Product ){
|
||||
prod.curShowingIMG -= 1;
|
||||
if (prod.curShowingIMG == -1){
|
||||
prod.curShowingIMG = prod.images.length -1;
|
||||
}
|
||||
}
|
||||
|
||||
DeleteItem( ProductID: number ) {
|
||||
const body = new HttpParams()
|
||||
.set("productID", ProductID);
|
||||
const headers = new HttpHeaders({
|
||||
'Content-Type': 'application/x-www-form-urlencoded',
|
||||
});
|
||||
this.http.post<boolean>( "api/product/delete", body, { headers } ).subscribe({
|
||||
next: data => {
|
||||
if (data){
|
||||
window.location.reload();
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
@@ -1,24 +0,0 @@
|
||||
#payment-form {
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#card-element {
|
||||
padding: 12px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
#submit {
|
||||
background-color: #5469d4;
|
||||
color: white;
|
||||
padding: 12px 20px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -1,8 +0,0 @@
|
||||
<form id="payment-form">
|
||||
<div class="form-group">
|
||||
<label for="card-element">Card Details</label>
|
||||
<div id="card-element"></div>
|
||||
<div id="card-errors" role="alert"></div>
|
||||
</div>
|
||||
<button id="submit">Pay</button>
|
||||
</form>
|
||||
@@ -1,62 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { Router, ActivatedRoute, RouterModule } from '@angular/router';
|
||||
import { Title } from '@angular/platform-browser';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { Authentication } from '../../../services/Authentication';
|
||||
import { loadStripe, Stripe, StripeElements } from '@stripe/stripe-js';
|
||||
import { firstValueFrom } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector: 'store-payment',
|
||||
templateUrl: './payment.component.html',
|
||||
styleUrl: './payment.component.css',
|
||||
imports: [ FormsModule, CommonModule, RouterModule ]
|
||||
})
|
||||
export class PaymentComponent {
|
||||
|
||||
stripe: Stripe | null = null;
|
||||
elements: StripeElements | null = null;
|
||||
|
||||
async ngOnInit(){
|
||||
|
||||
let ApiKey = await firstValueFrom(this.http.get<string>("/api/payment/publickey"));
|
||||
|
||||
this.stripe = await loadStripe(ApiKey);
|
||||
if (this.stripe){
|
||||
this.elements = this.stripe?.elements();
|
||||
}
|
||||
}
|
||||
|
||||
ngAfterViewInit(){
|
||||
if (this.elements){
|
||||
const cardStyle = {
|
||||
base: {
|
||||
color: '#32325d',
|
||||
fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
|
||||
fontSize: '16px',
|
||||
'::placeholder': {
|
||||
color: '#aab7c4',
|
||||
}
|
||||
},
|
||||
invalid: {
|
||||
color: '#fa755a',
|
||||
}
|
||||
}
|
||||
const card = this.elements.create('card', { style: cardStyle });
|
||||
card.mount('#card-element');
|
||||
}
|
||||
}
|
||||
|
||||
constructor( private http: HttpClient, private router: Router, private route: ActivatedRoute, private title: Title, public auth: Authentication ) {
|
||||
this.title.setTitle("Payment | Mistox");
|
||||
|
||||
http.post<void[]>("api/product/getall", null).subscribe(
|
||||
response => {
|
||||
|
||||
}
|
||||
)
|
||||
};
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user