Connect javascript file with django in static file

Connect javascript file with django in static file - javascript

Solved - problem was in django and js file. After repair django i don't check console in my Web browser which show issue in on js file. THank you everyone for help.
Update - refresh content of files after changes
I attach a js file to my Django but have problem bcz JS don't works on website view, when CSS file style Django see. I try looks some toturial but still the same problem. Arrow etc don;t react on any click.
settings.py
import os
from pathlib import Path
import dotenv
# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent
dotenv.load_dotenv()
# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/4.0/howto/deployment/checklist/
# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = os.getenv("SECRET_KEY")
# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = os.getenv("DEBUG") == "True"
ALLOWED_HOSTS = ['*']
# Application definition
INSTALLED_APPS = [
'accounts',
'turbineweb',
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
]
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
ROOT_URLCONF = 'Turbine_power_Web.urls'
'''
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
'''
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, 'templates')],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
'libraries': {
'staticfiles': 'django.templatetags.static',
}
},
},
]
WSGI_APPLICATION = 'Turbine_power_Web.wsgi.application'
# Database
# https://docs.djangoproject.com/en/4.0/ref/settings/#databases
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': BASE_DIR / 'db.sqlite3',
}
}
# Password validation
# https://docs.djangoproject.com/en/4.0/ref/settings/#auth-password-validators
AUTH_PASSWORD_VALIDATORS = [
{
'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
},
]
# Internationalization
# https://docs.djangoproject.com/en/4.0/topics/i18n/
LANGUAGE_CODE = 'en-us'
TIME_ZONE = 'UTC'
USE_I18N = True
USE_TZ = True
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/4.0/howto/static-files/
STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, '../turbineweb/static')]
#STATIC_ROOT = os.path.join(BASE_DIR, 'static')
# Default primary key field type
# https://docs.djangoproject.com/en/4.0/ref/settings/#default-auto-field
DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
AUTH_USER_MODEL = 'accounts.User'
LOGIN_REDIRECT_URL = 'home_page'
LOGOUT_REDIRECT_URL = 'home_page'
EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend'
urls.py in project
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('accounts.urls')),
path('', include('turbineweb.urls')),
]
urls.py in app
from django.urls import path, include
from django.conf.urls.static import static
from django.conf import settings
from . import views
urlpatterns = [
path('home/', views.home_page, name='home_page'),
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
template:
<! DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Turbine Power Web </title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="TurbinePowerWeb let u choose turbine model adding by turbine manufacturer
and check their energy production in a given period of time"/>
<link href="/static/css/style.css" rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</head>
<body>
<section>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg bg-dark navbar-dark ">
<!-- Container wrapper -->
<div class="container-fluid justify-content-center">
<!-- Navbar brand -->
<a class="navbar-brand" href="/home/"> Turbine Power Web</a>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="/logout/">Logout</a></li>
<li class="nav-item"><a class="nav-link" href="/password-change/">Change Password</a></li>
<li class="nav-item"><a class="nav-link" href="">Turbine Models</a></li>
<li class="nav-item"><a class="nav-link" href="">Author</a></li>
<li class="nav-item"> Hello, Tester </li>
</ul>
</div>
</div>
</nav>
</section>
<div class="bg">
<main>
<div id="slider">
<div id="top-row">
<img class="arrow left-class" id="arrow-left" src="/static/image/arrow-left.png" />
<div id="slides-container">
<img class="slide active" src="/static/image/about-us.png">
<img class="slide" src="/static/image/turbine-models.png">
<img class="slide" src="/static/image/calculate-power.png">
</div>
<img class="arrow right-class" id="arrow-right" src="/static/image/arrow-right.png" />
</div>
<div id="bottom-row">
<div id="dots">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
</div>
<script src="/static/js/home_page.js"></script>
</main>
</body>
</html>
js file:
let activeSlideNumber = 1;
let arrowLeft = document.getElementById('arrow-left')
let arrowRight = document.getElementById('arrow-right')
let hideActiveSlide = () => {
let activeElement = document.querySelector('.active');
activeElement.classList.remove('active')
}
let showSlide = (slideNumber) => {
hideActiveSlide();
document.querySelector('#slide'+slideNumber).classList.add('active')
}
let showNextSlide = () => {
if(activeSlideNumber === 3) {
activeSlideNumber = 1;
} else {
activeSlideNumber = activeSlideNumber + 1;
}
showSlide(activeSlideNumber);
};
let showPreviousSlide = () => {
if(activeSlideNumber === 1) {
activeSlideNumber = 3;
} else {
activeSlideNumber = activeSlideNumber - 1;
}
showSlide(activeSlideNumber);
};
for(let i = 1; i <= 3; i++) {
let showSlideI = () => {
activeSlideNumber = 1;
showSlide(i)
};
document.querySelector('#dol'+i).addEventListener('click', showSlideI);
}
arrowLeft.addEventListener('click', showNextSlide);
arrowRight.addEventListener('click', showPreviousSlide);
Projecy view:
Turbine_power_Web (project)
settings.py
urls.py
accounts (app)
turbineweb(app)
static
css
style.css
image
images.png
js
home_page.js
templates
turbineweb
home_page.html
init.py
admin.py
models.py
urls.py
manage.py
on Terminal get error:
WARNINGS:
?: (staticfiles.W004) The directory 'C:\Users\Dom\Desktop\Python_Project\django_proejct_magisterka\Turbine_power_Web\../turbineweb/static' in the STATICFILES_DIRS setting does not exist.

I think I found the solution. We were looking at the wrong place. Your Django settings are correct. It's your js file which selects the wrong button:
Change:
let arrowLeft = document.querySelector('.arrow-left')
let arrowRight = document.querySelector('.arrow-right')
To:
let arrowLeft = document.getElementById('arrow-left')
let arrowRight = document.getElementById('arrow-right')
Edit
I took a closer look at your js file and found some missing selectors.
I've added id="sliderX" and id="dotX". Without them your js threw an error and was never executed.
<main>
<div id="slider">
<div id="top-row">
<img class="arrow left-class" id="arrow-left" src="/static/image/arrow-left.png" />
<div id="slides-container">
<img class="slide active" id="slide1" src="/static/image/about-us.png">
<img class="slide" id="slide2" src="/static/image/turbine-models.png">
<img class="slide" id="slide3" src="/static/image/calculate-power.png">
</div>
<img class="arrow right-class" id="arrow-right" src="/static/image/arrow-right.png" />
</div>
<div id="bottom-row">
<div id="dots">
<div class="dot" id="dot1"></div>
<div class="dot" id="dot2"></div>
<div class="dot" id="dot3"></div>
</div>
</div>
</div>
<script src="/static/js/home_page.js"></script>
</main>
I didn't change your js other then the change I mentioned at the top of this post.
Sidenote: Rightclick in your Chrome Browser > Inspect and then at the top of the Sidebar click of "Console". Here you will see all js erros including reference for debugging.

instead of this:
<script src="{% static 'js/home_page.js' %}"></script>
try this:
<script src="{% static '/js/home_page.js' %}"></script>
And correct your typo sttatic to static
In settings file:
STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
Also in TEMPLATES in settings file, add it:
'libraries' : {
'staticfiles': 'django.templatetags.static',
}
EX:
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, 'templates')],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
'libraries' : {
'staticfiles': 'django.templatetags.static', #Added here
}
},
},
]

