I am currently having a problem of calling the server-side code on SQL data, the client-side always get called first and I will have to wait for around 5 minutes or more for the server-side to be invoked. On a few occasions, the server-side is not called. Here are the rough code and file structure. is there a way to call the server-side without waiting for long?
statistics.html, page to call the server
<template name="statistics">
<div class="content">
<h2>HTML Forms</h2>
<div class="row">
<div class = "col-lg-2">
<button type="button" class="btn btn-primary getdata" >Get stats</button>
</div>
</div>
</div>
</template>
statistics.js, to call getData function
Template.statistics.events({
'click .getdata'(event, instance){
alert("get data")
Meteor.call('getSqlData', function(err, response) {
if(err){
console.log("err is "+err)
}
console.log(response);
});
}
});
sqlData.js, function getSqlData
Meteor.methods({
getSqlData: function(){
console.log("at sqldata");
if(Meteor.isClient){
console.log("shouldn't be here")
}
if(Meteor.isServer){
console.log("server side")
//go to a directory and get the file names to be read
//get the data in the files and insert into mongoDB
}
});
my file structure is place in this manner
Project
├── imports
│ ├── ui
│ │ ├── pages
│ │ │ ├── statistics.js
│ │ │ ├── statistics.html
├── lib
│ ├── collections
│ │ ├── sqlData.js
Related
I recently found out about GitHub actions superlinter which uses JSCPD to check for code duplication. It worked initially but I'm running into one specific false positive and I can't figure it out. JSCPD also has a package on npm and I tested it locally on that single file but it errored too. I have also tried adding new lines below but it didn't work too. The code and error are below.
Error:
2022-12-14 08:21:48 [INFO] File:[/github/workspace/components/pages/editor/sidebar/index.tsx]
2022-12-14 08:21:49 [ERROR] Found errors in [jscpd] linter!
2022-12-14 08:21:49 [ERROR] Error code: 1. Command output:
------
Clone found (tsx):
- /github/workspace/components/pages/editor/sidebar/index.tsx [40:7 - 58:3] (18 lines, 167 tokens)
/github/workspace/components/pages/editor/sidebar/index.tsx [37:7 - 51:2]
Clone found (tsx):
- /github/workspace/components/pages/editor/sidebar/index.tsx [40:7 - 58:3] (18 lines, 167 tokens)
/github/workspace/components/pages/editor/sidebar/index.tsx [37:7 - 51:2]
40 │ 37 │ <i className={"icon-search"}></i>
41 │ 38 │ </GenButton>
42 │ 39 │
43 │ 40 │ <GenButton props={{ label: "Sidebar: save" }}>
44 │ 41 │ <i className={"icon-floppy"}></i>
45 │ 42 │ </GenButton>
46 │ 43 │
47 │ 44 │ <GenButton props={{ label: "Sidebar: language" }}>
48 │ 45 │ <i className={"icon-globe"}></i>
49 │ 46 │ </GenButton>
50 │ 47 │
51 │ 48 │ <GenButton props={{ label: "Sidebar: launch" }}>
52 │ 49 │ <i className={"icon-rocket"}></i>
53 │ 50 │ </GenButton>
54 │ 51 │
55 │ 52 │ <GenButton props={{ label: "Sidebar: more info" }}>
56 │ 53 │ <i className={"icon-info-circled"}></i>
57 │ 54 │ </GenButton>
58 │ 55 │ </
Found 1 clones.
ERROR: jscpd found too many duplicates (11.18%) over threshold (0%)
Error: ERROR: jscpd found too many duplicates (11.18%) over threshold (0%)
at ThresholdReporter.report (/node_modules/#jscpd/finder/dist/reporters/threshold.js:12:19)
at /node_modules/#jscpd/finder/dist/in-files-detector.js:82:26
at Array.forEach (<anonymous>)
at /node_modules/#jscpd/finder/dist/in-files-detector.js:81:28
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
------
Code:
import { memo, useContext } from "react";
import ContextIndex from "../../../../utils/context/index";
import ContextGlobal from "../../../../utils/context/_global";
import GenButton from "../../../gen/button";
import GenImage from "../../../gen/image";
import EditorFileExplorer from "./fileExplorer";
import styles from "./index.module.css";
const EditorSidebar: React.FC = () => {
const { isLightTheme, setIsLightTheme, session } = useContext(ContextGlobal);
const {
barState: { leftBarOpen, explorerOpen },
updateBarState,
} = useContext(ContextIndex);
function handleAlert() {
alert("Hello World");
}
return (
<>
<section
className={
leftBarOpen ? styles.sidebarSectionOpen : styles.sidebarSection
}
>
<div className={`${styles.flexButtons} hoverParent`}>
<GenButton
props={{
label: "Sidebar: toggle file explorer",
onClick:
session?.user !== undefined
? () => updateBarState({ type: "explorerOpen" })
: handleAlert,
}}
>
<i className={"icon-docs"}></i>
</GenButton>
<GenButton props={{ label: "Sidebar: search" }}>
<i className={"icon-search"}></i>
</GenButton>
<GenButton props={{ label: "Sidebar: save" }}>
<i className={"icon-floppy"}></i>
</GenButton>
<GenButton props={{ label: "Sidebar: language" }}>
<i className={"icon-globe"}></i>
</GenButton>
<GenButton props={{ label: "Sidebar: launch" }}>
<i className={"icon-rocket"}></i>
</GenButton>
<GenButton props={{ label: "Sidebar: more info" }}>
<i className={"icon-info-circled"}></i>
</GenButton>
</div>
<div className={`${styles.flexButtons} hoverParent`}>
<GenButton props={{ label: "Sidebar: profile" }}>
{session?.user.image !== undefined ? (
<GenImage
props={{
src: session.user.image,
height: 40,
width: 40,
alt: session.user.name,
className: styles.profileImage,
}}
/>
) : (
<i className={"icon-user-circle"}></i>
)}
</GenButton>
<GenButton
props={{
label: "Sidebar: toggle theme",
onClick: () => setIsLightTheme((prev) => !prev),
}}
>
{isLightTheme ? (
<i className={"icon-toggle-off"}></i>
) : (
<i className={"icon-toggle-on"}></i>
)}
</GenButton>
<GenButton props={{ label: "Sidebar: settings" }}>
<i className={"icon-cog"}></i>
</GenButton>
</div>
</section>
{explorerOpen && <EditorFileExplorer />}
</>
);
};
export default memo(EditorSidebar);
I'm trying to create a custom directive to execute a function when an element is clicked. I can't get it to work, I've looked at the documentation for custom directives and even copying the examples directly from there doesn't see to work.
I'm using single file templates and local directives. Here is the template:
<template>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
<button v-test:click="clicked">Click me</button>
</div>
</div>
</div>
</template>
And here is the script:
<script>
export default {
name: 'App',
components: {
},
directives: {
test: {
bind(el, binding) {
const type = binding.arg;
const fn = binding.value;
el.addEventListener(type, fn)
}
}
},
methods: {
clicked() {
alert('text');
}
}
}
</script>
I have tried using Vue 3 syntax (beforeMount rather than bind), as well as global directives but these things don't seem to work either. Does anyone know what I'm doing wrong?
The alert box will appear as soon as the page is loaded if I provide parentheses to the value passed into v-test. Either way nothing happens when the button is clicked.
Vue3 has changed the syntax for directives. New Syntax
bind → beforeMount
inserted → mounted
beforeUpdate (new)
update (has been removed)
componentUpdated → updated
beforeUnmount (new)
unbind -> unmounted
I have a meteor app using iron router for navigation. I have a layout file that renders on every page. Although there's a page where I don't want the layout file to be displayed/rendered. I bet there exists an elegant way to achieve so but unfortunately I haven't found so yet.
Router.configure({
layoutTemplate: 'layout',
loadingTemplate: 'loading',
notFoundTemplate: 'notapage'
});
Router.route('dataNotFound', function() {
this.render('notapage');
});
Router.route('test/qwerty', function() {
this.render('abc');
}, {
name: 'abc',
waitOn: function() {
return [
Meteor.subscribe('testSubscription')
];
}
});
Layout file :
<template name="layout">
<nav class="navbar navbar-default navbar-fixed-top">
...
</nav>
<div class="clearfix"></div>
<div class="page-container">
{{>yield}}
</div>
<div class="page-footer">
...
</div>
If the route equals abc, I dont want the layout.html file to be rendered/displayed.
You can override the default layout file on an individual Route definition, see: http://iron-meteor.github.io/iron-router/#layouts
Router.route('/post/:_id', function () {
this.layout('ApplicationLayout');
});
The documentation also describes how to render templates into different yield regions in the same layout template.
I'm new to Meteor and have limited experience with javascript. I've searched all the stack post and the web for a good tutorial on how to use the Iron Router package to route static pages and just can't seem to figure it this out. I would love to have someone help me understand how to setup a router.js file for Home and About. I've played with my code a lot but this is what I had before posting here. Conseptually I seem to be struggling to grasp how the routing works and all the various features of iron router and then connecting these routes into a nav bar where I can navigate between them. Thank you in advance for any help you can provide.
client/templates/application/layout.html
<template name="layout">
<div class="container">
{{> yield}}
</div>
</template>
lib/router.js
Router.configure({
layoutTemplate: 'layout'
});
Router.route('/', function () {
this.render('home', {
template: 'home'
});
this.render('about', {
template: 'about'
});
});
templates/home.html
<template name="home">
<div class="container">
<h2>Home</h2>
</div>
</template>
The code you have above looks correct.
One quirk is you're rendering two pages for your / route. You should have this:
Router.route('/', function () {
this.render('home', {});
});
Router.route('/about', function() {
this.render('about', {});
});
Remember this.render takes the first param as the template, so there's no need to define it separately anymore.
And a new about.html page:
<template name="home">
<div class="container">
<h2>Home</h2>
</div>
</template>
Now you can use the / and /about pages (at least I hope i've not missed anything)
You can have 3 templates on your folder
Client/Views
with the name of
about.html
main.html
admin.html
layout.html
(for example)
So in the about.html you have this
<template name="about">
<h1> hello from about page
</template>
<template name="main">
<h1> hello from about page
</template>
<template name="admin">
<h1> hello from about page
</template>
the Layout.html file need con taints this yield rendered.
<template name="layout">
{{> yield}}
{{admin}}
{{about}}
{{main}}
</template>
So you can use layout template as a master page and calling that 3 templates separates by a route, how to assign a route and telling meteor to use that layouts, well use this js code
JS
Router.configure({
layoutTemplate: 'layout'
});
Router.map(function(){
this.route('admin', {path: '/admin'});
});
Router.map(function(){
this.route('about', {path: '/about'});
});
Router.map(function(){
this.route('main', {path: '/'});
});
At least this works for me bro, hope this work for you
I'm attempting to create a simple project for rapid prototyping using Meteor, Meteor Router, and Bootstrap.
Here's the directory Structure
meteor-prototypes/
|
|--- .meteor/
|--- prototypes/
| |
| |--- example/
| |
| |--- example.coffee
| |--- example.css
| |--- example-index.html
| |--- example-more.html
|
|--- prototypes.coffee
|--- index.html
|--- smart.json
|--- smart.lock
The example folder represents a single prototype, reachable at (for example) http://localhost:3000/prototypes/example/. Ideally, you would be able to add another prototype to the project simply by duplicating example/ with a new name (e.g. new-example) and visiting http://localhost:3000/prototypes/new-example/.
The problem with this is that Meteor, by default, searches the entire project directory for HTML files and loads them all. What I need to do is check which prototype we're viewing based on the URL (through Meteor Router) and load only the .html files in that folder (e.g. example/).
Is there a way to tell Meteor to load only .html files in a specific subdirectory? Or another way to accomplish this?
For those curious, or in case it helps, here are what each of the files mentioned in the directory structure above contain:
index.html
<head>
<title>desktime-prototypes</title>
</head>
<body>
{{ renderPage }}
</body>
<template name="home">
<h1>We have the following prototypes available:</h1>
<ul>
<li>Example</li>
</ul>
</template>
prototypes.coffee
if (Meteor.isClient)
Meteor.Router.add
'': 'home'
'/:prototype': (params) ->
return params
'/:prototype/:page': (params) ->
return params[1]
if (Meteor.isServer)
Meteor.startup ->
# code to run on server at startup
/prototypes/example.coffee
if Meteor.isClient
Template.example.greeting = ->
return "Welcome to prototypes."
Template.example.rendered = ->
# This function will fire when this specific template gets rendered,
# Great place to fire jQuery plugins, or anything else that needs
# to happen when the DOM is ready.
Template.example.events
'click input' : ->
# template data, if any, is available in 'this'
alert 'Button clicked!'
prototypes/example/example-index.html
<template name="example">
<h1>Welcome to the example prototype!</h1>
{{> example-more }}
</template>
Great question...two things:
(1) meteor-router currently lacks the server side rendering you need (though it's close).
(2) HTML file names are completely irrelevant to the routing system. The folders in which they live matter insofar as the order they're loaded, but the names do not match to routes the way you expect.
To achieve what you're looking for you can (1) use links in the app for routing but don't change the URL in the address bar and expect that to work yet, and (2) change the template names of the various html files in your /prototypes folder to match the prototype you're wanting to demo. Below is an example:
HTML:
<body>
<h1>All Prototypes</h1>
{{>proto}}
<div>
{{renderPage}}
</div>
</body>
<template name="landing">
LANDING
</template>
<template name="proto">
{{#each items}}
{{name}}
{{/each}}
</template>
Javascript:
if (Meteor.isClient) {
Meteor.startup(function () {
Meteor.Router.to("/landing");
});
Meteor.Router.add({
'/landing': 'landing',
'/prototypes/:page': function (proto) {
return proto;
}
});
Template.proto.items = function () {
return [{ name: "Prototype 1", id: "prototype1" }, { name: "Prototype 2", id: "prototype2" }];
};
}
Prototype 1 HTML:
<template name="prototype1">
<h1>Prototype 1</h1>
</template>
Prototype 2 HTML:
<template name="prototype2">
<h1>Prototype 2</h1>
</template>
Is there a reason you want multiple prototypes inside one Meteor project? Do they share code? If not, why not just use one Meteor project per prototype? And then what you could do is create a command line util yourself that does something like
meteor_proto example1
meteor_proto example2
which creates Meteor projects but just pre-populates them with the files you want (you could create your ideal prototyping project and put it somewhere, then just have your command line copy the contents of that folder over while after doing a meteor create command or something).
This would be a nice feature for Meteor to have by default, actually.