BreizhHardware/AJAX
1
0
Fork 0
mirror of https://github.com/BreizhHardware/AJAX.git synced 2026-03-18 21:50:35 +01:00
Code Issues Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Félix MARQUET
2024-01-23 09:22:58 +01:00
commit cf6bc9f035
13 changed files with 454 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
.idea/.gitignore generated vendored Normal file
View File

@@ -0,0 +1,8 @@
# Default ignored files
/shelf/
/workspace.xml
# Editor-based HTTP Client requests
/httpRequests/
# Datasource local storage ignored files
/dataSources/
/dataSources.local.xml

10
.idea/AJAX.iml generated Normal file
View File

@@ -0,0 +1,10 @@
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$" />
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
<orderEntry type="library" name="font-awesome" level="application" />
<orderEntry type="library" name="twitter-bootstrap" level="application" />
</component>
</module>

7
.idea/discord.xml generated Normal file
View File

@@ -0,0 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="DiscordProjectSettings">
<option name="show" value="PROJECT_FILES" />
<option name="description" value="" />
</component>
</project>

6
.idea/jsLibraryMappings.xml generated Normal file
View File

@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="JavaScriptLibraryMappings">
<file url="PROJECT" libraries="{font-awesome, twitter-bootstrap}" />
</component>
</project>

8
.idea/modules.xml generated Normal file
View File

@@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/AJAX.iml" filepath="$PROJECT_DIR$/.idea/AJAX.iml" />
</modules>
</component>
</project>

19
.idea/php.xml generated Normal file
View File

@@ -0,0 +1,19 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="MessDetectorOptionsConfiguration">
<option name="transferred" value="true" />
</component>
<component name="PHPCSFixerOptionsConfiguration">
<option name="transferred" value="true" />
</component>
<component name="PHPCodeSnifferOptionsConfiguration">
<option name="highlightLevel" value="WARNING" />
<option name="transferred" value="true" />
</component>
<component name="PhpStanOptionsConfiguration">
<option name="transferred" value="true" />
</component>
<component name="PsalmOptionsConfiguration">
<option name="transferred" value="true" />
</component>
</project>

45
TP1/Ex1/index.html Normal file
View File

@@ -0,0 +1,45 @@
<!DOCTYPE html>
<html lang="FR" data-bs-theme="dark">
<head>
<!-- Meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Title -->
<title>AJAX</title>
<!-- CSS Styles -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha256-L/W5Wfqfa0sdBNIKN9cG6QA5F2qx4qICmU2VgLruv9Y=" crossorigin="anonymous">
<script src="js/ajax.js" defer></script>
</head>
<body>
<!-- Header -->
<header class="container">
<br>
<h1>AJAX</h1>
<hr>
</header>
<!-- Errors -->
<section id="errors" class="container alert alert-danger" style="display: none">
</section>
<!-- Timestamp -->
<section class="container">
<div class="card">
<div class="card-header">
<h4>Date et heure</h4>
</div>
<div id="timestamp" class="card-body">
</div>
</div>
</section>
</body>
</html>

52
TP1/Ex1/js/ajax.js Normal file
View File

@@ -0,0 +1,52 @@
console.log("ajax.js.js chargé");
function ajaxRequest(type, url, callback){
let xhr = new XMLHttpRequest();
xhr.open(type, url, true);
xhr.onload = () => {
switch (xhr.status){
case 200:
case 201:
callback(xhr.responseText);
break;
default:
httpErrors(xhr.status)
break;
}
};
xhr.send();
}
function displayTimestamp(response){
response = '<i class="fa-solid fa-clock"></i> ' + response;
document.getElementById("timestamp").innerHTML = response;
}
function httpErrors(errorCode){
document.getElementById("errors").style.display = "block";
switch (errorCode) {
case 400:
document.getElementById("errors").innerHTML = "<i class='fa-solid fa-circle-exclamation'></i> 400: Requête incorrecte";
break;
case 401:
document.getElementById("errors").innerHTML = "<i class='fa-solid fa-circle-exclamation'></i> 401: Authentifiez-vous";
break;
case 403:
document.getElementById("errors").innerHTML = "<i class='fa-solid fa-circle-exclamation'></i> 403: Accès refusé";
break;
case 404:
document.getElementById("errors").innerHTML = "<i class='fa-solid fa-circle-exclamation'></i> 404: Page non trouvée";
break;
case 500:
document.getElementById("errors").innerHTML = "<i class='fa-solid fa-circle-exclamation'></i> 500: Erreur interne du serveur";
break;
case 503:
document.getElementById("errors").innerHTML = "<i class='fa-solid fa-circle-exclamation'></i> 503: Service indisponible";
break;
}
}
setInterval(() => {
ajaxRequest("GET", "php/timestamp.php", displayTimestamp);
}, 1000);

