School Commit Init
This commit is contained in:
@@ -0,0 +1,282 @@
|
||||
<?php
|
||||
header('Access-Control-Allow-Origin: https://localhost:4200');
|
||||
|
||||
header('Access-Control-Allow-Methods: GET, POST');
|
||||
|
||||
header("Access-Control-Allow-Headers: X-Requested-With");
|
||||
|
||||
header('Access-Control-Allow-Credentials: true');
|
||||
|
||||
class DBConnection
|
||||
{
|
||||
private string $host = '127.0.0.1';
|
||||
private string $database = 'NewsDb';
|
||||
private string $user = 'root';
|
||||
private string $password = '';
|
||||
private string $charset = 'UTF8';
|
||||
|
||||
# used php data objects (PDO) to connect to database
|
||||
private PDO $pdo;
|
||||
private string $error;
|
||||
|
||||
public function __construct()
|
||||
{
|
||||
$dsn = "mysql:host=$this->host;dbname=$this->database;charset=$this->charset";
|
||||
# array of options that configures the PDO object
|
||||
$opt = array(
|
||||
PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION, # if a database error occurs, PDO will throw a PDOException instead of just returning false or null
|
||||
PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC, # when you fetch rows from a query result set, PDO will return an associative array where the keys are the column names and the values are the column values
|
||||
PDO::ATTR_EMULATE_PREPARES => false
|
||||
); # emulation is disabled, PDO uses real prepared statements instead (no substituting parameters into the SQL statement.)
|
||||
try {
|
||||
$this->pdo = new PDO($dsn, $this->user, $this->password, $opt);
|
||||
} catch (PDOException $e) {
|
||||
$this->error = $e->getMessage();
|
||||
echo "Error connecting to database: " . $this->error;
|
||||
}
|
||||
}
|
||||
|
||||
public function getAllNews()
|
||||
{
|
||||
// $statement = $this->pdo->query("SELECT * FROM logs");
|
||||
$statement = $this->pdo->prepare("SELECT * FROM News");
|
||||
$statement->execute();
|
||||
return $statement->fetchAll(PDO::FETCH_ASSOC);
|
||||
}
|
||||
|
||||
public function getAllNewsByDate($date)
|
||||
{
|
||||
if (!empty($date)) {
|
||||
$statement = $this->pdo->prepare("SELECT * FROM News WHERE date = ?");
|
||||
$statement->execute([$date]);
|
||||
return $statement->fetchAll(PDO::FETCH_ASSOC);
|
||||
}
|
||||
http_response_code(400);
|
||||
}
|
||||
public function getAllNewsByCategory($category)
|
||||
{
|
||||
if (!empty($category)) {
|
||||
$statement = $this->pdo->prepare("SELECT * FROM News WHERE category = ?");
|
||||
$statement->execute([$category]);
|
||||
return $statement->fetchAll(PDO::FETCH_ASSOC);
|
||||
}
|
||||
http_response_code(400);
|
||||
}
|
||||
public function getAllNewsByCategoryAndDate($category, $date)
|
||||
{
|
||||
if (!empty($category) && !empty($date)) {
|
||||
$statement = $this->pdo->prepare("SELECT * FROM News WHERE category = ? AND date = ?");
|
||||
$statement->execute([$category, $date]);
|
||||
return $statement->fetchAll(PDO::FETCH_ASSOC);
|
||||
}
|
||||
if (!empty($category) && empty($date)) {
|
||||
return $this->getAllNewsByCategory($category);
|
||||
}
|
||||
if (empty($category) && !empty($date)) {
|
||||
return $this->getAllNewsByDate($date);
|
||||
}
|
||||
http_response_code(400);
|
||||
}
|
||||
|
||||
public function validateUser($username, $password)
|
||||
{
|
||||
if (!empty($username) && !empty($password)) {
|
||||
$statement = $this->pdo->prepare("SELECT 1 FROM Users WHERE username = ? AND password = ?");
|
||||
$statement->execute([$username, $password]);
|
||||
return $statement->fetchAll(PDO::FETCH_ASSOC);
|
||||
}
|
||||
http_response_code(400);
|
||||
}
|
||||
|
||||
public function insertNews($title, $news_text, $category, $date, $producer)
|
||||
{
|
||||
if (!empty($title) && !empty($news_text) && !empty($category) && !empty($date) && !empty($producer)) {
|
||||
$statement = $this->pdo->prepare("INSERT INTO News (title, news_text, category, date, producer) VALUES (?, ?, ?, ?, ?)");
|
||||
$statement->execute([$title, $news_text, $category, $date, $producer]);
|
||||
return $statement->rowCount();
|
||||
}
|
||||
http_response_code(400);
|
||||
}
|
||||
|
||||
public function updateNews($id, $title, $news_text, $category, $date, $producer)
|
||||
{
|
||||
if (!empty($id) && !empty($title) && !empty($news_text) && !empty($category) && !empty($date)) {
|
||||
$statement = $this->pdo->prepare("UPDATE News SET title = ?, news_text = ?, category = ?, date = ?, producer = ? WHERE id = ?");
|
||||
$statement->execute([$title, $news_text, $category, $date, $producer, $id]);
|
||||
return $statement->rowCount();
|
||||
}
|
||||
http_response_code(400);
|
||||
}
|
||||
|
||||
public function getNewsById($id)
|
||||
{
|
||||
if (!empty($id)) {
|
||||
$statement = $this->pdo->prepare("SELECT * FROM News WHERE id = ?");
|
||||
$statement->execute([$id]);
|
||||
return $statement->fetch(PDO::FETCH_ASSOC);
|
||||
}
|
||||
http_response_code(400);
|
||||
}
|
||||
|
||||
public function show($value)
|
||||
{
|
||||
echo json_encode($value);
|
||||
}
|
||||
|
||||
public function handleGet()
|
||||
{
|
||||
if (isset($_GET['action']) && !empty($_GET['action'])) {
|
||||
switch ($_GET['action']) {
|
||||
case 'getAllNews':
|
||||
session_start();
|
||||
$result = $this->getAllNews();
|
||||
$this->show($result);
|
||||
break;
|
||||
case 'getAllNewsByCategory':
|
||||
session_start();
|
||||
$category = $_GET['category'];
|
||||
$result = $this->getAllNewsByCategory($category);
|
||||
$this->show($result);
|
||||
break;
|
||||
case 'getAllNewsByCategoryAndDate':
|
||||
session_start();
|
||||
$category = $_GET['category'];
|
||||
$date = $_GET['date'];
|
||||
$result = $this->getAllNewsByCategoryAndDate($category, $date);
|
||||
$this->show($result);
|
||||
break;
|
||||
case 'getAllNewsByDate':
|
||||
session_start();
|
||||
$date = $_GET['date'];
|
||||
$result = $this->getAllNewsByDate($date);
|
||||
$this->show($result);
|
||||
break;
|
||||
case 'validateUser':
|
||||
session_start();
|
||||
$username = $_GET['username'];
|
||||
$password = $_GET['password'];
|
||||
$result = $this->validateUser($username, $password);
|
||||
$this->show($result);
|
||||
break;
|
||||
case 'getNewsById':
|
||||
session_start();
|
||||
$id = $_GET['id'];
|
||||
$result = $this->getNewsById($id);
|
||||
$this->show($result);
|
||||
break;
|
||||
case 'isLogged':
|
||||
$this->show(true);
|
||||
break;
|
||||
case 'logout':
|
||||
session_start();
|
||||
session_unset();
|
||||
//session_destroy();
|
||||
$this->show($_SESSION);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
public function handlePost()
|
||||
{
|
||||
if (isset($_POST['action']) && !empty($_POST['action'])) {
|
||||
switch ($_POST['action']) {
|
||||
case 'insertNews':
|
||||
session_start();
|
||||
|
||||
$title = $_POST['title'];
|
||||
$news_text = $_POST['news_text'];
|
||||
$category = $_POST['category'];
|
||||
$producer = $_POST['producer'];
|
||||
$date = $_POST['date'];
|
||||
$result = $this->insertNews($title, $news_text, $category, $date, $producer);
|
||||
|
||||
$this->show($result);
|
||||
break;
|
||||
case 'updateNews':
|
||||
session_start();
|
||||
$id = $_POST['id'];
|
||||
$title = $_POST['title'];
|
||||
$news_text = $_POST['news_text'];
|
||||
$category = $_POST['category'];
|
||||
$date = $_POST['date'];
|
||||
$producer = $_POST['producer'];
|
||||
$result = $this->updateNews($id, $title, $news_text, $category, $date, $producer);
|
||||
$this->show($result);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public function handleLogin()
|
||||
{
|
||||
if (isset($_POST['action']) && !empty($_POST['action']) && $_POST['action'] == 'validateUser') {
|
||||
session_start();
|
||||
$username = $_POST['username'];
|
||||
$password = $_POST['password'];
|
||||
$result = $this->validateUser($username, $password);
|
||||
if (!empty($result)) {
|
||||
$_SESSION['username'] = $username;
|
||||
$this->show($result);
|
||||
} else {
|
||||
http_response_code(401);
|
||||
}
|
||||
}
|
||||
if (isset($_GET['action']) && !empty($_GET['action']) && $_GET['action'] == 'isLogged') {
|
||||
$this->show(false);
|
||||
}
|
||||
if (isset($_GET['action']) && !empty($_GET['action'])) {
|
||||
switch ($_GET['action']) {
|
||||
case 'getAllNews':
|
||||
session_start();
|
||||
$result = $this->getAllNews();
|
||||
$this->show($result);
|
||||
break;
|
||||
case 'getAllNewsByCategory':
|
||||
session_start();
|
||||
$category = $_GET['category'];
|
||||
$result = $this->getAllNewsByCategory($category);
|
||||
$this->show($result);
|
||||
break;
|
||||
case 'getAllNewsByCategoryAndDate':
|
||||
session_start();
|
||||
$category = $_GET['category'];
|
||||
$date = $_GET['date'];
|
||||
$result = $this->getAllNewsByCategoryAndDate($category, $date);
|
||||
$this->show($result);
|
||||
break;
|
||||
case 'getAllNewsByDate':
|
||||
session_start();
|
||||
$date = $_GET['date'];
|
||||
$result = $this->getAllNewsByDate($date);
|
||||
$this->show($result);
|
||||
break;
|
||||
case 'validateUser':
|
||||
session_start();
|
||||
$username = $_GET['username'];
|
||||
$password = $_GET['password'];
|
||||
$result = $this->validateUser($username, $password);
|
||||
$this->show($result);
|
||||
break;
|
||||
case 'getNewsById':
|
||||
session_start();
|
||||
$id = $_GET['id'];
|
||||
$result = $this->getNewsById($id);
|
||||
$this->show($result);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
$conn = new DBConnection();
|
||||
session_start();
|
||||
if (isset($_SESSION['username'])) {
|
||||
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
|
||||
$conn->handlePost();
|
||||
} else {
|
||||
$conn->handleGet();
|
||||
}
|
||||
} else {
|
||||
$conn->handleLogin();
|
||||
}
|
||||
?>
|
||||
@@ -0,0 +1,16 @@
|
||||
# Editor configuration, see https://editorconfig.org
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
|
||||
[*.ts]
|
||||
quote_type = single
|
||||
|
||||
[*.md]
|
||||
max_line_length = off
|
||||
trim_trailing_whitespace = false
|
||||
@@ -0,0 +1,42 @@
|
||||
# See http://help.github.com/ignore-files/ for more about ignoring files.
|
||||
|
||||
# Compiled output
|
||||
/dist
|
||||
/tmp
|
||||
/out-tsc
|
||||
/bazel-out
|
||||
|
||||
# Node
|
||||
/node_modules
|
||||
npm-debug.log
|
||||
yarn-error.log
|
||||
|
||||
# IDEs and editors
|
||||
.idea/
|
||||
.project
|
||||
.classpath
|
||||
.c9/
|
||||
*.launch
|
||||
.settings/
|
||||
*.sublime-workspace
|
||||
|
||||
# Visual Studio Code
|
||||
.vscode/*
|
||||
!.vscode/settings.json
|
||||
!.vscode/tasks.json
|
||||
!.vscode/launch.json
|
||||
!.vscode/extensions.json
|
||||
.history/*
|
||||
|
||||
# Miscellaneous
|
||||
/.angular/cache
|
||||
.sass-cache/
|
||||
/connect.lock
|
||||
/coverage
|
||||
/libpeerconnection.log
|
||||
testem.log
|
||||
/typings
|
||||
|
||||
# System files
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
@@ -0,0 +1,27 @@
|
||||
# FrontEnd
|
||||
|
||||
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.3.6.
|
||||
|
||||
## Development server
|
||||
|
||||
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
|
||||
|
||||
## Code scaffolding
|
||||
|
||||
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
|
||||
|
||||
## Build
|
||||
|
||||
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
|
||||
|
||||
## Running unit tests
|
||||
|
||||
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
|
||||
|
||||
## Running end-to-end tests
|
||||
|
||||
Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
|
||||
|
||||
## Further help
|
||||
|
||||
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
|
||||
@@ -0,0 +1,93 @@
|
||||
{
|
||||
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
||||
"version": 1,
|
||||
"newProjectRoot": "projects",
|
||||
"projects": {
|
||||
"FrontEnd": {
|
||||
"projectType": "application",
|
||||
"schematics": {
|
||||
"@schematics/angular:component": {
|
||||
"style": "less"
|
||||
}
|
||||
},
|
||||
"root": "",
|
||||
"sourceRoot": "src",
|
||||
"prefix": "app",
|
||||
"architect": {
|
||||
"build": {
|
||||
"builder": "@angular-devkit/build-angular:application",
|
||||
"options": {
|
||||
"outputPath": "dist/front-end",
|
||||
"index": "src/index.html",
|
||||
"browser": "src/main.ts",
|
||||
"polyfills": ["zone.js"],
|
||||
"tsConfig": "tsconfig.app.json",
|
||||
"inlineStyleLanguage": "less",
|
||||
"assets": ["src/favicon.ico", "src/assets"],
|
||||
"styles": ["src/styles.less"],
|
||||
"scripts": [
|
||||
"node_modules/jquery/dist/jquery.min.js",
|
||||
"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js",
|
||||
"node_modules/popper.js/dist/umd/popper.min.js"
|
||||
]
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"budgets": [
|
||||
{
|
||||
"type": "initial",
|
||||
"maximumWarning": "500kb",
|
||||
"maximumError": "1mb"
|
||||
},
|
||||
{
|
||||
"type": "anyComponentStyle",
|
||||
"maximumWarning": "2kb",
|
||||
"maximumError": "4kb"
|
||||
}
|
||||
],
|
||||
"outputHashing": "all"
|
||||
},
|
||||
"development": {
|
||||
"optimization": false,
|
||||
"extractLicenses": false,
|
||||
"sourceMap": true
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "production"
|
||||
},
|
||||
"serve": {
|
||||
"builder": "@angular-devkit/build-angular:dev-server",
|
||||
"configurations": {
|
||||
"production": {
|
||||
"buildTarget": "FrontEnd:build:production"
|
||||
},
|
||||
"development": {
|
||||
"buildTarget": "FrontEnd:build:development"
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "development"
|
||||
},
|
||||
"extract-i18n": {
|
||||
"builder": "@angular-devkit/build-angular:extract-i18n",
|
||||
"options": {
|
||||
"buildTarget": "FrontEnd:build"
|
||||
}
|
||||
},
|
||||
"test": {
|
||||
"builder": "@angular-devkit/build-angular:karma",
|
||||
"options": {
|
||||
"polyfills": ["zone.js", "zone.js/testing"],
|
||||
"tsConfig": "tsconfig.spec.json",
|
||||
"inlineStyleLanguage": "less",
|
||||
"assets": ["src/favicon.ico", "src/assets"],
|
||||
"styles": ["src/styles.less"],
|
||||
"scripts": []
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"cli": {
|
||||
"analytics": false
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
{
|
||||
"name": "front-end",
|
||||
"version": "0.0.0",
|
||||
"scripts": {
|
||||
"ng": "ng",
|
||||
"start": "ng serve",
|
||||
"build": "ng build",
|
||||
"watch": "ng build --watch --configuration development",
|
||||
"test": "ng test"
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "^17.3.0",
|
||||
"@angular/common": "^17.3.0",
|
||||
"@angular/compiler": "^17.3.0",
|
||||
"@angular/core": "^17.3.0",
|
||||
"@angular/forms": "^17.3.0",
|
||||
"@angular/platform-browser": "^17.3.0",
|
||||
"@angular/platform-browser-dynamic": "^17.3.0",
|
||||
"@angular/router": "^17.3.0",
|
||||
"bootstrap": "^5.3.3",
|
||||
"jquery": "^3.7.1",
|
||||
"popper": "^1.0.1",
|
||||
"popper.js": "^1.16.1",
|
||||
"rxjs": "~7.8.0",
|
||||
"tslib": "^2.3.0",
|
||||
"zone.js": "~0.14.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "^17.3.6",
|
||||
"@angular/cli": "^17.3.6",
|
||||
"@angular/compiler-cli": "^17.3.0",
|
||||
"@types/jasmine": "~5.1.0",
|
||||
"@types/jquery": "^3.5.29",
|
||||
"jasmine-core": "~5.1.0",
|
||||
"karma": "~6.4.0",
|
||||
"karma-chrome-launcher": "~3.2.0",
|
||||
"karma-coverage": "~2.2.0",
|
||||
"karma-jasmine": "~5.1.0",
|
||||
"karma-jasmine-html-reporter": "~2.1.0",
|
||||
"typescript": "~5.4.2"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
<div class="container" id="addFormDiv">
|
||||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<div class="container text-left">
|
||||
<form id="addForm">
|
||||
<h3>Add a news:</h3>
|
||||
<div class="mb-1">
|
||||
<label for="titleField" class="form-label">Title: </label
|
||||
><input
|
||||
type="text"
|
||||
id="titleField"
|
||||
class="form-control"
|
||||
required
|
||||
pattern="[0-9A-Za-z-.\:;]{5,30}"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-1">
|
||||
<label for="contentField" class="form-label">Content: </label
|
||||
><input
|
||||
type="text"
|
||||
id="contentField"
|
||||
class="form-control"
|
||||
required
|
||||
pattern="[0-9A-Za-z-.\:;]{10,256}"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-1">
|
||||
<label for="dateField" class="form-label">Date: </label
|
||||
><input type="date" id="dateField" class="form-control" required />
|
||||
</div>
|
||||
<div class="mb-1">
|
||||
<label for="producerField" class="form-label">Producer: </label
|
||||
><input
|
||||
type="text"
|
||||
id="producerField"
|
||||
class="form-control"
|
||||
required
|
||||
pattern="[0-9A-Za-z-]{5,30}"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-1">
|
||||
<label for="categoryField" class="form-label">Category: </label
|
||||
><input
|
||||
type="text"
|
||||
id="categoryField"
|
||||
class="form-control"
|
||||
required
|
||||
pattern="[0-9A-Za-z-]{5,30}"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
id="insertNewsButton"
|
||||
type="submit"
|
||||
class="btn btn-success mb-1"
|
||||
(click)="insertNews($event)"
|
||||
>
|
||||
Add News
|
||||
</button>
|
||||
</form>
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-secondary mb-1"
|
||||
name="returnButton"
|
||||
(click)="returnToAdmin()"
|
||||
>
|
||||
Return to admin
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,23 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { AddPageComponent } from './add-page.component';
|
||||
|
||||
describe('AddPageComponent', () => {
|
||||
let component: AddPageComponent;
|
||||
let fixture: ComponentFixture<AddPageComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [AddPageComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(AddPageComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,73 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector: 'app-add-page',
|
||||
standalone: true,
|
||||
imports: [],
|
||||
templateUrl: './add-page.component.html',
|
||||
styleUrl: './add-page.component.less'
|
||||
})
|
||||
export class AddPageComponent {
|
||||
constructor(private router: Router) {
|
||||
$.ajax({
|
||||
url: 'https://localhost/web/Lab%208/BackEnd/Repositories/Repository.php?action=isLogged',
|
||||
type: 'GET',
|
||||
xhrFields: {
|
||||
withCredentials: true
|
||||
},
|
||||
success: function(data: any){
|
||||
if (data === 'false'){
|
||||
router.navigate(['/login']);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
insertNews = (e: MouseEvent) => {
|
||||
e.preventDefault();
|
||||
if (!this.validate()){
|
||||
alert("Please fill all fields!");
|
||||
return;
|
||||
}
|
||||
const title = $("#titleField").val();
|
||||
const content = $("#contentField").val();
|
||||
const date = $("#dateField").val();
|
||||
const producer = $("#producerField").val();
|
||||
const category = $("#categoryField").val();
|
||||
$.ajax({
|
||||
url: "https://localhost/web/Lab 8/BackEnd/Repositories/Repository.php",
|
||||
type: "POST",
|
||||
xhrFields: {
|
||||
withCredentials: true
|
||||
},
|
||||
data: {
|
||||
title: title,
|
||||
news_text: content,
|
||||
date: date,
|
||||
producer: producer,
|
||||
category: category,
|
||||
action: "insertNews",
|
||||
},
|
||||
success: function (response) {
|
||||
alert("Log added successfully!");
|
||||
},
|
||||
error: function (response) {
|
||||
alert("Error adding log!");
|
||||
},
|
||||
});
|
||||
};
|
||||
returnToAdmin = () => {
|
||||
this.router.navigate(['/admin']);
|
||||
}
|
||||
validate = () => {
|
||||
const title = $("#titleField").val();
|
||||
const content = $("#contentField").val();
|
||||
const date = $("#dateField").val();
|
||||
const producer = $("#producerField").val();
|
||||
const category = $("#categoryField").val();
|
||||
if (title === "" || content === "" || date === "" || producer === "" || category === ""){
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
<div class="container text-center">
|
||||
<h3>Welcome</h3>
|
||||
<table
|
||||
class="container"
|
||||
id="newsTable"
|
||||
style="
|
||||
margin: 30px;
|
||||
border: 1px solid;
|
||||
border-color: black;
|
||||
border-collapse: collapse;
|
||||
"
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Title</th>
|
||||
<th>Content</th>
|
||||
<th>Category</th>
|
||||
<th>Date</th>
|
||||
<th>Producer</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@for (item of news; track $index) {
|
||||
<tr>
|
||||
<td>{{ item.title }}</td>
|
||||
<td>{{ item.news_text }}</td>
|
||||
<td>{{ item.category }}</td>
|
||||
<td>{{ item.date }}</td>
|
||||
<td>{{ item.producer }}</td>
|
||||
<td>
|
||||
<button
|
||||
class="btn btn-danger"
|
||||
name="deleteButton"
|
||||
(click)="editNews(item.id)"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-primary"
|
||||
name="addNewsButton"
|
||||
(click)="addNews()"
|
||||
style="margin: 30px"
|
||||
>
|
||||
Add news
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-dark"
|
||||
name="logoutButton"
|
||||
(click)="logout()"
|
||||
style="margin: 30px"
|
||||
>
|
||||
Log out
|
||||
</button>
|
||||
</table>
|
||||
</div>
|
||||
@@ -0,0 +1,23 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { AdminPageComponent } from './admin-page.component';
|
||||
|
||||
describe('AdminPageComponent', () => {
|
||||
let component: AdminPageComponent;
|
||||
let fixture: ComponentFixture<AdminPageComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [AdminPageComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(AdminPageComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,59 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
import News from '../../types/news';
|
||||
|
||||
@Component({
|
||||
selector: 'app-admin-page',
|
||||
standalone: true,
|
||||
imports: [],
|
||||
templateUrl: './admin-page.component.html',
|
||||
styleUrl: './admin-page.component.less'
|
||||
})
|
||||
export class AdminPageComponent {
|
||||
news: News[] = [];
|
||||
constructor(private router: Router) {
|
||||
$.ajax({
|
||||
url: 'https://localhost/web/Lab%208/BackEnd/Repositories/Repository.php?action=isLogged',
|
||||
type: 'GET',
|
||||
xhrFields: {
|
||||
withCredentials: true
|
||||
},
|
||||
success: function(data: any){
|
||||
if (data === 'false'){
|
||||
router.navigate(['/login']);
|
||||
}
|
||||
}
|
||||
});
|
||||
$.ajax({
|
||||
context: this,
|
||||
url: 'https://localhost/web/Lab%208/BackEnd/Repositories/Repository.php?action=getAllNews',
|
||||
type: 'GET',
|
||||
xhrFields: {
|
||||
withCredentials: true
|
||||
},
|
||||
success: function(data: any){
|
||||
this.news = JSON.parse(data);
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
logout = () => {
|
||||
let router = this.router;
|
||||
$.ajax({
|
||||
url: 'https://localhost/web/Lab%208/BackEnd/Repositories/Repository.php?action=logout',
|
||||
type: 'GET',
|
||||
xhrFields: {
|
||||
withCredentials: true
|
||||
},
|
||||
success: function(data: any){
|
||||
router.navigate(['/login']);
|
||||
}
|
||||
});
|
||||
}
|
||||
addNews = () => {
|
||||
this.router.navigate(['/add']);
|
||||
}
|
||||
editNews = (id: number) => {
|
||||
this.router.navigate([`/edit/${id}`]);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,190 @@
|
||||
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
|
||||
<!-- * * * * * * * * * * * The content below * * * * * * * * * * * -->
|
||||
<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
|
||||
<!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * -->
|
||||
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
|
||||
<!-- * * * * * * * * * Delete the template below * * * * * * * * * -->
|
||||
<!-- * * * * * * * to get started with your project! * * * * * * * -->
|
||||
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
|
||||
|
||||
<style>
|
||||
:host {
|
||||
--bright-blue: oklch(51.01% 0.274 263.83);
|
||||
--electric-violet: oklch(53.18% 0.28 296.97);
|
||||
--french-violet: oklch(47.66% 0.246 305.88);
|
||||
--vivid-pink: oklch(69.02% 0.277 332.77);
|
||||
--hot-red: oklch(61.42% 0.238 15.34);
|
||||
--orange-red: oklch(63.32% 0.24 31.68);
|
||||
|
||||
--gray-900: oklch(19.37% 0.006 300.98);
|
||||
--gray-700: oklch(36.98% 0.014 302.71);
|
||||
--gray-400: oklch(70.9% 0.015 304.04);
|
||||
|
||||
--red-to-pink-to-purple-vertical-gradient: linear-gradient(
|
||||
180deg,
|
||||
var(--orange-red) 0%,
|
||||
var(--vivid-pink) 50%,
|
||||
var(--electric-violet) 100%
|
||||
);
|
||||
|
||||
--red-to-pink-to-purple-horizontal-gradient: linear-gradient(
|
||||
90deg,
|
||||
var(--orange-red) 0%,
|
||||
var(--vivid-pink) 50%,
|
||||
var(--electric-violet) 100%
|
||||
);
|
||||
|
||||
--pill-accent: var(--bright-blue);
|
||||
|
||||
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
||||
Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
|
||||
"Segoe UI Symbol";
|
||||
box-sizing: border-box;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.125rem;
|
||||
color: var(--gray-900);
|
||||
font-weight: 500;
|
||||
line-height: 100%;
|
||||
letter-spacing: -0.125rem;
|
||||
margin: 0;
|
||||
font-family: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI",
|
||||
Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji",
|
||||
"Segoe UI Emoji", "Segoe UI Symbol";
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
color: var(--gray-700);
|
||||
}
|
||||
|
||||
main {
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
box-sizing: inherit;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.angular-logo {
|
||||
max-width: 9.2rem;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
width: 100%;
|
||||
max-width: 700px;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.content h1 {
|
||||
margin-top: 1.75rem;
|
||||
}
|
||||
|
||||
.content p {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.divider {
|
||||
width: 1px;
|
||||
background: var(--red-to-pink-to-purple-vertical-gradient);
|
||||
margin-inline: 0.5rem;
|
||||
}
|
||||
|
||||
.pill-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
flex-wrap: wrap;
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
.pill {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
--pill-accent: var(--bright-blue);
|
||||
background: color-mix(in srgb, var(--pill-accent) 5%, transparent);
|
||||
color: var(--pill-accent);
|
||||
padding-inline: 0.75rem;
|
||||
padding-block: 0.375rem;
|
||||
border-radius: 2.75rem;
|
||||
border: 0;
|
||||
transition: background 0.3s ease;
|
||||
font-family: var(--inter-font);
|
||||
font-size: 0.875rem;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: 1.4rem;
|
||||
letter-spacing: -0.00875rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.pill:hover {
|
||||
background: color-mix(in srgb, var(--pill-accent) 15%, transparent);
|
||||
}
|
||||
|
||||
.pill-group .pill:nth-child(6n + 1) {
|
||||
--pill-accent: var(--bright-blue);
|
||||
}
|
||||
.pill-group .pill:nth-child(6n + 2) {
|
||||
--pill-accent: var(--french-violet);
|
||||
}
|
||||
.pill-group .pill:nth-child(6n + 3),
|
||||
.pill-group .pill:nth-child(6n + 4),
|
||||
.pill-group .pill:nth-child(6n + 5) {
|
||||
--pill-accent: var(--hot-red);
|
||||
}
|
||||
|
||||
.pill-group svg {
|
||||
margin-inline-start: 0.25rem;
|
||||
}
|
||||
|
||||
.social-links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.73rem;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.social-links path {
|
||||
transition: fill 0.3s ease;
|
||||
fill: var(--gray-400);
|
||||
}
|
||||
|
||||
.social-links a:hover svg path {
|
||||
fill: var(--gray-900);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 650px) {
|
||||
.content {
|
||||
flex-direction: column;
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
background: var(--red-to-pink-to-purple-horizontal-gradient);
|
||||
margin-block: 1.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<main class="main"></main>
|
||||
|
||||
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
|
||||
<!-- * * * * * * * * * * * The content above * * * * * * * * * * * * -->
|
||||
<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * * -->
|
||||
<!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * * -->
|
||||
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
|
||||
<!-- * * * * * * * * * * End of Placeholder * * * * * * * * * * * * -->
|
||||
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
|
||||
|
||||
<router-outlet />
|
||||
@@ -0,0 +1,29 @@
|
||||
import { TestBed } from '@angular/core/testing';
|
||||
import { AppComponent } from './app.component';
|
||||
|
||||
describe('AppComponent', () => {
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [AppComponent],
|
||||
}).compileComponents();
|
||||
});
|
||||
|
||||
it('should create the app', () => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
const app = fixture.componentInstance;
|
||||
expect(app).toBeTruthy();
|
||||
});
|
||||
|
||||
it(`should have the 'FrontEnd' title`, () => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
const app = fixture.componentInstance;
|
||||
expect(app.title).toEqual('FrontEnd');
|
||||
});
|
||||
|
||||
it('should render title', () => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
fixture.detectChanges();
|
||||
const compiled = fixture.nativeElement as HTMLElement;
|
||||
expect(compiled.querySelector('h1')?.textContent).toContain('Hello, FrontEnd');
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,13 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { RouterOutlet } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
standalone: true,
|
||||
imports: [RouterOutlet],
|
||||
templateUrl: './app.component.html',
|
||||
styleUrl: './app.component.less'
|
||||
})
|
||||
export class AppComponent {
|
||||
title = 'FrontEnd';
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
import { ApplicationConfig } from '@angular/core';
|
||||
import { provideRouter } from '@angular/router';
|
||||
|
||||
import { routes } from './app.routes';
|
||||
|
||||
export const appConfig: ApplicationConfig = {
|
||||
providers: [provideRouter(routes)]
|
||||
};
|
||||
@@ -0,0 +1,17 @@
|
||||
import { Routes } from '@angular/router';
|
||||
import { MainPageComponent } from './main-page/main-page.component';
|
||||
import { AdminPageComponent } from './admin-page/admin-page.component';
|
||||
import { LoginPageComponent } from './login-page/login-page.component';
|
||||
import { ViewPageComponent } from './view-page/view-page.component';
|
||||
import { AddPageComponent } from './add-page/add-page.component';
|
||||
import { EditPageComponent } from './edit-page/edit-page.component';
|
||||
|
||||
export const routes: Routes = [
|
||||
{ path: '', component: MainPageComponent },
|
||||
{ path: 'admin', component: AdminPageComponent },
|
||||
{ path: 'login', component: LoginPageComponent },
|
||||
{ path: 'view', component: ViewPageComponent },
|
||||
{ path: 'add', component: AddPageComponent},
|
||||
{ path: 'edit/:id', component: EditPageComponent},
|
||||
{ path: '**', redirectTo: '' }
|
||||
];
|
||||
@@ -0,0 +1,83 @@
|
||||
<div class="container" id="addFormDiv">
|
||||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<div class="container text-left">
|
||||
<form id="addForm">
|
||||
<h3>Edit a news:</h3>
|
||||
<div class="mb-1">
|
||||
<input type="hidden" id="idField" value="{{ news.id }}" />
|
||||
<label for="titleField" class="form-label">Title: </label
|
||||
><input
|
||||
type="text"
|
||||
id="titleField"
|
||||
class="form-control"
|
||||
required
|
||||
pattern="[0-9A-Za-z-.\:;]{5,30}"
|
||||
value="{{ news.title }}"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-1">
|
||||
<label for="contentField" class="form-label">Content: </label
|
||||
><input
|
||||
type="text"
|
||||
id="contentField"
|
||||
class="form-control"
|
||||
required
|
||||
pattern="[0-9A-Za-z-.\:;]{10,256}"
|
||||
value="{{ news.news_text }}"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-1">
|
||||
<label for="dateField" class="form-label">Date: </label
|
||||
><input
|
||||
type="date"
|
||||
id="dateField"
|
||||
class="form-control"
|
||||
required
|
||||
value="{{ news.date }}"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-1">
|
||||
<label for="producerField" class="form-label">Producer: </label
|
||||
><input
|
||||
type="text"
|
||||
id="producerField"
|
||||
class="form-control"
|
||||
required
|
||||
pattern="[0-9A-Za-z-]{5,30}"
|
||||
value="{{ news.producer }}"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-1">
|
||||
<label for="categoryField" class="form-label">Category: </label
|
||||
><input
|
||||
type="text"
|
||||
id="categoryField"
|
||||
class="form-control"
|
||||
required
|
||||
pattern="[0-9A-Za-z-]{5,30}"
|
||||
value="{{ news.category }}"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
id="insertNewsButton"
|
||||
type="submit"
|
||||
class="btn btn-success mb-1"
|
||||
(click)="editNews($event)"
|
||||
>
|
||||
Edit News
|
||||
</button>
|
||||
</form>
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-secondary mb-1"
|
||||
name="returnButton"
|
||||
(click)="returnToAdmin()"
|
||||
>
|
||||
Return to admin
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,23 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { EditPageComponent } from './edit-page.component';
|
||||
|
||||
describe('EditPageComponent', () => {
|
||||
let component: EditPageComponent;
|
||||
let fixture: ComponentFixture<EditPageComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [EditPageComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(EditPageComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,101 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
import News from '../../types/news';
|
||||
|
||||
@Component({
|
||||
selector: 'app-edit-page',
|
||||
standalone: true,
|
||||
imports: [],
|
||||
templateUrl: './edit-page.component.html',
|
||||
styleUrl: './edit-page.component.less'
|
||||
})
|
||||
export class EditPageComponent {
|
||||
news: News = {
|
||||
id: -1,
|
||||
title: "",
|
||||
news_text: "",
|
||||
date: "",
|
||||
producer: "",
|
||||
category: ""
|
||||
};
|
||||
constructor(private router: Router) {
|
||||
$.ajax({
|
||||
url: 'https://localhost/web/Lab%208/BackEnd/Repositories/Repository.php?action=isLogged',
|
||||
type: 'GET',
|
||||
xhrFields: {
|
||||
withCredentials: true
|
||||
},
|
||||
success: function(data: any){
|
||||
if (data === 'false'){
|
||||
router.navigate(['/login']);
|
||||
}
|
||||
}
|
||||
});
|
||||
let id = router.url.split("/")[2];
|
||||
$.ajax({
|
||||
url: `https://localhost/web/Lab 8/BackEnd/Repositories/Repository.php?action=getNewsById&id=${id}`,
|
||||
type: "GET",
|
||||
context: this,
|
||||
xhrFields: {
|
||||
withCredentials: true
|
||||
},
|
||||
success: (response: any) => {
|
||||
const news = JSON.parse(response);
|
||||
this.news = news;
|
||||
},
|
||||
error: function (response) {
|
||||
alert("Error getting log!");
|
||||
this.router.navigate(['/admin']);
|
||||
},
|
||||
});
|
||||
}
|
||||
editNews = (e: MouseEvent) => {
|
||||
e.preventDefault();
|
||||
if (!this.validate()){
|
||||
alert("Please fill all fields!");
|
||||
return;
|
||||
}
|
||||
const id = $("#idField").val();
|
||||
const title = $("#titleField").val();
|
||||
const content = $("#contentField").val();
|
||||
const date = $("#dateField").val();
|
||||
const producer = $("#producerField").val();
|
||||
const category = $("#categoryField").val();
|
||||
$.ajax({
|
||||
url: "https://localhost/web/Lab 8/BackEnd/Repositories/Repository.php",
|
||||
type: "POST",
|
||||
xhrFields: {
|
||||
withCredentials: true
|
||||
},
|
||||
data: {
|
||||
id: id,
|
||||
title: title,
|
||||
news_text: content,
|
||||
date: date,
|
||||
producer: producer,
|
||||
category: category,
|
||||
action: "updateNews",
|
||||
},
|
||||
success: function (response) {
|
||||
alert("Log edited successfully!");
|
||||
},
|
||||
error: function (response) {
|
||||
alert("Error edited log!");
|
||||
},
|
||||
});
|
||||
};
|
||||
returnToAdmin = () => {
|
||||
this.router.navigate(['/admin']);
|
||||
}
|
||||
validate = () => {
|
||||
const title = $("#titleField").val();
|
||||
const content = $("#contentField").val();
|
||||
const date = $("#dateField").val();
|
||||
const producer = $("#producerField").val();
|
||||
const category = $("#categoryField").val();
|
||||
if (title === "" || content === "" || date === "" || producer === "" || category === ""){
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
<div class="container">
|
||||
<h2>Login</h2>
|
||||
<div class="mb-3 mt-3">
|
||||
<label for="username" class="form-label">Username:</label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="username"
|
||||
placeholder="Enter username"
|
||||
name="username"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="password" class="form-label">Password:</label>
|
||||
<input
|
||||
type="password"
|
||||
class="form-control"
|
||||
id="password"
|
||||
placeholder="Enter password"
|
||||
name="password"
|
||||
/>
|
||||
</div>
|
||||
<button class="btn btn-primary" name="loginButton" (click)="login()">
|
||||
Login
|
||||
</button>
|
||||
<button class="btn btn-secondary" name="indexPage" (click)="cancel()">
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
@@ -0,0 +1,23 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { LoginPageComponent } from './login-page.component';
|
||||
|
||||
describe('LoginPageComponent', () => {
|
||||
let component: LoginPageComponent;
|
||||
let fixture: ComponentFixture<LoginPageComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [LoginPageComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(LoginPageComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,61 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
import $ from 'jquery';
|
||||
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-login-page',
|
||||
standalone: true,
|
||||
imports: [],
|
||||
templateUrl: './login-page.component.html',
|
||||
styleUrl: './login-page.component.less'
|
||||
})
|
||||
|
||||
export class LoginPageComponent {
|
||||
constructor(private router: Router) {
|
||||
$.ajax({
|
||||
url: 'https://localhost/web/Lab%208/BackEnd/Repositories/Repository.php?action=isLogged',
|
||||
type: 'GET',
|
||||
xhrFields: {
|
||||
withCredentials: true
|
||||
},
|
||||
success: function(data: any){
|
||||
if (data === 'true'){
|
||||
console.log('User is logged in');
|
||||
router.navigate(['/admin']);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
login = () => {
|
||||
let username = $('#username').val();
|
||||
let password = $('#password').val();
|
||||
let router = this.router;
|
||||
|
||||
$.ajax({
|
||||
url: 'https://localhost/web/Lab%208/BackEnd/Repositories/Repository.php',
|
||||
type: 'POST',
|
||||
data: {username: username, password: password, action: 'validateUser'},
|
||||
xhrFields: {
|
||||
withCredentials: true
|
||||
},
|
||||
success: function(data: any){
|
||||
if (data){
|
||||
router.navigate(['/admin']);
|
||||
}
|
||||
else{
|
||||
alert('Invalid username or password');
|
||||
}
|
||||
},
|
||||
error: function(){
|
||||
alert('Invalid username or password');
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
cancel = () => {
|
||||
this.router.navigate(['/']);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
<div class="container text-center" id="index-page">
|
||||
<h2>News</h2>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary btn-block"
|
||||
(click)="loginButtonClicked()"
|
||||
>
|
||||
Login
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary btn-block"
|
||||
(click)="viewButtonClicked()"
|
||||
>
|
||||
View
|
||||
</button>
|
||||
</div>
|
||||
@@ -0,0 +1,23 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { MainPageComponent } from './main-page.component';
|
||||
|
||||
describe('MainPageComponent', () => {
|
||||
let component: MainPageComponent;
|
||||
let fixture: ComponentFixture<MainPageComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [MainPageComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(MainPageComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,21 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector: 'app-main-page',
|
||||
standalone: true,
|
||||
imports: [],
|
||||
templateUrl: './main-page.component.html',
|
||||
styleUrl: './main-page.component.less'
|
||||
})
|
||||
export class MainPageComponent {
|
||||
constructor(private router: Router) {
|
||||
}
|
||||
loginButtonClicked = () => {
|
||||
this.router.navigate(['/login']);
|
||||
|
||||
}
|
||||
viewButtonClicked = () => {
|
||||
this.router.navigate(['/view']);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
<div class="container text-center">
|
||||
<h3>Welcome</h3>
|
||||
<div class="dropdown">
|
||||
<button
|
||||
class="btn btn-secondary dropdown-toggle"
|
||||
type="button"
|
||||
id="dropdownMenuButton"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="false"
|
||||
>
|
||||
Filter
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
|
||||
<input
|
||||
class="dropdown-item"
|
||||
type="date"
|
||||
id="dateField"
|
||||
class="form-control"
|
||||
required
|
||||
/>
|
||||
<input
|
||||
class="dropdown-item"
|
||||
placeholder="Category"
|
||||
type="text"
|
||||
id="categoryField"
|
||||
class="form-control"
|
||||
required
|
||||
/>
|
||||
<input
|
||||
class="dropdown-item"
|
||||
type="button"
|
||||
class="btn btn-primary"
|
||||
id="filterButton"
|
||||
value="Filter"
|
||||
(click)="filter($event)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<table
|
||||
class="container"
|
||||
id="newsTable"
|
||||
style="
|
||||
margin: 30px;
|
||||
border: 1px solid;
|
||||
border-color: black;
|
||||
border-collapse: collapse;
|
||||
"
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Title</th>
|
||||
<th>Content</th>
|
||||
<th>Category</th>
|
||||
<th>Date</th>
|
||||
<th>Producer</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="tableBody"></tbody>
|
||||
<button
|
||||
class="btn btn-dark"
|
||||
name="backButton"
|
||||
value="Back"
|
||||
style="margin: 30px"
|
||||
(click)="back($event)"
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
</table>
|
||||
</div>
|
||||
@@ -0,0 +1,23 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { ViewPageComponent } from './view-page.component';
|
||||
|
||||
describe('ViewPageComponent', () => {
|
||||
let component: ViewPageComponent;
|
||||
let fixture: ComponentFixture<ViewPageComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [ViewPageComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(ViewPageComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,83 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector: 'app-view-page',
|
||||
standalone: true,
|
||||
imports: [],
|
||||
templateUrl: './view-page.component.html',
|
||||
styleUrl: './view-page.component.less'
|
||||
})
|
||||
export class ViewPageComponent {
|
||||
constructor(private router: Router) {
|
||||
$.ajax({
|
||||
url: "https://localhost/web/Lab%208/BackEnd/Repositories/Repository.php?action=getAllNews",
|
||||
type: "GET",
|
||||
xhrFields: {
|
||||
withCredentials: true,
|
||||
},
|
||||
success: function (response) {
|
||||
response = JSON.parse(response);
|
||||
$("#tableBody").empty();
|
||||
for (var i = 0; i < response.length; i++) {
|
||||
var newRow =
|
||||
"<tr><td>" +
|
||||
response[i].title +
|
||||
"</td><td>" +
|
||||
response[i].news_text +
|
||||
"</td><td>" +
|
||||
response[i].category +
|
||||
"</td><td>" +
|
||||
response[i].date +
|
||||
"</td><td>" +
|
||||
response[i].producer +
|
||||
"</td></tr>";
|
||||
$("#tableBody").append(newRow);
|
||||
}
|
||||
},
|
||||
error: function (response) {
|
||||
alert("Error getting log!");
|
||||
},
|
||||
});
|
||||
}
|
||||
back = (e: MouseEvent) => {
|
||||
e.preventDefault();
|
||||
this.router.navigate(["/"]);
|
||||
}
|
||||
|
||||
filter = (e: MouseEvent) => {
|
||||
var date = $("#dateField").val();
|
||||
var category = $("#categoryField").val();
|
||||
$.ajax({
|
||||
url: "https://localhost/web/Lab%208/BackEnd/Repositories/Repository.php",
|
||||
type: "GET",
|
||||
data: {
|
||||
date: date,
|
||||
category: category,
|
||||
action: "getAllNewsByCategoryAndDate",
|
||||
},
|
||||
xhrFields: {
|
||||
withCredentials: true,
|
||||
},
|
||||
success: function (response) {
|
||||
response = JSON.parse(response);
|
||||
$("#tableBody").empty();
|
||||
for (var i = 0; i < response.length; i++) {
|
||||
var newRow =
|
||||
"<tr><td>" +
|
||||
response[i].title +
|
||||
"</td><td>" +
|
||||
response[i].news_text +
|
||||
"</td><td>" +
|
||||
response[i].category +
|
||||
"</td><td>" +
|
||||
response[i].date +
|
||||
"</td><td>" +
|
||||
response[i].producer +
|
||||
"</td></tr>";
|
||||
$("#tableBody").append(newRow);
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
@@ -0,0 +1,21 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>FrontEnd</title>
|
||||
<base href="/" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico" />
|
||||
<link
|
||||
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
|
||||
rel="stylesheet"
|
||||
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<app-root></app-root>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,6 @@
|
||||
import { bootstrapApplication } from '@angular/platform-browser';
|
||||
import { appConfig } from './app/app.config';
|
||||
import { AppComponent } from './app/app.component';
|
||||
|
||||
bootstrapApplication(AppComponent, appConfig)
|
||||
.catch((err) => console.error(err));
|
||||
@@ -0,0 +1 @@
|
||||
/* You can add global styles to this file, and also import other style files */
|
||||
@@ -0,0 +1,10 @@
|
||||
type News = {
|
||||
id: number;
|
||||
title: string;
|
||||
news_text: string;
|
||||
date: string;
|
||||
category: string;
|
||||
producer: string;
|
||||
}
|
||||
|
||||
export default News;
|
||||
@@ -0,0 +1,14 @@
|
||||
/* To learn more about this file see: https://angular.io/config/tsconfig. */
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "./out-tsc/app",
|
||||
"types": []
|
||||
},
|
||||
"files": [
|
||||
"src/main.ts"
|
||||
],
|
||||
"include": [
|
||||
"src/**/*.d.ts"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
/* To learn more about this file see: https://angular.io/config/tsconfig. */
|
||||
{
|
||||
"compileOnSave": false,
|
||||
"compilerOptions": {
|
||||
"outDir": "./dist/out-tsc",
|
||||
"strict": true,
|
||||
"noImplicitOverride": true,
|
||||
"noPropertyAccessFromIndexSignature": true,
|
||||
"noImplicitReturns": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"skipLibCheck": true,
|
||||
"esModuleInterop": true,
|
||||
"sourceMap": true,
|
||||
"declaration": false,
|
||||
"experimentalDecorators": true,
|
||||
"moduleResolution": "node",
|
||||
"importHelpers": true,
|
||||
"target": "ES2022",
|
||||
"module": "ES2022",
|
||||
"useDefineForClassFields": false,
|
||||
"lib": [
|
||||
"ES2022",
|
||||
"dom"
|
||||
]
|
||||
},
|
||||
"angularCompilerOptions": {
|
||||
"enableI18nLegacyMessageIdFormat": false,
|
||||
"strictInjectionParameters": true,
|
||||
"strictInputAccessModifiers": true,
|
||||
"strictTemplates": true
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
/* To learn more about this file see: https://angular.io/config/tsconfig. */
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "./out-tsc/spec",
|
||||
"types": [
|
||||
"jasmine"
|
||||
]
|
||||
},
|
||||
"include": [
|
||||
"src/**/*.spec.ts",
|
||||
"src/**/*.d.ts"
|
||||
]
|
||||
}
|
||||
Reference in New Issue
Block a user