Option to copy the glink for client

nodejs
Aravind142857 2 years ago
parent a8b8883b11
commit 2747fd5b76

@ -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");
function getRandomGLink() {
//
return undefined;
}
// submit.addEventListener('click', 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.");
if (result === false) {
return false;
} else {
glinkStr = getRandomGLink();
}
}

@ -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";
}

@ -20,13 +20,46 @@ app.use(bodyParser.urlencoded({
}));
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() {
let next = id;
id = id + 1;
return next;
}
function filter(path) {
if (path.match(new RegExp("^/[a-zA-Z]+/$"))) {
if (path.match(new RegExp("^/[a-zA-Z]+/*$"))) {
if (path.charAt(0) === '/') {
path = path.substring(1);
}
@ -57,8 +90,18 @@ const query = "INSERT INTO data (id, url, glink) VALUES (?, ?, ?)";
app.post('/add', function(req, res) {
let input_url = req.body.url;
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();
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";
client.execute(selectQuery, [input_glink],{} ,function(err, result) {
if (result.rows.length === 0) {
@ -66,13 +109,27 @@ app.post('/add', function(req, res) {
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 = " + 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 {
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 */
@ -103,3 +160,4 @@ app.listen(port, function(){
console.log("server listening on port 63342");
})
/** Validate url and glink on client side as well */
/** Put the glink in a span or label and make it copyable */
Loading…
Cancel
Save