12
TP1/Ex1/php/timestamp.php Normal file
View File

@@ -0,0 +1,12 @@
<?php
// Generate timestamp.
$data = date('d/m/Y H:i:s');
// Send data to the client.
header('Content-Type: text/plain; charset=utf-8');
header('Cache-control: no-store, no-cache, must-revalidate');
header('Pragma: no-cache');
header('HTTP/1.1 200 OK');
echo $data;
exit;
?>

43
TP1/Ex2/index.html Normal file
View File

@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html>
<head>
<!-- Meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Title -->
<title>AJAX-JSON</title>
<!-- CSS Styles -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha256-L/W5Wfqfa0sdBNIKN9cG6QA5F2qx4qICmU2VgLruv9Y=" crossorigin="anonymous">
<!-- JS Scripts -->
<script src="js/ajax.js" defer></script>
<script src="js/clock.js" defer></script>
</head>
<body>
<!-- Header -->
<header class="container">
<br>
<h1>AJAX-JSON</h1>
<hr>
</header>
<!-- Errors -->
<section id="errors" class="container alert alert-danger" style="display: none">
</section>
<!-- Clock -->
<section class="container col-md-4 offset-md-4">
<h4 id='title'></h4>
<br>
<p id='detail'></p>
<canvas id="clock" width="400" height="400" style="background-color:#333"></canvas>
</section>
</body>
</html>

50
TP1/Ex2/js/ajax.js Normal file
View File

@@ -0,0 +1,50 @@
function ajaxRequest(type, url, callback){
let xhr = new XMLHttpRequest();
xhr.open(type, url, true);
xhr.onload = () => {
switch (xhr.status){
case 200:
case 201:
callback(xhr.responseText);
break;
default:
httpErrors(xhr.status)
break;
}
};
xhr.send();
}
function editTitleAndDetails(response){
let title = document.getElementById("title");
let details = document.getElementById("detail");
let json = JSON.parse(response);
title.innerHTML = json[0];
details.innerHTML = "Heures : " + json[1].hours + " Minutes : " + json[1].minutes + " Secondes : " + json[1].seconds;
}
function httpErrors(errorCode){
document.getElementById("errors").style.display = "block";
switch (errorCode) {
case 400:
document.getElementById("errors").innerHTML = "<i class='fa-solid fa-circle-exclamation'></i> 400: Requête incorrecte";
break;
case 401:
document.getElementById("errors").innerHTML = "<i class='fa-solid fa-circle-exclamation'></i> 401: Authentifiez-vous";
break;
case 403:
document.getElementById("errors").innerHTML = "<i class='fa-solid fa-circle-exclamation'></i> 403: Accès refusé";
break;
case 404:
document.getElementById("errors").innerHTML = "<i class='fa-solid fa-circle-exclamation'></i> 404: Page non trouvée";
break;
case 500:
document.getElementById("errors").innerHTML = "<i class='fa-solid fa-circle-exclamation'></i> 500: Erreur interne du serveur";
break;
case 503:
document.getElementById("errors").innerHTML = "<i class='fa-solid fa-circle-exclamation'></i> 503: Service indisponible";
break;
}
}
setInterval(ajaxRequest, 1000, 'GET', 'php/time.php', editTitleAndDetails);

179
TP1/Ex2/js/clock.js Normal file
View File

