I have a problem, i can`t get into routing in Angular 2. Mb someone fased with something similar?
So, my app renders in a weird way:
<my-app><div> <app-nav-bar _nghost-ile-2=""><ul _ngcontent-ile-2=""> <!--template bindings={
"ng-reflect-ng-for-of": "[object Object],[object Object],[object Object],[object Object]"
}--><li _ngcontent-ile-2="" ng-reflect-raw-style="[object Object]" style="float: left;"> <a _ngcontent-ile-2="" ng-reflect-raw-class="[object Object]" ng-reflect-href="/" href="/">Home</a> </li><li _ngcontent-ile-2="" ng-reflect-raw-style="[object Object]" style="float: left;"> <a _ngcontent-ile-2="" ng-reflect-raw-class="[object Object]" ng-reflect-href="/index/books" href="/index/books">Books</a> </li><li _ngcontent-ile-2="" ng-reflect-raw-style="[object Object]" style="float: right;"> <a _ngcontent-ile-2="" ng-reflect-raw-class="[object Object]" class="active" ng-reflect-href="/index/about" href="/index/about">About</a> </li><li _ngcontent-ile-2="" ng-reflect-raw-style="[object Object]" style="float: right;"> <a _ngcontent-ile-2="" ng-reflect-raw-class="[object Object]" ng-reflect-href="/" href="/">Login</a> </li> </ul> </app-nav-bar> <router-outlet></router-outlet><app-hello _nghost-ile-4="">
<html _ngcontent-ile-4="">
<head _ngcontent-ile-4="">
<link _ngcontent-ile-4="" class="__meteor-css__" href="/merged-stylesheets.css?hash=d42394b95cde74014bba42c21ff2737c29b8fc61" rel="stylesheet" type="text/css">
<base _ngcontent-ile-4="" href="/">
</head>
<body _ngcontent-ile-4="">
<my-app _ngcontent-ile-4="">Loading....</my-app>
</body>
</html>
</app-hello> </div> </my-app>
As you can see, my-app>(app-nav-bar+app-hello)>html>(head+body) etc..
File main.ts:
import { bootstrap } from 'angular2-meteor-auto-bootstrap';
import { disableDeprecatedForms, provideForms } from '#angular/forms';
import {APP_ROUTER_PROVIDERS} from './app.routes'
import { AppComponent } from './app.component';
bootstrap(AppComponent, [
disableDeprecatedForms(),
provideForms(),
APP_ROUTER_PROVIDERS
]);
File app.routes.ts
import {
RouterConfig, provideRouter } from '#angular/router';
import {
HelloComponent
} from './imports/index'
const routes: RouterConfig = [
{ path: '', component: HelloComponent }
];
export const APP_ROUTER_PROVIDERS = [
provideRouter(routes)
];
File app.component.html:
<div>
<app-nav-bar></app-nav-bar>
<router-outlet></router-outlet>
</div>
File index.html:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<base href="/">
<meta viewport>
</head>
<body>
<my-app>Loading....</my-app>
</body>
If someone can help me, i will be very happy =)
I am not sure if it is the right answer, but looks like i missed package, that allows me to use static template directly. So, replacing
import template from 'ex.controller.html'
#Component({
...
template,
...
})
With this
#Component({
...
template: 'ex.controller.html',
...
})
And deleted import helped a heavily.
Related
here it the code that I'm busy with
Any help would be appreciated.
I know this isn't such a complicated issue but
I just Don't know how to fix this
If someone could at least just tell me where to fix it
Or just tell me what the actual problem is.
import Image from 'next/image'
import { Inter } from '#next/font/google'
import 'bulma/css/bulma.css'
import styles from './page.module.css'
import { Head } from 'next/document'
const inter = Inter({ subsets: ['latin'] })
export default function VendingMachine() {
return (
<><div>
<Head>
<title>VendingMachine App</title>
<meta name="description" content="A blockchain vending app" />
</Head>
<Navbar className="navbar">
<div className='container'>
<div className="navbar-brand">
<h1>Vending Machine</h1>
</div>
</div>
</Navbar>
</div>
<main className={styles.main}>
<div className={styles.description}>
<p>
Get started by editing
<code className={styles.code}>src/app/page.tsx</code>
</p>
<div>
<a
href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
By{' '}
<Image
src="/vercel.svg"
alt="Vercel Logo"
className={styles.vercelLogo}
width={100}
height={24}
priority />
</a>
</div>
</div>
<div className={styles.center}>
<Image
className={styles.logo}
src="/next.svg"
alt="Next.js Logo"
width={180}
height={37}
priority />
<div className={styles.thirteen}>
<Image src="/thirteen.svg" alt="13" width={40} height={31} priority />
</div>
</div>
<div className={styles.grid}>
I've tried multiple things
Im using the barryvdh dompdf to generate the pdf file for my view ,
This is the expected outcome:
but what I got is ：
The css design of the view has been change . im using both css and bootsrap for desgining the page
may I ask how the improve this?
here is my code on view
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<link rel="stylesheet" href=
"https://use.fontawesome.com/releases/v5.4.1/css/all.css"
integrity=
"sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz"
crossorigin="anonymous">
<title>
Events Ticket
</title>
</head>
<style>
h6
{
color: #96a0a5;
}
h3
{
color: #b7af92;
}
p{
caret-color: white;
}
span{
color:#b7af92 ;
}
</style>
<body>
<div class="container mt-5 ms-5 " >
<div class="row">
<div class="col-lg-8 mb-4">
#foreach ($tickets as $key=> $ticket)
<div class="card" >
<div class="card-body" style="background-color: #48617d;">
<div class="col-12">
<div class="row" >
<div class="col-6" >
<h6 class="card-title">Event : <span>{{ $ticket->GiftGiving->name }}</span></h6>
<h6 class="card-title ">Name: <span>{{ $ticket->name }}</span></h6>
<h6 class="card-title ">Date &Time: <span>{{ $ticket->GiftGiving->start_at }}</span></h6>
<h6 class="card-title ">Venue: <span> {{ $ticket->GiftGiving->venue }}</span></h6>
</div>
<div class="col-6 text-center mt-3" style=" border-left-style: dashed; border-color: #b7af92;">
<h6><span >Ticket No. {{ $ticket->ticket_no }}</span></h6>
<h6><span class="mt-5">Batch No: {{ $ticket->GiftGiving->batch_no}} </span></h6>
</div>
</div>
</div>
</div>
</div>
#endforeach
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous">
</script>
</body>
</html>
code of my controller:
public function GenerateTicket($code)
{
$GiftGiving = GiftGiving::where('code', $code)->firstOrFail(); //4.3 ??
$tickets = GiftGivingBeneficiaries::where('gift_giving_id', $GiftGiving->id)->get();
# Retrieve the last batch no. from the gift giving.
$batch_no = $GiftGiving->batch_no;
GiftGiving::where('code', $code)->firstOrFail()->update([
'last_downloaded_by' => Auth::id(),
'batch_no' => $batch_no + 1,
]);
$pdf = PDF::loadView('charity.gifts.generate_ticket', compact('tickets'));
return $pdf->download('event_tickets.pdf');
}
Any answer is high appreciated, feel free to drop answer . Thank you in advance.
new updated part
this is how it looks like inside the browser
I want to use Summernote WYSIWYG Editor in Google Material Design.
It works, but if you try to open a popup, everything gets grey and you can't click anywhere:
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="miniHUB. Das Portal für Ministranten!">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<script src="https://code.jquery.com/jquery-latest.js"></script>
<title>TestPage</title>
<meta name="theme-color" content="#3372DF">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.cyan-light_blue.min.css">
<link rel="stylesheet" href="styles.css">
<style>
#view-source {
position: fixed;
display: block;
right: 0;
bottom: 0;
margin-right: 40px;
margin-bottom: 40px;
z-index: 900;
}
</style>
<!-- Summernote -->
<!-- include libraries(jQuery, bootstrap) -->
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<!-- include summernote css/js -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote.js"></script>
</head>
<body>
<div class="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
<header class="demo-header mdl-layout__header mdl-color--grey-100 mdl-color-text--grey-600">
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">miniHUB</span>
<div class="mdl-layout-spacer"></div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
<!--<label class="mdl-button mdl-js-button mdl-button--icon" for="search">
<i class="material-icons">search</i>
</label>-->
<div class="mdl-textfield__expandable-holder">
<input class="mdl-textfield__input" type="text" id="search">
<label class="mdl-textfield__label" for="search">Suche...</label>
</div>
</div>
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" id="hdrbtn">
<i class="material-icons">more_vert</i>
</button>
<ul class="mdl-menu mdl-js-menu mdl-js-ripple-effect mdl-menu--bottom-right" for="hdrbtn">
<li class="mdl-menu__item" onclick="loadPage('about.html')"><a>Über/Kontakt</a></li>
<li class="mdl-menu__item">WhatEver</li>
</ul>
</div>
</header>
<div class="demo-drawer mdl-layout__drawer mdl-color--blue-grey-900 mdl-color-text--blue-grey-50">
</div>
<main class="mdl-layout__content mdl-color--grey-100">
<table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp" style="width: 100%;">
<tbody>
<tr>
<td class="mdl-data-table__cell--non-numeric" style="width: 0px;">ℹ</td>
<td class="mdl-data-table__cell--non-numeric" style="width: 0px;">Beschreibung:</td>
<td class="mdl-data-table__cell--non-numeric"><textarea style="overflow-y: auto; width: 100%; border: none;" name="beschreibung" id="beschreibung"></textarea></td>
</tr>
</table>
</main>
</div>
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<script>
function loadPage(page) {
document.location = page;
};
</script>
<script>
$('#adminedit').click(function () {
document.location = "admin.html";
});
function summernoteInit(){
$('#beschreibung').summernote('code', "");
$('#beschreibung').summernote({
height: 300,
popover: {
image: [],
link: [],
air: []
}
})
}
$(document).ready(function(){
summernoteInit();
});
</script>
</body>
</html>
If I only use pure HTML, it's working very good.
I already tried to use z-index and different divs, but i can't get it working.
Thanks for your Help!
I found a way to correct the problem:
function deleteProblems (){
$('.modal-backdrop').remove();
window.setTimeout(deleteProblems, 200);
}
function summernoteInit(){
$('#beschreibung').summernote('code', "");
$('#beschreibung').summernote({
height: 300,
popover: {
image: [],
link: [],
air: []
}
})
}
$(document).ready(function(){
summernoteInit();
window.setTimeout(deleteProblems, 500)
});
Hopefully it helps you!
Philipp
My Navbar is not changing colour. Do I have the correct path to the Navbar.css file in the Navbar.jsx file?
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import './Navbar.css';
class Navbar extends Component {
render() {
return (
<nav className="navbar navbar-toggleable-md">
<button className="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria- controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="container">
<Link className="navbar-brand" to="/">Aquastars New Website</Link>
<div className="collapse navbar-collapse" id="navbarCollapse">
<ul className="navbar-nav ml-auto">
<li className="nav-item active">
<Link className="nav-link" to="/">Home <span className="sr-only">(current)</span></Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/about">About</Link>
</li>
</ul>
</div>
</div>
</nav>
);
}
}
export default Navbar;
Below is the structure of the app
below is the code for the .css file
.navbar-brand {
color: rgb(197, 21, 21);
}
a {
color: #aaa;
font-weight: 200;
}
below is what is in my header.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>React App</title>
</head>
I'm still learning React but you may want to try import * as styles from './styles.css', and to use that specific class, className={styles.yourClass}
I managed to solve it by restarting the server. For some reason, the changes were not carried over from the CSS file. So I controlled C to stop the server and the restarted it again.
npm start
I have my Polymer Starter Kit up and running and I want to implement Firebase, In the index file I imported polymerfire/firebase-app.html and in my-list.html I imported polymerfire/polymerfire.html and try to query the database and repeat a template and not working
index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="generator" content="Polymer Starter Kit">
<title>Vidala</title>
<meta name="theme-color" content="#2E3AA1">
<link rel="manifest" href="manifest.json">
<meta name="msapplication-TileColor" content="#3372DF">
<meta name="mobile-web-app-capable" content="yes">
<meta name="application-name" content="PSK">
<link rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Polymer Starter Kit">
<link rel="apple-touch-icon" href="images/touch/apple-touch-icon.png">
<meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
<!-- build:css styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild-->
<!-- build:js bower_components/webcomponentsjs/webcomponents-lite.min.js -->
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="elements/elements.html">
<link rel="import" href="../bower_components/polymerfire/firebase-app.html">
<!-- For shared styles, shared-styles.html import in elements.html -->
<style is="custom-style" include="shared-styles"></style>
</head>
<body unresolved>
<firebase-app
name="vida_fire"
api-key="AIzaSyABq6WXbt1LUoAsg26QIbJfgkV0R_T3nUg"
auth-domain="vidala-63738.firebaseapp.com"
database-url="https://vidala-63738.firebaseio.com">
</firebase-app>
<template is="dom-bind" id="app">
<paper-drawer-panel id="paperDrawerPanel">
<paper-scroll-header-panel drawer fixed>
<paper-toolbar id="drawerToolbar">
<span class="menu-name">Menu</span>
</paper-toolbar>
<paper-menu class="app-menu" attr-for-selected="data-route" selected="[[route]]">
<a data-route="home" href="{{baseUrl}}">
<iron-icon icon="home"></iron-icon>
<span>Home</span>
</a>
<a data-route="users" href="{{baseUrl}}users">
<iron-icon icon="info"></iron-icon>
<span>Users</span>
</a>
<a data-route="contact" href="{{baseUrl}}contact">
<iron-icon icon="mail"></iron-icon>
<span>Contact</span>
</a>
</paper-menu>
</paper-scroll-header-panel>
<!-- Main Area -->
<paper-scroll-header-panel main id="headerPanelMain" condenses keep-condensed-header>
<!-- Main Toolbar -->
<paper-toolbar id="mainToolbar" class="tall">
<paper-icon-button id="paperToggle" icon="menu" paper-drawer-toggle></paper-icon-button>
<span class="space"></span>
<!-- Toolbar icons -->
<paper-icon-button icon="refresh"></paper-icon-button>
<paper-icon-button icon="search"></paper-icon-button>
<!-- Application name -->
<div class="middle middle-container">
<div class="app-name">Vidala</div>
</div>
<!-- Application sub title -->
<div class="bottom bottom-container">
<div class="bottom-title">The future of the web today</div>
</div>
</paper-toolbar>
<!-- Main Content -->
<div class="content">
<iron-pages attr-for-selected="data-route" selected="{{route}}">
<section data-route="home" tabindex="-1">
<paper-material elevation="2">
<my-greeting></my-greeting>
<p class="subhead">Here the list from Firebase:</p>
<my-list></my-list>
</paper-material>
<paper-material elevation="2">
<p>This is another card.</p>
</paper-material>
</section>
<section data-route="users" tabindex="-1">
<paper-material elevation="2">
<h1 class="page-title" tabindex="-1">Users</h1>
<p>This is the users section</p>
<a href$="{{baseUrl}}users/Addy">Addy</a><br>
<a href$="{{baseUrl}}users/Rob">Rob</a><br>
<a href$="{{baseUrl}}users/Chuck">Chuck</a><br>
<a href$="{{baseUrl}}users/Sam">Sam</a>
</paper-material>
</section>
<section data-route="user-info" tabindex="-1">
<paper-material elevation="-1">
<h1 class="page-title" tabindex="-1">User: {{params.name}}</h1>
<div>This is {{params.name}}'s section</div>
</paper-material>
</section>
<section data-route="contact" tabindex="-1">
<paper-material elevation="2">
<h1 class="page-title" tabindex="-1">Contact</h1>
<p>This is the contact section</p>
</paper-material>
</section>
</iron-pages>
</div>
</paper-scroll-header-panel>
</paper-drawer-panel>
<paper-toast id="toast">
<span class="toast-hide-button" role="button" tabindex="0" onclick="app.$.toast.hide()">Ok</span>
</paper-toast>
</template>
<script src="scripts/app.js"></script>
</body>
</html>
my-list.html:
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-styles/typography.html">
<link rel="import" href="../bower_components/polymerfire/polymerfire.html">
<dom-module id="my-list">
<template>
<style>
:host {
display: block;
}
span {
#apply(--paper-font-body1);
}
</style>
<firebase-query
id="query"
app-name="vida_fire"
path="/notes"
data="{{data}}">
</firebase-query>
<ul>
<template is="dom-repeat" items="{{data}}" as="note">
<li>xx</li>
</template>
</ul>
</template>
<script>
(function() {
'use strict';
Polymer({
is: 'my-list',
properties: {
data: {
type: Object
}
},
ready: function() {
}
});
})();
</script>
</dom-module>
and this is my firebase database:
https://vidala-63738.firebaseio.com/
vidala-63738
notes
diego:"dp"
mares:"dp"
The code above is correct. The issue was firebase permissions.
{
"rules": {
".read": "auth == null",
".write": "auth != null"
}
}
Another good thing to do when implementing firebase is adding an error handler
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-styles/typography.html">
<link rel="import" href="../../bower_components/polymerfire/polymerfire.html">
<dom-module id="my-list">
<template>
<style>
:host {
display: block;
}
span {
#apply(--paper-font-body1);
}
</style>
<firebase-query
id="query"
app-name="vida_fire"
path="/notes"
data="{{data}}"
on-error="handleError">
</firebase-query>
<ul>
<template is="dom-repeat" items="{{data}}" as="note">
<li>xx</li>
</template>
</ul>
</template>
<script>
(function() {
'use strict';
Polymer({
handleError: function(e, err) {
alert(err);
},
is: 'my-list',
ready: function() {
}
});
})();
</script>
</dom-module>