in my urls.py i configurate static but thats not help - answering on Sunderam Dubey comment
from django.urls import path, include
from django.conf.urls.static import static
from django.conf import settings
from . import views
urlpatterns = [
path('home/', views.home_page, name='home_page'),
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
after add in setttings:
STATIC_URL = '/static/'
STATICFILES_DIRS = [BASE_DIR / "static"]
needed to remove STATIC_ROOT
Ctrl + U give me it:
<! DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Turbine Power Web </title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="TurbinePowerWeb let u choose turbine model adding by turbine manufacturer
and check their energy production in a given period of time"/>
<link href="/static/css/style.css" rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</head>
<body>
<section>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg bg-dark navbar-dark ">
<!-- Container wrapper -->
<div class="container-fluid justify-content-center">
<!-- Navbar brand -->
<a class="navbar-brand" href="/home/"> Turbine Power Web</a>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="/logout/">Logout</a></li>
<li class="nav-item"><a class="nav-link" href="/password-change/">Change Password</a></li>
<li class="nav-item"><a class="nav-link" href="">Turbine Models</a></li>
<li class="nav-item"><a class="nav-link" href="">Author</a></li>
<li class="nav-item"> Hello, Tester </li>
</ul>
</div>
</div>
</nav>
</section>
<div class="bg">
<main>
<div id="slider">
<div id="top-row">
<img class="arrow left-class" id="arrow-left" src="/static/image/arrow-left.png" />
<div id="slides-container">
<img class="slide active" src="/static/image/about-us.png">
<img class="slide" src="/static/image/turbine-models.png">
<img class="slide" src="/static/image/calculate-power.png">
</div>
<img class="arrow right-class" id="arrow-right" src="/static/image/arrow-right.png" />
</div>
<div id="bottom-row">
<div id="dots">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
</div>
<script src="/static/js/home_page.js"></script>
</main>
</div>
</body>
</html>

Related

User Frontend Selection That Loads Images From Database With Django

I have a drop down bar with a multi selection tool. A user picks from titles of graphs stored in a model for the graphs they want to display. How can I use those selections to display these graphs? I am using Ajax to send the data to the backend. From that data I created a new context_dict full of the model objects we want displayed. I want to either display in the same template or link to another template that can use this context dict. I do not know the best way to do this. Here is some of my code below.
Models:
from django.db import models
class ChartPrac(models.Model):
title = models.CharField(max_length=256)
chart = models.ImageField()
def __str__(self):
return self.title
Views:
def querier(request):
if request.method == 'POST':
options_arr = request.POST.get('optionsArr')
options = options_arr.split(':')
options = options[1:]
print(options)
context_arr = []
context_graphs = {}
i = 0
for elements in options:
charts_to_display = ChartPrac.objects.get(title=elements)
context_arr.append(charts_to_display)
i += 1
context_graphs['titles'] = context_arr
return HttpResponse(options_arr)
else:
graph_titles = ChartPrac.objects.all()
context_dict = {'titles': graph_titles}
print(context_dict)
print(type(context_dict['titles']))
return render(request, 'graph_querier/base.html', context=context_dict)
Urls:
from django.urls import path
from graph_querier import views
app_name = 'graph_querier'
urlpatterns = [
path('', views.index, name='index'),
path('querier/', views.querier, name='querier'),
# path('graph/', views.graph, name='graph'),
]
Template:
<!DOCTYPE html>
{% load static %}
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Marketing Querier</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="https://res.cloudinary.com/dxfq3iotg/raw/upload/v1569006288/BBBootstrap/choices.min.css?version=7.0.0">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://res.cloudinary.com/dxfq3iotg/raw/upload/v1569006273/BBBootstrap/choices.min.js?version=7.0.0"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="{% static 'graph_querier\querier.css' %}">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark" style="background-color: rgba(0,96,155,255)";>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="{% url 'main_dash:main_dash' %}">Main Dashboard</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Marketing Dashboard</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Sales Dashboard</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Input</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Input</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Input</a>
</li>
</ul>
</div>
</nav>
<div id="title">
<h1 id="graph-querier-text">Graph Querier</h1>
</div>
<div class="row d-flex justify-content-center mt-100" id='search'>
<div class="col-md-6"> <select class="select-option" id="choices-multiple-remove-button" placeholder="Select up to 10 Graphs" multiple>
{% for graphs in titles %}
<option class="option-rend" value={{ graphs.title }}>{{ graphs.title }}</option>
{% endfor %}
</select> </div>
</div>
<script>
$(document).ready(function(){
var multipleCancelButton = new Choices('#choices-multiple-remove-button', {
removeItemButton: true,
maxItemCount:10,
searchResultLimit:1000,
renderChoiceLimit:1000
});
});
</script>
<script src="{% static '\graph_querier\javascript\base.js' %}"></script>
<div id='render-graphs'>
<button type="button" class="btn btn-primary btn-lg" onclick='rendGraphs();'>Render Graphs</button>
{% csrf_token %}
</div>
</body>
</html>
JS:
function rendGraphs(){
var select = document.getElementById('choices-multiple-remove-button');
var csrf = $("input[name=csrfmiddlewaretoken]").val();
var optionsArr = [];
for (var x = 0; x < select.length; x++){
var temp = select.options[x].text;
optionsArr.push(temp);
}
var stringOptions = ''
for (var i= 0; i < optionsArr.length; i++){
var stringOptions = stringOptions.concat(":" + String(optionsArr[i]));
}
$.ajax({
url: '/query/querier/',
type: 'POST',
data: {'optionsArr': stringOptions,
'csrfmiddlewaretoken': csrf
}
}).done(function(response){
console.log(response)
});
}

Uncaught Syntax Error: Unexpected identifier game.js:25

I'm making my first flask app which is a text adventure and a separate section to leave a review. I'm trying to follow along with a text adventure tutorial. I've got my site running however when I refresh the page to see my progress the changes in game.js are not reflected and I'm met with the error in the title.
This is my first post on Stack Overflow so I've put all of my code below. Thanks in advance for any help! I'm still relatively new so sorry for any stupid mistakes, Paddy.
game.js
const textElement = document.getElementById('text')
const optionsButtonsElement = document.getElementById('options-buttons')
let state = {}
function startGame() {
state = {}
showTextNode(1)
}
function showTextNode(textNodeIndex) {
const textNode = textNodes.find(textNode => textNode.id === textNodeIndex)
textElement.innerText = textNode.text
while (optionsButtonsElement.firstChild)
optionsButtonsElement.removeChild(optionsButtonsElement.firstChild)
}
function selectOption(option) {
}
const textNodes = [
{
id:1
text: 'You wake up staring at the ceiling of your bunker.',
options [
{
text: 'Turn on the radio',
nextText: 2
},
{
text: 'Grab your pistol and pack up the remainder of your supplies.',
}
]
}
]
startGame()
game.html
{% block title %}Get ready to play!{% endblock %}
{% block content %}
<body>
<div class="container">
<div id="text">Text</div> <br/>
<div id="option-buttons" class="btn-grid">
<button type="button" class="btn btn-outline-dark btn-lg btn-block">Option 1</button>
<button type="button" class="btn btn-outline-dark btn-lg btn-block">Option 2</button>
<button type="button" class="btn btn-outline-dark btn-lg btn-block">Option 3</button>
<button type="button" class="btn btn-outline-dark btn-lg btn-block">Option 4</button>
<script src="{{ url_for('static', filename='js/game.js')}}"></script>
</div>
</body>
{% endblock %}
app.py
from flask import Flask, render_template, request, redirect
from flask_sqlalchemy import SQLAlchemy
from datetime import datetime
app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///posts.db'
#Initialising the database
db = SQLAlchemy(app)
#Creating a database model
class Posts(db.Model):
id = db.Column(db.Integer, primary_key=True)
content = db.Column(db.String(200), nullable=False)
date_created = db.Column(db.DateTime, default=datetime.utcnow)
#Creating a function to return a string when a post is added to db
def __repr__(self):
return '<Content %r>' % self.id
#app.route('/')
def index():
return render_template("index.html")
#app.route('/game')
def game():
return render_template("game.html")
#app.route('/blog', methods=['POST', 'GET'])
def blog():
if request.method == "POST":
post_content = request.form['content']
new_post = Posts(content=post_content)
try: #Push the blog post to the db
db.session.add(new_post)
db.session.commit()
return redirect('/blog')
except:
return "There was an error adding your post"
else:
posts = Posts.query.order_by(Posts.date_created)
return render_template("blog.html", posts=posts)
#app.route('/update/<int:id>' , methods=['POST', 'GET'])
def update(id):
post_to_update = Posts.query.get_or_404(id)
if request.method == "POST":
post_to_update.content = request.form['content']
try:
db.session.commit()
return redirect('/blog')
except:
return "There was a problem updating your blog post"
else:
return render_template('update.html', post_to_update=post_to_update)
#app.route('/delete/<int:id>')
def delete(id):
post_to_delete = Posts.query.get_or_404(id)
try:
db.session.delete(post_to_delete)
db.session.commit()
return redirect('/blog')
except:
return "There was a problem deleting this post :("
my base.html template
<!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://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<title>
{% block title %}GEN TITLE{% endblock %}
</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="{{ url_for('index')}}">Patricks Site</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="{{ url_for('index')}}">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url_for('game')}}">Game</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url_for('blog')}}">Blog</a>
</li>
</ul>
</div>
</nav>
</br>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<!-- Option 2: jQuery, Popper.js, and Bootstrap JS
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
-->
{% block content %}
{% endblock %}
</body>
</html>
Sorry for the wall of text, I wasn't quite sure how much I should show. Thanks

