Last active
June 15, 2019 10:11
-
-
Save bogdan-nourescu/c7a9249769a77b9f259b166d9d8c9fbd to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Linkuri Utile</title> | |
| <style> | |
| table{ | |
| border-collapse:collapse; | |
| width:100%; | |
| } | |
| .brain{ | |
| width:40px; | |
| height:40px; | |
| vertical-align:middle; | |
| } | |
| .tag{ | |
| border: 1px solid orange; | |
| border-radius:15px; | |
| padding:3px 7px; | |
| } | |
| .editBtn{ | |
| display: inline-block; | |
| width: 30px; | |
| height: 30px; | |
| background-position: center; | |
| background-repeat: no-repeat; | |
| background-size: contain; | |
| background-image: url(61456.svg); | |
| } | |
| .delBtn{ | |
| display: inline-block; | |
| width: 30px; | |
| height: 30px; | |
| background-position: center; | |
| background-repeat: no-repeat; | |
| background-size: contain; | |
| background-image: url(627249-delete3-512.png); | |
| } | |
| .hidden{ | |
| display:none; | |
| } | |
| </style> | |
| <script> | |
| var lista = []; | |
| var indexEdit = -1; | |
| var complexityColors = ["yellow","green","blue","teal","black","red"]; | |
| /*async function forCuAjax(){ | |
| var promiseArr = []; | |
| for(var i=0;i<lista.length;i++){ | |
| promiseArr.push(ajaxPromise()); | |
| } | |
| var responseArray = await Promise.all(promiseArr); | |
| }*/ | |
| function ajax(url, method, body, callback, callbackError){ | |
| var xhttp = new XMLHttpRequest(); | |
| xhttp.onreadystatechange = function() { | |
| if (this.readyState == 4 ){ | |
| if (this.status == 200) { | |
| if(typeof callback==="function"){ | |
| callback(this.responseText); | |
| } | |
| }else{ | |
| if(typeof callbackError==="function"){ | |
| callbackError(this.responseText); | |
| } | |
| } | |
| } | |
| }; | |
| xhttp.open(method, url, true); | |
| xhttp.send(body); | |
| } | |
| async function ajaxPromise(url, method, body){ | |
| return new Promise(function(resolve,reject){ | |
| var xhttp = new XMLHttpRequest(); | |
| xhttp.onreadystatechange = function() { | |
| if (this.readyState == 4 ){ | |
| if (this.status == 200) { | |
| resolve(this.responseText); | |
| }else{ | |
| reject(this); | |
| } | |
| } | |
| }; | |
| xhttp.open(method, url, true); | |
| xhttp.send(body); | |
| }); | |
| } | |
| async function getLista(){ | |
| /*ajax("https://linkuri-utile-grupa-6.firebaseio.com/.json", | |
| "GET", | |
| undefined, | |
| function(responseText){ | |
| window.lista = JSON.parse(responseText); | |
| draw(); | |
| }, | |
| function(){ | |
| alert("a crapat"); | |
| });*/ | |
| /*return ajaxPromise("https://linkuri-utile-grupa-6.firebaseio.com/.json","GET") | |
| .then(function(responseText){ | |
| window.lista = JSON.parse(responseText); | |
| draw(); | |
| });*/ | |
| var responseText = await ajaxPromise("https://linkuri-utile-grupa-6.firebaseio.com/.json","GET"); | |
| window.lista = JSON.parse(responseText); | |
| draw(); | |
| } | |
| async function del(idx){ | |
| if(confirm(`Are you sure you want to delete ${lista[idx].name} ?`)){ | |
| //lista.splice(idx,1); | |
| /*ajax(`https://linkuri-utile-grupa-6.firebaseio.com/${idx}.json`, | |
| "DELETE", | |
| undefined, | |
| getLista | |
| );*/ | |
| /*return ajaxPromise(`https://linkuri-utile-grupa-6.firebaseio.com/${idx}.json`,"DELETE") | |
| .then(getLista);*/ | |
| await ajaxPromise(`https://linkuri-utile-grupa-6.firebaseio.com/${idx}.json`,"DELETE"); | |
| getLista(); | |
| } | |
| } | |
| function edit(idx){ | |
| showForm(); | |
| var form = document.querySelector("#addForm"); | |
| form.querySelector("[name=\"name\"]").value=lista[idx].name; | |
| form.querySelector("[name=\"url\"]").value=lista[idx].url; | |
| form.querySelector("[name=\"description\"]").value=lista[idx].description; | |
| form.querySelector("[name=\"tags\"]").value=lista[idx].tags.join("\n"); | |
| form.querySelector("[name=\"complexity\"]").value=lista[idx].complexity; | |
| indexEdit = idx; | |
| } | |
| function showForm(){ | |
| document.querySelector("#addForm").classList.remove("hidden"); | |
| document.querySelector("#addForm").reset(); | |
| indexEdit = -1; | |
| } | |
| function hideForm(){ | |
| document.querySelector("#addForm").classList.add("hidden"); | |
| } | |
| async function add(event,form){ | |
| event.preventDefault(); | |
| var obj = { | |
| name: form.querySelector("[name=\"name\"]").value, | |
| url: form.querySelector("[name=\"url\"]").value, | |
| description: form.querySelector("[name=\"description\"]").value, | |
| tags: form.querySelector("[name=\"tags\"]").value.split(/[\n\r]+/g), | |
| complexity: form.querySelector("[name=\"complexity\"]").value | |
| }; | |
| if(indexEdit===-1){ | |
| //lista.push(obj); | |
| /*ajax("https://linkuri-utile-grupa-6.firebaseio.com/.json", | |
| "POST", | |
| JSON.stringify(obj), | |
| function(){ | |
| getLista(); | |
| hideForm(); | |
| form.reset(); | |
| });*/ | |
| /*return ajaxPromise( | |
| "https://linkuri-utile-grupa-6.firebaseio.com/.json", | |
| "POST", | |
| JSON.stringify(obj)) | |
| .then(function(){ | |
| getLista(); | |
| hideForm(); | |
| form.reset(); | |
| });*/ | |
| await ajaxPromise( "https://linkuri-utile-grupa-6.firebaseio.com/.json","POST",JSON.stringify(obj)) | |
| }else{ | |
| //lista[indexEdit]=obj; | |
| /*ajax(`https://linkuri-utile-grupa-6.firebaseio.com/${indexEdit}.json`, | |
| "PUT", | |
| JSON.stringify(obj), | |
| function(responseText){ | |
| getLista(); | |
| hideForm(); | |
| form.reset(); | |
| });*/ | |
| /*return ajaxPromise( | |
| `https://linkuri-utile-grupa-6.firebaseio.com/${indexEdit}.json`, | |
| "PUT", | |
| JSON.stringify(obj)) | |
| .then(function(){ | |
| getLista(); | |
| hideForm(); | |
| form.reset(); | |
| });*/ | |
| await ajaxPromise( | |
| `https://linkuri-utile-grupa-6.firebaseio.com/${indexEdit}.json`, | |
| "PUT", | |
| JSON.stringify(obj)); | |
| } | |
| getLista(); | |
| hideForm(); | |
| form.reset(); | |
| } | |
| function draw(){ | |
| var str = ""; | |
| for(var i in lista){ | |
| var tags = ""; | |
| for(var j=0;j<lista[i].tags.length;j++){ | |
| tags+=`<span class="tag">${lista[i].tags[j]}</span>` | |
| } | |
| str+=` | |
| <tr> | |
| <td> | |
| <svg class="brain" style="fill:${complexityColors[lista[i].complexity]};" viewBox="0 0 100 100"><path d="M96.674,40.998c-0.018-0.042-0.048-0.077-0.09-0.1c-2.16-1.22-4.451-1.839-6.809-1.839c-3.1,0-6.219,1.092-9.268,3.244 c-0.248,0.174-0.537,0.266-0.838,0.266c-0.474,0-0.918-0.23-1.19-0.616c-0.462-0.655-0.306-1.564,0.351-2.027 c3.653-2.579,7.025-3.832,10.307-3.832c1.604,0,3.234,0.299,4.988,0.917c0.083,0.029,0.176,0.002,0.23-0.067 c0.057-0.07,1.369-1.779,0.662-5.938c-0.313-1.494-0.887-2.714-1.699-3.615c-1.637-2.077-3.297-2.513-4.402-2.513 c-0.686,0-1.12,0.171-1.139,0.178c-0.04,0.016-0.074,0.044-0.097,0.082c-1.588,2.497-3.431,4.174-6.798,6.189 c-0.227,0.135-0.484,0.206-0.746,0.206c-0.51,0-0.987-0.271-1.249-0.708c-0.412-0.688-0.187-1.583,0.501-1.995 c4.064-2.432,5.68-4.031,6.658-6.599c0.494-1.812-0.115-4.256-1.412-5.676l-0.26-0.319c-1.475-1.815-4.216-5.194-11.146-6.969 c-0.962-0.306-1.944-0.461-2.92-0.461c-2.824,0-4.666,1.271-4.743,1.325c-0.076,0.053-0.107,0.15-0.078,0.237 c0.275,0.808,1.113,3.266,0.26,6.018c-0.189,0.613-0.749,1.024-1.389,1.024c-0.146,0-0.291-0.021-0.432-0.065 c-0.765-0.238-1.195-1.054-0.957-1.82c0.565-1.823,0.444-3.433-0.369-4.92c-1.063-1.946-2.537-3.256-4.497-4.003 c-1.871-0.796-4.836-0.973-6.032-1.012c-7.705,0.042-13.198,0.538-20.15,3.025c-0.89,0.29-1.584,0.873-1.955,1.64 c-0.438,0.908-0.428,2.04,0.031,3.273c0.006,0.015,0.022,0.065,0.05,0.145c0.538,1.574,1.064,2.986,1.564,4.199 c0.148,0.359,0.148,0.754-0.001,1.113c-0.149,0.358-0.429,0.638-0.788,0.786c-0.178,0.073-0.364,0.11-0.554,0.11 c-0.587,0-1.115-0.354-1.346-0.901c-0.417-0.995-1.716-4.25-1.728-4.28c-0.024-0.064-0.626-1.574-2.565-1.574 c-1.456,0-3.263,0.867-5.366,2.575c-2.797,2.167-4.225,4.13-4.245,5.833c-0.014,1.201,0.703,1.796,0.753,1.835 c0.577,0.368,3.712,2.758,5.022,4.217c0.548,0.609,0.53,1.515-0.041,2.061c-0.272,0.26-0.629,0.403-1.005,0.403 c-0.401,0-0.774-0.16-1.051-0.449c-3.252-3.397-5.918-5.05-8.152-5.05c-0.314,0-0.622,0.034-0.916,0.101 c-0.867,0.199-2.273,1.198-3.119,2.514c-2.983,3.876-3.957,6.917-4.232,12.121c-0.166,3.115,0.675,6.155,1.619,7.476 c1.327,1.856,2.669,2.907,3.178,3.275c0,0,0.409,0.26,0.565,0.138c1.328-1.043,2.849-1.591,4.716-1.591 c1.117,0,2.38,0.188,3.754,0.56c0.364,0.099,0.668,0.337,0.855,0.671c0.192,0.342,0.239,0.755,0.128,1.132 c-0.18,0.616-0.753,1.046-1.396,1.046c-0.138,0-0.275-0.021-0.408-0.059c-0.96-0.28-1.856-0.399-2.662-0.423 c-0.794-0.021-2.242,0.054-2.898,0.795c-0.03,0.034-0.057,0.068-0.067,0.111c-0.009,0.041-0.164,3.581,4.875,5.387 c4.232,1.516,6.432,1.566,15.629,1.566c1.356,0,2.848-0.014,4.693-0.045c0.465-0.013,1.124-0.242,1.544-0.729 c0.32-0.37,0.457-0.834,0.396-1.319c-0.005-0.781,0.116-1.494,0.384-2.244c1.102-3.088,3.321-5.104,7.196-6.541 c0.164-0.061,0.333-0.092,0.506-0.092c0.605,0,1.152,0.382,1.363,0.95c0.135,0.364,0.121,0.759-0.042,1.112 c-0.162,0.354-0.451,0.622-0.815,0.758c-2.963,1.099-4.788,2.669-5.426,4.666c-1.075,3.37,1.413,7.07,1.443,7.1 c7.405,7.257,21.792,7.464,22.515,5.45c0.609-1.495,1.028-3.868-0.441-6.687c-2.301-4.414-10.107-4.688-10.186-4.692 c-0.801-0.022-1.436-0.693-1.413-1.492c0.021-0.78,0.675-1.415,1.489-1.415l0,0c0.391,0.011,9.591,0.313,12.688,6.255 c1.682,3.225,1.445,6.095,0.949,7.94c-0.119,0.495-0.029,0.995,0.24,1.338c0.172,0.216,0.493,0.474,1.063,0.474 c0,0,5.096,0.033,9.26-0.833c0.563-0.116,1.1,0.3,1.188,0.865c0.088,0.567-0.301,1.099-0.867,1.187 c-6.111,0.956-11.469,1.434-16.12,1.434c-5.62,0-10.209-0.699-13.853-2.098c0.062,2.569,0.935,4.809,2.522,6.642 c0.01,0.015,0.019,0.026,0.028,0.04c0.529,0.557,1.322,1.345,2.046,2.005c0.554,0.505,3.175,2.175,3.857,2.587 c1.316,0.768,7.3,4.45,7.875,4.82c2.634,1.697,3.414,3.539,3.496,3.649c0.281,0.372,0.426,1.476,0.426,1.476 c0.238,0.99,1.131,1.726,2.195,1.723c1.243-0.003,2.25-1.014,2.246-2.258c0,0,0.035-2.529-0.951-4.262 c-0.158-0.321-2.233-3.721-4.628-5.568c-0.727-0.561-2.442-1.815-2.442-1.815l-0.01-0.005c-0.195-0.133-0.256-0.395-0.131-0.598 c0.127-0.206,0.398-0.272,0.607-0.145c0,0,5.053,3.549,8.221,2.666c4.656-1.297,10.75-4.359,10.75-11.249 c0-1.024-0.102-1.987-0.296-2.894c0.646-0.344,1.288-0.733,1.929-1.18c0.752-0.602,0.976-1.348,1.031-1.868 c0.078-0.744-0.137-1.532-0.562-2.052l-3.068-3.951l-0.036-0.039c-0.639-0.812-1.475-0.982-2.065-0.982 c-0.503,0-0.897,0.121-1.108,0.201c-1.078,0.544-2.214,0.99-3.371,1.325c-0.762,0.219-1.585-0.244-1.801-0.994 c-0.107-0.373-0.064-0.766,0.123-1.106c0.188-0.34,0.496-0.586,0.87-0.693c2.64-0.763,7.403-2.869,9.661-8.402 c0.223-0.55,0.752-0.905,1.348-0.905c0.188,0,0.372,0.036,0.547,0.108c0.743,0.302,1.102,1.153,0.798,1.896 c-0.724,1.775-1.716,3.382-2.966,4.804c-0.57,0.92-0.496,1.873,0.234,2.922l2.004,2.604c0.027,0.037,0.064,0.063,0.107,0.074 c0.033,0.01,0.816,0.231,1.934,0.231c1.506,0,3.637-0.409,5.232-2.363c3.898-4.661,4.088-8.694,4.225-11.639 c0.015-0.293,0.027-0.578,0.044-0.882C98.668,42.479,97.29,41.384,96.674,40.998z M36.965,39.066 c-1.875,1.853-3.944,3.217-6.147,4.056c-0.025,0.009-0.046,0.023-0.064,0.041c-1.014,0.551-1.368,1.311-1.179,2.537l0.835,4.753 c0.075,0.381-0.003,0.769-0.22,1.091s-0.545,0.542-0.927,0.616c-0.785,0.155-1.556-0.374-1.708-1.146l-0.91-5.13 c-0.278-1.078-1.313-1.648-1.984-1.724c-0.027-0.015-0.059-0.024-0.093-0.025c-7.229-0.261-13.015-4.931-13.073-4.978 c-0.3-0.247-0.487-0.595-0.526-0.981c-0.038-0.386,0.077-0.765,0.322-1.065c0.277-0.339,0.688-0.533,1.126-0.533 c0.333,0,0.66,0.116,0.919,0.328c0.219,0.178,5.435,4.361,11.695,4.361c3.694,0,7.022-1.437,9.891-4.269 c0.552-0.546,1.51-0.541,2.056,0.013c0.273,0.276,0.422,0.643,0.419,1.031C37.396,38.429,37.242,38.793,36.965,39.066z M38.882,28.967c-4.545,0-7.796,2.812-7.933,2.931c-0.266,0.233-0.606,0.362-0.959,0.362c-0.419,0-0.818-0.18-1.093-0.494 c-0.256-0.292-0.384-0.666-0.358-1.054c0.024-0.387,0.199-0.742,0.491-0.998c1.991-1.75,5.635-3.619,9.889-3.619 c3.065,0,5.996,0.972,8.712,2.89c0.317,0.224,0.528,0.558,0.594,0.941c0.066,0.382-0.021,0.768-0.245,1.085 c-0.272,0.386-0.717,0.616-1.189,0.616c-0.301,0-0.59-0.092-0.837-0.267C43.705,29.772,41.325,28.967,38.882,28.967z M72.535,49.581 c-0.25,0.298-0.601,0.48-0.987,0.514c-6.263,0.549-10.929-0.831-13.767-4.08c-0.443-0.506-0.849-1.073-1.205-1.685 c-0.008-0.015-0.02-0.029-0.031-0.042c-0.377-0.379-0.893-0.582-1.535-0.605c-0.227-0.008-0.467,0.006-0.734,0.044 c-0.029-0.006-1.84,0.392-3.618,0.333c-4.008-0.132-6.585-2.011-6.692-2.09c-0.646-0.476-0.783-1.388-0.307-2.034 c0.284-0.387,0.742-0.608,1.222-0.59c0.291,0.01,0.569,0.106,0.806,0.279c0.081,0.058,2.017,1.343,5.049,1.523 c1.466,0.087,2.904-0.376,3.079-0.45c1.121-0.471,1.079-1.714,1.024-2.195c-0.238-2.811,0.26-5.053,0.28-5.148 c0.173-0.769,0.962-1.274,1.739-1.098c0.779,0.177,1.273,0.955,1.098,1.736c-0.014,0.063-1.338,6.288,2.026,10.122 c2.197,2.503,6.026,3.548,11.313,3.083c0.816-0.068,1.507,0.532,1.575,1.322C72.903,48.906,72.785,49.283,72.535,49.581z M71.393,27.072c-2.604,2.497-3.887,6.469-3.265,10.121c0.122,0.711-0.359,1.389-1.069,1.51c-0.074,0.013-0.149,0.019-0.223,0.019 c-0.639,0-1.211-0.453-1.288-1.089c-0.478-3.902,0.785-7.504,0.8-7.541c0.084-0.205,0.095-0.383,0.031-0.529 c-0.076-0.18-0.25-0.279-0.385-0.332c-3.904-0.432-10.935-1.918-14.2-7.014c-0.503-0.741-1.819-0.361-3.95-0.364 c-9.574-0.016-10.931-6.165-10.984-6.427c-0.069-0.342-0.001-0.692,0.192-0.983c0.193-0.292,0.487-0.491,0.83-0.56 c0.086-0.018,0.174-0.027,0.261-0.027c0.613,0,1.151,0.436,1.28,1.036c0.041,0.176,1.091,4.34,8.443,4.34 c0.364,0,0.743-0.01,1.126-0.031c0.845-0.103,1.318-0.548,1.441-1.358c0.121-2.833,2.255-4.939,3.497-5.736 c0.211-0.136,0.455-0.208,0.705-0.208c0.449,0,0.861,0.225,1.104,0.602c0.189,0.294,0.252,0.644,0.177,0.985 c-0.075,0.342-0.278,0.634-0.571,0.823c-0.135,0.089-3.305,2.208-1.962,5.336c2.418,5.634,10.642,6.83,14.065,7.082 c0.432-0.034,0.924-0.292,1.346-0.708c0.289-0.333,0.54-0.601,0.789-0.839c3.327-3.189,3.526-6.311,3.533-6.442 c0.037-0.72,0.652-1.28,1.367-1.243c0.715,0.032,1.275,0.639,1.248,1.353C75.725,19.022,75.523,23.114,71.393,27.072z"></path></svg> | |
| <a href="${lista[i].url}">${lista[i].name}</a> | |
| </td> | |
| <td>${lista[i].description}</td> | |
| <td> | |
| ${tags} | |
| </td> | |
| <td> | |
| <div class="editBtn" onclick="edit('${i}')"></div> | |
| <div class="delBtn" onclick="del('${i}')"></div> | |
| </td> | |
| </tr> | |
| `; | |
| } | |
| document.querySelector("table tbody").innerHTML = str; | |
| } | |
| </script> | |
| </head> | |
| <body onload="getLista();"> | |
| <input type="button" value="ADD" onclick="showForm();"/> | |
| <form id="addForm" class="hidden" onsubmit="add(event,this);"> | |
| <label>Name: <input type="text" name="name"/></label><br /> | |
| <label>Link: <input type="text" name="url"/></label><br /> | |
| <label>Description: <textarea name="description"></textarea></label><br /> | |
| <label>Tags: <textarea name="tags"></textarea></label><br /> | |
| <label> | |
| Complexity: | |
| <select name="complexity"> | |
| <option value="0">Basic</option> | |
| <option value="1">Easy</option> | |
| <option value="2">Medium</option> | |
| <option value="3">Advanced</option> | |
| <option value="4">Complex</option> | |
| <option value="5">Guru</option> | |
| </select> | |
| </label><br /> | |
| <input type="submit" value="Add" /> | |
| <input type="button" value="Cancel" onclick="hideForm();"/> | |
| </form> | |
| <table border="1"> | |
| <thead> | |
| <tr> | |
| <th>Nume</th> | |
| <th>Descriere</th> | |
| <th>Taguri</th> | |
| <th></th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| </tbody> | |
| </table> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment