Option to copy the glink for client
This commit is contained in:
51
public/css/response.css
Normal file
51
public/css/response.css
Normal file
@@ -0,0 +1,51 @@
|
|||||||
|
.tooltip {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
color: yellow;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip .tooltiptext {
|
||||||
|
visibility: hidden;
|
||||||
|
width: 140px;
|
||||||
|
background-color: #555;
|
||||||
|
color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 5px;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1;
|
||||||
|
bottom: 150%;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -75px;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip .tooltiptext::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 100%;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -5px;
|
||||||
|
border-width: 5px;
|
||||||
|
border-style: solid;
|
||||||
|
border-color: #555 transparent transparent transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip:hover .tooltiptext {
|
||||||
|
visibility: visible;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.para {
|
||||||
|
display: inline-block;
|
||||||
|
font-family: futura;
|
||||||
|
font-size: large;
|
||||||
|
color: green;
|
||||||
|
}
|
||||||
|
.textbox {
|
||||||
|
font-family: futura;
|
||||||
|
font-size: large;
|
||||||
|
color: green;
|
||||||
|
text-align: center;
|
||||||
|
}
|
@@ -1,8 +1,5 @@
|
|||||||
// const submit = document.getElementById("button");
|
// const submit = document.getElementById("button");
|
||||||
function getRandomGLink() {
|
|
||||||
//
|
|
||||||
return undefined;
|
|
||||||
}
|
|
||||||
|
|
||||||
// submit.addEventListener('click', validate);
|
// submit.addEventListener('click', validate);
|
||||||
function validate() {
|
function validate() {
|
||||||
@@ -49,8 +46,6 @@ function getRandomGLink() {
|
|||||||
var result = window.confirm("You have left the glink field blank. A random one will be generated for you.");
|
var result = window.confirm("You have left the glink field blank. A random one will be generated for you.");
|
||||||
if (result === false) {
|
if (result === false) {
|
||||||
return false;
|
return false;
|
||||||
} else {
|
|
||||||
glinkStr = getRandomGLink();
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
14
public/src/response.js
Normal file
14
public/src/response.js
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
function myFunction() {
|
||||||
|
var copyText = document.getElementById("myInput");
|
||||||
|
copyText.select();
|
||||||
|
copyText.setSelectionRange(0, 99999);
|
||||||
|
navigator.clipboard.writeText(copyText.value);
|
||||||
|
|
||||||
|
var tooltip = document.getElementById("myTooltip");
|
||||||
|
tooltip.innerHTML = "Copied: " + copyText.value;
|
||||||
|
}
|
||||||
|
|
||||||
|
function outFunc() {
|
||||||
|
var tooltip = document.getElementById("myTooltip");
|
||||||
|
tooltip.innerHTML = "Copy to clipboard";
|
||||||
|
}
|
64
result.js
64
result.js
@@ -20,13 +20,46 @@ app.use(bodyParser.urlencoded({
|
|||||||
}));
|
}));
|
||||||
app.use(express.static(staticPath));
|
app.use(express.static(staticPath));
|
||||||
|
|
||||||
|
const GLINK_SIZE = 6;
|
||||||
|
function getRandomGLink() {
|
||||||
|
let glink = "";
|
||||||
|
glink = newString(GLINK_SIZE);
|
||||||
|
//console.log(glink);
|
||||||
|
validateLink(glink);
|
||||||
|
return glink;
|
||||||
|
}
|
||||||
|
function validateLink(glink) {
|
||||||
|
let qry = "SELECT id FROM data WHERE glink = ? allow filtering";
|
||||||
|
client.execute(qry, [glink], {}, (err, result) => {
|
||||||
|
if(err) {
|
||||||
|
console.log(err.message);
|
||||||
|
glink = null;
|
||||||
|
}
|
||||||
|
if (result.rows.length === 0) {
|
||||||
|
console.log("Done");
|
||||||
|
} else {
|
||||||
|
console.log(glink);
|
||||||
|
glink = getRandomGLink();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return glink;
|
||||||
|
}
|
||||||
|
function newString(n) {
|
||||||
|
let str = "";
|
||||||
|
let symbols = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
|
||||||
|
for (let i = 0; i < n; i ++) {
|
||||||
|
str += symbols.charAt(Math.floor(Math.random() * 52));
|
||||||
|
}
|
||||||
|
return str;
|
||||||
|
}
|
||||||
|
|
||||||
function nextId() {
|
function nextId() {
|
||||||
let next = id;
|
let next = id;
|
||||||
id = id + 1;
|
id = id + 1;
|
||||||
return next;
|
return next;
|
||||||
}
|
}
|
||||||
function filter(path) {
|
function filter(path) {
|
||||||
if (path.match(new RegExp("^/[a-zA-Z]+/$"))) {
|
if (path.match(new RegExp("^/[a-zA-Z]+/*$"))) {
|
||||||
if (path.charAt(0) === '/') {
|
if (path.charAt(0) === '/') {
|
||||||
path = path.substring(1);
|
path = path.substring(1);
|
||||||
}
|
}
|
||||||
@@ -57,8 +90,18 @@ const query = "INSERT INTO data (id, url, glink) VALUES (?, ?, ?)";
|
|||||||
app.post('/add', function(req, res) {
|
app.post('/add', function(req, res) {
|
||||||
let input_url = req.body.url;
|
let input_url = req.body.url;
|
||||||
let input_glink = req.body.glink;
|
let input_glink = req.body.glink;
|
||||||
console.log("Received query " + input_url + " and " + input_glink)
|
console.log("Received query " + input_url + " and " + input_glink);
|
||||||
let currID = nextId();
|
let currID = nextId();
|
||||||
|
if (input_glink === "") {
|
||||||
|
input_glink = getRandomGLink();
|
||||||
|
client.execute(query, [currID, input_url, input_glink], {prepare: true}, function(err,result) {
|
||||||
|
if (err) {
|
||||||
|
res.send("<html><body><p style=\"font-family:Futura; font-size:large; color:red;\">" + err.message + "</p></body></html>");
|
||||||
|
} else {
|
||||||
|
res.send("<html><body><p style=\"font-family:Futura; font-size:large; color:green;\">New entry has been added with url = " + req.body.url + " and glink = " + input_glink + "</p></body></html>");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
let selectQuery = "SELECT id FROM data where glink = ? allow filtering";
|
let selectQuery = "SELECT id FROM data where glink = ? allow filtering";
|
||||||
client.execute(selectQuery, [input_glink],{} ,function(err, result) {
|
client.execute(selectQuery, [input_glink],{} ,function(err, result) {
|
||||||
if (result.rows.length === 0) {
|
if (result.rows.length === 0) {
|
||||||
@@ -66,13 +109,27 @@ app.post('/add', function(req, res) {
|
|||||||
if (err) {
|
if (err) {
|
||||||
res.send("<html><body><p style=\"font-family:Futura; font-size:large; color:red;\">{err.message}</p></body></html>");
|
res.send("<html><body><p style=\"font-family:Futura; font-size:large; color:red;\">{err.message}</p></body></html>");
|
||||||
} else {
|
} else {
|
||||||
res.send("<html><body><p style=\"font-family:Futura; font-size:large; color:green;\">New entry has been added with url = " + req.body.url + " and glink = " + req.body.glink + "</p></body></html>");
|
res.send("<html><head><link rel=\"stylesheet\" href=\"./css/response.css\"></head>" +
|
||||||
|
"<body><p class=\"para\">" +
|
||||||
|
"New entry has been added with url = " + req.body.url + " and glink = " /*+ req.body.glink*/ + "" +
|
||||||
|
"</p>" +
|
||||||
|
"<input type=\"text\" value=\"" + req.body.glink + "\" readOnly=\"true\" id=\"myInput\" class=\"textbox\">" +
|
||||||
|
"<div class=\"tooltip\">" +
|
||||||
|
"<button onClick=\"myFunction()\" onMouseOut=\"outFunc()\">" +
|
||||||
|
"<span class=\"tooltiptext\" id=\"myTooltip\">Copy to clipboard</span>" +
|
||||||
|
"Copy text" +
|
||||||
|
"</button>" +
|
||||||
|
"</div>" +
|
||||||
|
"<script src=\"./src/response.js\"></script>" +
|
||||||
|
"</body></html>");
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
res.send("<html><body><p style=\"font-family:futura; font-size:large; color:red;\">This glink has already been registered. Please try a different glink</p></body></html>");
|
res.send("<html><body><p style=\"font-family:futura; font-size:large; color:red;\">This glink has already been registered. Please try a different glink</p></body></html>");
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
}
|
||||||
|
|
||||||
})
|
})
|
||||||
|
|
||||||
/* Redirect requests to corresponding entry in database */
|
/* Redirect requests to corresponding entry in database */
|
||||||
@@ -103,3 +160,4 @@ app.listen(port, function(){
|
|||||||
console.log("server listening on port 63342");
|
console.log("server listening on port 63342");
|
||||||
})
|
})
|
||||||
/** Validate url and glink on client side as well */
|
/** Validate url and glink on client side as well */
|
||||||
|
/** Put the glink in a span or label and make it copyable */
|
Reference in New Issue
Block a user