How to load RubyMotion table view cell data from file - rubymotion

I'm getting started with RubyMotion and ProMotion. I'm building a table view and I would like to move the data out into an external file to make it easier to manage. Here's what I have so far:
class MasterScreen < PM::TableScreen
title 'States'
def table_data
[{
title: "Northwest States",
cells: [
{ title: "Oregon", action: :view_details, arguments: { state: #oregon }},
{ title: "Washington", action: :view_details, arguments: { state: #washington }}
]
}]
end
def view_details
open DetailScreen.new(nav_bar: true)
end
end
I'd like to move the names of the states (basically the cell titles) into something like a YAML or JSON file that I can load and iterate over. How can I achieve something like this?
Update: I managed to figure out how to load text from a file.
First I added bubble-wrap to my Gemfile and ran bundle install. BubbleWrap provides the helper method App.resources_path.
In my_app/resources/states.txt I have a list of states, separated by new lines:
Oregon
Washington
Foobar
In my Table View Controller, I read the file and split the file into an array of lines.
class MasterScreen < PM::TableScreen
title 'States'
def on_load
data = File.read("#{App.resources_path}/states.txt")
#states = data.lines
end
def table_data
[{
title: "Northwest States",
cells: #states.map do |state|
{
title: state,
action: :view_details,
arguments: { state: state }
}
end
}]
end
def view_details(arguments)
open DetailScreen.new(nav_bar: true, title: arguments[:state])
end
end
This works, but it's only part of what I was trying to do. I would still like to use a structure like YAML to represent titles and subtitles. What would be the RubyMotion way to do this sort of thing?

Figured out how to do it. I came across a RubyMotion gem called motion-yaml. Simply add it to your Gemfile, add your YAML file to your resources directory, and use it like you would YAML in Ruby.
data = YAML.load(File.read("#{App.resources_path}/my_yaml_file.yml"))
Note: You will need to add bubble-wrap to your Gemfile in order to have the App.resources_path. I'm not sure if there is an easy way to do it without bubble-wrap.

Related

Plop.js Template files adding a root directory in the destination folder

I'm running into an issue unsure if it's me.
I'm using Plop.js within a project to quickly code generate boilerplate (bp) for new packages.
I've got 4 different template folders that plop maps from when a user enters the generate command.
User is prompted with a list of package types to create:
choices: ['react', 'node', 'browser', 'isomorphic'],
Based on the users response to the prompts, plop chooses the folder to pull the template files from.
Template folder structure looks like this:
plop-template/
- react/
- node/
- browser/
- isomorphic/
The templateFiles: property is correctly identifying and creating the bp based on the user response.
templateFiles: 'plop_templates/{{project-type}}/**/*/',
the issue i'm running into is the project-type is being added to the file destination path
So what i would like to occur is the
/project-name/ ... boiler plate created
But what is happening is:
/project-name/project-type/ ... boiler plate created
So, is it possible to remove the /project-type/ from the destination path?
Plopfile.js (v. "plop": "3.1.1"):
const findEtensionFile = require("../lib/file-extention-locator");
module.exports = function (plop) {
plop.getDestBasePath;
plop.setGenerator("component", {
prompts: [
{
type: "input",
name: "project-name",
message: "What's the name your project? ",
},
{
type: "list",
name: "project-type",
message: "Project Type:",
choices: ["react", "node", "browser", "isomorphic"],
},
],
actions: function (data) {
var actions = [];
actions.push({
type: "addMany",
globOptions: { dot: true },
destination: "../../../{{project-name}}",
base: "/",
templateFiles: "plop_templates/{{project-type}}/**/*/",
});
return actions;
},
});
};
What I've tried:
filter: property ... This can be used to modify the file contents, seems like that only affects the
base: property (string).. documentation seems to indicate this is the route where I can filter out but can't find a value that doesn't break BP creation.
Any help would be greatly appreciated.
Discovered the error was mine.
Seems like the base: value must match the entire value for templateFiles.
In this case:
base: 'plop_templates/{{project-type}}',
templateFiles: "plop_templates/{{project-type}}/**/*/",
Even though the /plop_templates/ folder wasn't being created in the path.

How to match AmChart GeoJson data using string

I'm trying to plot some counts per State county using AmCharts and their GeoJson file. For example, loading FL counties and adding the counts. However, it seems I need to know the ID of the county, and not just the name. Is there a way to match the GeoJson using the county name?
I tried the simple idea of accessing the properties "name" in the GeoJson data and adding the count in polygonSeries.data but that doesn't work. It only works when providing the id.
When adding data, AmCharts allows something like this
polygonSeries.data =[
{ id: "12133", value: 60.524 }, // Washington
{ id: "12131", value: 300 }, // Walton
{ id: "12129", value: 500 }, // Wakulla
];
The above works. The below doesn't
polygonSeries.data = [
{ name: "Washington", value: 60.524 }, // Washington
{ name: "Walton", value: 300 }, // Walton
{ name: "Wakulla", value: 500 }, // Wakulla
];
The GeoJson data contains the relevant information like this
properties:{name:"Washington",id:"12133",STATE:"FL",TYPE:"County",CNTRY:"USA"},id:"12133"}
It apparently is matching the properties.id to find the object and that's why it works with the ids. However, that means I would need to know the ID for every county to begin with.
So is there a way to match using the county name instead?
I would expect AmCharts to match the relevant properties and not just the ID since those are relatively unknown to people.
After speaking to amChart support, it's not possible to do this.

SpreadJS FromJson Chart load

I'm using SpreadJS v12 as a reporting tool. User will enter the page get the wanted data, create charts and save it for later use.
When user saves the report I get Json data (GC.Spread.Sheets.Workbook.toJSon) and save this Json to database and whenever someone tries to reach the same report, I get the Json from database and give it to the page (GC.Spread.Sheets.Workbook.fromJSon). Everything works fine except if there is a chart on page the data source for chart series (xValues and yValues) change. When I check Json format it looks like this: Sheet2!$B$2:$B$25 but in chart it's: Sheet2!$A$1:$A$24 . Am I doing something wrong?
By the way my serialize options: { ignoreFormula: false, ignoreStyle: false, rowHeadersAsFrozenColumns: true, columnHeadersAsFrozenRows: true, doNotRecalculateAfterLoad: false }
this.state.spread = new GC.Spread.Sheets.Workbook(document.getElementById("spreadSheetContent"), { sheetCount: 1 });
This is my save method:
var pageJson = this.state.spread.toJSON(this.serializationOption);
let self = this;
let model = {
Id: "",
Name: reportName,
Query: query,
PageJson: JSON.stringify(pageJson)
}
this.post( { model }, "Query/SaveReportTemplate")
.done(function(reply){
self.createSpreadSheet(reply);
}).fail(function(reply){
self.PopUp(reply, 4 );
});
And this is my load method:
var jsonOptions = {
ignoreFormula: false,
ignoreStyle: false,
frozenColumnsAsRowHeaders: true,
frozenRowsAsColumnHeaders: true,
doNotRecalculateAfterLoad: false
}
this.state.spread.fromJSON(JSON.parse(template.PageJson),jsonOptions);
this.state.spread.repaint();
Well after a long day, I think I've found what's causing the problem and started working around that.
Let's say we have two sheets. Sheet1's index is 0 and Sheet2's index is 1.
Because of the json serialization options like frozenColumnsAsRowHeaders and frozenRowsAsColumnHeaders until Sheet2 is painted row numbers and column number are different in the json.
If there is a formula or a chart in Sheet1 that's referencing Sheet2, their references will point to a different cell from what you set first. So always referencing the sheets that will be painted before is the way to solve this problem.

EmberJS - Adding an item to the store does not update view

I have a one to many relationship in the model of the application to relevantUsers. Now I want to iterate via the {{#each}} helper over those values. Which works.
content: function()
{
return this.get('controllers.application.model.relevantUsers');
}.property('controllers.application.model.relevantUsers'),
And when removing an item from the relevantUsers the view updates. But when adding a new relevantUser nothing happens. The user gets added to the data store, but the view does not update. Am I missing something?
This is how I create a new user
// Create new user
var relevantUser = this.store.createRecord('relevantUser', relevantUserData);
// And push it to remote
relevantUser.save();
In my application, I've done it like [CoffeeScript] :
video = self.store.createRecord 'video', id: #Id, title: #Title, thumbnailUrl: #ThumbnailUrl
#Formats.map (i) -> //Formats is simple JavaScript array.
format = self.store.createRecord 'format', itag: i.itag, quality: i.quality, resolution: i.resolution, type: i.type, url: i.url
video.get('formats').then (f) ->
f.pushObject format
The difference, is, that I use .pushObject() method here. As #fanta wrote in his comment, you have to get array that has relationship with model, so it will notify all observers.
More example code.

How to Populate koGrid Groups Array

I have a koGrid configured as follows:
var myItemsGrid = {
data: myItems,
columnDefs: [
{ field: 'item.title', displayName: 'Title', cellTemplate: $("#cdfUrlCellTemplate").html() },
{ field: 'item.dueTimeUtc', displayName: 'Due', cellFormatter: formatDate, sortFn: sortDates },
{ field: 'id', displayName: 'Edit', cellTemplate: $("#editCellTemplate").html() }
],
showGroupPanel: true,
groups: ['item.title'],
showFilter: false,
canSelectRows: false
};
My problem is that the groups array, which I have tried to populate using the field name of one of the fields in my grid, causes the following error:
TypeError: Cannot read property 'isAggCol' of undefined
How should I be populating the groups array so that I can set up initial grouping for my grid?
I had the same problem and took a different approach by sending an event to the grid control to group by the first heading. Something like this:
jQuery("#symbolPickerView").find(".kgGroupIcon").first().click();
This works until there is some sort of patch generally available.
I ended up having to patch the koGrid script to get the initial grouping of columns to work.
If anyone else has the problem I'm happy to provide the patched script. I will look at making a pull request to get the fix into the koGrid repository after putting it through its paces a bit more.