rpdata/frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

the last few things.

Browse Source
This commit is contained in:
gisle
2020-08-09 16:12:12 +02:00
parent 5fe56eaae8
commit 6aef0412e8
13 changed files with 106 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files
marko/page/data/components/changes-page/component.js
+17 -1
View File
@@ -1,11 +1,27 @@
const { changesApi } = require("../../../../../rpdata/api/Change")
module.exports = class {
onCreate(input) {
this.state = {
characters: input.characters,
changes: input.changes,
shownAll: false,
modal: null,
}
}
clearLimit(e) {
// Disable mobile URL fallback.
if (e && e.preventDefault) {
e.preventDefault()
}
changesApi.list({limit: 0}).then(changes => {
this.state.changes = changes
this.state.shownAll = true
})
}
open(modal) {
this.state.modal = modal
}
marko/page/data/components/changes-page/index.marko
+3 -1
View File
@@ -3,10 +3,12 @@
<div class="changes-page">
<h1 class="color-primary">Changes</h1>
<p>All changes to <em>listed</em> resources is stored for 90 days for transparency reasons. The current state of an object after each change exists, but is only available through the GraphQL API at this time.</p>
<for (change in input.changes)>
<for (change in state.changes)>
<change data=change />
</for>
<a if(!state.shownAll) href="/data/changes?limit=0" class="show-more-button" on-click("clearLimit")>Show All</a>
</div>
</main>
<add-character-modal enabled=(state.modal === "character.add") user=input.user on-added("characterAdded") on-close("close") />
<add-channel-modal enabled=(state.modal === "channel.add") user=input.user on-close("close") />
<add-file-modal enabled=(state.modal === "file.add") user=input.user on-close("close") />
marko/page/data/components/changes-page/style.less
+17
View File
@@ -33,4 +33,21 @@
opacity: 1;
}
}
.show-more-button {
margin: 1em 0;
padding: 0.5em 2em;
font-size: 2em;
text-align: center;
user-select: none;
display: block;
color: #DA1;
}
.show-more-button:hover {
cursor: pointer;
text-decoration: underline;
}
}
marko/page/logs-content/components/log-suggestions/component.js
-86
View File
@@ -1,96 +1,10 @@
const {logHeaderApi} = require("../../../../../rpdata/api/LogHeader")
module.exports = class {
onCreate(input) {
this.state = {
id: input.log.id,
channelName: input.log.channelName,
eventName: input.log.eventName,
nexts: [],
prevs: [],
loaded: false,
error: null,
}
}
onMount() {
this.timeout = setTimeout(() => {
logHeaderApi.list().then(logs => {
const index = logs.findIndex(l => l.id === this.state.id);
if (index === -1) {
return Promise.reject("This log not found in list.")
}
const log = logs[index]
const characterIds = log.characters.map(c => c.id);
const nexts = []
const prevs = []
let foundGroups = {}
let foundChannel = false
for (let i = index - 1; i >= 0; --i) {
const log2 = logs[i]
const hasEvent = (log.eventName ? log.eventName === log2.eventName : false)
const hasChannel = (log.channelName === log2.channelName)
const characters = log2.findCharacters(...characterIds)
const characterIdsKey = characters.map(c => c.id).sort().join(",")
const suggestion = {log: log2, characters, hasEvent, hasChannel}
if (hasChannel && !foundChannel) {
foundChannel = true
foundGroups[characterIdsKey] = true
nexts.push(suggestion)
} else if (hasEvent) {
foundGroups[characterIdsKey] = true
nexts.push(suggestion)
} else if (nexts.length < 8 && !hasEvent && characters.length > 1 && !foundGroups[characterIdsKey]) {
foundGroups[characterIdsKey] = true
nexts.push(suggestion)
}
}
foundGroups = {}
foundChannel = false
for (let i = index + 1; i < logs.length; ++i) {
const log2 = logs[i]
const hasEvent = (log.eventName ? log.eventName === log2.eventName : false)
const hasChannel = (log.channelName === log2.channelName)
const characters = log2.findCharacters(...characterIds)
const characterIdsKey = characters.map(c => c.id).sort().join(",")
const suggestion = {log: log2, characters, hasEvent, hasChannel}
if (hasChannel && !foundChannel) {
foundChannel = true
foundGroups[characterIdsKey] = true
prevs.push(suggestion)
} else if (hasEvent) {
foundGroups[characterIdsKey] = true
prevs.push(suggestion)
} else if (prevs.length < 8 && !hasEvent && characters.length > 1 && !foundGroups[characterIdsKey]) {
foundGroups[characterIdsKey] = true
prevs.push(suggestion)
}
}
this.state.nexts = nexts;
this.state.prevs = prevs;
this.state.loaded = true;
}).catch(err => {
console.warn("Suggestions load error:", err)
this.suggestionsError = "Failed to load suggestions: " + err.toString()
})
}, 1000)
}
onUnmount() {
clearTimeout(this.timeout)
}
}
marko/page/logs-content/components/log-suggestions/index.marko
+24 -32
View File
@@ -1,41 +1,33 @@
import moment from "moment"
<div class="log-suggestions">
<if (state.loaded && state.error == null)>
<if (state.nexts.length > 0 || state.prevs.length > 0)>
<if (state.nexts.length > 0)>
<h2 class="color-primary">Next Logs</h2>
<div for(s in state.nexts) class="suggestion color-primary">
<div class="suggestion-header color-primary"><a href=`/logs/${s.log.id}`>${s.log.name || `${s.log.channelName} - ${moment(s.log.date).format("MMMM D, YYYY")}`}</a></div>
<div for(paragraph in (s.log.description||"").split("\n").filter(p => p)) class="suggestion-description color-text">${paragraph}</div>
<div class="suggestion-tags">
<div if(s.hasEvent) class="suggestion-tag color-tag-event">${s.log.eventName}</div>
<div if(s.hasChannel) class="suggestion-tag color-tag-location">${s.log.channelName}</div>
<div for(c in s.characters) class="suggestion-tag color-tag-character">${c.name}</div>
</div>
<div class="log-suggestions">
<if (input.log.nextLogs.length > 0 || input.log.prevLogs.length > 0)>
<if (input.log.nextLogs.length > 0)>
<h2 class="color-primary">Next Logs</h2>
<div for(s in input.log.nextLogs) class="suggestion color-primary">
<div class="suggestion-header color-primary"><a href=`/logs/${s.log.id}`>${s.log.title || `${s.log.channelName} - ${moment(s.log.date).format("MMMM D, YYYY")}`}</a></div>
<div for(paragraph in (s.log.description||"").split("\n").filter(p => p)) class="suggestion-description color-text">${paragraph}</div>
<div class="suggestion-tags">
<div if(s.hasEvent) class="suggestion-tag color-tag-event">${input.log.eventName}</div>
<div if(s.hasChannel) class="suggestion-tag color-tag-location">${s.log.channelName}</div>
<div for(c in s.characters) class="suggestion-tag color-tag-character">${c.name}</div>
</div>
</if>
<if (state.prevs.length > 0)>
<h2 class="color-primary">Previous Logs</h2>
<div for(s in state.prevs) class="suggestion color-primary">
<div class="suggestion-header color-primary"><a href=`/logs/${s.log.id}`>${s.log.name || `${s.log.channelName} - ${moment(s.log.date).format("MMMM D, YYYY")}`}</a></div>
<div for(paragraph in (s.log.description||"").split("\n").filter(p => p)) class="suggestion-description color-text">${paragraph}</div>
<div class="suggestion-tags">
<div if(s.hasEvent) class="suggestion-tag color-tag-event">${s.log.eventName}</div>
<div if(s.hasChannel) class="suggestion-tag color-tag-location">${s.log.channelName}</div>
<div for(c in s.characters) class="suggestion-tag color-tag-character">${c.name}</div>
</div>
</div>
</if>
<if (input.log.prevLogs.length > 0)>
<h2 class="color-primary">Previous Logs</h2>
<div for(s in input.log.prevLogs) class="suggestion color-primary">
<div class="suggestion-header color-primary"><a href=`/logs/${s.log.id}`>${s.log.title || `${s.log.channelName} - ${moment(s.log.date).format("MMMM D, YYYY")}`}</a></div>
<div for(paragraph in (s.log.description||"").split("\n").filter(p => p)) class="suggestion-description color-text">${paragraph}</div>
<div class="suggestion-tags">
<div if(s.hasEvent) class="suggestion-tag color-tag-event">${input.log.eventName}</div>
<div if(s.hasChannel) class="suggestion-tag color-tag-location">${s.log.channelName}</div>
<div for(c in s.characters) class="suggestion-tag color-tag-character">${c.name}</div>
</div>
</if>
</div>
</if>
<else>
<div class="empty color-menu">(No suggestions)</div>
</else>
</if>
<else-if(state.error != null)>
<div class="error color-danger">{state.error}</div>
</else-if>
<else>
<div class="loading color-menu">Loading suggestions...</div>
<div class="empty color-menu">(No suggestions)</div>
</else>
</div>
marko/page/logs/components/page/component.js
+6 -1
View File
@@ -79,9 +79,14 @@ module.exports = class {
}
}
clearLimit() {
clearLimit(e) {
this.state.filter = Object.assign({}, this.state.filter, {limit: 0})
// Disable mobile URL fallback.
if (e && e.preventDefault) {
e.preventDefault()
}
this.refresh()
this.updateQuery(this.state.filter)
}
marko/page/logs/components/page/index.marko
+2 -2
View File
@@ -4,9 +4,9 @@
<main class="logs-page with-right">
<logs-table logs=state.logs on-addfilter("addFilter") />
<if(state.filter.limit > 0)>
<div class="show-more-button" on-click("clearLimit")>
<a href="/logs?limit=0" class="show-more-button" on-click("clearLimit")>
<span>Show All</span>
</div>
</a>
</if>
</main>
<add-log-modal enabled=(state.modal === "log.add") on-close("close") />
marko/page/logs/components/page/style.less
+3 -2
View File
@@ -1,15 +1,16 @@
main.logs-page {
div.show-more-button {
.show-more-button {
margin: 1em 0;
padding: 0.5em 2em;
font-size: 2em;
text-align: center;
user-select: none;
display: block;
color: #DA1;
}
div.show-more-button:hover {
.show-more-button:hover {
cursor: pointer;
text-decoration: underline;
middleware/passport.js
+2 -1
View File
@@ -7,7 +7,8 @@ const strategy = new Auth0Strategy({
domain: config.auth0.domain,
clientID: config.auth0.clientId,
clientSecret: config.auth0.secret, // Replace this with the client secret for your app
callbackURL: config.root + "/auth/callback"
callbackURL: config.root + "/auth/callback",
state: true,
}, (accessToken, refreshToken, extraParams, profile, done) => {
// accessToken is the token to call Auth0 API (not needed in the most cases)
// extraParams.id_token has the JSON Web Token
middleware/session.js
+1 -1
View File
@@ -6,7 +6,7 @@ module.exports = session({
secret: config.session.secret,
store: new RedisStore(config.redis),
cookie: {
secure: config.session.secure
secure: config.session.secure,
},
resave: false,
saveUninitialized: true,
routes/auth.js
+9 -5
View File
@@ -17,12 +17,16 @@ router.get("/login", saveReferer, passport.authenticate("auth0", {scope: "openid
res.redirect("/")
})
router.get("/callback", passport.authenticate("auth0"), (req, res) => {
if (req.user == null) {
throw new Error("user null");
}
router.get("/callback", function (req, res, next) {
passport.authenticate("auth0", function (err, user, info) {
if (err) { return next(err) }
if (!user) { console.log(err, user, info); return res.redirect("/auth/login") }
req.logIn(user, function (err) {
if (err) { return next(err) }
res.redirect(req.session.loginReferrer || "/");
res.redirect(req.session.loginReferrer || "/");
})
})(req, res, next);
})
router.get("/user", (req, res) => {
routes/data/changes.js
+3 -1
View File
@@ -6,8 +6,10 @@ const {changesApi} = require("../../rpdata/api/Change")
const changesTemplate = require("../../marko/page/data/changes.marko")
router.get("/", async(req, res) => {
const limit = parseInt(req.query.limit) || 100
res.markoAsync(changesTemplate, {
changes: changesApi.list({limit: 1000}),
changes: changesApi.list({limit}),
selected: {changes: true},
})
})
rpdata/api/Log.js
+19 -3
View File
@@ -31,7 +31,11 @@ class Log {
}
static fromData(data) {
return new Log(data.id, data.shortId, data.date, data.title, data.eventName, data.description, data.open, data.channel, data.characters, data.posts)
return new Log(
data.id, data.shortId, data.date,
data.title, data.eventName, data.description,
data.open, data.channel, data.characters, data.posts
)
}
}
@@ -70,10 +74,22 @@ class LogAPI {
nick
text
}
nextLogs {
log {id title date channelName}
hasEvent
hasChannel
characters {name}
}
prevLogs {
log {id title date channelName}
hasEvent
hasChannel
characters {name}
}
}
}
`, {id}).then(({log}) => {
return Log.fromData(log)
return log
})
}
@@ -219,7 +235,7 @@ class LogAPI {
subscribeChanges(logId) {
return new Subscription(`
subscription Changes($keys: [ChangeKeyInput!]!) {
changes(keys: $keys) {
changes(filter: {keys: $keys}) {
id
model
op