Your error is telling you to look at line 25 of game.js.
It appears you're missing a colon on that line, after options, and a comma after id: 1. You have:
const textNodes = [
{
id:1
text: 'You wake up staring at the ceiling of your bunker.',
options [...],
You need:
const textNodes = [
{
id:1,
text: 'You wake up staring at the ceiling of your bunker.',
options: [...],

HTML showing on live server, but not rendering on my flask app. Only the index is showing on flask

I have an index.html and map.html. the index is running fine on the home page through the flask app, but when i put /map.html on the browser it takes me to a map of the USA. Whereas when i run map.html through the live server, it takes me to a map of Chicago, which is what i want rendered through the flask.
# We import Flask
from flask import Flask, render_template,jsonify
import json
from pymongo import MongoClient
from connections import readMongoCloud
# We create a Flask app
app = Flask(__name__)
# We establish a Flask route so that we can serve HTTP traffic on that route
#app.route('/')
def home():
# We hardcode some information to be returned
return render_template('index.html')
# We create a route to the map.html which should show tech_hub_crime.js data
#app.route('/map.html')
def map():
# We hardcode some information to be returned
return render_template('map.html')
#app.route("/readData")
def read():
# Replace arguments with the name of your database and collection on mongodb
db_df = readMongoCloud("ACSData","ACS2019_commute")
return jsonify(db_df.to_dict('records'))
# Get setup so that if we call the app directly (and it isn't being imported elsewhere)
# it will then run the app with the debug mode as True
# More info - https://docs.python.org/3/library/__main__.html
if __name__ == '__main__':
app.run(debug=True)
Below is the map.html
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Tech Hub Crime</title>
<meta content="" name="descriptison">
<meta content="" name="keywords">
<!-- Favicons -->
<link href="../static/img/favicon.png" rel="icon">
<link href="../static/img/apple-touch-icon.png" rel="apple-touch-icon">
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Roboto:300,300i,400,400i,500,500i,700,700i&display=swap"
rel="stylesheet">
<!-- Vendor CSS Files -->
<link href="../static/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="../static/vendor/animate.css/animate.min.css" rel="stylesheet">
<link href="../static/vendor/icofont/icofont.min.css" rel="stylesheet">
<link href="../static/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
<link href="../static/vendor/venobox/venobox.css" rel="stylesheet">
<link href="../static/vendor/owl.carousel/assets/owl.carousel.min.css" rel="stylesheet">
<link href="../static/vendor/aos/aos.css" rel="stylesheet">
<!-- Template Main CSS File -->
<link href="../static/css/style.css" rel="stylesheet">
<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.3.3/dist/leaflet.css"
integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
crossorigin="" />
<!-- Our CSS -->
<link rel="stylesheet" href="../static/css/mapstyle.css" />
</head>
<body>
<!-- ======= Header ======= -->
<header id="header" class="fixed-top">
<div class="container">
<div class="logo float-left">
<h1 class="text-light"><span>Cyberstates</span></h1>
<!-- Uncomment below if you prefer to use an image logo -->
<!-- <img src="../static/img/logo.png" alt="" class="img-fluid">-->
</div>
<nav class="nav-menu float-right d-none d-lg-block">
<ul>
<li>Home</li>
< <li>Tech Articles</li>
<li>Team</li>
<li class="drop-down">Interactive Data
<ul>
<li class="active">Tech Hub Map Data</li>
<li>Trending Tech Occupations</li>
<li>Tech Hub Comparisons</li>
</ul>
</li>
</ul>
</nav><!-- .nav-menu -->
</div>
</header><!-- End Header -->
<!-- Map -->
<div id="map"></div>
<!-- <div id="chicago-map"></div>
<div id="nyc-map"></div>
<div id="sf-map"></div>
<div id="austin-map"></div> -->
<!-- ======= Footer ======= -->
<footer id="footer" data-aos="fade-up" data-aos-easing="ease-in-out" data-aos-duration="500">
<div class="footer-newsletter">
<div class="container">
<div class="row">
<div class="col-lg-6">
<h4>Our Newsletter</h4>
<p>Tamen quem nulla quae legam multos aute sint culpa legam noster magna</p>
</div>
<div class="col-lg-6">
<form action="" method="post">
<input type="email" name="email"><input type="submit" value="Subscribe">
</form>
</div>
</div>
</div>
</div>
<div class="footer-top">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 footer-links">
<h4>Useful Links</h4>
<ul>
<li><i class="bx bx-chevron-right"></i> Home</li>
<li><i class="bx bx-chevron-right"></i> About us</li>
<li><i class="bx bx-chevron-right"></i> Services</li>
<li><i class="bx bx-chevron-right"></i> Terms of service</li>
<li><i class="bx bx-chevron-right"></i> Privacy policy</li>
</ul>
</div>
<div class="col-lg-3 col-md-6 footer-links">
<h4>Our Services</h4>
<ul>
<li><i class="bx bx-chevron-right"></i> Web Design</li>
<li><i class="bx bx-chevron-right"></i> Web Development</li>
<li><i class="bx bx-chevron-right"></i> Product Management</li>
<li><i class="bx bx-chevron-right"></i> Marketing</li>
<li><i class="bx bx-chevron-right"></i> Graphic Design</li>
</ul>
</div>
<div class="col-lg-3 col-md-6 footer-contact">
<h4>Contact Us</h4>
<p>
A108 Adam Street <br>
New York, NY 535022<br>
United States <br><br>
<strong>Phone:</strong> +1 5589 55488 55<br>
<strong>Email:</strong> info#example.com<br>
</p>
</div>
<div class="col-lg-3 col-md-6 footer-info">
<h3>About Moderna</h3>
<p>Cras fermentum odio eu feugiat lide par naso tierra. Justo eget nada terra videa magna derita
valies darta donna mare fermentum iaculis eu non diam phasellus.</p>
<div class="social-links mt-3">
<i class="bx bxl-twitter"></i>
<i class="bx bxl-facebook"></i>
<i class="bx bxl-instagram"></i>
<i class="bx bxl-linkedin"></i>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="copyright">
© Copyright <strong><span>Moderna</span></strong>. All Rights Reserved
</div>
<div class="credits">
<!-- All the links in the footer should remain intact. -->
<!-- You can delete the links only if you purchased the pro version. -->
<!-- Licensing information: https://bootstrapmade.com/license/ -->
<!-- Purchase the pro version with working PHP/AJAX contact form: https://bootstrapmade.com/free-bootstrap-template-corporate-moderna/ -->
Designed by BootstrapMade
</div>
</div>
</footer><!-- End Footer -->
<i class="icofont-simple-up"></i>
<!-- API key -->
<script type="text/javascript" src="../static/js/config.js"></script>
<!-- Leaflet JS -->
<script src="https://unpkg.com/leaflet#1.3.3/dist/leaflet.js"
integrity="sha512-tAGcCfR4Sc5ZP5ZoVz0quoZDYX5aCtEm/eu1KhSLj2c9eFrylXZknQYmxUssFaVJKvvc0dJQixhGjG2yXWiV9Q=="
crossorigin=""></script>
<!-- D3 CDN -->
<script src="https://d3js.org/d3.v4.min.js"></script>
<!-- JS -->
<script type="text/javascript" src="../static/js/tech_hub_crime.js"></script>
<!-- Leaflet-Choropleth JavaScript -->
<script type="text/javascript" src="../static/js/choropleth.js"></script>
<!-- Vendor JS Files -->
<script src="../static/vendor/jquery/jquery.min.js"></script>
<script src="../static/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="../static/vendor/jquery.easing/jquery.easing.min.js"></script>
<script src="../static/vendor/php-email-form/validate.js"></script>
<script src="../static/vendor/venobox/venobox.min.js"></script>
<script src="../static/vendor/waypoints/jquery.waypoints.min.js"></script>
<script src="../static/vendor/counterup/counterup.min.js"></script>
<script src="../static/vendor/owl.carousel/owl.carousel.min.js"></script>
<script src="../static/vendor/isotope-layout/isotope.pkgd.min.js"></script>
<script src="../static/vendor/aos/aos.js"></script>
<!-- Template Main JS File -->
<script src="../static/js/main.js"></script>
</body>
</html>
Below is the JS file that i want to render through map.html
function crime_map(coordinates) {
var map = L.map("map", {
center: coordinates,
zoom: 13
});
// Adding tile layer
L.tileLayer("https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}", {
attribution: "© <a href='https://www.mapbox.com/about/maps/'>Mapbox</a> © <a href='http://www.openstreetmap.org/copyright'>OpenStreetMap</a> <strong><a href='https://www.mapbox.com/map-feedback/' target='_blank'>Improve this map</a></strong>",
tileSize: 512,
maxZoom: 20,
zoomOffset: -1,
id: "mapbox/streets-v11",
accessToken: API_KEY
}).addTo(map);
return map
};
coordinates = {
"nyc": [40.730610, -73.935242],
"austin": [30.2672, -97.7431],
"san francisco": [37.7749, -122.4194],
"chicago": [41.8781, -87.6298]
}
url = {
"nyc": ["https://data.cityofnewyork.us/resource/qgea-i56i.json"],
"austin": ["https://data.austintexas.gov/resource/fdj4-gpfu.json"],
"san francisco": ["https://data.sfgov.org/resource/cuks-n6tp.json?"],
"chicago": ["https://data.cityofchicago.org/resource/dfnk-7re6.json"]
}
// nyc crime function
function nyc_markers(url, map) {
d3.json(url, function (response) {
for (var i = 0; i < response.length; i++) {
var location = response[i];
if (location.lat_lon) {
L.marker([location.latitude, location.longitude]).addTo(map);
}
}
})
}
// // chicago crime function
function chi_markers(url, map) {
d3.json(url, function (response) {
for (var i = 0; i < response.length; i++) {
var location = response[i];
if (location.location) {
L.marker([location.latitude, location.longitude]).addTo(map);
}
}
})
}
// san fran crime function
function sanfran_markers(url, map) {
d3.json(url, function (response) {
for (var i = 0; i < response.length; i++) {
var location = response[i].location;
if (location) {
L.marker([location.coordinates[1], location.coordinates[0]]).addTo(map);
}
}
})
}
// austin crime function
function austin_markers(url, map) {
d3.json(url, function (response) {
for (var i = 0; i < response.length; i++) {
var location = response[i].location;
if (location) {
L.marker([location.latitude, location.longitude]).addTo(map);
}
}
})
}
// // atlanta crime function
// var csv_atl = ("../Resources/Atlanta_Crime.csv")
// function atlanta_markers(csv_atl, map) {
// d3.csv(csv_atl, function (response) {
// for (var i = 0; i < response.length; i++) {
// var location = response[i].location;
// if (location) {
// L.marker([location.latitude, location.longitude]).addTo(map);
// }
// }
// })
// }
//function map calls
var map = crime_map(coordinates["chicago"])
chi_markers(url["chicago"], map)
// nyc_markers(url["nyc"], map)
// sanfran_markers(url["san francisco"], map)
// austin_markers(url["austin"], map)

That's because you are rendering the same HTML page with both home and map routes. Here's what needs to be corrected:
#app.route('/map.html')
def map():
# We hardcode some information to be returned
return render_template('map.html')

image slider doesn't work using route in angular js

I'm newbie to Angular js..But try to make an image slider in my file..
And also I'm using route..Acutally I'm having three pages..
1.home
2.about
3.contact
For this I create an index file in which I add header and footer
While I'm adding the slider in my index page it works fine for me..
But if I did the same thing in my home page..It won't work and I din't find any errors in my console also..
I don't know how to fix it..
Here I attach my all codes..
script.js
// create the module and name it scotchApp
var scotchApp = angular.module('scotchApp', ['ngRoute','ngAnimate', 'ngTouch']);
// configure our routes
scotchApp.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'pages/home.html',
controller : 'homeController'
})
// route for the about page
.when('/about', {
templateUrl : 'pages/about.html',
controller : 'aboutController'
})
// route for the contact page
.when('/contact', {
templateUrl : 'pages/contact.html',
controller : 'contactController'
});
});
// create the controller and inject Angular's $scope
scotchApp.controller('mainController', function($scope) {
//Logo
$scope.logo = 'logo.png';
//username
$scope.username = 'Jonathan Stephanopalus';
//footercontent
$scope.footer = [
{ title: 'Contacts' },
{ title: 'Feedback' },
{ title: 'Help' },
{ title: 'Site Map' },
{ title: 'Terms & Conditions' },
{ title: 'Privacy Statement' },
{ title: 'Cookie Policy' },
{ title: 'Trademarks' }
];
});
scotchApp.controller('homeController', function($scope) {
// create a message to display in our view
$scope.message = "Lorem Ipsum ";
//lastdiv
$scope.lastdiv = { image : "women_wright.png" ,title:"Get to know Cisco better: Community Forums"};
//slider
$scope.slides = [
{image: 'images/img00.jpg', description: 'Image 00'},
{image: 'images/img01.jpg', description: 'Image 01'},
{image: 'images/img02.jpg', description: 'Image 02'},
{image: 'images/img03.jpg', description: 'Image 03'},
{image: 'images/img04.jpg', description: 'Image 04'}
];
$scope.direction = 'left';
$scope.currentIndex = 0;
$scope.setCurrentSlideIndex = function (index) {
$scope.direction = (index > $scope.currentIndex) ? 'left' : 'right';
$scope.currentIndex = index;
};
$scope.isCurrentSlideIndex = function (index) {
return $scope.currentIndex === index;
};
$scope.prevSlide = function () {
$scope.direction = 'left';
$scope.currentIndex = ($scope.currentIndex < $scope.slides.length - 1) ? ++$scope.currentIndex : 0;
};
$scope.nextSlide = function () {
$scope.direction = 'right';
$scope.currentIndex = ($scope.currentIndex > 0) ? --$scope.currentIndex : $scope.slides.length - 1;
};
});
scotchApp.animation('.slide-animation', function () {
return {
beforeAddClass: function (element, className, done) {
var scope = element.scope();
if (className == 'ng-hide') {
var finishPoint = element.parent().width();
if(scope.direction !== 'right') {
finishPoint = -finishPoint;
}
TweenMax.to(element, 0.5, {left: finishPoint, onComplete: done });
}
else {
done();
}
},
removeClass: function (element, className, done) {
var scope = element.scope();
if (className == 'ng-hide') {
element.removeClass('ng-hide');
var startPoint = element.parent().width();
if(scope.direction === 'right') {
startPoint = -startPoint;
}
TweenMax.fromTo(element, 0.5, { left: startPoint }, {left: 0, onComplete: done });
}
else {
done();
}
}
};
});
scotchApp.controller('aboutController', function($scope) {
$scope.message = 'Look! I am an about page.';
});
scotchApp.controller('contactController', function($scope) {
$scope.message = 'Contact us! JK. This is just a demo.';
});
home.html
<div ng-controller="homeController">
<div class="container slider">
<img ng-repeat="slide in slides" class="slide slide-animation nonDraggableImage" ng-swipe-right="nextSlide()" ng-swipe-left="prevSlide()" ng-hide="!isCurrentSlideIndex($index)" ng-src="{{slide.image}}">
<a class="arrow prev" href="#" ng-click="nextSlide()"></a>
<a class="arrow next" href="#" ng-click="prevSlide()"></a>
<nav class="nav">
<div class="wrapper">
<ul class="dots">
<li class="dot" ng-repeat="slide in slides">
{{slide.description}}
</li>
</ul>
</div>
</nav>
test
</div>
</div>
index.html
<!DOCTYPE html>
<!-- define angular app -->
<html ng-app="scotchApp">
<head>
<!-- SCROLLS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<!-- <link rel="stylesheet" href="styles/main.css" /> -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<!-- <link href="css/bootstrap.css" rel="stylesheet"> -->
<link rel="stylesheet" href="css/styles.css">
<!-- <script src="js/app.js"></script> -->
<!-- SPELLS -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular-touch.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.10.3/TweenMax.min.js"></script>
<!-- <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script> -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src="script.js"></script>
</head>
<!-- define angular controller -->
<body class="angular_class" ng-controller="mainController">
<nav class="navbar navbar-default">
<div class="container">
<div class="menu_1">
<div class="navbar-header">
<a class="navbar-brand" href="/"><img src="image/{{logo}}"></a>
</div>
<div class="f_right">
<p>Welcome, {{ username }}</p>
<img src="image/sml_logo.png">
</div>
</div>
<div class="menu_1">
<ul class="nav navbar-nav navbar-left">
<li ng-repeat="teams in teamArray">{{ teams.team_name }}</li>
</ul>
<div class="f_right">
<input type="text" class="searchbox" placeholder="Search"></input>
</div>
</div>
</div>
</nav>
<div id="main">
<!-- angular templating -->
<!-- this is where content will be injected -->
<div ng-view></div>
</div>
<footer class="text-center">
<div class="footer_block">
<span ng-repeat="ft in footer">{{ ft.title }}</span>
</div>
</footer>
</body>
</html>
And for information I follow this link
Could someone please help me out of this..
Thank you,

