Skip to content
GitLab
Commit b39c3bf6 authored by Clément Legroux's avatar Clément Legroux
Browse files

Visual Update with Improvements

parent 09f7beed
Hide whitespace changes
Inline Side-by-side
src/explorer/index.html
View file @ b39c3bf6
......@@ -13,6 +13,7 @@
<button id="btnGet" class="btnGet">GET</button>
</p>
<br>
<div id="menu"></div>
<div id="error"></div>
<div id="answer"></div>
......
src/explorer/main.js
View file @ b39c3bf6
......@@ -264,6 +264,9 @@ var urlEntry = document.querySelector('#urlEntry');
//get button to do request
var btnGet = document.querySelector('#btnGet');
/**
* when click on the button : do a fetch action
*/
btnGet.addEventListener('click', () => {
//get entry
......@@ -326,10 +329,10 @@ function menuComponent(){
//if the history menu is select we display the history
if(state.historyDisplay == true){
//show the tab history in orange
//display the tab history in orange
cell1.style.background = 'linear-gradient(to bottom, #ffe8d4, #f69d3c)'
//display each request that was did
//display each name request that was did
for(let i = 1; i<state.listResponse.length;i++){
if(state.listResponse[i]['status'] !== "404 Not Found"){
let a = document.createElement("a");
......@@ -350,7 +353,7 @@ function menuComponent(){
}
} else {
//if the select menu is WIP did :
//if the select menu is "WIP" do :
cell2.style.background = 'linear-gradient(to bottom, #ffe8d4, #f69d3c)'
}
}
......@@ -418,19 +421,19 @@ function answerComponent(){
pre.classList.add("headerDescription");
newDiv.appendChild(pre);
let status = document.createTextNode("status: " + state.listResponse[state.activeId]['status'] + "\n");
let status = document.createTextNode("status : " + state.listResponse[state.activeId]['status'] + "\n");
pre.appendChild(status);
let xpowered = document.createTextNode("x-powered-by: " + state.listResponse[state.activeId]['poweredby'] + "\n");
let xpowered = document.createTextNode("x-powered-by : " + state.listResponse[state.activeId]['poweredby'] + "\n");
pre.appendChild(xpowered);
let contentType = document.createTextNode("Content-type: " + state.listResponse[state.activeId]['type']+ "\n");
let contentType = document.createTextNode("Content-type : " + state.listResponse[state.activeId]['type']+ "\n");
pre.appendChild(contentType);
let contentLength = document.createTextNode("Content-length: " + state.listResponse[state.activeId]['length'] + "\n");
let contentLength = document.createTextNode("Content-length : " + state.listResponse[state.activeId]['length'] + "\n");
pre.appendChild(contentLength);
let etag = document.createTextNode("Etag: " + state.listResponse[state.activeId]['etag'] + "\n");
let etag = document.createTextNode("Etag : " + state.listResponse[state.activeId]['etag'] + "\n");
pre.appendChild(etag);
let date = document.createTextNode("Date: " + state.listResponse[state.activeId]['date'] + "\sn");
let date = document.createTextNode("Date : " + state.listResponse[state.activeId]['date'] + "\sn");
pre.appendChild(date);
let connection = document.createTextNode("Connection: " + state.listResponse[state.activeId]['connection'] + "\n");
let connection = document.createTextNode("Connection : " + state.listResponse[state.activeId]['connection'] + "\n");
pre.appendChild(connection);
//reset the body element
......@@ -440,6 +443,7 @@ function answerComponent(){
if(descPre){newDiv.removeChild(descPre)}
descPre = document.createElement('div');
descPre.classList.add("bodyDescriptionGlobal")
newDiv.appendChild(descPre)
//if the answer exist
......@@ -459,10 +463,27 @@ function answerComponent(){
* @param{key} object the head of the answer
* @param{value} object ressource of the answer
*/
function createElementDesc(key,value){
function createElementDesc(key,value,deep){
bodyDescription = document.createElement('div');
bodyDescription.classList.add("bodyDescriptionDesc");
bodyDescription.innerHTML = key + " : " + value;
bodyDescription.classList.add("bodyDescription");
elemKey = document.createElement('a');
elemKey.classList.add("bodyDescriptionHead");
elemKey.innerHTML = key;
elemDot = document.createElement('a');
elemDot.innerHTML = " : ";
elemValue = document.createElement('a');
elemValue.classList.add("bodyDescriptionDesc");
elemValue.innerHTML = value;
let displayDeep = 80;
for(let i = 0; i<deep;i++){displayDeep += 25}
bodyDescription.style.marginLeft = displayDeep + "px";
bodyDescription.append(elemKey);
bodyDescription.append(elemDot);
bodyDescription.append(elemValue);
descPre.appendChild(bodyDescription)
//if the value is a URL valid, we can select it to do a fetch action on it
......@@ -479,36 +500,53 @@ function answerComponent(){
* @param{key} object the head of the answer
* @param{value} object ressource of the answer
*/
function createElementHead(key,value){
function createElementHead(key,value,deep){
bodyDescription = document.createElement('div');
bodyDescription.classList.add("bodyDescriptionHead");
bodyDescription.innerHTML = key;
bodyDescription.classList.add("bodyDescription");
elemKey = document.createElement('a');
elemKey.classList.add("bodyDescriptionHead");
elemKey.innerHTML = key ;
elemValue = document.createElement('a');
elemValue.innerHTML = ' {';
let displayDeep = 80;
for(let i = 0; i<deep;i++){displayDeep += 25}
bodyDescription.style.marginLeft = displayDeep + "px";
bodyDescription.append(elemKey);
bodyDescription.append(elemValue);
descPre.appendChild(bodyDescription)
/*
//if the value is a URL valid, we can select it to do a fetch action on it
if(isValidURL(key)){
bodyDescription.classList.add("bodyisClickable")
elemValue.classList.add("bodyisClickable");
bodyDescription.addEventListener('click', () => {
store.dispatch(fetchAction(value[0]));
});
}
*/
}
//Recursive function that travel a JSON object and display it.
function traverse(o) {
function traverse(o, deep) {
for (var i in o) {
//if o[i] is not null and is an object, it is a "title", we call traverse on it and create an element to display it
if (o[i] !== null && typeof(o[i])=="object") {
createElementHead(i,[o[i]]);
traverse(o[i]);
createElementHead(i,[o[i]],deep);
traverse(o[i], deep + 1);
} else {
//else
createElementDesc(i,[o[i]]);
createElementDesc(i,[o[i]],deep);
}
}
}
//use to know the deep where we are in the description to have better display
let deep = 0;
//start traverse function on the data
traverse(data);
traverse(data, deep);
})
} else {
//if the answer is 404 we apply this style
......@@ -528,6 +566,7 @@ function answerComponent(){
}
function rootComponent(){
let menuRoot = document.getElementById("menu")
let menu = menuComponent()
menuRoot.appendChild(menu.elem)
......@@ -542,6 +581,7 @@ function rootComponent(){
let subcomponents = [menu, error, answer]
function render(state) {
subcomponents.forEach(sub => sub.render(state))
}
......
src/explorer/style.css
View file @ b39c3bf6
......@@ -69,7 +69,7 @@ h2 {
.headerDescription{
margin-left: 80px;
font-family:"Segoe print", Arial, Helvetica, sans-serif;
font-family: "Gill Sans", sans-serif;
font-size: 23px;
}
......@@ -85,20 +85,31 @@ h2 {
border-radius: 5px ;
}
.bodyDescriptionGlobal{
width: 81%;
margin-left: 7%;
border-radius: 10px;
background: linear-gradient(#C8ABDE, #C69BE7);
font-family:"Segoe print", Arial, Helvetica, sans-serif;
}
.bodyDescription{
margin-left: 80px;
font-size: 23px;
}
.bodyDescriptionHead{
margin-left: 80px;
font-family:"Segoe print", Arial, Helvetica, sans-serif;
font-size: 23px;
color : #D64664;
}
.bodyDescriptionDesc{
margin-left: 120px;
font-family:"Segoe print", Arial, Helvetica, sans-serif;
font-size: 23px;
}
.bodyisClickable{
color : #23642D;
}
.bodyisClickable:hover{
width:70%;
background: linear-gradient(to bottom, #ffe8d4, #f69d3c) ;
border-radius: 10px;
box-shadow: 2px 2px 1px black;
......@@ -152,9 +163,9 @@ h2 {
margin-right: 5px;
}
/*------------------.
| CSS for History |
`------------------*/
/*-----------------------.
| CSS for History/Menu |
`-----------------------*/
.History {
height: 90%;
......@@ -173,6 +184,7 @@ h2 {
/*
* css for title of history
*/
.History h2{
margin-left: 2px;
font-family:"Segoe print", Arial, Helvetica, sans-serif;
......@@ -220,8 +232,9 @@ h2 {
cursor:pointer;
}
/*---------------------.
| for adaptative CSS | /!\ work in progress /!\
| for adaptative CSS |
`---------------------*/
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment