I'm new to Blazor. What I want to do is create a image gallery with pagination. I managed to create the gallery with paging using JavaScript.
My only problem is that when it loads on the page I just see the next and prev buttons. Only when I click the next button, the images load and the paging works.
I have a image array called objIm. I then populate the div with id contentPanel with the images using JS code.
I have tried window.onload in the JS file, but it is not working. I inserted a break point and tested and it hit the breakpoint when I started the site, but as soon as i navigate to the page where i have the image gallery on, it does not show the images.
I have also tried calling the loadMe function in the JS file, but it is not working either.
How can I get the images to load on page load in blazor. most of the tutorials I have found use a onclick event to call a function.
Please help
Javascript code:
window.onload = function () {
changePage(1);
};
function loadMe() {
changePage(1);
}
var current_page = 1;
var records_per_page = 5;
var objIm = [
{ adimg: "https://thumbs.dreamstime.com/b/pineapple-headphones-wooden-table-horizontal-front-black-background-62166845.jpg" },
{ adimg: "https://images.unsplash.com/photo-1558981852-426c6c22a060?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" },
{ adimg: "https://images.pexels.com/photos/853168/pexels-photo-853168.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" },
{ adimg: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT-sZlG6VgOM5DgG6RToxO2PPvZFml3y-L2WGJjxLIfVU4wGAN0yA&s" },
{ adimg: "https://images.unsplash.com/photo-1524293581917-878a6d017c71?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" },
{ adimg: "https://images.unsplash.com/photo-1504575958497-ccdd586c2997?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1354&q=80" },
{ adimg: "https://images.pexels.com/photos/853168/pexels-photo-853168.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" },
{ adimg: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT-sZlG6VgOM5DgG6RToxO2PPvZFml3y-L2WGJjxLIfVU4wGAN0yA&s" },
{ adimg: "https://images.unsplash.com/photo-1531219432768-9f540ce91ef3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" },
{ adimg: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT-sZlG6VgOM5DgG6RToxO2PPvZFml3y-L2WGJjxLIfVU4wGAN0yA&s" },
{ adimg: "https://images.pexels.com/photos/853168/pexels-photo-853168.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" },
{ adimg: "https://images.unsplash.com/photo-1558981852-426c6c22a060?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" },
{ adimg: "https://thumbs.dreamstime.com/b/pineapple-headphones-wooden-table-horizontal-front-black-background-62166845.jpg" },
{ adimg: "https://images.unsplash.com/photo-1558981852-426c6c22a060?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" },
{ adimg: "https://images.pexels.com/photos/853168/pexels-photo-853168.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" },
{ adimg: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT-sZlG6VgOM5DgG6RToxO2PPvZFml3y-L2WGJjxLIfVU4wGAN0yA&s" },
{ adimg: "https://images.unsplash.com/photo-1524293581917-878a6d017c71?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" },
{ adimg: "https://images.unsplash.com/photo-1504575958497-ccdd586c2997?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1354&q=80" },
{ adimg: "https://images.pexels.com/photos/853168/pexels-photo-853168.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" },
{ adimg: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT-sZlG6VgOM5DgG6RToxO2PPvZFml3y-L2WGJjxLIfVU4wGAN0yA&s" },
{ adimg: "https://images.unsplash.com/photo-1531219432768-9f540ce91ef3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" },
{ adimg: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT-sZlG6VgOM5DgG6RToxO2PPvZFml3y-L2WGJjxLIfVU4wGAN0yA&s" },
{ adimg: "https://images.pexels.com/photos/853168/pexels-photo-853168.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" },
{ adimg: "https://images.unsplash.com/photo-1558981852-426c6c22a060?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" }
];
function prevPage() {
if (current_page > 1) {
current_page--;
changePage(current_page);
}
}
function nextPage() {
if (current_page < numPages()) {
current_page++;
changePage(current_page);
}
}
function changePage(page) {
var btn_next = document.getElementById("btn_next");
var btn_prev = document.getElementById("btn_prev");
var img_table = document.getElementById("contentPanel");
var page_span = document.getElementById("page");
if (page < 1) page = 1;
if (page > numPages()) page = numPages();
img_table.innerHTML = "";
for (var i = (page - 1) * records_per_page; i < (page * records_per_page) && i < objIm.length; i++) {
img_table.innerHTML += '<img class="myimg" src=' + objIm[i].adimg + '/>';
}
page_span.innerHTML = page + "/" + numPages();
if (page == 1) {
btn_prev.style.visibility = "hidden";
} else {
btn_prev.style.visibility = "visible";
}
if (page == numPages()) {
btn_next.style.visibility = "hidden";
} else {
btn_next.style.visibility = "visible";
}
}
function numPages() {
return Math.ceil(objIm.length / records_per_page);
}
Blazor page code:
#page "/PageExample"
#inject IJSRuntime JsRuntime
<div class="row" id="contentPanel">
</div>
<div class="clear">
Prev
Next
page: <span id="page"></span>
</div>
#code {
protected override async Task OnInitializedAsync()
{
await JsRuntime.InvokeVoidAsync(identifier: "loadMe");
}
}
Here is a fully working version with paging and disabling buttons etc. NO Javascript needed ;-)
<div class="row" id="contentPanel">
#foreach(String image in GetImagesToShow())
{
<img src="#image" style="height:150px;" />
}
</div>
<div class="clear" style="margin:15px;">
<button class="btn btn-info #DisablePrevious" #onclick="MovePrevious" >Prev</button>
<button class="btn btn-info #DisableNext" #onclick="MoveNext">Next</button>
page: <span>#CurrentPage / #NumberOfPages() </span>
</div>
#code {
int CurrentPage { get; set; } = 1;
int RecordsPerPage = 5;
void MoveNext()
{
if (CurrentPage < NumberOfPages())
{
CurrentPage++;
}
}
void MovePrevious()
{
if (CurrentPage > 1)
{
CurrentPage--;
}
}
string DisablePrevious {
get {
if (CurrentPage == 1) { return "disabled"; }
return "";
}
}
string DisableNext {
get {
if (CurrentPage == NumberOfPages()) { return "disabled"; }
return "";
}
}
int NumberOfPages()
{
return (int)(Math.Ceiling(((double)Images.Count /(double)RecordsPerPage)));
}
List<String> GetImagesToShow()
{
int skip = (CurrentPage - 1) * RecordsPerPage;
return Images.Skip(skip).Take(RecordsPerPage).ToList();
}
List<String> Images = new List<String>() {
"https://thumbs.dreamstime.com/b/pineapple-headphones-wooden-table-horizontal-front-black-background-62166845.jpg",
"https://images.unsplash.com/photo-1558981852-426c6c22a060?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" ,
"https://images.pexels.com/photos/853168/pexels-photo-853168.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" ,
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT-sZlG6VgOM5DgG6RToxO2PPvZFml3y-L2WGJjxLIfVU4wGAN0yA&s" ,
"https://images.unsplash.com/photo-1524293581917-878a6d017c71?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" ,
"https://images.unsplash.com/photo-1504575958497-ccdd586c2997?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1354&q=80" ,
"https://images.pexels.com/photos/853168/pexels-photo-853168.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" ,
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT-sZlG6VgOM5DgG6RToxO2PPvZFml3y-L2WGJjxLIfVU4wGAN0yA&s" ,
"https://images.unsplash.com/photo-1531219432768-9f540ce91ef3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" ,
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT-sZlG6VgOM5DgG6RToxO2PPvZFml3y-L2WGJjxLIfVU4wGAN0yA&s" ,
"https://images.pexels.com/photos/853168/pexels-photo-853168.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" ,
"https://images.unsplash.com/photo-1558981852-426c6c22a060?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" ,
"https://thumbs.dreamstime.com/b/pineapple-headphones-wooden-table-horizontal-front-black-background-62166845.jpg" ,
"https://images.unsplash.com/photo-1558981852-426c6c22a060?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" ,
"https://images.pexels.com/photos/853168/pexels-photo-853168.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" ,
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT-sZlG6VgOM5DgG6RToxO2PPvZFml3y-L2WGJjxLIfVU4wGAN0yA&s" ,
"https://images.unsplash.com/photo-1524293581917-878a6d017c71?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" ,
"https://images.unsplash.com/photo-1504575958497-ccdd586c2997?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1354&q=80" ,
"https://images.pexels.com/photos/853168/pexels-photo-853168.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" ,
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT-sZlG6VgOM5DgG6RToxO2PPvZFml3y-L2WGJjxLIfVU4wGAN0yA&s" ,
"https://images.unsplash.com/photo-1531219432768-9f540ce91ef3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" ,
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT-sZlG6VgOM5DgG6RToxO2PPvZFml3y-L2WGJjxLIfVU4wGAN0yA&s" ,
"https://images.pexels.com/photos/853168/pexels-photo-853168.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" ,
"https://images.unsplash.com/photo-1558981852-426c6c22a060?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80"
};
}
I have put it on blazorfiddle so you can play and see how it works https://blazorfiddle.com/s/p3htkqwn hope this helps
Bind the src attribute of the img tag to the image uri.
<img src="#imgSrc"/>
Switch the bound image source dynamically upon navigation. No javascript needed.
Here is a simplified working example:
#page "/"
<div>
<img src="#Images[idx]" />
</div>
<button #onclick="()=>idx = idx + 1 >= Images.Count() ? 0 : idx + 1">Forward</button>
<button #onclick="()=>idx = idx - 1 < 0 ? Images.Count() - 1 : idx - 1">Back</button>
#code {
public int idx;
public List<string> Images = new List<string>()
{
"https://thumbs.dreamstime.com/b/pineapple-headphones-wooden-table-horizontal-front-black-background-62166845.jpg",
"https://images.pexels.com/photos/853168/pexels-photo-853168.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT-sZlG6VgOM5DgG6RToxO2PPvZFml3y-L2WGJjxLIfVU4wGAN0yA&s",
"https://images.unsplash.com/photo-1524293581917-878a6d017c71?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
};
}
Related
I have the following data structure
{ 'the-subtle-art-of-not-givng-a-f': { "id: "test", "title": "test"}, "the-hamset": {"id": "test", "title": "test"}}
how can I display the title in a mustache template?
jQuery
HTML:
<div id="output">
</div>
<script type="text/template" id="titles">
<ul>
{{#titles}}
<li>{{title}}</li>
{{/titles}}
</ul>
</script>
JS:
$(document).ready(function(){
const template = $('#titles').html();
const output = $('#output');
const object = {
'the-subtle-art-of-not-givng-a-f': {
"id": "test", "title": "test1"
},
"the-hamset": {
"id": "test", "title": "test2"
}
};
let titles = [];
for (const property in object) {
if (object.hasOwnProperty(property)) {
if (object[property].title) {
titles.push( { title: object[property].title });
}
}
}
const data = { titles };
const result = Mustache.render(template, data);
output.append(result);
});
Example
Vanilla JS:
HTML:
<div id="output">
</div>
<script type="text/template" id="titles">
<ul>
{{#titles}}
<li>{{title}}</li>
{{/titles}}
</ul>
</script>
JS:
const callback = function() {
const template = document.querySelector('#titles').innerHTML;
const output = document.querySelector('#output');
const object = {
'the-subtle-art-of-not-givng-a-f': {
"id": "test", "title": "test1"
},
"the-hamset": {
"id": "test", "title": "test2"
}
};
let titles = [];
for (const property in object) {
if (object.hasOwnProperty(property)) {
if (object[property].title) {
titles.push( { title: object[property].title });
}
}
}
const data = { titles };
const result = Mustache.render(template, data);
output.innerHTML = output.innerHTML + result;
};
if (
document.readyState === "complete" ||
(document.readyState !== "loading" && !document.documentElement.doScroll)
) {
callback();
} else {
document.addEventListener("DOMContentLoaded", callback);
}
Example
Hello and Happy new Year guys,
Again I ask about v-treeview search. When I do my filter, the behavior do not satisfy me.
I updated my version of vuetify to 1.4.0. And I'm using vue 2.5.15
https://codepen.io/anon/pen/PXeMmy?&editors=101
HTML
<div id="app">
<v-container grid-list-md>
<v-layout wrap>
<v-flex xs6>
<!-- Search Field -->
<v-text-field label="search" v-model="search" box>
</v-text-field>
<!-- Treeview -->
<v-treeview :items="filteredTree"
v-model="selected"
active-class="grey lighten-4 indigo--text"
item-key="name"
selected-color="blue"
selectable
hoverable>
</v-treeview>
</v-flex>
<v-flex xs6>
<v-chip v-for="(s , i) in selected" :key="i">
{{s}}
</v-chip>
</v-flex>
</v-layout>
</v-container>
</div>
JS :
new Vue({
el: '#app',
data(){
return{
search: '',
tree: [
{
id: 1,
name: 'Applications',
children: [
{ id: 2, name: 'Calendar' },
{ id: 3, name: 'Chrome' },
{ id: 4, name: 'Webstorm' }
]
},
{
id: 5,
name: 'Languages',
children: [
{ id: 6, name: 'English' },
{ id: 7, name: 'French' },
{ id: 8, name: 'Spannish' }
]
}
],
selected: []
}
},
computed:{
filteredTree: {
get: function() {
let regexp = new RegExp(this.search, "i")
return this.filterTree(this.tree, regexp) || []
},
},
},
methods: {
filterTree: function(tree, filter) {
if (!Array.isArray(tree)) return null
return JSON.parse(JSON.stringify(tree)).filter(function matchName(o) {
let temp;
if (o.name.match(filter)) {
return true;
}
if (!Array.isArray(o.children)) {
return false;
}
temp = o.children.filter(matchName);
if (temp.length) {
o.children = temp;
return true;
}
});
}
}
})
In this exemple when I search "Calen", only "Application -> Calendar" is visible. Until now, it's what I want.
But when I select Calendar, "Application" is also selected; and when I clear the filter, all the children of "Application" are selected too. And I'd like to select "Calendar" and when I clear I don't want its siblings to be selected.
Thank you for reading
I am new to Angular and stuck on an issue. Anyone can help me to figure out that what I am doing wrong in parent component. I am not able to get the child component reference in parent. I already followed following reference but not succeeded.
Angular 2 #ViewChild annotation returns undefined
https://expertcodeblog.wordpress.com/2018/01/12/angular-resolve-error-viewchild-annotation-returns-undefined/
Parent:
import { Component, OnInit, OnDestroy, ViewChild, HostListener, AfterViewInit, ViewChildren, QueryList } from '#angular/core';
import { Router, NavigationEnd, NavigationStart } from '#angular/router';
import { NavItem, NavItemType } from '../../md/md.module';
import { Subscription } from 'rxjs/Subscription';
import { Location, LocationStrategy, PathLocationStrategy, PopStateEvent } from '#angular/common';
import 'rxjs/add/operator/filter';
import { NavbarComponent } from '../../shared/navbar/navbar.component';
import PerfectScrollbar from 'perfect-scrollbar';
import { ChatService } from 'app/services/chat.service';
import swal from 'sweetalert2';
import { JitsiService } from 'app/services/jitsi.service';
import { UserService } from 'app/services/user.service';
import { ConferenceStudentComponent } from 'app/conference-student/conference-student.component';
declare const $: any;
#Component({
selector: 'app-layout',
templateUrl: './admin-layout.component.html'
})
export class AdminLayoutComponent implements OnInit, AfterViewInit {
public navItems: NavItem[];
private _router: Subscription;
private lastPoppedUrl: string;
private yScrollStack: number[] = [];
url: string;
location: Location;
#ViewChild('sidebar') sidebar: any;
#ViewChild(NavbarComponent) navbar: NavbarComponent;
#ViewChildren(ConferenceStudentComponent) stuConf: QueryList<ConferenceStudentComponent>;
constructor( private router: Router, location: Location,
private chatService: ChatService,
private jitsiService: JitsiService,
private userService: UserService
) {
this.location = location;
this.chatService.callVisibilityChange
.subscribe(callFrom => {
console.log('admin layout call from', callFrom);
if (callFrom) {
this.userService.getLoggedUserDetail()
.subscribe(loggedUser => {
if (!loggedUser) {
console.log(`Invalid token, logged user data not fetched`);
return false;
}
this.userService.getUser(callFrom['fromUser'])
.subscribe(otherUser => {
swal({
title: `${otherUser['fullName']} is calling`,
text: `Click on accept to join session`,
type: `info`,
showCancelButton: true,
cancelButtonColor: `#d33`,
cancelButtonText: `reject`,
confirmButtonColor: `#3085d6`,
confirmButtonText: `accept`
}).then((result) => {
if (result.value) {
const jitsiSessionData = {
loggedUser,
otherUser,
roomName: callFrom['roomName']
}
this.router.navigateByUrl(`/conference-student/${otherUser['_id']}`);
window.setTimeout(() => this.jitsiService.joinSession(jitsiSessionData), 10000);
} else {
console.log('user select rejected');
this.chatService.jitsiCallReject(otherUser._id, loggedUser._id, callFrom['roomName']);
}
})
});
});
}
});
}
ngOnInit() {
const elemMainPanel = <HTMLElement>document.querySelector('.main-panel');
const elemSidebar = <HTMLElement>document.querySelector('.sidebar .sidebar-wrapper');
this.location.subscribe((ev:PopStateEvent) => {
this.lastPoppedUrl = ev.url;
});
this.router.events.subscribe((event:any) => {
if (event instanceof NavigationStart) {
if (event.url != this.lastPoppedUrl)
this.yScrollStack.push(window.scrollY);
} else if (event instanceof NavigationEnd) {
if (event.url == this.lastPoppedUrl) {
this.lastPoppedUrl = undefined;
window.scrollTo(0, this.yScrollStack.pop());
}
else
window.scrollTo(0, 0);
}
});
this._router = this.router.events.filter(event => event instanceof NavigationEnd).subscribe((event: NavigationEnd) => {
elemMainPanel.scrollTop = 0;
elemSidebar.scrollTop = 0;
});
const html = document.getElementsByTagName('html')[0];
if (window.matchMedia(`(min-width: 960px)`).matches && !this.isMac()) {
let ps = new PerfectScrollbar(elemMainPanel);
ps = new PerfectScrollbar(elemSidebar);
html.classList.add('perfect-scrollbar-on');
}
else {
html.classList.add('perfect-scrollbar-off');
}
this._router = this.router.events.filter(event => event instanceof NavigationEnd).subscribe((event: NavigationEnd) => {
this.navbar.sidebarClose();
});
this.navItems = [
{ type: NavItemType.NavbarLeft, title: 'Dashboard', iconClass: 'fa fa-dashboard' },
{
type: NavItemType.NavbarRight,
title: '',
iconClass: 'fa fa-bell-o',
numNotifications: 5,
dropdownItems: [
{ title: 'Notification 1' },
{ title: 'Notification 2' },
{ title: 'Notification 3' },
{ title: 'Notification 4' },
{ title: 'Another Notification' }
]
},
{
type: NavItemType.NavbarRight,
title: '',
iconClass: 'fa fa-list',
dropdownItems: [
{ iconClass: 'pe-7s-mail', title: 'Messages' },
{ iconClass: 'pe-7s-help1', title: 'Help Center' },
{ iconClass: 'pe-7s-tools', title: 'Settings' },
'separator',
{ iconClass: 'pe-7s-lock', title: 'Lock Screen' },
{ iconClass: 'pe-7s-close-circle', title: 'Log Out' }
]
},
{ type: NavItemType.NavbarLeft, title: 'Search', iconClass: 'fa fa-search' },
{ type: NavItemType.NavbarLeft, title: 'Account' },
{
type: NavItemType.NavbarLeft,
title: 'Dropdown',
dropdownItems: [
{ title: 'Action' },
{ title: 'Another action' },
{ title: 'Something' },
{ title: 'Another action' },
{ title: 'Something' },
'separator',
{ title: 'Separated link' },
]
},
{ type: NavItemType.NavbarLeft, title: 'Log out' }
];
}
ngAfterViewInit() {
this.runOnRouteChange();
this.stuConf.changes.subscribe((comp: QueryList<ConferenceStudentComponent>) => {
console.log(`student component`, comp);
})
}
public isMap() {
if (this.location.prepareExternalUrl(this.location.path()) === '/maps/fullscreen') {
return true;
} else {
return false;
}
}
runOnRouteChange(): void {
if (window.matchMedia(`(min-width: 960px)`).matches && !this.isMac()) {
const elemSidebar = <HTMLElement>document.querySelector('.sidebar .sidebar-wrapper');
const elemMainPanel = <HTMLElement>document.querySelector('.main-panel');
let ps = new PerfectScrollbar(elemMainPanel);
ps = new PerfectScrollbar(elemSidebar);
ps.update();
}
}
isMac(): boolean {
let bool = false;
if (navigator.platform.toUpperCase().indexOf('MAC') >= 0 || navigator.platform.toUpperCase().indexOf('IPAD') >= 0) {
bool = true;
}
return bool;
}
}
Child:
import { Component, OnInit } from '#angular/core';
import { ActivatedRoute, ParamMap } from '#angular/router';
import '../../vendor/jitsi/external_api.js';
import { JitsiService } from 'app/services/jitsi.service.js';
import { UserService, UserSchema } from 'app/services/user.service.js';
import swal from 'sweetalert2';
declare var JitsiMeetExternalAPI: any;
declare const $: any;
#Component({
selector: "app-conference-student-cmp",
templateUrl: "conference-student.component.html"
})
export class ConferenceStudentComponent implements OnInit {
roomName: string;
tutor: UserSchema
student: UserSchema;
domain: string;
options: any;
api: any;
hasActiveRoom: boolean;
tutorId: string;
conferenceJoined: boolean;
constructor(
private route: ActivatedRoute,
private jitsiService: JitsiService,
private userService: UserService
) { }
ngOnInit() {
this.conferenceJoined = false;
// this.domain = "jitsi.liquidclouds.in";
this.domain = 'meet.jit.si';
this.route.paramMap.subscribe((params: ParamMap) => this.tutorId = params.get('id'));
this.userService
.getLoggedUserDetail()
.subscribe(student => {
// store student
this.student = student;
this.userService.getUser(this.tutorId)
.subscribe((tutor: UserSchema) => {
// store tutor
this.tutor = tutor;
const obj = { tutorId: this.tutor['_id'], studentId: this.student['_id'] };
this.jitsiService.getActiveRoomForStudent(obj).subscribe(resp => {
if (resp && resp['result'] && resp['result']['roomName']) {
this.hasActiveRoom = true;
this.roomName = resp['result']['roomName'];
}
});
});
});
}
joinSession() {
this.options = {
roomName: this.roomName,
width: 800,
height: 500,
parentNode: document.querySelector('#jitsiVideo'),
configOverwrite: {},
interfaceConfigOverwrite: {
// filmStripOnly: true,
TOOLBAR_BUTTONS: [
'microphone', 'camera', 'closedcaptions', 'desktop', 'fullscreen',
'hangup', 'profile', 'chat', 'recording'
],
}
};
this.api = new JitsiMeetExternalAPI(this.domain, this.options);
this.api.executeCommand('displayName', this.student['fullName']);
this.api.addEventListeners({
readyToClose: this.unload,
participantLeft: this.handleParticipantLeft,
participantJoined: this.handleParticipantJoined,
videoConferenceJoined: this.handleVideoConferenceJoined,
videoConferenceLeft: this.handleVideoConferenceLeft
});
this.conferenceJoined = true;
}
unload = () => {
if (this.api instanceof JitsiMeetExternalAPI) {
this.api.dispose();
}
$('#jitsiVideo').html('');
this.conferenceJoined = false;
this.hasActiveRoom = false;
}
handleParticipantLeft = (arg) => {
this.jitsiService.getJitsiDetailByParticipantId(arg.id)
.subscribe(async roomDetail => {
if (!roomDetail) {
console.log(`No room is joined by the participant id: ${arg.id}`);
return false;
} else {
const participantDetail = roomDetail['participants'].filter(el => el.jitsiParticipantId === arg.id)[0];
if (participantDetail) {
switch (participantDetail.type) {
case 'manager':
console.log('Left participant is manager');
break;
case 'supervisor':
console.log('Left participant is supervisor');
break;
case 'student':
console.log('Left participant is student');
break;
case 'tutor':
console.log('Left participant is tutor');
this.api.dispose();
this.conferenceJoined = false;
this.hasActiveRoom = false;
alert('Tutor left the session.');
break;
default:
console.log('Left participant is not a valid type');
break;
}
}
}
});
}
handleParticipantJoined = (arg) => {
console.log('participant joined: ', arg, this.api);
}
handleVideoConferenceJoined = (arg) => {
const obj = {
participantId: arg.id,
roomName: arg.roomName,
tutorId: this.tutor['_id'],
studentId: this.student['_id'],
studentJoined: 'yes',
joineeType: 'student',
}
// save new room
this.jitsiService.updateJitsiRoomForStudent(obj);
}
handleVideoConferenceLeft = (arg) => {
}
}
admin-layout.componet.html
<div class="wrapper">
<div class="sidebar" data-color="rose" data-background-color="white" data-image="./assets/img/sidebar-1.jpg">
<app-sidebar-cmp></app-sidebar-cmp>
<div class="sidebar-background" style="background-image: url(assets/img/sidebar-1.jpg)"></div>
</div>
<div class="main-panel">
<router-outlet></router-outlet>
<div *ngIf="!isMap()">
<app-footer-cmp></app-footer-cmp>
</div>
</div>
<app-fixedplugin></app-fixedplugin>
</div>
I am able to create a custom field with jsGrid and jquery autocomplete. All ajax CRUD calls are working for all other fields. The below code activates autocomplete and shows the available options in the input field as expected.
var tags = ["tag1", "tag2", "tag3"];
MyDescriptionField.prototype = new jsGrid.Field({
insertTemplate: function(value) {
return this._editPicker = $("<input>").autocomplete({source : tags});
},
editTemplate: function(value) {
return this._editPicker = $("<input>").autocomplete({source : tags});
},
........... (more code)
So far so good. However to actually capture the value so it can be inserted into the db, I also need to define insertValue and editValue.
The code below is NOT working
insertValue: function(){
return this._insertPicker = $("<input>").val();
},
...........(more code)
this one is not working eiter:
insertValue: function(){
return this._insertPicker.autocomplete({
select: function(event, ui) {
$("<input>").val(ui.item.value);
}
});
},
reference: jsGrid. http://js-grid.com/demos/
autocomplete: https://jqueryui.com/autocomplete/
Try this snippet:
$(function() {
var myTagField = function(config) {
jsGrid.Field.call(this, config);
};
myTagField.prototype = new jsGrid.Field({
sorter: function(tag1, tag2) {
return tag1.localeCompare(tag2);
},
itemTemplate: function(value) {
return value;
},
insertTemplate: function(value) {
return this._insertAuto = $("<input>").autocomplete({source : tags});
},
editTemplate: function(value) {
return this._editAuto = $("<input>").autocomplete({source : tags}).val(value);
},
insertValue: function() {
return this._insertAuto.val();
},
editValue: function() {
return this._editAuto.val();
}
});
jsGrid.fields.myTagField = myTagField;
$("#jsGrid").jsGrid({
width: "100%",
inserting: true,
editing: true,
sorting: true,
paging: true,
fields: [
{ name: "Name", type: "text" },
{ name: "Tag", type: "myTagField", width: 100, align: "center" },
{ type: "control", editButton: false, modeSwitchButton: false }
],
data: db.users
});
});
var tags = ["tag1", "tag2", "tag3"];
var db = {};
db.users = [
{
"Name": "Carson Kelley",
"Tag": ""
},
{
"Name": "Prescott Griffin",
"Tag": "tag1"
},
{
"Name": "Amir Saunders",
"Tag": "tag3"
},
{
"Name": "Derek Thornton",
"Tag": "tag2"
},
{
"Name": "Fletcher Romero",
"Tag": ""
}];
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="//rawgit.com/tabalinas/jsgrid/master/dist/jsgrid.min.js"></script>
<link href="//code.jquery.com/ui/1.11.2/themes/cupertino/jquery-ui.css" rel="stylesheet"/>
<link href="//rawgit.com/tabalinas/jsgrid/master/dist/jsgrid.min.css" rel="stylesheet"/>
<link href="//rawgit.com/tabalinas/jsgrid/master/dist/jsgrid-theme.css" rel="stylesheet"/>
<div id="jsGrid"></div>
or this codepen: https://codepen.io/beaver71/pen/rpaLEo
Thanks #beaver. Your pen helped my understand custom fields better. I extended it a bit to add filtering with autocomplete. https://codepen.io/obrienje/pen/aQKNry
$(function() {
var myTagField = function(config) {
jsGrid.Field.call(this, config);
};
myTagField.prototype = new jsGrid.Field({
autosearch: true,
sorter: function(tag1, tag2) {
return tag1.localeCompare(tag2);
},
itemTemplate: function(value) {
return '<span class="label label-primary">' + value + '</span>';
},
insertTemplate: function(value) {
return this._insertAuto = $("<input>").autocomplete({
source: tags
});
},
filterTemplate: function(value) {
if (!this.filtering)
return "";
var grid = this._grid,
$result = this._filterAuto = $("<input>").autocomplete({
source: tags
});
if (this.autosearch) {
$result.on("change", function(e) {
grid.search();
});
}
return $result;
},
editTemplate: function(value) {
return this._editAuto = $("<input>").autocomplete({
source: tags
}).val(value);
},
insertValue: function() {
return this._insertAuto.val();
},
filterValue: function() {
return this._filterAuto.val();
},
editValue: function() {
return this._editAuto.val();
}
});
jsGrid.fields.myTagField = myTagField;
$("#jsGrid").jsGrid({
width: "100%",
filtering: true,
inserting: true,
editing: true,
sorting: true,
paging: true,
fields: [{
name: "Name",
type: "text"
},
{
name: "Tag",
type: "myTagField",
width: 100,
align: "center"
},
{
type: "control",
editButton: false,
modeSwitchButton: false
}
],
data: db.users,
controller: {
loadData: function(filter) {
return $.grep(db.users, function(item) {
return (!filter.Tag || item.Tag.toLowerCase().indexOf(filter.Tag.toLowerCase()) > -1);
});
}
}
});
});
var tags = ["tag1", "tag2", "tag3"];
var db = {};
db.users = [{
"Name": "Carson Kelley",
"Tag": ""
},
{
"Name": "Prescott Griffin",
"Tag": "tag1"
},
{
"Name": "Amir Saunders",
"Tag": "tag3"
},
{
"Name": "Derek Thornton",
"Tag": "tag2"
},
{
"Name": "Fletcher Romero",
"Tag": ""
}
];
<html>
<head>
<link href="https://rawgit.com/tabalinas/jsgrid/master/dist/jsgrid.min.css" rel="stylesheet"/>
<link href="https://rawgit.com/tabalinas/jsgrid/master/dist/jsgrid-theme.css" rel="stylesheet"/>
<link href="//code.jquery.com/ui/1.11.2/themes/cupertino/jquery-ui.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"/>
</head>
<body>
<h1>Custom Grid DateField filtering with autocomplete</h1>
<div id="jsGrid"></div>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="https://rawgit.com/tabalinas/jsgrid/master/dist/jsgrid.min.js"></script>
</body>
</html>
Thanks #beaver. Your pen helped my understand custom fields better. I extended it a bit to add filtering with autocomplete. https://codepen.io/obrienje/pen/aQKNry
I have been having a weird issue with one of my node controllers. For context, on a POST request for this specific controller, I store a an object in a mongo database, and also write the necessary parts of the object to a file. There is a website that already exists, which interfaces directly with the server, but I am writing a REST api for customers who would like a custom interface. (I did not write the node server or the website.)
My issue is that for some reason, the values being written to the file in this case are coming through as Null after a "post" like so:
{"legs":[{"ptu":{"tilt":{},"pan":{}}},{"audio":{"mute":false,"vol":0},"ptu":{"tilt":{"abs":null},"pan":{"abs":null}}},{"audio":{"mute":true,"vol":0},"ptu":{"tilt":{"abs":null},"pan":{"abs":null}}}]}
however, the forms on the website populate correctly, and if I press "save" from the website, the file is correctly updated. i.e.
{"legs":[{"ptu":{"tilt":{"abs":0},"pan":{"abs":0}}},{"audio":{"track":"/home/rahd/ult0316-p002/resources/tracks/Maid with the Flaxen Hair.mp3","vol":0,"mute":false},"ptu":{"tilt":{"abs":10},"pan":{"abs":10}}},{"audio":{"track":null,"vol":0,"mute":true},"ptu":{"tilt":{"abs":10},"pan":{"abs":10}}}]}
here is my postman request which is being sent as raw JSON:
{
"name": "NicksCoolTour3",
"location": "/home/rahd/ult0316-p002/resources/tours/5982374cb492c516c20c40d0.json",
"legs": [
{
"audio": {
"mute": true,
"volPercent": 0,
"vol": -120,
"track": null
},
"ptu": {
"poi": "59823726b492c516c20c40cd",
"tilt": {
"vel": 5,
"rel": 0,
"abs": 0
},
"pan": {
"vel": 5,
"rel": 0,
"abs": 0
},
"direction": "quickest"
},
"time": 0,
"velMode": "time",
"ptuMode": "poi"
},
{
"_id": "5982374cb492c516c20c40d2",
"audio": {
"mute": false,
"volPercent": 100,
"vol": -120,
"track": "5983222d79930a1dbd4d94ac"
},
"ptu": {
"tilt": {
"vel": 5,
"rel": 10,
"abs": 0
},
"pan": {
"vel": 5,
"rel": 10,
"abs": 0
},
"direction": "quickest"
},
"time": 0,
"velMode": "time",
"ptuMode": "rel"
},
{
"_id": "5982374cb492c516c20c40d1",
"audio": {
"mute": true,
"volPercent": 100,
"vol": -120,
"track": "59823711b492c516c20c40cc"
},
"ptu": {
"tilt": {
"vel": 5,
"rel": 0,
"abs": 0
},
"pan": {
"vel": 5,
"rel": 0,
"abs": 0
},
"direction": "quickest"
},
"time": 0,
"velMode": "time",
"ptuMode": "rel"
}
]
}
and here is my POST controller :
router.post('/',function (req, res, next){
var new_tour = new Tour(req.body);
new_tour._id = new mongoose.Types.ObjectId;
new_tour.save( function(err, tour) {
if (err) return next(err);
res.json({ message: "tours database sucessfully updated" });
});
});
I am not sure what could be causing this, it seems that the database is getting the correct values, but the function that writes a request to the file is not behaving properly.
here is the schema which handles the file writing:
var mongoose = require("mongoose")
, fs = require('fs')
, path = require('path')
, resources = require(path.join(__dirname, '..', '..', 'config', 'resources'));
var schema = new mongoose.Schema({
name: { type: String, default: '', unique: true, required: true },
location: { type: String },
legs: [{
ptuMode: { type: String, default: 'abs' }, // abs || rel || poi
velMode: { type: String, default: 'vel' }, // vel || time
time: { type: Number, default: 0 }, // vel || time
ptu: {
direction: { type: String, default: 'cw' }, // cw || ccw
pan: {
rel: { type: Number },
abs: { type: Number },
vel: { type: Number },
},
tilt: {
rel: { type: Number },
abs: { type: Number },
vel: { type: Number },
},
poi: {
type: mongoose.Schema.Types.ObjectId,
ref: 'POI'
},
},
audio: {
mute: { type: Boolean },
vol: { type: Number },
volPercent: { type: Number },
track: {
type: mongoose.Schema.Types.ObjectId,
ref: 'Track'
},
}
}]
},
{
timestamps: true
});
schema.pre('save', function (next) {
var tour = this;
if (!tour.location || tour.location.length < 1) {
tour.location = path.join(resources.tours, tour._id + '.json');
}
tour.writeToFile(function (err) {
console.error(err);
});
next();
});
schema.post('remove', function (tour) {
if (tour.location && tour.location.length > 0) {
fs.exists(tour.location, function (exists) {
if (exists) {
fs.unlink(tour.location);
console.log('Deleted Tour: ' + tour.location);
} else {
console.log('Tour not found, so not deleting file.');
}
});
}
});
schema.methods.writeToFile = function (callback) {
function saveToFile(tour, callback) {
var filePath = tour.location;
var name = tour.name;
delete tour.location;
delete tour.name;
delete tour.createdAt;
delete tour.updatedAt;
delete tour._id;
delete tour.__v;
for (li in tour.legs) {
var leg = tour.legs[li];
var index = li;
if (typeof index === 'string') {
index = parseInt(li);
}
delete leg._id;
// Delete rel, force abs
delete leg.ptu.tilt.rel;
delete leg.ptu.pan.rel;
if (leg.audio.hasOwnProperty("volPercent")) {
var x = leg.audio.volPercent;
delete leg.audio.volPercent;
var n = -120;
if (x > 0) {
var val = Math.pow((x / 100), 4);
n = Math.max(20 * Math.log10(val), -120)
}
leg.audio.vol = n;
}
if (index == 0) {
delete leg.ptu.pan.vel;
delete leg.ptu.tilt.vel;
} else {
if (leg.ptu.pan.vel == 0) {
leg.ptu.pan.vel = 50;
}
if (leg.ptu.tilt.vel == 0) {
leg.ptu.tilt.vel = 50;
}
if (leg.ptu.direction === 'ccw') {
leg.ptu.pan.vel = -(Math.abs(leg.ptu.pan.vel));
}
}
if (leg.ptu.direction === 'quickest') {
delete leg.ptu.tilt.vel;
delete leg.ptu.pan.vel;
}
if (typeof (leg.audio.track) === 'object' && leg.audio.track !== null) {
leg.audio.track = leg.audio.track.location;
}
// Handle Delay
if (leg.ptuMode == 'delay') {
delete leg.ptu.pan;
delete leg.ptu.tilt;
} else {
delete leg.ptu.delay;
}
delete leg.ptu.poi;
delete leg.time;
delete leg.ptu.direction;
delete leg.ptuMode;
delete leg.velMode;
if (index == 0) {
delete leg.audio;
}
}
if (filePath && filePath.length > 0) {
fs.writeFile(filePath, JSON.stringify(tour), function (err) {
if (err) {
if (callback) callback(err);
return console.error(err);
}
console.log("Tour Written: " + name);
});
} else {
console.error("Tour location empty: " + name);
}
}
var tour = this.prepareExport();
saveToFile(tour, callback);
};
schema.methods.prepareExport = function () {
// TODO: Ensure Track and POI are loaded
var tour = this.toObject();
var prevLeg = false;
// Calculate proper abs positions before prepare for export
for (li in tour.legs) {
var leg = tour.legs[li];
if (leg.ptuMode == 'poi') {
leg.ptu.pan.abs = leg.ptu.poi.pan;
leg.ptu.tilt.abs = leg.ptu.poi.tilt;
} else if (leg.ptuMode == 'rel' && prevLeg) {
leg.ptu.pan.abs = prevLeg.ptu.pan.abs + leg.ptu.pan.rel;
leg.ptu.tilt.abs = prevLeg.ptu.tilt.abs + leg.ptu.tilt.rel;
}
if (leg.ptuMode !== 'delay') {
prevLeg = leg;
}
}
// Calulcate degrees per second for each leg
prevLeg = false;
for (li in tour.legs) {
var leg = tour.legs[li];
if (prevLeg && leg.velMode == 'time') {
var time = Math.abs(leg.time) || 0;
if (time > 0) {
if (leg.ptuMode == 'delay') {
leg.ptu.delay = time;
} else if (leg.ptuMode == 'rel') {
leg.ptu.pan.vel = leg.ptu.pan.rel / time;
leg.ptu.tilt.vel = leg.ptu.tilt.rel / time;
} else {
leg.ptu.pan.vel = (leg.ptu.pan.abs - prevLeg.ptu.pan.abs) / time;
leg.ptu.tilt.vel = (leg.ptu.tilt.abs - prevLeg.ptu.tilt.abs) / time;
}
} else {
leg.ptu.pan.vel = 0;
leg.ptu.tilt.vel = 0;
}
leg.ptu.pan.vel = Math.abs(leg.ptu.pan.vel);
leg.ptu.tilt.vel = Math.abs(leg.ptu.tilt.vel);
if (leg.ptu.direction === 'ccw') {
leg.ptu.pan.vel = -leg.ptu.pan.vel;
}
// Vel bounds
if (leg.ptu.pan.vel > 50) {
leg.ptu.pan.vel = 50;
} else if (leg.ptu.pan.vel < 5 && leg.ptu.pan.vel > 0) {
leg.ptu.pan.vel = 5;
}
if (leg.ptu.tilt.vel > 50) {
leg.ptu.tilt.vel = 50;
} else if (leg.ptu.tilt.vel < 5 && leg.ptu.tilt.vel > 0) {
leg.ptu.tilt.vel = 5;
}
// Quickest was using 50ยบ/s, but should be omitted
if (leg.ptu.direction === 'quickest' && time === 0) {
delete leg.ptu.pan.vel;
delete leg.ptu.tilt.vel;
}
// Remove invalid tilt velocity when tilt diff is 0 so vector vel on control server is calculated correctly
if (prevLeg.ptu.tilt.abs - leg.ptu.tilt.abs == 0) {
delete leg.ptu.tilt.vel;
}
}
prevLeg = leg;
}
return tour;
};
/* bounds logic
if (leg.ptu.pan.abs > 180) {
leg.ptu.pan.abs = leg.ptu.pan.abs - 360;
} else if (leg.ptu.pan.abs < -180) {
leg.ptu.pan.abs = leg.ptu.pan.abs + 360;
}
if (leg.ptu.tilt.abs > 90) {
leg.ptu.tilt.abs = 90;
} else if (leg.ptu.tilt.abs < -90) {
leg.ptu.tilt.abs = -90;
}
*/
var Tour = mongoose.model("Tour", schema);
module.exports = Tour;
There's error on your async functions :
schema.pre('save', function (next), next must me in the callback function
tour.writeToFile(function (err) {
console.error(err);
next();
});
schema.methods.writeToFile = function (callback) : you must return callback on success to and not only on error
if (filePath && filePath.length > 0) {
fs.writeFile(filePath, JSON.stringify(tour), function (err) {
if (err) {
if (callback) callback(err);
return console.error(err);
}
else
{
console.log("Tour Written: " + name);
if (callback) callback(err);
}
});
} else {
console.error("Tour location empty: " + name);
if (callback) callback(err);
}