Change home.html
<div ng-controller="homeController">
<div class="container slider">
<img ng-repeat="slide in slides" class="slide slide-animation nonDraggableImage" ng-swipe-right="nextSlide()" ng-swipe-left="prevSlide()" ng-hide="!isCurrentSlideIndex($index)" ng-src="{{slide.image}}">
<a class="arrow prev" href="#" ng-click="nextSlide()"></a>
<a class="arrow next" href="#" ng-click="prevSlide()"></a>
<nav class="nav">
<div class="wrapper">
<ul class="dots">
<li class="dot" ng-repeat="slide in slides">
{{slide.description}}
</li>
</ul>
</div>
</nav>
test
</div>
with
<div class="container slider">
<img ng-repeat="slide in slides" class="slide slide-animation nonDraggableImage" ng-swipe-right="nextSlide()" ng-swipe-left="prevSlide()" ng-hide="!isCurrentSlideIndex($index)" ng-src="{{slide.image}}">
<a class="arrow prev" href="#" ng-click="nextSlide()"></a>
<a class="arrow next" href="#" ng-click="prevSlide()"></a>
<nav class="nav">
<div class="wrapper">
<ul class="dots">
<li class="dot" ng-repeat="slide in slides">
{{slide.description}}
</li>
</ul>
</div>
</nav>
test
</div>