@@ -0,0 +1,179 @@
'use strict';
setInterval(ajaxRequest, 1000, 'GET', 'php/time.php', displayClock);
//ajaxRequest('GET', 'php/time.php', displayClock)
//------------------------------------------------------------------------------
//--- displayClock -------------------------------------------------------------
//------------------------------------------------------------------------------
// Display a clock.
// \param time The time data received via the Ajax request.
function displayClock(time)
{
let canvas;
let context;
let radius;
// Define context.
canvas = document.getElementById('clock');
context = canvas.getContext('2d');
radius = canvas.height/2;
context.translate(radius, radius);
radius *= 0.9;
// Draw clock background, numbers and hands.
drawBackground(context, radius);
drawNumbers(context, radius);
drawHands(context, radius, time[1]);
context.setTransform(1, 0, 0, 1, 0, 0);
}
//------------------------------------------------------------------------------
//--- drawBackground -----------------------------------------------------------
//------------------------------------------------------------------------------
// Draw clock background.
// \param context The drawing context.
// \param radius The clock radius.
function drawBackground(context, radius)
{
let gradient;
// White background.
context.beginPath();
context.arc(0, 0, radius, 0, 2*Math.PI);
context.fillStyle = 'white';
context.fill();
// Gradient contour.
gradient = context.createRadialGradient(0, 0, radius*0.95, 0, 0, radius*1.05);
gradient.addColorStop(0, '#333');
gradient.addColorStop(0.5, 'white');
gradient.addColorStop(1, '#333');
context.strokeStyle = gradient;
context.lineWidth = radius*0.1;
context.stroke();
// Clock center.
context.beginPath();
context.arc(0, 0, radius*0.1, 0, 2*Math.PI);
context.fillStyle = '#333';
context.fill();
}
//------------------------------------------------------------------------------
//--- drawNumbers --------------------------------------------------------------
//------------------------------------------------------------------------------
// Draw clock numbers.
// \param context The drawing context.
// \param radius The clock radius.
function drawNumbers(context, radius)
{
let angle;
context.font = radius*0.15 + 'px arial';
context.textBaseline = 'middle';
context.textAlign = 'center';
for (let number = 1; number <= 12; number++)
{
angle = number*Math.PI/6;
context.rotate(angle);
context.translate(0, -radius*0.85);
context.rotate(-angle);
context.fillText(number.toString(), 0, 0);
context.rotate(angle);
context.translate(0, radius*0.85);
context.rotate(-angle);
}
}
//------------------------------------------------------------------------------
//--- drawHands ----------------------------------------------------------------
//------------------------------------------------------------------------------
// Draw clock hands.
// \param context The drawing context.
// \param radius The clock radius
// \param time The time
function drawHands(context, radius, time)
{
let hours;
let minutes;
let seconds;
// Get data.
hours = time['hours'];
minutes = time['minutes'];
seconds = time['seconds'];
// Hours.
hours %= 12;
hours = (hours*Math.PI/6) + (minutes*Math.PI/(6*60)) +
(seconds*Math.PI/(360*60));
drawHand(context, radius*0.5, radius*0.07, hours);
// Minutes.
minutes = (minutes*Math.PI/30) + (seconds* Math.PI/(30*60));
drawHand(context, radius*0.8, radius*0.07, minutes);
// Seconds.
seconds = (seconds*Math.PI/30);
drawHand(context, radius*0.9, radius*0.02, seconds);
}
//------------------------------------------------------------------------------
//--- drawHand -----------------------------------------------------------------
//------------------------------------------------------------------------------
// Draw clock hand.
// \param context The drawing context.
// \param length The hand length.
// \param width The hand width.
// \param value The hand value.
function drawHand(context, length, width, value)
{
context.beginPath();
context.lineWidth = width;
context.lineCap = 'round';
context.moveTo(0, 0);
context.rotate(value);
context.lineTo(0, -length);
context.stroke();
context.rotate(-value);
}
function ajaxRequest(type, url, callback){
let xhr = new XMLHttpRequest();
xhr.open(type, url, true);
xhr.onload = () => {
switch (xhr.status){
case 200:
case 201:
callback(JSON.parse(xhr.responseText));
break;
default:
httpErrors(xhr.status)
break;
}
};
xhr.send();
}
function httpErrors(errorCode){
document.getElementById("errors").style.display = "block";
switch (errorCode) {
case 400:
document.getElementById("errors").innerHTML = "<i class='fa-solid fa-circle-exclamation'></i> 400: Requête incorrecte";
break;
case 401:
document.getElementById("errors").innerHTML = "<i class='fa-solid fa-circle-exclamation'></i> 401: Authentifiez-vous";
break;
case 403:
document.getElementById("errors").innerHTML = "<i class='fa-solid fa-circle-exclamation'></i> 403: Accès refusé";
break;
case 404:
document.getElementById("errors").innerHTML = "<i class='fa-solid fa-circle-exclamation'></i> 404: Page non trouvée";
break;
case 500:
document.getElementById("errors").innerHTML = "<i class='fa-solid fa-circle-exclamation'></i> 500: Erreur interne du serveur";
break;
case 503:
document.getElementById("errors").innerHTML = "<i class='fa-solid fa-circle-exclamation'></i> 503: Service indisponible";
break;
}
}

15
TP1/Ex2/php/time.php Normal file
View File

@@ -0,0 +1,15 @@
<?php
// Generate timestamp.
$date = getdate();
$data = array('Il est : '.$date['hours'].':'.$date['minutes'].':'.
$date['seconds'], array('hours' => $date['hours'], 'minutes' => $date['minutes'], 'seconds' => $date['seconds']));
// Send data to the client.
header('Content-Type: application/json; charset=utf-8');
header('Cache-control: no-store, no-cache, must-revalidate');
header('Pragma: no-cache');
header('HTTP/1.1 200 OK');
$data = json_encode($data);
echo $data;
exit;
?>