Gulp tool to change pathing in index html dynamically without concat

So I have all working the way I want except mainly that once I run 'gulp copy', my index.html paths stay what they were. However, when running gulp copy, it runs several tasks and the spits the dest to '/dist/....'. This is a problem as my dev environment is different. Have been searching and searching and thought how I could implement something like gulp-inject, but not sure exactly the best way to do considering my file structures as shown below. Below I am including my gulp.js and my index.html. Hoping someone can help resolve this.
gulp.js:
var gulp = require('gulp');
var clean = require('gulp-clean');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var filter = require('gulp-filter');
var mainBowerFiles = require('main-bower-files');
var connect = require('gulp-connect');
var open = require('gulp-open');
// var imagemin = require('gulp-imagemin');
// var pngquant = require('imagemin-pngquant');
var bases = {
app: 'app/',
dist: 'dist/',
};
var paths = {
scripts: ['ppt/scripts/**/*.js'],
styles: ['ppt/styles/**/*.css'],
html: ['ppt/views/**/*.html'],
assets: ['ppt/assets/**/*.png', 'ppt/assets/**/*.svg'],
extras: ['index.html', '404.html', 'robots.txt', 'favicon.ico'],
};
gulp.task('connect', function () {
connect.server({
root: '.',
port: 9000,
// livereload: true,
open: {
browser: 'chrome'
}
});
});
gulp.task('open', function(){
gulp.src('./index.html')
.pipe(open());
});
gulp.task('bower', function() {
// mainBowerFiles is used as a src for the task,
// usually you pipe stuff through a task
return gulp.src(mainBowerFiles())
// Then pipe it to wanted directory, I use
// dist/lib but it could be anything really
.pipe(gulp.dest('dist/lib'))
});
// Delete the dist directory
gulp.task('clean', function() {
return gulp.src(bases.dist).pipe(clean());
});
// Process scripts and concatenate them into one output file
gulp.task('scripts', ['clean'], function() {
gulp.src(paths.scripts, {
cwd: bases.app
}).pipe(uglify()).pipe(concat('app.min.js')).pipe(gulp.dest(bases.dist + 'scripts/'));
});
// Imagemin images and ouput them in dist
// gulp.task('imagemin', ['clean'], function() {
// gulp.src(paths.images, {
// cwd: bases.app
// }).pipe(imagemin()).pipe(gulp.dest(bases.dist + 'assets/'));
// });
// Copy all other files to dist directly
gulp.task('copy', ['clean', 'scripts', 'bower'], function() {
// Copy html
gulp.src(paths.html, {
cwd: bases.app
}).pipe(gulp.dest(bases.dist + 'views'));
// Copy styles
gulp.src(paths.styles, {
cwd: bases.app
}).pipe(gulp.dest(bases.dist + 'styles'));
//Copy assets
gulp.src(paths.assets, {
cwd: bases.app
}).pipe(gulp.dest(bases.dist + 'assets'));
// Copy app scripts
// gulp.src(paths.scripts, {
// cwd: bases.app
// }).pipe(gulp.dest(bases.dist + 'scripts'));
// Copy extra html5bp files
gulp.src(paths.extras, {
cwd: bases.app
}).pipe(gulp.dest(bases.dist));
});
// Process scripts and concatenate them into one output file
gulp.task('scriptstrip', function() {
gulp.src(paths.scripts, {cwd: bases.app})
// .pipe(jshint())
// .pipe(jshint.reporter('default'))
.pipe(uglify())
.pipe(concat('app.min.js'))
.pipe(gulp.dest(bases.dist + 'scripts/'));
});
// A development task to run anytime a file changes
gulp.task('watch', function() {
gulp.watch('app/**/*', ['scripts', 'copy']);
});
// Define the default task as a sequence of the above tasks
gulp.task('default', ['clean', 'scripts', 'copy']);
And now, my index.html:
<!DOCTYPE html>
<html ng-app="fpsClientApp">
<head>
<meta name="keywords" content="flexible fsa hsa commuter health wellness medical dental benefits" />
<meta name="description" content="Navia Benefit Solutions" />
<meta content="IE=edge, chrome=1" http-equiv="X-UA-Compatible" />
<title>Navia Benefit Solutions</title>
<link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="../bower_components/angular-loading-bar/build/loading-bar.css" rel="stylesheet" />
<link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
<link href="../bower_components/kendo-ui/styles/kendo.bootstrap.min.css" rel="stylesheet" />
<link href="../bower_components/kendo-ui/styles/kendo.common-bootstrap.min.css" rel="stylesheet" />
<link href="../bower_components/kendo-ui/styles/kendo.common-material.min.css" rel="stylesheet" />
<link href="../bower_components/kendo-ui/styles/kendo.material.min.css" rel="stylesheet" />
<link href="ppt/styles/main.css" rel="stylesheet" />
<!-- fonts imported from Google fonts cdn -->
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic|Montserrat' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
</head>
<body>
<div class="navbar navbar-inverse" role="navigation" ng-controller="indexController">
<div class="container">
<div class="navbar-header">
<button class="btn btn-success navbar-toggle" ng-click="navbarExpanded = !navbarExpanded">
<span class="glyphicon glyphicon-chevron-down"></span>
</button>
<a class="navbar-brand" href="#/pptHome"><img style="height: 37px;" src="ppt/assets/navia.png"></a>
</div>
<div class="collapse navbar-collapse" collapse="!navbarExpanded">
<ul class="nav navbar-nav navbar-right">
<li ng-show="authentication.isAdmin">admin</li>
<li>products + services</li>
<li>about us</li>`
<li>testimonials</li>
<li>careers</li>
<li>news</li>
<li>blog</li>
<li>contact us</li>
<li ng-hide="!authentication.isAuth"><a id="signOut" href="" ng-click="logOut()">sign out <i class="fa fa-sign-out"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="navbar navbarSecondary navbar-inverse" role="navigation" ng-controller="indexController" ng-show="authentication.isAuth">
<div class="container">
<div ng-include="'ppt/views/menu.html'">
</div>
</div>
</div>
<div class="container-fluid">
<div ng-view="">
</div>
</div>
<div id="footer" role="navigation" ng-controller="indexController">
<div class="container">
<!-- <div class="navbar-header">
<a class="navbar-brand" href="#/pptHome"><img style="height: 37px;" src="ppt/assets/navia-icon.png" alt="Navia Logo"></a>
</div> -->
<div class="footerLinks">
<ul class="nav navbar-nav" style="padding-top: 5px;">
<img style="height: 37px; float: left; margin-top: 10px;" src="ppt/assets/navia-icon.png" alt="Navia Logo">
<li class="copyNavia">Navia © copyright 2016</li>
<li class="socialLinks"><img src="ppt/assets/Facebook.png"></li>
<li class="socialLinks"><img src="ppt/assets/Twitter.png"></li>
<li class="socialLinks"><img src="ppt/assets/YouTube.png"></li>
<li class="socialLinks"><img src="ppt/assets/LinkedIn.png"></li>
<li class="naviaLinks">Feedback</li>
<li id="naviaSeperator" class="naviaLinks">|</li>
<li class="naviaLinks">Help</li>
<li id="naviaSeperator" class="naviaLinks">|</li>
<li class="naviaLinks">Privacy Policy</li>
<li id="naviaSeperator" class="naviaLinks">|</li>
<li class="naviaLinks">Terms & Conditions</li>
</ul>
</div>
</div>
</div>
<!-- 3rd party libraries managed by Bower -->
<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="../bower_components/angular-bootstrap/ui-bootstrap.js"></script>
<script src="../bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="../bower_components/angular-animate/angular-animate.js"></script>
<script src="../bower_components/angular-aria/angular-aria.js"></script>
<script src="../bower_components/angular-cookies/angular-cookies.js"></script>
<script src="../bower_components/angular-loading-bar/build/loading-bar.js"></script>
<script src="../bower_components/angular-local-storage/dist/angular-local-storage.js"></script>
<script src="../bower_components/angular-resource/angular-resource.js"></script>
<script src="../bower_components/angular-route/angular-route.js"></script>
<script src="../bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="../bower_components/angular-touch/angular-touch.js"></script>
<script src="../bower_components/kendo-ui/js/kendo.all.min.js"></script>
<script src="../bower_components/kendo-ui/js/jszip.min.js"></script>
<script src="../bower_components/ng-file-upload-shim/ng-file-upload-shim.min.js"></script> <!-- for no html5 browsers support -->
<script src="../bower_components/ng-file-upload/ng-file-upload.min.js"></script>
<script src="../bower_components/checklist-model/checklist-model.js"></script>
<script src="../bower_components/angular-validation-match/dist/angular-validation-match.js"></script>
<!-- <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-route.min.js"></script>
<script src="bower_components/angular-local-storage/dist/angular-local-storage.min.js"></script>
<script src="bower_components/angular-loading-bar/build/loading-bar.min.js"></script> -->
<!-- Load app main script -->
<script src="ppt/scripts/app.js"></script>
<!-- Load services -->
<script src="ppt/scripts/services/authInterceptorService.js"></script>
<script src="ppt/scripts/services/authService.js"></script>
<script src="ppt/scripts/services/pptService.js"></script>
<script src="ppt/scripts/services/claimsService.js"></script>
<script src="ppt/scripts/services/swipesService.js"></script>
<script src="ppt/scripts/services/recurService.js"></script>
<script src="ppt/scripts/services/tokensManagerService.js"></script>
<script src="ppt/scripts/services/docsService.js"></script>
<script src="ppt/scripts/services/ordersService.js"></script>
<script src="ppt/scripts/services/errorService.js"></script>
<script src="ppt/scripts/services/utilsService.js"></script>
<script src="ppt/scripts/services/cardsService.js"></script>
<script src="ppt/scripts/services/mobileAppService.js"></script>
<script src="ppt/scripts/services/oeService.js"></script>
<script src="ppt/scripts/services/statementService.js"></script>
<script src="ppt/scripts/services/employeeService.js"></script>
<!-- Load controllers -->
<script src="ppt/scripts/controllers/indexController.js"></script>
<script src="ppt/scripts/controllers/infoController.js"></script>
<script src="ppt/scripts/controllers/homeController.js"></script>
<script src="ppt/scripts/controllers/pptController.js"></script>
<script src="ppt/scripts/controllers/pptProfileController.js"></script>
<script src="ppt/scripts/controllers/logreg/loginController.js"></script>
<script src="ppt/scripts/controllers/logreg/signupController.js"></script>
<script src="ppt/scripts/controllers/logreg/forgotController.js"></script>
<script src="ppt/scripts/controllers/logreg/pptERSuccessController.js"></script>
<script src="ppt/scripts/controllers/claims/swipeController.js"></script>
<script src="ppt/scripts/controllers/claims/claimsController.js"></script>
<script src="ppt/scripts/controllers/claims/claimReceiptController.js"></script>
<script src="ppt/scripts/controllers/claims/recurController.js"></script>
<script src="ppt/scripts/controllers/docs/docsController.js"></script>
<script src="ppt/scripts/controllers/orders/ordersController.js"></script>
<script src="ppt/scripts/controllers/orders/orderController.js"></script>
<script src="ppt/scripts/controllers/oe/onlineEnrollmentController.js"></script>
<script src="ppt/scripts/controllers/refreshController.js"></script>
<script src="ppt/scripts/controllers/tokensManagerController.js"></script>
<script src="ppt/scripts/controllers/associateController.js"></script>
<script src="ppt/scripts/controllers/cards/cardsController.js"></script>
<script src="ppt/scripts/controllers/mobileapp/mobileAppController.js"></script>
<script src="ppt/scripts/controllers/statementController.js"></script>
<script src="ppt/scripts/controllers/employee/employeeController.js"></script>
<script src="ppt/scripts/controllers/admin/adminController.js"></script>
<script src="ppt/scripts/controllers/logreg/ssoController.js"></script>
<!-- Load custom filters -->
<!-- Load custom directives -->
</body>
</html>
Really appreciate the help as I have been racking my brain most of the night on this.

I highly recommend wiredep. It automatically handles all of your bower dependencies for you, as well as the order of the dependencies. Here is sample wiredep task:
var wiredep = require('wiredep').stream;
gulp.task('wiredep', function () {
/// <summary>
/// Wires bower dependencies by inserting the css and js files used by the app.
/// The <!--bower:css--> and <!--bower:js--> tags followed by <!--endbower -->
/// indicating the insertion points.
/// </summary>
return gulp
.src("** Your index.html file path ***")
.pipe(wiredep("** Your bower folder path **"))
.pipe(gulp.dest("** Where you want your new index.html ***")); // it could be the same path
});
Notice that there is no concatenation.
Also, I recommend using gulp-load-plugins. It will make your life sooo... much easier.

Develop Reference

JavaScript is the programming language of the Web.

Connect javascript file with django in static file - javascript

Related

User Frontend Selection That Loads Images From Database With Django

Uncaught Syntax Error: Unexpected identifier game.js:25

HTML showing on live server, but not rendering on my flask app. Only the index is showing on flask

image slider doesn't work using route in angular js

Gulp tool to change pathing in index html dynamically without concat

Categories

Resources